12 October 2012

いくつかのサービスの embed タグ

youtube

<iframe width="960" height="720" src="http://www.youtube.com/embed/mHtdZgou0qU" frameborder="0" allowfullscreen></iframe>
  • iframe 直貼り方式
  • パラメータは embed タグを作るところで from が出るので, そこでユーザに選ばせる
    • 再生後におすすめが出るかどうか (クエリパラメータで制御している)
    • https を使うかどうか
    • privacy-enhanced mode
    • www.youtube-nocookie.com というドメインから配信して, youtube.com のクッキーを使った情報収集を行わない (ということをドメインを変えることで明示している)
    • 昔の embed タグ (flash)
    • サイズ

この手のを javascript でやると, その script タグのある場所に確実にコンテンツを差し込むのは若干面倒だし, とはいえ document.write を使うのは避けたいので, js よりも iframe + オプションはフォームから というのがベターだと思う

viemo

<iframe src="http://player.vimeo.com/video/43382919?title=1&amp;byline=1&amp;portrait=1" width="960" height="306" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/43382919">Christian Johansen - Pure, functional JavaScript</a> from <a href="http://vimeo.com/webrebels">Web Rebels Conference</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
  • iframe 直貼り方式
  • フォームで各種パラメータを変動させる
  • パラメータは表示関係のものばかり
    • https のページに貼るときはサイトオーナーが自分で注意する必要がある
  • iframe の外に動画の説明などが p タグでついてくる. スタイルはサイトオーナーが調整しろということか

slideshare

<iframe src="http://www.slideshare.net/slideshow/embed_code/14112177" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/toddanglin/5-tips-for-better-javascript" title="5 Tips for Better JavaScript" target="_blank">5 Tips for Better JavaScript</a> </strong> from <strong><a href="http://www.slideshare.net/toddanglin" target="_blank">Todd Anglin</a></strong> </div>
  • iframe 直貼り方式
  • フォームでパラメータの変更
    • クエリパラメータで何枚目のスライドからはじめるかなども選べる
  • こちらも http 限定. ssl はサイトオーナーが気をつけろ方式
  • 説明文が iframe の外にもついていて, この点も vimeo と同様
  • wordpress 用のタグもある

    [slideshare id=14112177&doc=tips-for-better-javascriptv1-120829183910-phpapp02]
    

speaker deck

<script async class="speakerdeck-embed" data-id="504dd52fd3696f000203e6b5" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script>
  • js 方式
  • プロトコルは // からはじめる方式
    • ブラウザがサイトのプロトコルに応じて切り替えてくれる
  • js は長いのであとでちゃんと読もうと思うけど, 結局は iframe を作って埋め込んでいるようだ
    • ただ domcontentloaded に何かしたりしているので, js じゃないとダメな理由がちゃんとありそう. これだけの js を書いて何をしたかったのか, ちゃんと見てみたい

gist

<script src="https://gist.github.com/3735053.js?file=notation_checker.py"></script>
  • js 方式
  • https 限定方式
    • そもそも gist 自体すべて https
  • 驚いたことに js からは html と css を document.write していた...
    • たしかに, シンタックスハイライトまで考えると, これはなかなか難しいのか..
    • いや, であれば iframe にして, どにかく document.write を避けたほうがいい気がするのだが

感想

  • 第三者コンテンツ提供型のサービスの場合は, js でがんばるよりも iframe タグをそのまま提供するほうがなにかと簡単そう
  • embed タグの提供 ui にフォームを付けて各種パラメータをユーザに選んでもらうのがベター
  • http or https の切り替えは意外と気にしていないサービスが多い
    • 可能ならばすべて https なサービスにすべきなんだろうけど, そうでないならユーザに選んでもらう or プロトコル省略の url を使うのがベターかな