カテゴリー別アーカイブ: frontend

slideshareとspeakerdeckを自分のサイトやブログに引用したい。

frontend

ええと、slideshareとspeakerdeckと、
もろもろをiframeで画面に表示させたいなぁと思って、ちんたら組んでました。

忘れないように書き留めておきます。
だいぶレベルは低いです。

遷移ボタン

// 新しいウィンドウに開く
window.open("URL")
// 同じウィンドウに開く
location.href="URL"

iframe

読み込ませるサイトをURL次第でフルスクリーン表示で取得できるのであれば、iframe内に全画面表示させることは可能でした。
つまり、speakerdeckも全画面ボタンのところで、右クリックなどして、リンクを取得すれば、それで設定すればOKのようです。
http://embed.ly/ ではなぜか取得できないときもあったので、このほうが確実かもしれません。

slideshareもspeakerdeckもユーザ名/指定IDとは別にスライドの番号を持っているようですね。(ちょっとややこしいですが)

slideshareの表示

対象のスライドシェアの画面でembedボタンを押すと表示されるのが、下のコードです。

// slideshare
// embed_codeは17119897らしい。


<div style="margin-bottom:5px">
  <strong>
// 画面に表示されているURL
    <a href="http://www.slideshare.net/toooommmmmmmmy/mayumaro-akb-fix" title="ガイドラインからみたアプリUI〜iPhone用とAndroid用〜" target="_blank">ガイドラインからみたアプリUI〜iPhone用とAndroid用〜</a>
  </strong>
from
  <strong>
    <a href="http://www.slideshare.net/toooommmmmmmmy" target="_blank">Chihiro Akiba</a>
  </strong>
</div>

まぁ、これも十分に早いのですが、全部コピーしかできないのがちょっとイヤだったのでw

http://embed.ly/docs/explore/oembed?url=URL

つまり、上の場合だと、

http://embed.ly/docs/explore/oembed?url=http://www.slideshare.net/toooommmmmmmmy/mayumaro-akb-fix

をたたくと、embed.lyの実行結果が返るので、ここに表示されたソースを使うのもありです。
私はスライドのURLが欲しかったので、(もちろんslideshareのAPI使ってどうこう、という話がBESTだとは思いますとも！)

ち、ちなみに、wordpressの場合は、URLをそのままTextに書けば、embedされた状態で表示されます。

speakerdeck

speakerdeck

で取得したURLをスライドシェアのiframeタグのsrcとして利用し、アドレスをaタグのhrefに指定すれば、思い通りにembれますよっと。