社長BLOG

スマートフォンUI：Bootstrap

2011-12-11 (日)
社長BLOG
　手嶋守

スマートフォンUIのHTMLとCSSを作っている。

なるべく楽をしたいなと思い、Bootstrapを利用することにした。

なんでBootstrap？

フレームワークではなく、一部ずつライブラリ的に利用できるので、少しずつ試すのに向いていた。
対してjQueryMobileはフレームワークであり、ちょこっと使うのには難儀した。踏み込んでトラブルが起きたらもどってこられなさそうなイメージがあった。

現在Bootstrapは調査目的で採用しているところだ。
※いまのところ非常にうまくいっている。

スマートフォン用グリッド

Bootstrapには標準でグリッドレイアウト用のツールキットが備わっている。

◆Bootstrapのグリッドシステム

ただし940ピクセルを基本単位に作られているので、スマートフォンには向かない。

これをスマートフォンの既定横幅である320ピクセルに合うように改造する。
BootstrapはLESSを使って設定値を変えて再コンパイルできるようになっている。便利だ。

いろいろ値は試してみたが、
・12分割
・１ブロックサイズを23ピクセル
・スペーサーを4ピクセル

とするとぴったり320ピクセルになることがわかった。
エクセルでいろいろシミュレーションして、最適なグリッドのサイズを決定した。
※中学校受験の植木算という奴だね

◆エクセルで最適なグリッドピクセルサイズを決定

こうしてできたグリッドを元に作ったHTMLサンプルがこれ。

◆スマートフォングリッドサンプル

◆フレンドリスト

viewport設定

スマートフォン用OpenPNEの横幅は320ピクセルとした。iPhone3G(S)のサイズ。
それよりも大きなAndroidやiPhone4などからのアクセスは、viewportを指定し、あらかじめ拡大表示で使うようにする。

◆viewport設定

ローテーション対応も、特別なリキッドレイアウト対応はせず、ブラウザの機能でそのまま拡大表示をする方式に。

iPadはお年寄り向け

デバイスごとに専用のUIをつくるのは大変だし、iPadでわざわざクロウトがOpenPNEやるとも思えない。
UIは全く変えずにどんどん拡大していき、文字やボタンが大きくなる分お年寄りが使いやすい。
という戦略にした。

・iPhoneタテ表示　＝＞　幅320ピクセル：標準クロウト向け
・iPhoneヨコ表示　＝＞　幅480ピクセル：標準でボタンが押しにくい人向け
・iPadタテ表示　＝＞　幅768ピクセル：お年寄り向け
・iPadヨコ表示　＝＞　幅1024ピクセル：お年寄り向け、最大表示
※Androidやその他のタブレットも同じ

◆iPadヨコで最大表示

作ったbootstrap.css

今日のコミットはこれ。
Github

できあがったスマートフォン用bootstrap.cssはこれ。

課題メモリスト

取り組んでいる間に思いついた課題やメモ。

・フレンドリストはグリッドで表示したほうが圧倒的に柔軟性が高く見通しがいい。さらにこのグリッドはサーバサイドではなく、クライアントJSでレンダリングしよう。革命的に楽になる。
・320ピクセル用に画像を作成すると、iPhone4SやiPadでは画像がにじんで見えるので見た目が悪い。画像だけは高解像度で作ってviewport指定をした場合、きれいに表示されるだろうか？
・アイコン画像は手嶋が暫定で作成した。誰か素敵なの作ってくれないかな？
・