この記事の所要時間: 36

スマートフォンサイト構築時のお供
デバッグに重宝します!

デバイス切替時のデバッグのお供

デバイス切替判定って言っても

自分がAndroidしか持っていない
いや、iPhoneしか持っていない

っていうことあります。ありすぎます。
スマホ全部そろえて・・・・っていうのは大規模開発していないと無理です。
そういう場合、レンタル端末屋さんってあるみたいです。
必要であればご検討を。
「テスト用スマートフォン端末レンタル」で検索!!

Google Chromeのアドオンを使う

様々なスマートフォンでの表示をブラウザで確認出来るツールです。

FireMobileSimulator for Google Chrome
っていうアドオンをGoogle Chromeにインストールします。

fire0001

インストールすると

fire0002

こんな感じのボタンが出来ます。

これを右クリックすると下のオプションメニューが表示されます。

 

fire0003「オプション」を押すと

オプション画面に遷移します。

メニューは「全般」「ID情報」「端末設定」があります。

「全般」は表示についてです。こんなところでしょ。日本語で書いてあるので助かります。

fire0004

「ID情報」

内容を塗りつぶしてはいますが、そのまんまです。

この辺の情報を使用する場合に変更出来るのも嬉しいです。

fire0005

「端末設定」

今、表示出来る端末の一覧があります。

「編集する」でそのスペックの編集が出来ます。

不要な端末情報は「削除する」で削除出来ます。

fire0006

「編集する」を押した時に表示される編集画面。

これで自分のこだわりスペックに変更しても良いでしょう。fire0013

「新規端末追加」っていうので「オリジナルの機種」を作ることも可能です。

これって、どう使用するかというと

良い使用方法があります。

すでに運用開始しているサイトでテーマを変更出来ない・・・という場合に

オリジナル端末情報を作り上げます。

問題となるのは「User-Agent」です。

ここに自分だけが知っている文字列を入れます。

例えば「tttteeeesssstttt」とかね。

すると後述する WP SiteManager で面白いことが出来るんですよ。

ちょっと得するテクニックです。
これはいずれ・・・多分明日の記事で書きます。
↓書きました!↓WordPressテーマで開発している場合に大変有効なテクニックです。
スマホ用テーマ切替とデバッグとWP開発にも使える!|WordPress用プラグイン|WP SiteManager

fire0007

携帯端末情報の追加は上の画面だけではなく「最新端末リスト」からも追加出来ます。

すごいですね。

fire0008「メニュー」から「最新端末リストから端末を追加」を押します。

fire0009

この画面に遷移しますのでリストから追加したい端末情報にチェックを入れて

上の方にある「選択した端末を追加」ボタンを押します。

※検索も出来ますので便利ですよ↓

fire0010

fire0011

追加が完了すると「登録完了」メッセージが表示されます。

fire0012ほんとに追加されているか確認・・・

一番下にありました!

キャリア名が「Softbank」なら「SB」になってます。

これで同じURLでスマホとPC表示を切り替えているサイトの対応はバッチリです!!

fire1000
これは AU iPhone5 でYahoo!を表示してみたところです。