Safariを使ったサイトチェック方法を従来型携帯電話でも使う

以前紹介した記事『スマートフォンサイト制作に必ず役立つ！Safariを使ったサイトチェック方法』『スマートフォンサイト制作に必ず役立つ！続、Safariを使ったサイトチェック方法』の追加豆知識を紹介します。 今回はフィーチャーフォン、いわゆる従来型携帯電話向けサイトを作る際のノウハウとなりますが、スマートフォンメインで従来型携帯電話もついでにといった場合には便利かと思います。 ※本格的に従来型携帯電話サイトを作り込みたい場合は、ドコモ純正の i-mode HTML Simulator や、Chrome/Firefox のアドオン FireMobileSimlator をオススメします。 スマートフォンサイトを制作する際に Safari を使うと非常に便利だと上記の記事で説明していますが、Safari の良いところは簡単にユーザーエージェントを切替えられるところです。他のブラウザではアドオンなどが必要なのですが、Safari では開発メニューを表示するだけで簡単に切り替えが可能になります。 初期状態では Apple 製の iPhone/iPad だけでなくInternet Exploer や Firefox などもあります。しかしながら、さすがに日本の従来型携帯電話は用意されていません。用意されていなければ追加すればいいのです。これらの設定ファイルは以下の場所にあります。 C:\Program Files\Safari\Safari.resources\UserAgents.plist このファイルのバックアップを取ってからテキストエディタで開いて下さい。このファイルは xml 形式で書かれています。HTML や XHTML に似たような形式です。この中に<dict>タグがあります。これを追加していけば好きなユーザーエージェントを追加することができます。例えばドコモのF-09Aだとこうなります。<dict> <key>name</key> <string>F-09A</string> <key>version</key> <string></string> <key>platform</key> <string>Docomo</string> <key>user-agent</key> <string>DoCoMo/2.0 F09A3(c500;TB;W24H16)</string> </dict>各ユーザーエージェントは検索などすれば見つかりますのでいろいろ調べて見て下さい。ここでは他にauとsoftbankの例を挙げておきます。<dict> <key>name</key> <string>W62S</string> <key>version</key> <string></string> <key>platform</key> <string>AU</string> <key>user-agent</key> <string>KDDI-SN3E UP.Browser/6.2.0.13.2 (GUI) MMP/2.0</string> </dict><dict> <key>name</key> <string>820P</string> <key>version</key> <string></string> <key>platform</key> <string>Softbank</string> <key>user-agent</key> <string>SoftBank/1.0/820P/PJP10 Browser/NetFront/3.4 Profile/MIDP-2.0 Configuration/CLDC-1.1</string> </dict>レンダリングは実際のものとは大幅に異なるので各シミュレータを使うのが良いのですが、サーバー側やjavascriptなどでユーザーエージェントを使った判別を行っているような場合には、いちいち他のシミュレータを立ち上げたりすることなく簡単に切替えることができるので今回の設定をしておいて損はないかと思います。 （　スマートフォンECクラウド型ASP『aiship（アイシップ）』河野　） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 掲載元のブログではわかりやすい画像つきで公開しています。 ■aishipスマートフォン＆モバイルEC事例・ノウハウ集http://www.aiship.jp/knowhow/archives/2400＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝