スマートフォンサイトを作ろう!(1)準備準備・・・

0
    JUGEMテーマ:wordpress

    最後に記事を投稿してから早11か月が経ってしまいました。
    そろそろ充電も終わって、何かがしたくなってきました。
    記念すべき再開第1回目のテーマは「スマートフォンサイトを作ろう!」です。

    去年最後のテーマが「ホームページを作ろう!Wordpress編」でした。
    この時作った私のペーパークラフトサイトを、スマートフォン対応にしよう、
    というのが今回の目的です。

    だって、Googleさんが、スマホ対応じゃないと点数下げるっていうんだもん・・・

    まあ、そういうことです。

    第1回目は、準備として、開発環境と必要なプラグインなどをインストールしていきましょう。

    と、その前に、Wordpressのサイトをスマートフォン対応にする、にはどうするか、ばくっとしたイメージをつかんでほしいと思います。
    現在PC用のWordpressサイトがあるわけです。PC用の大きさで、PC用のレイアウトで。大きな画面とマウスがあれば便利に使えるように作ったつもりです。
    でもスマートフォンでアクセスするとどうでしょう?字は小さいわ幅は広いわでなかなか使いづらいと思います。
    とはいえ、もう一つ別のサイトを作るわけにもいきません。記事はWordpressで投稿してるのですから、もう一つサイトを作ったら記事も二度投稿しなくてはなりません。
    何とか1つのWordpressで見た目だけ切り替えることができないか?
    そう、これがやりたいことでした。

    具体的に言うと、
    ・スマートフォン向けの子テーマを作る。
    ・利用者の端末に応じてテーマを切り替える。
    です。

    スマートフォン用の子テーマについてですが、Wordpressにはもともとメインのテーマに子テーマを登録する仕組みがありますので、これを利用します。
    利用者の端末に応じてテーマを切り替えるには、プラグインを導入してやると一発です。
    今回のシリーズではこれらについて解説してゆくことになります。


    ということで、第1回目は必要な開発環境とプラグイン類のインストールです。

    必要なものは以下の通りです。
    ・Firefox又はChrome
     次のアドオンを入れて、スマートフォンサイトを表示させるために使います。
    ・FireMobileSimulator(Firefox又はChromeのアドオン)
     スマートフォンの画面表示を模擬してくれるアドオンです。
    ・Multi Device Switcher(Wordpressのプラグイン)
     ユーザの端末に応じてテーマを切り替えてくれるプラグインです。
    ・jPanelMenu(jQueryのプラグイン)
     画面がスライドして横からメニューが出てくる奴です。

    では順に探していきましょう。

    ・Firefox又はChrome
    これは説明はいいでしょう。ここです。
     ・Firefox
     ・Chrome


    ・FireMobileSimulator
    こちらはまず次のサイトにアクセスしてください。
     ・FireMobileSimulator.org

    右のメニューからダウンロードに進むと、FirefoxとChromeそれぞれのアドオンのダウンロードリンクがありますので、お好きな方を選んでクリックしてください。私はFirefoxを使っていますので、以後はFirefox版での説明になります。

    Firefoxにアドオンがインストールされたら、ボタンをメニューに表示させましょう。メニューバーの右端の三本線、メニューボタンをクリックし、一番下のカスタマイズをクリックします。


    するとメニューに追加可能なボタンの一覧が出ますので、そこからFireMobileSimulatorをドラッグして、上のメニューバーの点線の枠内にドロップします。出来たらメニューを閉じてください。
    次に今作ったボタンをクリックし、「最新端末リストから端末を追加」をクリックしてください。



    このように長〜い端末リストが表示されますので、必要な機種にチェックを入れてFireMobileSimulatorの端末リストに加えてください。これで完了、と言いたいところですが、もうひと手間必要です。
    このリストから登録される画面サイズは、生の画面サイズです。最近のスマートフォンは解像度が高くなってきて、横幅1000ピクセルを超えるものも出てきています。ですが、スマートフォン自体の幅は、まぁ高々7〜8cm程度です。ということはどうなるかというと、このまま表示すると同じピクセルサイズの画像がどんどん小さく表示されるようになってくるのです。これはあまりうれしくありません。そこでスマートフォンのブラウザでは、デバイスのピクセル2×2個でブラウザのコンテンツの1ピクセルを表示する、というようなやり方で、従来と同様の画面表示サイズになるように工夫しているのです。これを「デバイスピクセルレシオ」と呼びます。
    従来というのは、iPhone3Gの頃のことで、このころはデバイスピクセルレシオは1で、画面の幅は320ピクセルでした。
    これがiPhone5では実際の画面幅は640ピクセルですが、デバイスピクセルレシオが2となり、ブラウザの表示幅は320ピクセルと、従来と同じ見た目を保持しているのです。

    カンの良いかたはもうわかったと思いますが、先ほどの端末リストにはこのデバイスピクセルレシオが反映されていませんので、このままだとえらく幅広になってしまいます。ですので、登録されている画面サイズをこのデバイスピクセルレシオで割って、見た目の画面サイズを調整してやる必要があります。

    デバイスピクセルレシオの例がこちらのサイトに一覧になっているので、参考にしてください。ここにない場合は頑張って自分で調べましょう(私のスマートフォンもありませんでした・・・・)
     ・スマートフォンについて備忘録|FHWblog(仮)

    修正方法は、メニューバーのFireMobileSimulatorのボタンをクリック>オプション設定>端末設定、のリストから端末を選び、「編集する」ボタンを押してください。表示された「スクリーン横幅」「スクリーン高さ」の数値を手動で修正してOKを押せば、今度こそ完了です。


    ・Multi Device Switcher
    こちらはWordpressのプラグインなので、Wordpressのダッシュボードからインストールします。Wordpressをまだインストールしてない方は、前回のシリーズの記事を一度ご覧ください。
    ダッシュボードのプラグイン>新規追加で検索ボックスに「Multi Device Switcher」と入れてenterを押すと、一発で出てくると思います。指示に従ってインストールして有効化してください。
    なおインストールするとプラグイン名は「マルチデバイス」になります。


    ・jPanelMenu
    これはググってやるとすぐ出てきますが、こちらです。
     ・jpanelmenu.com

    右のダウンロードボタンで、右クリックから名前を付けて保存で保存しておいてください。


    では今回はここまでです。次回は、PC用のテーマをコピーしてスマートフォン用の子テーマを作り始めます。
     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天