スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法

CSSフレームワークをいろいろ試してみた。（Twitter Bootstrap、Yahoo Pureなど）
レスポンシブデザインのWebサイトが、簡単に作れることが分かった。

今は、インターネット端末で、スマホが主流になってきているそうだ。
スマートフォンユーザーの特徴(従来型携帯電話ユーザーとの比較) - 総務省｜平成24年版 情報通信白書
D2C、マルチデバイス利用動向調査を発表…スマホ利用者比率は43.3％に上昇、LINE利用者が大幅増 | Social Game Info
D2Cマルチデバイス利用動向調査（2013年5月実施） - SlideShare


●レスポンシブデザイン
スマートフォンをメインターゲットにしたWebサービスやWebアプリを作成する場合、開発途上で、レスポンシブデザインの表示やタッチ操作を確認するテストツールが欲しい。

検索したら、いろいろな方法・テストスイーツが紹介されていた。
ブラウザ テスト スマートフォン - Google検索

テストできれば何でもいいけど、理想は一つのツールで全部まかなえること。


●iPhoneの表示テスト
・iPhoneのテストは、Apple Safariを使う。

Windows 用 Safari 5.1.7 - support.apple.com
http://support.apple.com/kb/DL1531?viewlocale=ja_JP



スマートフォンのテストにSafariブラウザを使う｜シラサヤ備忘館

今回はsmartphoneのエミュレート機能がついているブラウザを紹介したいと思う。
# 正確にはスマホの中のiPhoneとなるわけだが

ブラウザの名はSafari。はいiPhoneと同じアップル製。

本来SafariはMac用だがWindows用のものも出ているのでこれを使ってsmartphone向けの開発を行う。

メニューバーより「編集」->「設定」をクリックすると、
詳細というウィンドウがポップアップされるので「詳細」タブをクリックし、「メニューバーに"開発"メニューを表示」にチェックを入れる。

これでブラウザ設定でユーザエージェントを偽装することができるようになる。
開発->ユーザエージェント->Safari iOS 4.1 - iPhone
を選択。

●Androidの表示テスト
・Androidのテストは、Google Chromeを使う。もしくは、Androidのエミュレーターとか？


●ガラケーの表示テスト
・ガラケー（フィーチャーフォン）のテストは、FireFox＋FireMobileSimulatorを使う。

FireMobileSimulator
http://firemobilesimulator.org/


●レスポンシブデザインの表示テスト
画面の大きさをビョンビョン変えるのに、便利なツールが紹介されてた。

レスポンシブWebデザイン制作時必見のブラウザチェックツール10選 | モバイルファーストラボ
↓
resizeMyBrowser
http://resizemybrowser.com/



●スマホ向けの機能ライブラリー
スマホには、端末を振る操作＝「シェイク」とか、パソコンにはない操作がある。
凝ったギミックは極力排除して、シンプルな実装にしたいが、どうしても必要な場面があったら、楽に実装したい。
とりあえずなら、jQuery Mobileとかを使えばOK？

jQuery Mobile
http://jquerymobile.com/

iPhoneでjQueryをつかってシェイクジェスチャー（振る操作）を検出するサンプル | ke-tai.org
連載インデックス「jQuery Mobileでスマホ向け企業サイト構築」 - ＠IT


散歩＋スマホのときに便利な、お役立ちWebサービスを作りたい。