YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニューアルしました!

お待たせいたしました(o_ _)o

YouTubeをブログに貼りつけるためのブックマークレット、YouTube2HTMLのリニューアルがようやくできましたので、ここに公開いたします!

YouTube2HTMLとはなんぞやという方ももちろんお見えだと思いますので、簡単におさらいしていきたいと思います。

初代YouTube2HTMLの公開が2010年12月。

YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace
初代YouTube2HTML

こいつも初代Flickr2HTMLと同じようにYahoo!Pipesを利用してデータを取得し出力していました。

その後、出力する形式を2種類(iframeとobject)にしたり、出力サイズを指定できるように改善してきました。

今回はYahoo!Pipesのv2エンジンへの移行におけるFlickr2HTMLとYouTube2HTMLの現状と今後について。 | Feelingplaceという問題もあって、そのままでも一応は動いていたYouTube2HTMLの脱Yahoo!Pipes化を行いました。

YouTube2HTMLでできること。

基本的には変わっていませんが、念のためYouTube2HTMLでできることを確認していきましょう。

  • YouTubeの動画を貼りつける埋め込みコードを取得。(リクエストによる埋め込み無効にされているものは除く。)
  • 埋め込みコードは新しい埋め込みコード(iframe)と以前の埋め込みコード(object)の2種類から選択。
  • 脱Yahoo!Pipes&爆速化。(@hiro45jpさんのおかげです。)
  • 動画のサイズ設定はブックマークレット作成時に設定することに変更。(ブログに貼りつける度にサイズ変える人もそんなにいないだろうという判断もあり。)
  • ブックマークレットメーカー対応!(@matubizさん、ありがとう!)

という訳で、Flickr2HTMLに続いてPhotoHtmlの力を借りて爆速化とブックマークレットメーカー対応を果たしました。

ブックマークレットメーカーはこちら。

YouTube2HTMLのブックマークレットメーカーはこちらになります。

Youtube2HTMLメーカー

設定項目を1つずつ確認していきましょう。

Youtube2HTMLメーカー
Youtube2HTMLメーカー Photo by feelingplace

  1. ブックマークレット名
    • ブックマークレットの名前です。覚えやすいように置き換えてください。
  2. 動画の幅
    • 出力する動画の幅を入力します。高さは自動で計算されます。
  3. 出力方法
    • 6種類の中から選択します。Textforceの出力が2種類あるのはこだわりです。
  4. 書式テンプレート
    • カスタマイズも可能です。パラメータ設定などちょっとでも間違えると動かないのでご注意を…。

設定を終えたらBookmarkletを生成するボタンをポチッとします。

下にスクロールすると…

Youtube2HTMLメーカー
Youtube2HTMLメーカー Photo by feelingplace

上の画像のようにブックマークレットのリンクができているので、お好きなところへ登録するだけです。

YouTube2HTMLの使い方。

使い方と言ってもいたってシンプルです。

ブログに貼りつけたいなぁと思う動画のページでYouTube2HTMLを起動するだけ。

リクエストによる埋め込み無効がされていなければ、

http://www.youtube.com
http://www.youtube.com Photo by feelingplace

こんな感じで動画のサイズがちゃんと入って出力されます。

リクエストによる埋め込み無効になっている動画でも結果は表示されますが、動画の幅・高さは取得できません。もちろんそのコードを埋め込んでもブログなどで表示することはできませんのでご注意ください。

ちなみに上の画像で取得したのがこちらの動画。(Object版)

そしてこちらがiframe版。

うーん、やっぱりフォルテかわいいなぁ。

作っていて感じたこと。

Flickr2HTMLを作った後だったんで、結構簡単にできちゃうかなぁと思っていたんですが、とんでもない間違いでした。

いろいろ調べた結果、ボクが使おうとしていたoEmbedだとJSONPは使えないことがわかり、最終的にはEmbedly | Embed any URL through one powerful APIを利用してJSONPで取得するようにしました。

まー、しかしホント、毎度毎度思うんですが、分からないことだらけでも調べていくと何とかなるもんですね。

@N1kuch1さんからiframeとObjectの違いを詳しくってリクエストが来てたんですが、それはまた次回ってことで(^_^;

この投稿へのコメント

コメントはありません。

メッセージをどうぞ!!

この投稿へのトラックバック

  1. […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニューアルしました! | Feelingplace […]

  2. […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ…(via Feelingplace)お待たせいたしました(o_ _)o YouTubeをブログに貼りつけるためのブックマークレット、YouTube2HTMLのリニューアルがようやくできましたので、ここに公開いたします! YouTu …[9] tips ★ […]

  3. Asai’s check No.175 – このタイマーアプリ、精神衛生上にイイかも! | 日記「おいしいお菓子もあります。」 said on 2011年9月14日 at 5:33 AM

    […] feedtailor Inc.(サイズ: …( ^ω^)おっ、アップデートきてる! Tips: YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ…(via Feelingplace)お待たせいたしました(o_ _)o […]

  4. ブログ改造備忘録①:今までブログ回りで触ったところと注意しているところまとめ。 | norirow's Diary said on 2011年11月25日 at 12:17 AM

    […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ… […]

  5. […] YouTubeにアップした動画も検索ハブの内蔵ブラウザで表示させて、@feelingplaceさん作の「YouTube2Html」でするぷろへ貼り付けてます。ホント楽チンだ。 YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ… […]

  6. […] 【Blogger】超絶便利なブックマークレット Focus Html NEOを導入するために僕がしたこと‘Goodbye Cumulus Nimbus’, West Village Skyline, NYC Photo by WanderingtheWorld (www.LostManProject.com) こんにちは@Gaku0318です。 文字通り僕が毎日お世話になっているブックマークレット「Focus Html NEO」を使うために必要なことを僕なりにまとめてみます。 このブックマークレットの作者である @feelingplace さんは他にもこんなブックマークレットを作ってくれています。 食べログの店舗情報をブログに貼り付けるためのブックマークレット | Feelingplace iPhoneからツイッターのツイートをブログに貼り付けられるようにするブックマークレット、Tweet2HTMLをバージョンアップしました。 | Feelingplace Flickr2HTMLで横幅指定ができるように改修しました。 | Feelingplace YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ… […]

  7. […]   YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ… YouTubeをブログに簡単貼り付け     […]

  8. […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ…(via Feelingplace)お待たせいたしました(o_ _)o […]

  9. […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニューアルしました! |Feelingplace […]

  10. […] YouTubeをブログに貼りつけるためのブックマークレット!YouTube2HTMLをリニュ… […]

トラックバック URL