Mozilla 勉強会＠東京 6thのアウトラインメモ
2011年10月1日に行われたMozilla 勉強会＠東京 6thのメモ
イベントのページ: Mozilla 勉強会＠東京 6th
Twitterのまとめ: Mozilla 勉強会＠東京 6th – Togetter
- 14:30 – 15:00: 開場、発表者準備
- 15:00 – 15:10: Opening
自己紹介の流れ。
■15:10 – 15:50: Firefox for Developers – 開発者ツール＆セキュリティ編
発表資料: 開発者ツールの紹介
Firefox開発者ツール – Web Console
- コマンドの補完
Inspector
- DOM Inspectorみたいなもの
- 要素を調査するツール
- Style Inspector(開発中)
CSS Doctor
- CSSの間違いとか
ScrachPad
- エディタ
- 選択行のコードだけを実行できたりする。
GCLI
- ubiquityみたいな感じの
- CUIとGUI
Source Map
- CoffeeScriptのような変換コードと元コードをマッピングしたたものを作る
- 変換前の言語
Tilt
- DOMマップを3D化するアドオン
about:Firefox
セキュリティとプライバシーの話
<div style="font-family: Arial;">
発表資料: <a rel="nofollow" href="http://www.slideshare.net/dynamis/firefox-security-features">セキュリティ機能の紹介</a>
</div>
<div style="font-family: Arial;">
Same Origin Policy
</div>
<div style="font-family: Arial;">
Content Security Policy
</div>
<ul style="font-family: Arial;">
<li>
次世代のセキュリティポリシー <ul>
<li>
XSSの攻撃防止
</li>
</ul>
</li>
<li>
コンテンツ種別で読み込み制御 <ul>
<li>
画像やCSSやJSなども制御できるようにする
</li>
</ul>
</li>
<li>
Webkitではほぼ開発されてる
</li>
</ul>
<ul style="font-family: Arial;">
<li>
デフォルトセキュリティポリシーがいろいろ強化される
</li>
<li>
CSPの使い方 <ul>
<li>
X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
</li>
<li>
HTMLのメタタグは書き換えできたりするものだからヘッダーで
</li>
<li>
Apache でCSPの設定
</li>
</ul>
</li>
<li>
CSP対応に移行する <ul>
<li>
JS,CSSは外部ファイルに
</li>
<li>
evalを使わない
</li>
<li>
ポリシー違反レポートでどこがおかしいのかも確認できる <ul>
<li>
ヘッダーでレポートを報告するURLを指定してログを残せる
</li>
</ul>
</li>
<li>
CSPブックマークレットもある
</li>
</ul>
</li>
</ul>
<p>
HTTP Strict Transport Security
</p>
<div style="font-family: Arial;">
<ul>
<li>
HTTPSでの接続を要求するヘッダ
</li>
</ul>
<p>
X-Frame-Options
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
クリックジャッキングとか
</li>
</ul>
<p>
Cross-Origin Resource Sharing
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
クロスドメインでの読み込み許可
</li>
<li>
他のドメインから読み込まれてもいい場合の設定
</li>
<li>
XHR2とか
</li>
</ul>
<p>
ユーザ追跡拒否ヘッダ
</p>
</div>
<ul style="font-family: Arial;">
<li>
Do-Not-Trackヘッダ <ul>
<li>
ブラウザ側でサイトに通知する
</li>
<li>
IE,Safariも対応
</li>
<li>
Chromeだけ非対応
</li>
</ul>
</li>
<li>
受け取ったらユーザー追跡をしない
</li>
</ul>
<div style="font-family: Arial;">
<div>
■15:50 – 16:30: Pano って拡張機能 teramako
</div>
<div>
発表資料: <a rel="nofollow" href="http://teramako.github.com/doc/modest-20111001/">Pano って拡張機能</a>
</div>
<div>
Panorama
</div>
<ul>
<li>
Firefox4から導入された
</li>
<li>
タブグループを管理するビュー <ul>
<li>
アクティブなタブグループの切り替え
</li>
</ul>
</li>
</ul>
<p>
タブの種類
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
ピン止めタブ(AppTab)
</li>
<li>
グループの属するタブ
</li>
<li>
グループに属さないタブ(Firefox7で廃止)
</li>
</ul>
<p>
Pano できること
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
グループの作成/削除
</li>
<li>
グループ名の変更
</li>
<li>
D&D操作
</li>
</ul>
<p>
実装の仕組み
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
panoramade上で起こったイベントを拾ってビューを作ってる <ul>
<li>
tabopenなど
</li>
<li>
起こらないイベントは上書きして起こす
</li>
</ul>
</li>
<li>
基本的にはビュー
</li>
</ul>
<p>
頑張った所
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
アイコンはSVG <ul>
<li>
いろいろな場所で使われてる
</li>
<li>
使いまわしたい -> SVGで作る
</li>
</ul>
</li>
<li>
SVG <ul>
<li>
ベクターなので拡大縮小できる
</li>
<li>
ファイルサイズも小さい
</li>
</ul>
</li>
<li>
about:addonsでアイコンが表示されてない <ul>
<li>
アイコンのサイズが指定されてなかった
</li>
<li>
SVG内にサイズの指定した
</li>
</ul>
</li>
<li>
タブ、Panoramaから発生するDOM Eventを拾う <ul>
<li>
Panoramaから発生しないEvent <ul>
<li>
グループが作成された
</li>
<li>
グループから削除された
</li>
<li>
グループから移動した
</li>
</ul>
</li>
<li>
取れないEventは無理やり発行させる <ul>
<li>
Gropuが作成されたときに起きるイベントを上書きする
</li>
</ul>
</li>
</ul>
</li>
<li>
GroupItems.registerの上書き <ul>
<li>
元関数を実行
</li>
<li>
DOM Eventを発行
</li>
<li>
コールバックシステムに関数を登録してDOM Eventを発行させる
</li>
</ul>
</li>
</ul>
<p>
起動速度の改良
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
起動時のスクリプトは最小限<br /> <ul>
<li>
必要なときにロードさせる
</li>
<li>
mozUSSubScriptLoaderの使用
</li>
</ul>
</li>
<li>
必要なときに取得 <ul>
<li>
getterの使用
</li>
</ul>
</li>
<li>
速い読み込み <ul>
<li>
Firefox8 から mozUSSubScriptLoader もキャッシュされる
</li>
</ul>
</li>
</ul>
<p>
実装方法
</p>
<ul>
<li>
最初の読み込みは必要最小限 <ul>
<li>
40行ほど
</li>
<li>
最初はロードするものを書いておいて、ロードしたときにそれを上書きする
</li>
</ul>
</li>
<li>
getterの使用 <ul>
<li>
XPCOMUtil.jsmを使用してgetterを使いやすくする
</li>
<li>
defineLazyGetter
</li>
</ul>
</li>
</ul>
<p>
コンテンツの遅延読み込み
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
bartab <ul>
<li>
起動したときはタブはできるが、ロードはされない
</li>
<li>
タブが選択されたときに初めてロードされる
</li>
</ul>
</li>
<li>
nsISessionStoreが鍵 <ul>
<li>
短いコードで実現する
</li>
</ul>
</li>
</ul>
<p>
非アクティブなグループ内に開くには
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
Panoramaとバッテングして上手く行かなった
</li>
<li>
上手い解決方法が見つからない <ul>
<li>
setTimeoutでぐるぐるー
</li>
</ul>
</li>
</ul>
<p>
パネルでD&Dするために
</p>
</div>
<div style="font-family: Arial;">
<ul>
<li>
パネルをドラッグする前に閉じないようにする <ul>
<li>
noAutohide = true
</li>
</ul>
</li>
<li>
メニューボタンを押したときは閉じない様にする
</li>
</ul>
<div>
■16:40 – 17:20: restartless – 再起動不要なアドオンをSDK無しで作るフレームワーク – Piro
</div>
<div>
発表資料: <a rel="nofollow" href="http://piro.sakura.ne.jp/xul/doc/20111001workshop11/">restartless – 再起動不要なアドオンをSDK無しで作るフレームワーク</a>
</div>
<div>
Add-on SDKの目的
</div>
<ul>
<li>
誰でも開発できるようにする
</li>
<li>
高機能なアドオンの開発は目的ではなかった
</li>
<li>
今までのアドオン開発 <ul>
<li>
自由すぎた
</li>
<li>
敷居高い
</li>
<li>
何でもできた
</li>
</ul>
</li>
<li>
SDKを使えばある程度制限された状態で簡単作れるようになる
</li>
</ul>
<p>
Add-on SDKはGreasemonkeyスクリプトと同じような立ち位置
</p>
</div>
<div style="font-family: Arial;">
restartlessの目的
</div>
<div style="font-family: Arial;">
<ul>
<li>
再起動不要なアドオンを今までの開発と同じ方式で作れるように
</li>
<li>
Mozilla特有の事情を必要なのも従来方式
</li>
<li>
対象も従来の開発者向け
</li>
</ul>
<div>
restartlessの使い方
</div>
<ul>
<li>
main.jsの内容 <ul>
<li>
startup()で読み込まれる
</li>
<li>
専用の名前空間で実行される
</li>
<li>
shutdown()を定義
</li>
</ul>
</li>
<li>
ユーティリティ <ul>
<li>
location.href
</li>
<li>
load関数 = Cu.importと互換
</li>
<li>
require関数
</li>
<li>
existsでファイルの有無を調べる
</li>
<li>
resolve 相対パスの解決
</li>
<li>
EXPORTED_SYMBOLS
</li>
<li>
doAndWait <ul>
<li>
非同期処理を同期的に扱うときに使用
</li>
</ul>
</li>
<li>
jstimer
</li>
<li>
pref
</li>
<li>
locale <ul>
<li>
国際化
</li>
</ul>
</li>
<li>
config
</li>
<li>
WindowManager <ul>
<li>
DOMWindowにアクセスする
</li>
<li>
ウィンドウのopenを監視
</li>
</ul>
</li>
<li>
KeyboardShortcut <ul>
<li>
ショートカットの定義
</li>
</ul>
</li>
<li>
jsDefferred
</li>
</ul>
</li>
</ul>
<p>
restartlessの利用例
</p>
</div>
<ul style="font-family: Arial;">
<li>
ALT
</li>
<li>
back to owner tab
</li>
<li>
Fox Splitter
</li>
</ul>
<p>
restartlessのコードリーディング
</p>
<div style="font-family: Arial;">
<ul>
<li>
index.rdf <ul>
<li>
bootstrap=”true”で再起動不要と認識される
</li>
</ul>
</li>
<li>
bootstrap.js <ul>
<li>
モジュールのロードとか
</li>
</ul>
</li>
<li>
loader.js <ul>
<li>
ユーティリティとかが定義されている
</li>
<li>
doAndWait <ul>
<li>
スレッドをたててメインループを回す実装
</li>
</ul>
</li>
</ul>
</li>
<li>
main.js <ul>
<li>
各アドオンのコード
</li>
</ul>
</li>
<li>
module <ul>
<li>
各ライブラリが入ってるので、削除すれば消える
</li>
</ul>
</li>
</ul>
<div>
■17:20 – 18:00: Lightning Talk
</div>
</div>
<ul style="font-family: Arial;">
<li>
<a rel="nofollow" href="http://www.slideshare.net/knagato/mozilla-workshop-20111001-lt-addon-sdk">アドオン SDK を利用した初めてのアドオン開発</a>– by knagato<br /> <ul>
<li>
初めてアドオン開発する人が対象
</li>
<li>
SDKを使ったアドオン開発を特徴 <ul>
<li>
HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
</li>
</ul>
</li>
<li>
開発環境の種類 <ul>
<li>
Add-on BuilderをWeb上での開発 <ul>
<li>
再起動不要なのでその場で試せる
</li>
</ul>
</li>
<li>
Addon SDKを使った開発 <ul>
<li>
コマンドラインベース
</li>
</ul>
</li>
</ul>
</li>
<li>
Add-on SDKのチュートリアル
</li>
</ul>
</li>
<li>
<a rel="nofollow" href="http://www.p2pwf.com/">Thunderbirdアドオンによるワークフロー開発について</a>– by Nakashima<br /> <ul>
<li>
提案するツール <ul>
<li>
自分自身でのプロセス改善が可能
</li>
<li>
やり取りの簡略化ができる
</li>
</ul>
</li>
<li>
<a href="http://www.p2pwf.com/">http://www.p2pwf.com/</a> に仕様の詳細
</li>
</ul>
</li>
<li>
<a rel="nofollow" href="http://www.slideshare.net/saneyuki/forking-secure-login">Forking Secure Login</a> – by saneyuki_s<br /> <ul>
<li>
Secure Loginアドオンのフォークの話 <ul>
<li>
現在はメンテナンスアップデートのみになってる
</li>
<li>
全面改装してる
</li>
</ul>
</li>
<li>
一部機能の省略
</li>
<li>
レガシーコードの除去
</li>
<li>
doorhanger対応 <ul>
<li>
Firefoxに入ってるSSLのポップアップするやつ
</li>
</ul>
</li>
</ul>
</li>
<li>
<a rel="nofollow" href="http://0-9.sakura.ne.jp/pub/lt/modest/start.html">jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること</a> – by <a rel="nofollow" href="https://twitter.com/#%21/kyo_ago">kyo_ago</a><br /> <ul>
<li>
requestAnimationFrame <ul>
<li>
setIntervalの問題点としてアニメーション向けではない
</li>
</ul>
</li>
<li>
jQuery 1.6から削除された <ul>
<li>
setIntervalとrequestAnimationFrameが衝突してキューがたまる
</li>
<li>
タブがバックグランドにあるときの挙動
</li>
</ul>
</li>
</ul>
</li>
<li>
<a rel="nofollow" href="http://d.hatena.ne.jp/mooz/20111002/p1">ES.next WeakMap</a>– by mooz (<a rel="nofollow" href="https://twitter.com/#%21/stillpedant">@stillpedant</a>)<br /> <ul>
<li>
WeakMap = 連想配列
</li>
<li>
Firefox6から利用可能
</li>
<li>
{}やObject()と比較して <ul>
<li>
keyにオブジェクトが指定可能 <ul>
<li>
ハッシュはkeyに文字列しか指定できない(toStringされてる)
</li>
<li>
WeakMapはkeyにオブジェクトが指定可能 <ul>
<li>
オブエジェクトしか指定できない
</li>
<li>
プリミティブ値はエラー
</li>
</ul>
</li>
<li>
オブジェクトの外部拡張 <ul>
<li>
DOMノードに独自プロパティは危険
</li>
<li>
ES5ではオブジェクトの拡張がfreezeできる
</li>
<li>
オブジェクト自体は拡張しないで、外部に付加情報を持つ
</li>
<li>
WeakMapを利用する <ul>
<li>
キーとして外部情報をもたせる
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
keyに指定されたオブジェクトを弱く参照 <ul>
<li>
CGにたいして
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Firefox4以降のE4X– by teramako <ul>
<li>
ワイルドカード <ul>
<li>
*が指定子に使える
</li>
</ul>
</li>
<li>
属性アクセス <ul>
<li>
@が使える
</li>
</ul>
</li>
<li>
Firefox3.6までは上記のものがE4X以外でも使えた <ul>
<li>
Firefox4以降は禁止された
</li>
<li>
ざんねんでしたね
</li>
</ul>
</li>
</ul>
</li>
</ul>
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。