ひっそりと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勉強会会場で大事件発生


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

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

画像はまだない




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

エディタ交代

Sublime Text 2

Sublime Text 2使ってます。いいですね。キーバインドをemacs風にしてる。
普段JavaScriptメインでたまにPHPを書くんだけど、今までずっとJavaScriptはNotepad++、PHPは最近NetBeansを使い始めてそこに落ち着きそうだったんだけど、ここにきて両方共Sublime Text 2に置き換えれそう。

有料版を使うかどうかはまだこれからとして、おうちデスクトップPC(WIN7)、おうちMBA、会社デスクトップPC(WIN7)、会社MBPと4台あるのでそれぞれキーバインドを同じにしたかった。
Sublime Text 2はカスタムのキーバインドをJSONファイルに記述する形なのでこれをDropBoxで同期。

ということで、Macに関しては

/Users/{USER}/Library/Application Support/Sublime Text 2/Package/User/Default (OSX).sublime-keymap

を、Winは

C:\Users\{USER}\AppData\Roaming\Sublime Text 2\Packages\User\Default (Windows).sublime-keymap

とかに置いてあるんでそれぞれ共通のファイルをDropBoxにあげてそいつにシンボリックリンクを貼った。今のところ特にWinとMacで違う記述がないんで同ファイルを。
Windowsはmklinkっていうコマンドがあるのでそれを使う。（mklinkって初めて知った…）

会社のPCはまだ同期させてないんで出社次第同期。これでしばらくエディタには悩まなくてよさそう。

CoffeeScript練習がてらuserscriptを書き直し

JavaScript CoffeeScript userscript Greasemonkey

さすがにそろそろCoffeeScriptがどんな感じなのか触ってみたい欲が高まってきたので、とりあえずまず小さいスクリプトを書いてみようということで丁度いい大きさのuserscriptをCoffeeScript化することにした。練習のためにHelloWorldやるとかはちょっとモチベーション上がらないから、自由に触れて且つコンパクトに収まってて更にピュアJSで書かれている自分のuserscriptは材料として適してた。

NicoSG-Preview / nicosgpreview.user.coffee
Nico-today-Watch / todaywatch.user.coffee

とりあえず２つ。ほんとにそのまま既存コードをCoffeeScriptで書き直しただけ。配列操作とかfor文の使い方だとかはもっといいやり方があるのかもしれない。そこ以外もきっともっと効率のいい書き方があるんだろうけど。

最初悩んだのがuserscriptを示すためのコメントをどう書けばいいのか。CoffeeScriptは少し見た感じだとシングルラインのコメントは出力ができない。

// ==UserScript==
// @name name
// @namespace namespace
// @description description
// @include include
// @version 0.1
// ==/UserScript==

これを吐こうと思った時シングルラインコメントが出せないからどうすればと悩んだ。
結論から言うとこの文字列をそのままブロックコメント中に入れて解決したんだけど、最初試した時に動かなかった（たぶん別の問題）からこの書き方はだめなのかと早合点してしまっていた…。

###
// ==UserScript==
// @name name
// @namespace namespace
// @description description
// @include include
// @version 0.1
// ==/UserScript==
###

これで普通に解釈されるuserscriptが出来上がる。ちなみに行頭にCoffeeScriptで出力したことを示すコメントが自動挿入されるけどこれもあっても問題なかった。

あとはやっぱfor文の使い方が全然違って戸惑った。

var num = 100;
for (var i = 0; i < num; i++) {
}

これ書くのですらドキュメントと睨めっこだった。

num = 100
for i in [0...num]

これで大丈夫みたいだけど、吐かれるJSもプラスなのかマイナスなのかの評価がfor文初期化部分に入ってて混乱。無駄な処理と無駄に式が長くなってしまってるのが気になったけど、まぁ容量にシビアになる類のもの書いてるわけでもないからとりあえず。もっと短く書ける方法が見つかればそれで書き直そう。

大きくはこの２つ。他は特に問題なくというか、CoffeeScriptならではの書き方をそこまで入れてないから悩まずパッパと置き換えた感じ。デバッグがしにくいっていうのは当然あるんだけど、まぁuserscriptくらいの大きさならあまり問題なく…。

これを会社で使うとなると今のところ生のJSで書いてる人がほとんどだからまた難しいところなのだけど、使っていくうちにメリット・デメリットはっきりさせて、メリットが大きいのであれば社内にも浸透させたいなーとかはやっぱり思うのでした。



しれっとだけどNico today WatchはCoffeeScriptで書きなおしつつ懸念点だった原宿版とZero版の両対応をしときました。

ニコニコのウォッチリスト

雑記 ニコニコ動画

（Nico today WatchとNicoSG PreviewはZeroに合わせて更新してました）

ニコニコのウォッチリストなくなってたと思ったんだけど普通に旧バージョンに戻すとあるんね…。
１日からずっとZeroバージョン使っててこの程旧バージョンに戻したんだけど、ウォッチリスト改めお気に入りユーザーってなってるｗ
（昔ウォッチリストだったよねよね？）

Zeroバージョンと旧バージョンでuserscriptを２ファイルにしちゃうのもアレゲ。URL見て処理振り分けるのがいいかなーとか。
ちょっとその作業に取り掛かる時間が取れてない。今週中になんとかしたい。

使い慣れてたせいかニコレポ形式で更新追うよりもNico today Watch入れてウォッチリストで確認したほうが見やすいんだよなぁｗ　１日に複数回の更新あると確認できないとかあるんだけど。

ちなみに0.7に更新しちゃって前のバージョンガーって人は（ソースコードのとこからも辿れるけど）前の0.6.2がここにあります。（.user.js直リン）
（併せてNicoSG Previewの前バージョン0.2.1がこっち）


あー、やっぱ旧バージョン落ち着くすなぁ。

ウォッチリスト曜日フォーマット変更につき

Greasemonkey ニコニコ動画 userscript

ウォッチリストすんごい微妙な変更加わってた。曜日表示が日→英とかｗ
ニコニコ動画もグローバル化かぁ…（苦笑）

おかげで正規表現に引っかからなくてNico today Watchが死んでた。
アップデートお願いします。

http://userscripts.org/scripts/show/103101

もっと変えるべき変更は管理ページ山ほどあると思うんだけどそれはまた別の話。