ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

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

    このエントリーを含むはてなブックマーク はてなブックマーク - スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法 あとで読む
    CSSフレームワークをいろいろ試してみた。(Twitter BootstrapYahoo 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

    Apple Safari

    スマートフォンのテストに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/
    resizeMyBrowser


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

    jQuery Mobile
    http://jquerymobile.com/

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


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






    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/942-0e4375db

    FC2Ad