11

FireMobileSimulatorFireMobileSimulator についてについて

2008/09/132008/09/13（株）エムティーアイ（株）エムティーアイ堀川隆弘 堀川隆弘 (id:thorikawa)(id:thorikawa)

22

FireMobileSimulatorFireMobileSimulator って？って？

携帯向けサイトのテスト用に開発した携帯向けサイトのテスト用に開発したFirefoxFirefox 拡張機能拡張機能

携帯ブラウザ独自の振る舞いをシミュ携帯ブラウザ独自の振る舞いをシミュレートレート

DoCoMo,Au,SoftBankDoCoMo,Au,SoftBank ３キャリアに対応３キャリアに対応

33

Firefox Add-onsFirefox Add-ons にて公開中にて公開中

44

何で作ったの？何で作ったの？ (1)(1)

従来の携帯サイトテストの問題点従来の携帯サイトテストの問題点– 携帯端末だと携帯端末だと URLURL入力が面倒入力が面倒– 読み込みやスクロールが遅くてイライラす読み込みやスクロールが遅くてイライラするる

– 端末が手元にない端末が手元にない

最終的には実機で確認すべきだが、最終的には実機で確認すべきだが、ＰＣで簡易な確認ができると便利ＰＣで簡易な確認ができると便利

55

何で作ったの？何で作ったの？ (2)(2)

従来の携帯サイトをＰＣで確認する方法従来の携帯サイトをＰＣで確認する方法1.1. キャリアが提供するシミュレータを使うキャリアが提供するシミュレータを使う2.2. ProxyProxy でモバイル⇔でモバイル⇔ PCPC の差異を吸収するの差異を吸収する3.3. FirefoxFirefox のの ModifyHeaders+useragentswitcherModifyHeaders+useragentswitcher4.4. WebWeb アプリケーション型のシミュレータアプリケーション型のシミュレータ5.5. 有料のシミュレータとか有料のシミュレータとか

66

何で作ったの？何で作ったの？ (3)(3)

個々でみると機能が不足していたり、個々でみると機能が不足していたり、導入や設定が面倒だったりする導入や設定が面倒だったりする

例：例： ModifyHeaders+useragentswitcherModifyHeaders+useragentswitcher

7

誰でも使えるシンプルな携帯シミュレータが欲しい！

8

FireMobileSimulator の登場

99

FireMobileSimulatorFireMobileSimulator の特徴の特徴 11

1.1. FirefoxFirefox のアドオンとしてインストーのアドオンとしてインストールすればすぐ使えるルすればすぐ使える (( 余分な設定不余分な設定不要）要）

2.2. 端末の端末の HTTPHTTP ヘッダを一括設定可能ヘッダを一括設定可能3.3. UIDUID ・端末製造番号などの各種・端末製造番号などの各種 IDID 送送

信に対応（全キャリア）信に対応（全キャリア）4.4. 絵文字表示に対応（全キャリア）絵文字表示に対応（全キャリア）5.5. GPSGPS 等の位置情報送信に対応等の位置情報送信に対応

10

デモ

1111

FireMobileSimulatorFireMobileSimulator の特徴の特徴 22

6.6. 端末の設定追加機能端末の設定追加機能7.7. FirefoxFirefox 自体のブラウズ機能を利用してい自体のブラウズ機能を利用してい

るので、他のアドオンと連携が容易るので、他のアドオンと連携が容易 Live HTTP HeadersLive HTTP Headers アドオンで流れているアドオンで流れている HTHT

TPTP ヘッダを見るヘッダを見る QR codeQR code アドオンでアドオンで QRQR コードを表示させるコードを表示させる Crescent Page SaverCrescent Page Saver で全画面キャプチャで全画面キャプチャなど…など…

1212

技術仕様技術仕様 11

絵文字表示絵文字表示– HTTPHTTP レスポンスをフックして、バイナレスポンスをフックして、バイナ

リレベルでリレベルで HTMLHTML ソースを書き換えるソースを書き換える– アドオンの内部で絵文字画像を保有アドオンの内部で絵文字画像を保有– 画像⇔文字コードの対応マップを保持し画像⇔文字コードの対応マップを保持し

て、バイナリをて、バイナリを imgimg タグに置き換えるタグに置き換える

1313

技術仕様技術仕様 22

UIDUID 送信など送信など– HTTPHTTPリクエストをフックして、リクエストをフックして、 URLURLややリクエストヘッダを書き換えるリクエストヘッダを書き換える

– DOMDOM操作で操作で HTMLHTMLエレメント属性などエレメント属性などを書き換えるを書き換える

1414

技術仕様技術仕様 33

GPSGPS– 独自のプロトコルハンドラ独自のプロトコルハンドラ (device:loction/d(device:loction/d

evice:gpsone)evice:gpsone) を定義を定義– 位置情報の送信確認画面はアドオン内部で位置情報の送信確認画面はアドオン内部で

保有保有– URLURL パラメータやパラメータや POSTPOST データに位置情報をデータに位置情報を

付与付与

1515

環境環境

実装言語は実装言語は JavaScriptJavaScript

Eclipse+Spket IDEEclipse+Spket IDE

開発期間は約４ヶ月開発期間は約４ヶ月（ただし業務時間外で開発）（ただし業務時間外で開発）

16

FireMobileSimulator で広がる未来

1717

モバイル開発をもっと楽にモバイル開発をもっと楽に

携帯サイトの負荷テスト携帯サイトの負荷テストeLoadeLoad などの負荷テストツールになどの負荷テストツールに FirefoFirefoxx の振る舞いを記録すれば実施が簡単！の振る舞いを記録すれば実施が簡単！

携帯サイトの自動テスト携帯サイトの自動テストSeleniumSelenium と連携すれば自動テストも簡と連携すれば自動テストも簡単！単！

1818

オープンソースとして公開予オープンソースとして公開予定定 CodeReposCodeRepos にて近日公開予定にて近日公開予定 個々の端末の細かい動きをもっとシ個々の端末の細かい動きをもっとシ

ミュレートできるようにしたいミュレートできるようにしたい– 端末をたくさん持たなくていいので地球端末をたくさん持たなくていいので地球

に優しい⇒に優しい⇒グリーンＩＴグリーンＩＴ 詳細はブログ「遥かへのスピードラ詳細はブログ「遥かへのスピードラ

ンナー」にてンナー」にて

1919

一緒に開発しませんか？一緒に開発しませんか？

JavaScriptJavaScript という旬の言語が学べる！という旬の言語が学べる！

モバイルの仕様に詳しくなれる！モバイルの仕様に詳しくなれる！

多数のモバイルサイト開発者・運用者に感多数のモバイルサイト開発者・運用者に感謝される！謝される！

他の他の FirefoxFirefox アドオンも作れるかも！アドオンも作れるかも！

2020

まとめまとめ

モバイル開発はもっと楽にできるモバイル開発はもっと楽にできる

FireMobileSimulatorFireMobileSimulator を導入してみようを導入してみよう

FireMobileSimulatorFireMobileSimulator を拡張してモバイを拡張してモバイル開発をもっと楽にしようル開発をもっと楽にしよう

2121

ご清聴ありがとうございまご清聴ありがとうございましたした