13 Oct 2012

Speaker Deck の speakerdeck-embed.js

いくつかのサービスの embed タグ - Please Sleep のつづき

ざっくり読んで, 処理の大枠だけを追ってみた.

  • 超ざっくりいうと, 中で iframe 作って置いている
  • なぜ iframe 直貼り方式ではなく, js なのか
    • embed されているページでも左右のキーでスライドを前後させるためだった
    • 思いっきりメディア側の ux に影響を与えているのでどうかなあと思う
  • あと標準オブジェクトのプロトタイプも普通に汚染している
    • “use strict” してたり, var a, b, c 方式の変数宣言だったり, 割とモダンな書き方はしているので, ある程度プロトタイプ汚染は気にしないというのもトレンドなのかな
    • たしかにほとんどの場合では衝突しないだろうし, そうすることによってコードがシンプルになるんだったら, 検討する価値はあると思う
  • カンマ演算子を多用している
    • 読みづらくなるけどコードは短くなるので, minifier がやったのかな
    • 変数名は短縮されているけど関数名は短縮されているものとそうでないものがあった
    • 各種 minifier (closure, yui, uglify) の機能をひと通り調べておこう
  • iframe の設置は, embed 用の script タグに class を振っておいて replaceChild で iframe に置き換えている
    • 必要なパラメータは script タグに data 要素をつけて受け渡し
    • 確かに簡単で確実
    • メディアのサイトに同名のクラスがあったらだめだけど, それだけっちゃそれだけ. 注意すればすむ話ではある

モダンな書き方をしているし, 参考になったので, 詳細もちゃんと読もうと思う.