FireMobileSimulator について 2008/09/13 (株)エムティーアイ 堀川隆弘  (id:thorikawa)
FireMobileSimulator って? <ul><li>携帯向けサイトのテスト用に開発した Firefox 拡張機能 </li></ul><ul><li>携帯ブラウザ独自の振る舞いをシミュレート </li></ul><ul><li>Do...
Firefox Add-ons にて公開中
何で作ったの?(1) <ul><li>従来の携帯サイトテストの問題点 </li></ul><ul><ul><li>携帯端末だとURL入力が面倒 </li></ul></ul><ul><ul><li>読み込みやスクロールが遅くてイライラする </...
何で作ったの?(2) <ul><li>従来の携帯サイトをPCで確認する方法 </li></ul><ul><ul><li>キャリアが提供するシミュレータを使う </li></ul></ul><ul><ul><li>Proxy でモバイル⇔ PC ...
何で作ったの?(3) <ul><li>個々でみると機能が不足していたり、 導入や設定が面倒だったりする </li></ul><ul><li>例: ModifyHeaders+useragentswitcher </li></ul>
誰でも使えるシンプルな 携帯シミュレータが欲しい!
FireMobileSimulator の登場
FireMobileSimulator の特徴 1 <ul><li>Firefox のアドオンとしてインストールすればすぐ使える ( 余分な設定不要) </li></ul><ul><li>端末の HTTP ヘッダを一括設定可能 </li></u...
デモ
FireMobileSimulator の特徴 2 <ul><li>端末の設定追加機能 </li></ul><ul><li>Firefox 自体のブラウズ機能を利用しているので、他のアドオンと連携が容易 </li></ul><ul><ul><l...
技術仕様1 <ul><li>絵文字表示 </li></ul><ul><ul><li>HTTP レスポンスをフックして、バイナリレベルで HTML ソースを書き換える </li></ul></ul><ul><ul><li>アドオンの内部で絵文字画...
技術仕様2 <ul><li>UID送信など </li></ul><ul><ul><li>HTTPリクエストをフックして、URLやリクエストヘッダを書き換える </li></ul></ul><ul><ul><li>DOM操作でHTMLエレメント属...
技術仕様3 <ul><li>GPS </li></ul><ul><ul><li>独自のプロトコルハンドラ (device:loction/device:gpsone) を定義 </li></ul></ul><ul><ul><li>位置情報の送信...
環境 <ul><li>実装言語は JavaScript </li></ul><ul><li>Eclipse+Spket IDE </li></ul><ul><li>開発期間は約4ヶ月 (ただし業務時間外で開発) </li></ul>
FireMobileSimulator で 広がる未来
モバイル開発をもっと楽に <ul><li>携帯サイトの負荷テスト eLoad などの負荷テストツールに Firefox の振る舞いを記録すれば実施が簡単! </li></ul><ul><li>携帯サイトの自動テスト Selenium と連携すれ...
オープンソースとして公開予定 <ul><li>CodeRepos にて近日公開予定 </li></ul><ul><li>個々の端末の細かい動きをもっとシミュレートできるようにしたい </li></ul><ul><ul><li>端末をたくさん持た...
一緒に開発しませんか? <ul><li>JavaScript という旬の言語が学べる! </li></ul><ul><li>モバイルの仕様に詳しくなれる! </li></ul><ul><li>多数のモバイルサイト開発者・運用者に感謝される! <...
まとめ <ul><li>モバイル開発はもっと楽にできる </li></ul><ul><li>FireMobileSimulator を導入してみよう </li></ul><ul><li>FireMobileSimulator を拡張してモバイル...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

ESPer2008-FireMobileSimulatorについて

2,249 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,249
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ESPer2008-FireMobileSimulatorについて

  1. 1. FireMobileSimulator について 2008/09/13 (株)エムティーアイ 堀川隆弘 (id:thorikawa)
  2. 2. FireMobileSimulator って? <ul><li>携帯向けサイトのテスト用に開発した Firefox 拡張機能 </li></ul><ul><li>携帯ブラウザ独自の振る舞いをシミュレート </li></ul><ul><li>DoCoMo,Au,SoftBank 3キャリアに対応 </li></ul>
  3. 3. Firefox Add-ons にて公開中
  4. 4. 何で作ったの?(1) <ul><li>従来の携帯サイトテストの問題点 </li></ul><ul><ul><li>携帯端末だとURL入力が面倒 </li></ul></ul><ul><ul><li>読み込みやスクロールが遅くてイライラする </li></ul></ul><ul><ul><li>端末が手元にない </li></ul></ul><ul><li>最終的には実機で確認すべきだが、 PCで簡易な確認ができると便利 </li></ul>
  5. 5. 何で作ったの?(2) <ul><li>従来の携帯サイトをPCで確認する方法 </li></ul><ul><ul><li>キャリアが提供するシミュレータを使う </li></ul></ul><ul><ul><li>Proxy でモバイル⇔ PC の差異を吸収する </li></ul></ul><ul><ul><li>Firefox の ModifyHeaders+useragentswitcher </li></ul></ul><ul><ul><li>Web アプリケーション型のシミュレータ </li></ul></ul><ul><ul><li>有料のシミュレータとか </li></ul></ul>
  6. 6. 何で作ったの?(3) <ul><li>個々でみると機能が不足していたり、 導入や設定が面倒だったりする </li></ul><ul><li>例: ModifyHeaders+useragentswitcher </li></ul>
  7. 7. 誰でも使えるシンプルな 携帯シミュレータが欲しい!
  8. 8. FireMobileSimulator の登場
  9. 9. FireMobileSimulator の特徴 1 <ul><li>Firefox のアドオンとしてインストールすればすぐ使える ( 余分な設定不要) </li></ul><ul><li>端末の HTTP ヘッダを一括設定可能 </li></ul><ul><li>UID ・端末製造番号などの各種 ID 送信に対応(全キャリア) </li></ul><ul><li>絵文字表示に対応(全キャリア) </li></ul><ul><li>GPS 等の位置情報送信に対応 </li></ul>
  10. 10. デモ
  11. 11. FireMobileSimulator の特徴 2 <ul><li>端末の設定追加機能 </li></ul><ul><li>Firefox 自体のブラウズ機能を利用しているので、他のアドオンと連携が容易 </li></ul><ul><ul><li>Live HTTP Headers アドオンで流れている HTTP ヘッダを見る </li></ul></ul><ul><ul><li>QR code アドオンで QR コードを表示させる </li></ul></ul><ul><ul><li>Crescent Page Saver で全画面キャプチャ </li></ul></ul><ul><ul><li>など… </li></ul></ul>
  12. 12. 技術仕様1 <ul><li>絵文字表示 </li></ul><ul><ul><li>HTTP レスポンスをフックして、バイナリレベルで HTML ソースを書き換える </li></ul></ul><ul><ul><li>アドオンの内部で絵文字画像を保有 </li></ul></ul><ul><ul><li>画像⇔文字コードの対応マップを保持して、バイナリを img タグに置き換える </li></ul></ul>
  13. 13. 技術仕様2 <ul><li>UID送信など </li></ul><ul><ul><li>HTTPリクエストをフックして、URLやリクエストヘッダを書き換える </li></ul></ul><ul><ul><li>DOM操作でHTMLエレメント属性などを書き換える </li></ul></ul>
  14. 14. 技術仕様3 <ul><li>GPS </li></ul><ul><ul><li>独自のプロトコルハンドラ (device:loction/device:gpsone) を定義 </li></ul></ul><ul><ul><li>位置情報の送信確認画面はアドオン内部で保有 </li></ul></ul><ul><ul><li>URL パラメータや POST データに位置情報を付与 </li></ul></ul>
  15. 15. 環境 <ul><li>実装言語は JavaScript </li></ul><ul><li>Eclipse+Spket IDE </li></ul><ul><li>開発期間は約4ヶ月 (ただし業務時間外で開発) </li></ul>
  16. 16. FireMobileSimulator で 広がる未来
  17. 17. モバイル開発をもっと楽に <ul><li>携帯サイトの負荷テスト eLoad などの負荷テストツールに Firefox の振る舞いを記録すれば実施が簡単! </li></ul><ul><li>携帯サイトの自動テスト Selenium と連携すれば自動テストも簡単! </li></ul>
  18. 18. オープンソースとして公開予定 <ul><li>CodeRepos にて近日公開予定 </li></ul><ul><li>個々の端末の細かい動きをもっとシミュレートできるようにしたい </li></ul><ul><ul><li>端末をたくさん持たなくていいので地球に優しい⇒ グリーンIT </li></ul></ul><ul><li>詳細はブログ「遥かへのスピードランナー」にて </li></ul>
  19. 19. 一緒に開発しませんか? <ul><li>JavaScript という旬の言語が学べる! </li></ul><ul><li>モバイルの仕様に詳しくなれる! </li></ul><ul><li>多数のモバイルサイト開発者・運用者に感謝される! </li></ul><ul><li>他の Firefox アドオンも作れるかも! </li></ul>
  20. 20. まとめ <ul><li>モバイル開発はもっと楽にできる </li></ul><ul><li>FireMobileSimulator を導入してみよう </li></ul><ul><li>FireMobileSimulator を拡張してモバイル開発をもっと楽にしよう </li></ul>
  21. 21. ご清聴ありがとうございました

×