• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第10回Mozilla拡張機能勉強会-FireMobileSimulatorについて
 

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

on

  • 3,974 views

 

Statistics

Views

Total Views
3,974
Views on SlideShare
3,958
Embed Views
16

Actions

Likes
1
Downloads
4
Comments
0

4 Embeds 16

http://www.linkedin.com 9
http://www.slideshare.net 5
http://twitter.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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