ESPer2008-FireMobileSimulatorについて
-
Upload
takahiro-horikawa -
Category
Technology
-
view
1.840 -
download
3
description
Transcript of ESPer2008-FireMobileSimulatorについて
![Page 1: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/1.jpg)
11
FireMobileSimulatorFireMobileSimulator についてについて
2008/09/132008/09/13(株)エムティーアイ(株)エムティーアイ堀川隆弘 堀川隆弘 (id:thorikawa)(id:thorikawa)
![Page 2: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/2.jpg)
22
FireMobileSimulatorFireMobileSimulator って?って?
携帯向けサイトのテスト用に開発した携帯向けサイトのテスト用に開発したFirefoxFirefox 拡張機能拡張機能
携帯ブラウザ独自の振る舞いをシミュ携帯ブラウザ独自の振る舞いをシミュレートレート
DoCoMo,Au,SoftBankDoCoMo,Au,SoftBank 3キャリアに対応3キャリアに対応
![Page 3: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/3.jpg)
33
Firefox Add-onsFirefox Add-ons にて公開中にて公開中
![Page 4: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/4.jpg)
44
何で作ったの?何で作ったの? (1)(1)
従来の携帯サイトテストの問題点従来の携帯サイトテストの問題点– 携帯端末だと携帯端末だと URLURL入力が面倒入力が面倒– 読み込みやスクロールが遅くてイライラす読み込みやスクロールが遅くてイライラするる
– 端末が手元にない端末が手元にない
最終的には実機で確認すべきだが、最終的には実機で確認すべきだが、PCで簡易な確認ができると便利PCで簡易な確認ができると便利
![Page 5: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/5.jpg)
55
何で作ったの?何で作ったの? (2)(2)
従来の携帯サイトをPCで確認する方法従来の携帯サイトをPCで確認する方法1.1. キャリアが提供するシミュレータを使うキャリアが提供するシミュレータを使う2.2. ProxyProxy でモバイル⇔でモバイル⇔ PCPC の差異を吸収するの差異を吸収する3.3. FirefoxFirefox のの ModifyHeaders+useragentswitcherModifyHeaders+useragentswitcher4.4. WebWeb アプリケーション型のシミュレータアプリケーション型のシミュレータ5.5. 有料のシミュレータとか有料のシミュレータとか
![Page 6: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/6.jpg)
66
何で作ったの?何で作ったの? (3)(3)
個々でみると機能が不足していたり、個々でみると機能が不足していたり、導入や設定が面倒だったりする導入や設定が面倒だったりする
例:例: ModifyHeaders+useragentswitcherModifyHeaders+useragentswitcher
![Page 7: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/7.jpg)
7
誰でも使えるシンプルな携帯シミュレータが欲しい!
![Page 8: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/8.jpg)
8
FireMobileSimulator の登場
![Page 9: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/9.jpg)
99
FireMobileSimulatorFireMobileSimulator の特徴の特徴 11
1.1. FirefoxFirefox のアドオンとしてインストーのアドオンとしてインストールすればすぐ使えるルすればすぐ使える (( 余分な設定不余分な設定不要)要)
2.2. 端末の端末の HTTPHTTP ヘッダを一括設定可能ヘッダを一括設定可能3.3. UIDUID ・端末製造番号などの各種・端末製造番号などの各種 IDID 送送
信に対応(全キャリア)信に対応(全キャリア)4.4. 絵文字表示に対応(全キャリア)絵文字表示に対応(全キャリア)5.5. GPSGPS 等の位置情報送信に対応等の位置情報送信に対応
![Page 10: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/10.jpg)
10
デモ
![Page 11: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/11.jpg)
1111
FireMobileSimulatorFireMobileSimulator の特徴の特徴 22
6.6. 端末の設定追加機能端末の設定追加機能7.7. FirefoxFirefox 自体のブラウズ機能を利用してい自体のブラウズ機能を利用してい
るので、他のアドオンと連携が容易るので、他のアドオンと連携が容易 Live HTTP HeadersLive HTTP Headers アドオンで流れているアドオンで流れている HTHT
TPTP ヘッダを見るヘッダを見る QR codeQR code アドオンでアドオンで QRQR コードを表示させるコードを表示させる Crescent Page SaverCrescent Page Saver で全画面キャプチャで全画面キャプチャなど…など…
![Page 12: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/12.jpg)
1212
技術仕様技術仕様 11
絵文字表示絵文字表示– HTTPHTTP レスポンスをフックして、バイナレスポンスをフックして、バイナ
リレベルでリレベルで HTMLHTML ソースを書き換えるソースを書き換える– アドオンの内部で絵文字画像を保有アドオンの内部で絵文字画像を保有– 画像⇔文字コードの対応マップを保持し画像⇔文字コードの対応マップを保持し
て、バイナリをて、バイナリを imgimg タグに置き換えるタグに置き換える
![Page 13: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/13.jpg)
1313
技術仕様技術仕様 22
UIDUID 送信など送信など– HTTPHTTPリクエストをフックして、リクエストをフックして、 URLURLややリクエストヘッダを書き換えるリクエストヘッダを書き換える
– DOMDOM操作で操作で HTMLHTMLエレメント属性などエレメント属性などを書き換えるを書き換える
![Page 14: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/14.jpg)
1414
技術仕様技術仕様 33
GPSGPS– 独自のプロトコルハンドラ独自のプロトコルハンドラ (device:loction/d(device:loction/d
evice:gpsone)evice:gpsone) を定義を定義– 位置情報の送信確認画面はアドオン内部で位置情報の送信確認画面はアドオン内部で
保有保有– URLURL パラメータやパラメータや POSTPOST データに位置情報をデータに位置情報を
付与付与
![Page 15: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/15.jpg)
1515
環境環境
実装言語は実装言語は JavaScriptJavaScript
Eclipse+Spket IDEEclipse+Spket IDE
開発期間は約4ヶ月開発期間は約4ヶ月(ただし業務時間外で開発)(ただし業務時間外で開発)
![Page 16: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/16.jpg)
16
FireMobileSimulator で広がる未来
![Page 17: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/17.jpg)
1717
モバイル開発をもっと楽にモバイル開発をもっと楽に
携帯サイトの負荷テスト携帯サイトの負荷テストeLoadeLoad などの負荷テストツールになどの負荷テストツールに FirefoFirefoxx の振る舞いを記録すれば実施が簡単!の振る舞いを記録すれば実施が簡単!
携帯サイトの自動テスト携帯サイトの自動テストSeleniumSelenium と連携すれば自動テストも簡と連携すれば自動テストも簡単!単!
![Page 18: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/18.jpg)
1818
オープンソースとして公開予オープンソースとして公開予定定 CodeReposCodeRepos にて近日公開予定にて近日公開予定 個々の端末の細かい動きをもっとシ個々の端末の細かい動きをもっとシ
ミュレートできるようにしたいミュレートできるようにしたい– 端末をたくさん持たなくていいので地球端末をたくさん持たなくていいので地球
に優しい⇒に優しい⇒グリーンITグリーンIT 詳細はブログ「遥かへのスピードラ詳細はブログ「遥かへのスピードラ
ンナー」にてンナー」にて
![Page 19: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/19.jpg)
1919
一緒に開発しませんか?一緒に開発しませんか?
JavaScriptJavaScript という旬の言語が学べる!という旬の言語が学べる!
モバイルの仕様に詳しくなれる!モバイルの仕様に詳しくなれる!
多数のモバイルサイト開発者・運用者に感多数のモバイルサイト開発者・運用者に感謝される!謝される!
他の他の FirefoxFirefox アドオンも作れるかも!アドオンも作れるかも!
![Page 20: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/20.jpg)
2020
まとめまとめ
モバイル開発はもっと楽にできるモバイル開発はもっと楽にできる
FireMobileSimulatorFireMobileSimulator を導入してみようを導入してみよう
FireMobileSimulatorFireMobileSimulator を拡張してモバイを拡張してモバイル開発をもっと楽にしようル開発をもっと楽にしよう
![Page 21: ESPer2008-FireMobileSimulatorについて](https://reader035.fdocument.pub/reader035/viewer/2022062616/54b6e1674a7959aa3d8b45bd/html5/thumbnails/21.jpg)
2121
ご清聴ありがとうございまご清聴ありがとうございましたした