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

2011/09/19追記

検索エンジンなどでこのページにたどり着いたみなさまへ。

ブックマークレットの最新版はブックマークレット | Feelingplaceに置いてあります。

大変お手数ですが、上記のリンク先をご覧いただきますようお願いいたしますm(_ _)m

YouTubeの動画をブログに貼りつけるブロガーさんはボク以外にもたくさんいると思います。

iPhoneからYouTubeを見ると、iPhone用に最適化されたページが表示されて見るだけなら快適なんですが、ブログに貼りつける為のHTMLをコピーしようとすると、デスクトップ用のFlickrに切り替えないとHTMLすら確認できません。

そこで、YouTube(チャンネル以外)からブログに貼りつける為のHTMLを生成するBookmarkletを作ってみました。

iPhone(iPad)からYouTubeの動画を貼りつけようととすると、いくつもステップを踏まないといけませんでしたが、これだと一発でHTMLが生成できます。

まずはデモをしてみましょう。

スクショ3
スクショ3 Photo by feelingplace

このBookmarkletをYouTubeのチャンネル以外のページで使うと…

スクショ4
スクショ4 Photo by feelingplace

こんな感じにブログに貼りつけるためのHTMLがプロンプトに表示されます。

スクショ5
スクショ5 Photo by feelingplace

iPhoneに最適化されたページで使っても…

スクショ7
スクショ7 Photo by feelingplace

こんな感じでブログに貼りつけるためのHTMLがプロンプトに表示されます。

どちらも生成されるHTMLは同じです。

実際にプロンプトに表示されたHTMLをコピーして貼りつけてみると、

こんな感じになります。

Bookmarkletはこちら。

というようにリンクを貼りたかったんですが、タグにiframeが含まれているせいかうまく貼れないのでテキストファイルを置いておきます。

YouTube2HTML

YouTube2HTML(Textforce)

(TextforceのATOK Pad連携版も作りたかったんですが、どうもうまく行きません。どなたか作っていただけると助かります(_ _)。)

以前作ったFlickr2HTMLのようにテンプレートを作って自由にカスタマイズできるようにしたかったんですが、Yahoo!Pipes側で安全を確保するために処理してしまうようなので固定にしました。

Pipes側の説明については以下をご覧ください。

出力されるHTMLは現在YouTubeで提供されているベータ版のiframe埋め込みコードをベースにしてあります。

動画のサイズはYouTubeAPIのoEmbedを利用して取得しています。

PC版から取ってくるよりも若干小さめのサイズにはなりますが、iPhoneからでもHTMLタグを生成できるようになるっていうのが1番の利点ではないでしょうか。

自分で試して範囲ではちゃんと動いていますが、不具合等ありましたら@feelingplaceまでTwitterでご連絡いただけると助かります。

すぐにお返事・修正は掛けられないかも知れませんが、できるだけ対応したいと思いますのでよろしくお願いいたします。

YouTubeAPIのoEmbedで出力されるデータが変わったら、このBookmarkletも修正する予定です。

これでボクも思う存分ウチのフォルテの動画をアップできるようになります(^_^)

この投稿へのコメント

コメントはありません。

メッセージをどうぞ!!

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

  1. […] This post was mentioned on Twitter by fp_rss, feelingplace, ナカエリョウ, feelingplace, feelingplace and others. feelingplace said: ブログ書いた。: YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成する […]

  2. […] Feelingplace « YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。 […]

  3. kuracyan’s check 2010/12/19 Singer Song iPhone said on 2010年12月19日 at 12:25 PM

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

  4. D’s Focus【20101219版】〜Youtubeを簡単にブログに貼り付けられるBookmarklet! | 覚醒する? @CDiP said on 2010年12月19日 at 6:51 PM

    […] ◆ とみくんの日記 〓独楽〓 ☆ iPhoneでYouTubeをはてなダイアリーに貼る ◆ Feelingplace YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。… […]

  5. 2010年12月のまとめ。 | Feelingplace said on 2011年1月3日 at 2:16 AM

    […] YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。… […]

  6. […] YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。 […]

  7. D’s Focus【20101219版】〜Youtubeを簡単にブログに貼り付けられるBookmarklet! | iPhone 研究室(iPadもね) said on 2012年2月10日 at 2:15 PM

    […] ◆ とみくんの日記 〓独楽〓 ☆ iPhoneでYouTubeをはてなダイアリーに貼る ◆ Feelingplace YouTube(チャンネル以外)からブログに貼りつけるHTMLを生成するBookmarklet。… […]

トラックバック URL