Firefoxを簡単に携帯エミュレータにするアドオン「FireMobileSimulator」が素晴らしい件について

追記 2009/05/24)
Webデザイナー向けの絵文字ライブラリを公開しました。
codecheck.in:PHP携帯絵文字表示ライブラリ(PHP埋込型・au絵文字名対応版)のダウンロードサイトはこちら

ダウンロードや使い方の説明は上記のリンク先をご覧ください。
絵文字一覧表はこちら


携帯開発者がずっと待望だったFirefoxのアドオンでの携帯シミュレーター、それがFireMobileSimulator

FireMobileSimulator でFDS実際に携帯サイト(FDS)を表示してみたのが左の画像。

  • PHPでの携帯分岐処理も出てる(UserAgent)
  • 絵文字変換にもちゃんと対応!
    (絵文字コードをDocomoの絵文字で、imgタグで置換されます)
  • オプションを見ると、機種固有IDとかGPSの位置情報も設定できる

今後に期待したい所

  • 指定機種の画面幅で表示(240px)になってくれるだけでも大分助かる。切り替えられたステキ。
  • 絵文字をAUで表示確認したい。
    (これも切り替えられたらステキ)
  • 携帯用CSSのエミュレート
    • DocomoがインラインCSSをどうレンダリングするとかがかなり大変そうだけど。。。

以下スクリーンショットとか。

[ツール]メニューから簡単に機種指定をできます。
一番下の[option]で各種設定。
FireMobileSimulator

機種固有IDも指定可能。
FireMobileSimulator のオプション画面1

デバイスの設定も追加できる。
iPhoneもしっかりありました。
UserAgentをXMLとかで インポート・エキスポートでやり取りできたらとてもステキなんだけどな〜
FireMobileSimulator のオプション画面1

位置情報まで設定できちゃいました!

GPS座標の入力画面
ただ私の環境ではAuでの位置送信ができませんでした。
(上記数字はAIPcafeの座標)

追記 2008/09/22)
AUでの位置情報の指定ができました!
単に私の位置座標指定を間違っていましたm(_ _)m
なんと制作者本人のthorikawaさんのコメントのご指摘のとおり、座標指定を正しく行い位置情報送信が成功しました。

  • ホットペッパーの携帯版にアクセスしたら403になった(IPで制限されてるっぽい)
  • 適当に検索して出て来た このへん.mobi ってサイトで[GPSから現在位置をセットする]を試してみたけどダメだった。
  • AUの位置指定はdms(dd.mm.ss.sss)度表示であり、Google Mapsからの座標はdegree度表示のため変換が必要
    • thorikawaさんが教えてくれた「経緯緯度の表示形式変換」のサイトを使うと楽です。
      (右側のdegree度表示の方にGoogle Mapsの座標を入れます
    • AIPcafeの座標だとこんな感じ
      東経 130.395505 → 130.23.43.818 (dms度表示)
      北緯 33.587851 → 33.35.16.264 (dms度表示)
    • 頭に「+(プラス)」を忘れずに!

改めて[このへん.mobi]で実際に試してみました。
位置情報通知確認画面

上の画面から見事に位置情報を送信できました!

住所が「福岡県福岡市中央区大名一丁目14付近」となってるのがわかると思います。
GPSの位置情報送信結果

かなりオススメです!
誰か作らないなら作るしかないかな〜と思ってたぐらいだったので、めちゃめちゃ感動したアドオンです。
Firebug,Webdeveloperについで必須のアドオンになりました。

携帯サイト制作オススメ書籍

携帯サイト コーディング&デザイン

モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
PHP×携帯サイト デベロッパーズバイブル

タグ: , , , , , , , , ,

User Agent Switcher の携帯用のXML

先日2007/11/17(土)に行われたPiF(PHP in Fukuoka)の第9回勉強会のスピカーで「携帯の機種判別」を話せさてもらいました。

その時、携帯開発で便利な、Firefoxの拡張でUserAgentを切り替えられるUser Agent Switcher を紹介したんですが、各携帯のUserAgentをメモったuseragentswitcher.xml を公開します。

修正:20080917) リンク切れ直しましたm(_ _)m
useragentswitcher.xml (7KB)

元ファイルはblog in a fogのYozikさんがエントリー「blog in a fog – User Agent Switcher ユーザーエージェント一覧」で公開していたxml(感謝!感謝!)をベースにしています。
私なりに携帯関係を加えたものです。
(幅別にしたり、SoftBank系にダミーの携帯固有IDを入れたりとか)

使い方は簡単です。

  1. User Agent Switcher をFirefoxにインストール
  2. [ツール]メニュー – [ User Agent Switcher ] – [option]から設定ウインドウを表示
  3. useragentswitcher.xmlをImportする。
    useragentswitcherの画面説明

これだけでOKです。
後は、[ツール]メニュー – [ User Agent Switcher ]の一覧に出てくる機種名で切り替えるだけです。
(切り替えたらリロード・再読み込みが必要)

勉強会ではNet_UserAgent_Mobileでの簡単な使い方と過信したらいけない点、実際に自分の携帯でアクセスしてどう動くか等を試してもらいました。

当日のスライドデータはPiFのGoogle グループに一式を公開してます。
PiFのサイトが無くなったため、こちらに公開しました。
http://blog.cgfm.jp/garyu/appendix/2007/10/slide/20071117pif.html

QRコード:PiF携帯判別各自の携帯で試してもらったURLのQRコードです。
http://blog.cgfm.jp/garyu/appendix/2007/10/sample_php/s4_mobile_test.php

種判別の結果や、機種固有IDの取得、画像幅と高さを取得できる事が分かると思います。
(機種固有IDなどはサーバーに保存・蓄積しません)

携帯サイトに 関する参考サイトも集めてみました。

そういえば次のPiFのネタは何も決まってませんでしたね。
何かリクエストあれば考えます。
CSSでフォームデザインの検証ネタの続きをしないとなー。

携帯サイト制作のオススメ書籍

携帯サイト コーディング&デザイン

モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
PHP×携帯サイト デベロッパーズバイブル


追記 2009/05/24)
Webデザイナー向けの絵文字ライブラリを公開しました。
codecheck.in:PHP携帯絵文字表示ライブラリ(PHP埋込型・au絵文字名対応版)のダウンロードサイトはこちら
絵文字一覧表はこちら


追記 2009/01/30)
XMLに追記しました。
おかしいところがあったら指摘お願いします。

  • FOMA、movaの製造番号付
  • iPhone (新旧2つ)
  • iPod Touch (新旧2つ)

追記 2009/01/19)
別記事で「Firefoxを簡単に携帯エミュレータにするアドオン「FireMobileSimulator」が素晴らしい件について」を書いてます。
携帯の絵文字確認や画面幅確認など、簡単な携帯画面の動作確認にはこちらをオススメです!


追記 2008/07/25)
PiF(PHP in Fukuoka)の第9回勉強会のスライドを公開しました。
http://blog.cgfm.jp/garyu/appendix/2007/10/slide/20071117pif.html


タグ: , , , , , , , , , , , ,