第10回Mozilla拡張機能勉強会-FireMobileSimulatorについて

3,049 views

Published on

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

No Downloads
Views
Total views
3,049
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

第10回Mozilla拡張機能勉強会-FireMobileSimulatorについて

  1. 1. FireMobileSimulator について 2008/09/05 堀川隆弘 [email_address] http://d.hatena.ne.jp/thorikawa/
  2. 2. FireMobileSimulator って? <ul><li>携帯向けサイトのテスト用に開発した Firefox 拡張機能 </li></ul><ul><li>携帯ブラウザ独自の振る舞いをシミュレート </li></ul><ul><li>DoCoMo,Au,SoftBank 3キャリアに対応 </li></ul><ul><ul><li>http://d.hatena.ne.jp/thorikawa/20080816/1218908754 </li></ul></ul><ul><ul><li>https://addons.mozilla.org/ja/firefox/addon/8519 </li></ul></ul>
  3. 3. 携帯ブラウザ独自の振る舞い <ul><li>特殊な HTTP ヘッダ </li></ul><ul><ul><li>user-agent 例: DoCoMo/2.0 </li></ul></ul><ul><ul><li>x-jphone-uid SoftBank で端末を一意に識別する ID </li></ul></ul><ul><ul><li>x-up-devcap-screenpixels Au で端末のスクリーンサイズを示す文字列 </li></ul></ul><ul><ul><li>etc… </li></ul></ul>
  4. 4. 携帯ブラウザ独自の振る舞い <ul><li>絵文字表示 </li></ul><ul><ul><li>キャリアごとに多様な記述方式 </li></ul></ul><ul><ul><li>同じ   (太陽)を表すのにも・・・ </li></ul></ul><ul><ul><ul><li>DoCoMo </li></ul></ul></ul><ul><ul><ul><ul><li>SJIS コードバイナリ: xF8x9F </li></ul></ul></ul></ul><ul><ul><ul><ul><li>SJIS コードの 10 進数値文字参照:  </li></ul></ul></ul></ul><ul><ul><ul><li>Au </li></ul></ul></ul><ul><ul><ul><ul><li>Img タグ: <Img localsrc=“44”> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Unicode16 進数値文字参照:  </li></ul></ul></ul></ul><ul><ul><ul><li>SoftBank </li></ul></ul></ul><ul><ul><ul><ul><li>独自の Web コードバイナリ: x1Bx24x47x6Ax0F </li></ul></ul></ul></ul><ul><ul><ul><li>など・・・ </li></ul></ul></ul>
  5. 5. 携帯ブラウザ独自の振る舞い <ul><li>DoCoMo の UID 送信 </li></ul><ul><ul><li>DoCoMo の公式サイトで、リンク先の URL に uid=NULLGWDOCOMO というパラメータがあれば、 DoCoMo の NW ゲートウェイで NULLGWDOCOMO の文字列を端末 ID に置き換えてサイトにリクエストする。 </li></ul></ul>
  6. 6. 携帯ブラウザ独自の振る舞い <ul><li>DoCoMo の i モード ID 送信 </li></ul><ul><ul><li>リンク先の URL に guid=ON というパラメータがあれば X-DCMGUID という HTTP ヘッダを付与する。 </li></ul></ul>
  7. 7. 携帯ブラウザ独自の振る舞い <ul><li>DoCoMo の UTN( 端末製造番号 ) 送信 </li></ul><ul><ul><li>a タグや form タグに utn 属性が存在する場合、ユーザーに送信確認ダイアログが表示され、「はい」が選択されると、 user-agent に端末製造番号を組み込んで HTTP リクエストを送信する。 </li></ul></ul>
  8. 8. 実装の仕組み(1)HTTPリクエスト <ul><li>Firefox の HTTP リクエストをフックして HTTP ヘッダや URL を変更する </li></ul><ul><li>Modify headers アドオンを参考にした </li></ul><ul><ul><li>https://addons.mozilla.org/ja/firefox/addon/967 </li></ul></ul>
  9. 9. 実装の仕組み(1)HTTPリクエスト <ul><li>nsIObserver を実装する XPCOM コンポーネントを作成 </li></ul><ul><li>http-on-modify-request トピックの observer として登録 </li></ul>
  10. 10. 実装の仕組み(1)HTTPリクエスト <ul><li>http-on-modify-request トピック </li></ul><ul><ul><li>HTTP リクエストが作られる直前に通知され、 HTTP リクエストを書き換えることができる </li></ul></ul><ul><ul><li>参考 URL [MDC:Setting HTTP request headers] http://developer.mozilla.org/ja/Setting_HTTP_request_headers </li></ul></ul>
  11. 11. 実装の仕組み(1)HTTPリクエスト function myHTTPListener(){}; myHTTPListener.prototype.observe = function(subject, topic, data){ if (topic == &quot; http-on-modify-request &quot;) { var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel); httpChannel.setRequestHeader(&quot;hoge&quot;, &quot;foo&quot;, false); }else if (topic == &quot;app-startup&quot;) { Cc[&quot;@mozilla.org/observer-service;1&quot;].getService(Ci.nsIObserverService). addObserver(this, &quot;http-on-modify-request&quot;, false); } } } サンプルソース
  12. 12. 実装の仕組み(2)絵文字表示 <ul><li>Firefox が HTML/XHTML データを受け取ってから、レンダリングする前に、絵文字のバイナリデータや、数値文字参照文字列( &#63702 など)を、すべてアドオン内部の画像ファイルを参照する img タグに置き換える </li></ul>
  13. 13. 実装の仕組み(2)絵文字表示 <ul><li>http-on-examine-response/http-on-examine-merged-response トピックを監視して、 content-type を独自のタイプ text/msim.html に書き換える </li></ul><ul><li>text/msim.html⇒text/html への StreamConverter を定義して、その中で絵文字の変換を行う </li></ul><ul><li>wmlbrowser アドオンを参考にした </li></ul>
  14. 14. 実装の仕組み(2)絵文字表示 <ul><li>nsIStreamConverter を実装する XPCOM コンポーネントを作成 </li></ul><ul><li>contractID=”@mozilla.org/streamconv;1?from=text/msim.html&to=*/*” で定義 </li></ul><ul><li>作成したコンポーネントを CategoryManager に登録してやれば text/msim.html タイプのデータを受信したときに自動で呼び出される </li></ul>
  15. 15. 実装の仕組み(2)絵文字表示 <ul><li>onDataAvailable 関数 /onStopRequest 関数の中で、文字列の絵文字への置換を行う </li></ul><ul><li>DOM 操作で絵文字置換はできなかったのか? </li></ul><ul><ul><li>innerHTML では渡ってくる文字列は全て Unicode </li></ul></ul><ul><ul><li>&#xxxxx; などの数値参照文字列が自動的に Unicode として解釈して渡ってくる。(本来は Shift_JIS コードとし解釈したいのに・・・) </li></ul></ul><ul><ul><li>DOM 展開後じゃないと、数値参照文字列自体を置き換えることはできないと判断 </li></ul></ul>
  16. 16. 実装の仕組み(2)絵文字表示 <ul><li>利用ライブラリ </li></ul><ul><ul><li>絵文字置換の関数は PHP の携帯絵文字変換ライブラリ「 MobilePictogramConverter 」を改変 </li></ul></ul><ul><ul><li>http://php-develop.org/MobilePictogramConverter/ </li></ul></ul><ul><ul><li>日本語文字コード変換の為に、「 Escape Codec Library 」を利用 </li></ul></ul><ul><ul><li>http://nurucom-archives.hp.infoseek.co.jp/digital/escape-codec-library.html </li></ul></ul>
  17. 17. 実装の仕組み(2)絵文字表示 MsimStreamConverter.prototype. onStopRequest = function (aRequest, aContext, aStatusCode) { this.data = emoji_convert(this.data); var sis = Components.classes[&quot;@mozilla.org/io/string-input-stream;1&quot;] .createInstance(Components.interfaces.nsIStringInputStream); sis.setData (this.data, this.data.length); this.listener.onDataAvailable (this.channel, aContext, sis, 0, this.data.length); this.listener.onStopRequest (this.channel, aContext, aStatusCode); }; サンプルソース
  18. 18. 今後の課題 <ul><li>タブごとに端末を設定したい </li></ul><ul><ul><li>タブごとに設定を覚えさせたり、タブと HTTP リクエストの関連を情報として取得することが可能か? </li></ul></ul><ul><li>HDML とか WML も解釈できるようにしたい </li></ul><ul><ul><li>HTML/WML ・・・携帯端末向けのコンテンツ記述言語 現在は HTML/XHTML で記述するのが一般的だが、一部のページでは未だ使われている </li></ul></ul><ul><ul><li>絵文字同様 StreamConverter の処理でソースを書き換えればできそう </li></ul></ul>
  19. 19. 今後の課題 <ul><li>開発を楽にしたい </li></ul><ul><ul><li>最近 Eclipse+SpketIDE を導入したが、いまいち使いこなせてない </li></ul></ul><ul><ul><li>拡張機能開発環境のデファクトって何? </li></ul></ul><ul><li>公式のプラグインとして公開したい </li></ul><ul><ul><li>レビューがなかなか集まりません>< </li></ul></ul>
  20. 20. アドオン開発のコツ <ul><li>似たようなことをやってるアドオンを探す ⇒コードをパクる </li></ul><ul><li>MDC や XUL Planet を読む </li></ul><ul><li>Firefox のソースコードを読む </li></ul><ul><li>Firefox の拡張点をまとめたサイトがほしい>< </li></ul>
  21. 21. ご清聴ありがとうございました

×