前回までで、携帯サイトを作るための基礎知識は学べたかと思います。
今回からはもう少し実践に近い内容で書きます。
ただ、実践に近い内容で書こうと思ったのですが、
作った内容を携帯で確認できないことが判明しました。
会社に携帯はあるのですが、自分のはiPhoneなので作っても携帯サイトが見れないんです。
そこで、今回は一度道から外れて、
携帯サイト開発にあたっての、便利なツールを探したいと思います。
とにかく実際に開発をしているPCから見る必要があるので、
方法としてはいくつかあります。
- 1.モバイルシミュレーターを使う方法
- 2.汎用のWEBブラウザとプロキシを使う方法
- 3.ブラウザそのものの機能やアドオン／プラグインを使う方法
簡単な方法はこんなところです。
その中でも、３のブラウザそのものの機能やアドオン／プラグインを使う方法を採用してみます。
Firefoxがあれば簡単なので。
Firefoxのアドオン／プラグインが開発者向けにかなり充実してまして、
３の場合もFirefoxで対応できます。
FirefoxのアドオンにUser-Agentを簡単に切り替えられる『User Agent Switcher』というものがあります。
携帯用のUser-Agentは、「我流天性 – がらくた屋」さんのサイトで「User Agent Switcher の携帯用のXML」を公開されているのでそれをimportするだけでOK。
では実際に使えるように設定してみましょう。
本当に簡単でした。
- 1.User Agent Switcher をFirefoxにインストール
- 2.User Agent Switcher の携帯用のXMLを右クリック保存でダウンロードします
- 3.[ツール]メニュー – [ User Agent Switcher ] – [option]から設定ウインドウを表示
- 4.左の設定をUser Agentsに変更
- 5.import/Exportの中のチェックボックスは既存のUserAgentsのリストを上書きする時はチェックを入れる。追加したい時は外す
- 6.importボタンを押して、2で落としたファイルを読み込む
これだけです。
後は、[ツール]メニュー – [ User Agent Switcher ]の一覧に出てくる機種名で切り替えるだけです。
スイッチしてからリロードすると切り替わります。
携帯になりきって、グーグルに入ってみました。
この方法でエラーが出る場合などの対応の仕方も色々あるみたいですので、
興味のある方は今回の参考サイトなどを掘り下げて見てください。
あとこの「User Agent Switcher」以外に、
モバイルシミュレータ等があればさらに開発に役立ちますよ。
参考サイト
Webデザインのタグ+携帯サイト
http://feed.designlinkdatabase.net/tag/%E6%90%BA%E5%B8%AF%E3%82%B5%E3%82%A4%E3%83%88.aspx
我流天性 – がらくた屋
http://blog.cgfm.jp/garyu/archives/112
livedoor ディレクター Blog
http://blog.livedoor.jp/ld_directors/archives/51079649.html
