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