ひっそりとmozilla勉強会のメモ公開

勉強会 Firefox

聞き逃してメモれなかった部分多数だけど自分が思い出す分には不足な
くはないけどひとまず。

モバイルFirefoxアドオンの開発

講師: Gomita (@gomitter)氏
作ったパッケージをDropbox等でPCとモバイル端末で同期しながら開発。いちいち転送する手間が省ける。
デスクトップ版と基本的にファイルの構成は同じ。

■install.rdf

bootstrap:trueで再起動無しインストール

■bootstrap.js

4つの基本的なfunctionを指定
Service.jsmをインポート（COMとか）

startup

firefox起動時に呼ばれる関数
ウィンドウ（、タブ）の取得はAPIを通じて。

load

ウィンドウを開いた時に発生するイベント。

UIReady

ウィンドウのUIの構築後に発生するイベント。

shutdown
uninstall

UIの掃除（イベントの破棄とか）

loadIntoWindow

UI生成処理

unloadFromWindow

UI破棄処理

BrowserApp

タブ関連のAPI

■デスクトップ版とモバイル版の違い - API
デスクトップ版

UIが全てXULで構築されている。
gBrowser

モバイル版

ツールバー部分がネイティブで、ブラウズ部分だけXUL。

BrowserApp
NativeWindow

NativeUI機能

Downloads
UserAgent

...

chrome extensionと同じようにAPIは各コンポーネント別に分かれてる。

sendMessageToJava

Javaで実装された低レベルAPI

■ローカライズ
chrome.manifest

localeパッケージを指定

locale

ja/main.properties
キーワードとローカライズされた文字列のペアを保存
毎回プロパティファイルを読み込んで使用する文字列を取得する

■デバッグ

デスクトップ版と同じでコンソールが扱える。
alertデバッグもできるｗ

■注意

ツールバーはネイティブなのでアドオンで拡張できない
browser.xulへのオーバーレイは可能だが画面が狭いので微妙
XULによるUI構築（タブブラウザ部分）
XHTMLによる構築が主流になるか
ローカルファイルの読み書きは割と簡単にできる
再起動なしでインストールできるが、デスクトップ版と違いXULオーバーレイをあまり使用しないので再起動無しインストールによるメリットは少ない
Java実装部分はアドオンから触れない
動的パッチ思考からの脱却
まだまだモバイル端末だと高機能なアドオンは必要なさげ

メカモジラ

講師: だ (@dadaaism)氏
ウェブと実世界をつなげる的なあれ
mecha-mozilla.org - このウェブサイトは販売用です！ -&nbspmecha-mozilla リソースおよび情報
http://tomoshibi.mozilla.jp/の紹介

■arduino.js

mecha-mozilla.org - このウェブサイトは販売用です！ -&nbspmecha-mozilla リソースおよび情報
arduinoをJavaScriptからいじる。
FirefoxからLEDランプを点滅させる
マイクロチップとUSBコネクタを搭載した基盤をJSで制御
アドオン（js-ctypes）とcが会話し、cとarduinoが会話
アドオンでarduinoオブジェクトを生成
最終的にuserscriptが操作している

■通天閣

mecha-mozilla.org - このウェブサイトは販売用です！ -&nbspmecha-mozilla リソースおよび情報
大阪に関するウェブページを開いた時LEDランプを光らせる（更に天気によってLEDの色を変化
→ウェブの情報を使ってハードウェアを制御

■re-finder

mecha-mozilla.org - このウェブサイトは販売用です！ -&nbspmecha-mozilla リソースおよび情報
カメラマンが撮った時の角度で画像をスクリーンに投影（プロジェクタを制御）

■weburret

mecha-mozilla.org - このウェブサイトは販売用です！ -&nbspmecha-mozilla リソースおよび情報
ウェブページの構成要素でカクテルを構成（コンテンツ量とか外部リソースとかCookieとか）

■kinect.js

キネクトをJSで制御

プリプロセッサ

講師: Teramako (@teramako)氏
Firefoxのコード（CSS,JS,XML）内にプリプロセッサ
Preprosessor.pyを使って実現
http://mxr.mozilla.org/mozilla-central/source/config/Preprocessor.py
Preprocessor.pyの前進のPreprocessor.plのslashslashを実装したのはW3C(?)の人（聞き取れなかった…

ブラウザ内のエディタ事情

講師: mooz (@stillpedant)氏
textarea

■機能が貧弱だから高度な編集機能がほしい

→ちょっとしたことの組み合わせである程度の事をしてやれる
例えば、textarea.valueに値を代入するとスクロールの高さが元に戻るので、代入前にスクロールの高さをキャッシュしておく、とか。
HTML5から文字列の選択でforwardとbackwordを指定できるようになった。
テキストフィールド選択 API - フォーム - HTML要素 - HTML5 タグリファレンス - HTML5.JP

textareaの文字列操作時にtextNodeを利用する

テキスト操作用のAPIが揃っていて操作がしやすい。
→高速？未検証。

このへんを組み合わせるとプレーンなtextareaに文字列置換等をつけられる

■高機能なブラウザ内エディタを実装してるサービス
Ymax

ブラウザ内でEmacsを実現

ブラウザ内エディタは最近様々
jsdoit,jsfiddle,codemirror2,ace editor,skywriter,eclipse orion

独自エディタ分類

独自実装

エディタを自前で実装する
キーイベントを全て受け取り、本来全く入力できないエリアにキー入力に応じてエレメントを追加していく
マルチバイト文字だとイベントをキャッチするのが難しかったり、切り取りなどができないなど難点も多い

content editable

contenteditable属性の指定

hidden textarea

codemirrorの実装を見るといい
CodeMirror: Internals

■ソースコードエディタの実装

firefoxのsource-editor.jsm
IMEに対する挙動はサポートしない
Orionに合わせたインタフェースを今のところ用意していっている
ブラウザでIMEの検索候補を利用できるよう仕様策定を進めてはいる

Add-on SDK

講師: Piro (@piro_or)氏
addon-kitでできないことはいろいろある
そこでサードパーティ製ライブラリの利用
標準ライブラリに入ってない機能を使えるようになる
firefoxの構成要素にも不安定要素がいくつかある（XPCOM,UI,OS）
本来アンインストール時にやらないといけないクリーン処理等の面倒をライブラリ内で見てくれていたりする

■ホイールでタブを切り替えるアドオンを作るデモ

firefoxがイベントを先に取ってしまうのでキャプチャリングフェーズでイベントを取得しないといけない場合がある
SDKを使って低レベル層を扱うようにするとfirefoxが扱う低レベルのイベントをキャンセルしないといけなかったりでめんどい

LT

時間の都合で浅井さんのLTカット。
firefoxのコード検索はmxr（単純な全文検索じゃない）
dxrの方が速い

アドオン開発のデバッグツール
DOM Inspector
Venkman

おまけ

■mozilla勉強会会場で大事件発生


なお犯人は自首した模様。

■アベンジャーズのコラ画像が秀逸だった

画像はまだない




もっとちゃんとメモ取ろう。