スマートフォンサイトをプレビューするために準備すること｜IT制作や情報を紹介するサイトobjectivo2015.org

会員ログイン

入会する

次回以降は自動的にログインする

キーワード検索

作成日時：2014年09月26日

スマートフォンサイトをプレビューするために準備すること

このエントリーをはてなブックマークに追加

開発しているパソコンをテストサーバーにしてプレビュー

セキュリティの都合や、レンタルサーバーを使って外部に公開することができない場合、制作に使用しているパソコンをテストサーバーにするやり方もあります。

スマートフォンからアクセスするためには、webサーバーにするパソコンが無線LANの設定がされていることやスマートフォンも一緒の無線LAN環境にあることが条件です。

Macの場合は、もともとwebサーバーの機能があります。

「システム環境設定」→「共有」→「web共有」にチェックをすることで有効化し、スマートフォンのブラウザで該当のIPアドレスを入力します。

Windowsの場合は、フリーソフトである「XAMPP」を利用します。

インストール後はXAMPPを起動し、「Apache」の「Start」をクリックし、次はコマンドプロンプトからipconfigを実行し、パソコンのIPアドレスを調べます。

こちらもスマートフォンからIPアドレスを入力しますが、HTMLファイルはXAMPPをセットアップしたファイルに入れましょう。

パソコンからプレビュー確認できる環境を用意

テストで作成したものを実機で確認できるようにした場合、確実な確認ができるのですが、ちょっとした一部のみの変更の際に、毎回実機確認をするというのは手間になります。

パソコンでも実機に近い表示を確認できるプレビューができるようにしましょう。

SafariやGoogle Chromeはスマートフォン搭載のブラウザと同じWebKitエンジンを使用しているため、レイアウト確認などの簡単なものであればパソコンからでも可能です。

特にSafariであれば「開発」→「ユーザーエージェント」のメニューからユーザーエージェントを簡単に切り替えることができます。

しかし、確認できるのはレイアウトなどの表示のみとなりますので、タッチやジェスチャーなどの操作確認はできないため、簡単な表示の確認だけと思ってください。

© 2018 IT制作や情報を紹介するサイトobjectivo2015.org All Rights Reserved.