デザイン学習日記

0001

Header, Footer, Contentsのチャットを作り時に出会った問題

• contentのmax-height: 500pxにしてoverflowをscrollにしたら、モバイルではScrollが動かない...
• Solution: JSでeventListenerを実装して、作り直す

// with mobile just add listener to 'touchmove' and also
// think about using 'touchstart'

document.getElement.addEventListener('mousewheel', function(e){
    var event = e.originalEvent,
    d = event.wheelDelta || -event.detail;
    // this.scrollTop += -d / 10;
    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
})
    

モバイルのブラウザーでキーボード操作

• disable keyboard show up

<input readonly='true'></input>

• Number input only

<input pattern='\d*'>

先頭文字の操作

• ::first-letterのようなプロパティが存在する
• 綺麗に作ってくれた、サンプルDrop Caps

0002

mediaの使用

@media screen and ( condition ){}

e.g
@media screen and (min-width: 992px){}
widthが992より大きい時に適用できるルール
max-width: 992pxだと逆

PDF.js

使用理由

• モバイルでもPDFを読み込み、読むことが可能になる、ページ遷移、redirectionなし

問題点

• ピンチアウトとかで、メモリが足りなくなって落ちる

Canvas使う場合

• chromeではzoom inできない原因不明、safariだとOK

JS vs CSS

• 動的に変換するのはCSSの方が強い mediaで制御する
• JSで生成されたルールが後でCSSで変更できないこともある

0003

JSの中でHTMLをかく

var html = '<div />'

マルチライン

var html = ' <div class... \
        .....  \
        .....  \
        </div> \
    ' 

Buttonでonclickにeventをbindする

<button onclick = 'func(event)' />

0004

SEO対策

Canonicalタグ

• 同じコンテンツのページが複数存在すると重要度が分散する

<domain>.com
<domain>.com/index.*
www.<domain>.com
www.<domain>.com/index.*
# どれが重要かわからなくなるためまとめるのがcanonicalタグ

<link rel="canonical" href="http://○○○○○.com/"/>
を加える

# 　httpsは.htaccessでなんとかする

UI設計

使いやすそうなライブラリ、プラットフォーム

• Semantic UI
• Slide out

0004

タイプ effect

Typewriter Effect

入力待ちDots

<p class="is-inputting">Saving<span>.</span><span>.</span><span>.</span></p>

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}
.is-inputting{
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
  margin: 0px;
}
.is-inputting span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.is-inputting span:nth-child(2) {
  animation-delay: .2s;
}

.is-inputting span:nth-child(3) {
  animation-delay: .4s;
}

Pure CSS saving/loading dots animation

0005

アイコンのロードパフォーマンス向上

• CSS Sprite
  // 簡単に説明すると、一つの画像に使うイメージを全て集約してpositionを変えながら使う

.class{
    background-url: url();
    background-repeat: no-repeat;
    background-size: 200%; //resize image to value if 800 * 800 -> 1600 * 1600
    background-position: 0px 0px;
}

0006

アニメーション編

• 実現手法
• パフォーマンス
• CreateJS

0007

Scrollによる、アニメーション

• site point

0008

vw, vh, vmin, vmax

viewportに対して、
widthを基準に100vw -> 100%　変換率
heightを基準に100vh -> 100%　変換率

from Developer.IO