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無しで作るフレームワーク &#8211; 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=&#8221;true&#8221;で再起動不要と認識される
        </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>