スマートフォンサイト制作メモ

スマートフォンサイト、ブラウザチェック環境

・SDK android(エミュレータ)
・Android SDK の高速化方法

・Google Chromeの標準機能でユーザーエージェント切り替え

参考サイト

「1分で使える！Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備」

ROOM9

「スマホでLightboxのようなモーダルウィンドウを再現、動画やhtmlも読み込み可：Boxer」

・iOS7になって変わったブラウザ表示サイズ、スマホサイトファーストビューなど。

iOSとAndroidのフォント指定について

iOSはヒラギノ角ゴかヒラギノ明朝W3,W6
Androidは以下
・4.0以降　日本語フォントはモトヤフォントの「MTLc3m.ttf - モトヤLシーダ3等幅」「MTLmr3m.ttf - モトヤLマルベリ3等幅」の2つでボールドののフォントが無い。
英語フォントは「Roboto」

・3.X以前
「Droid Sans」

<参考サイト>
・Web Tips
「スマートフォンを考慮したフォント指定の検討」

・たき備忘録
「Android 4.0で採用された｢モトヤフォント｣とは？」




<参考サイト>
・All about 「Androidスマートフォンエミュレータの使い方」
http://allabout.co.jp/gm/gc/381225/

・「スマートフォン向けサイト作成にあたっての基本概要」
http://www.u-ziq.com/blog/2011/01/post_61.html


・スマートフォンサイトをデザインする上で知っておくべき10のTIPS
http://blog.webcreativepark.net/2011/06/16-103025.html

スマートフォンサイト スライドショーまとめ(iPhone,Android)

01.FlexSlider 2

・フリック対応
・横スライド
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：FlexSlider 2



02.Nivo Slider（をレスポンシブにしたものby LIG）

・フリック非対応
・色々なスライド方法あり
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：スマホサイトに入れると使いやすくなる！おすすめjQuery4選！｜LIG



03.Swipeshow

普通の縦横固定のスライドショー
・フリック対応
・横スライド
・iPhone,Android多分可
参考URL：Swipeshow

マウススクロールでアニメーションするJSまとめ。

０１.スクロールに応じて画を切替えるJS
(画像が切り替えで動くアニメーションを動かす事ができる)

スクロールに応じて動くアニメーションをつくる方法

０２.jQueryで横スクロールのアニメーションするサイトを作る方法
マウスホイールにも対応。ページの先頭ピッタリに（左に寄せて）移動してくれる。
※スマホ、タブレットのタッチデバイスに対応はしていないので何か考える必要あり。

０３.パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
skrollr.jsというタッチデバイスにも対応しスクロールアニメーションできるJSライブラリがあるのだが、こちらのほうが軽量でPCブラウザならIE7も対応しているのでメモ。

DEMO