YouTubeの動画をブログに貼りつけるためのブックマークレット、YouTube2HTMLをバージョンアップ!出力をiframeタグとobjectタグの2種類から選択可能になりました!さらに…。

2011/09/19追記

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

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

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

はじめに。

YouTubeの動画をブログに貼りつけるためにはそれなりの手間が掛かります。

共有をクリックして、その他モゴモゴしてクリックを繰り返してようやくコードを取得できるようになります。

iPhoneからだとデスクトップ用のページに移管しないと取得すらできません。

それらを簡単に済ませようとしたのが今回のブックマークレット、YouTube2HTMLです。

YouTube2HTMLとは?

YouTube2HTMLとは前述した通りYouTubeの動画をブログに貼りつけるためのHTMLコードを取得するためのブックマークレットです。

今回バージョンアップにあたり、いくつか機能追加をしました。

YouTube2HTMLでできることは以下の通りです。

  • YouTubeの動画ページからブログに貼りつけるためのHTMLコードを取得。
  • デスクトップからでもiPhoneからでも取得可能。
  • iframeタグ(現在最初に表示されるコード)とobjectタグ(以前使われていたコード)の2種類から選択可能。Add!
  • 動画のサイズを任意で指定することが可能。Add!
  • iPhoneアプリとの連携をブックマークレット内で任意に変更可能。Add!

*このブックマークレットはYahoo!PipesでoEmbedを利用してデータを取得しています。元データの出力形式が変更になった場合、突然動かなくなることもありますのでご了承ください。また、YouTubeで共有が許可されていない動画のHTMLコードを取得することは可能ですが、貼りつけても動画を表示することはできませんので、あらかじめご承知おきください。

YouTube2HTMLの使い方。

いろいろ書いてもわかりにくいと思うので、スクショと動画で使い方のデモをしてみましょう。

デスクトップの場合。

まずはYouTubeの貼りつけたい動画のページへ行きます。

スクショ1
flickr.comスクショ1 Photo by feelingplace

ここでブックマークレットを起動!

スクショ2
flickr.comスクショ2 Photo by feelingplace

動画の横幅をいくつにするか聞いてくるので入力。(単位はpx。デフォルトは480pxです。)

スクショ3
flickr.comスクショ3 Photo by feelingplace

プロンプトにHTMLコードが表示されるのでコピー。

スクショ4
flickr.comスクショ4 Photo by feelingplace

後はお使いのエディタで編集するだけ。

たったコレだけ。簡単にYouTubeの動画を貼りつけることができました。

iPhoneの場合。

iPhoneでもやることは同じです。

YouTubeの貼りつけたい動画のページへ行き、

1000000191
flickr.com1000000191 Photo by feelingplace

ブックマークレットを起動!

1000000192
flickr.com1000000192 Photo by feelingplace

動画の横幅を入力。

1000000193
flickr.com1000000193 Photo by feelingplace

プロンプトにHTMLコードが表示されるのでコピー。

1000000194
flickr.com1000000194 Photo by feelingplace

後はお使いのエディタで編集するだけ。

どうですか?簡単でしょ?

YouTube2HTMLの設定。

YouTube2HTMLを自分用にカスタマイズするためにブックマークレット内にいくつか設定項目を用意しました。

  • fmt = 動画出力タグの選択。1がiframeタグで、2がobjectタグ。
  • def = 動画の横幅。デフォルトは480。(単位はpxです。)
  • app = アプリ連携用URLスキーム。詳細は後述します。

この3つを自分用に変更すればオッケーです。

ブックマークレット本体はこちら

大変申し訳ないんですが、iframeタグを含んでいるためにうまくリンクが貼れないので上記のリンク先で表示されるコードをコピーしてお使いください。

iPhoneアプリとの連携。

設定項目ですっ飛ばしたappの説明です。

URLスキームをここに入れることにより任意のiPhoneアプリと連携が可能になります。

URLスキームについては@matsubizさんが詳しく書かれているので、そちらをご覧ください。

それでは、まずTextforceです。

Textforce – Dropbox text editing 2.1 for iPhoneApp
カテゴリ: 仕事効率化 価格: ¥450
更新: 2011/03/09

app =”の”の中にtextforce://と書いてください。(’textforce://’となるはずです。)

その後これまでと同じようにYouTube2HTMLを使うだけです。

これはデモ動画を見ていただきたいと思います。やったのはiframe版です。

ブックマークレット終了後にTextforceが起動し、TextforceにHTMLコードを貼りつけている様子がお分かりいただけたでしょうか?

URLスキームが設定されているiPhoneアプリであれば、他のアプリでも同じ動作が可能になります。

Macアプリとの連携。というか、MarsEditとの連携。

Flickr2HTMLでもやりましたが、MacのアプリでもURLスキームによる連携が可能のようです。

MarsEditの場合、”の中にmarsedit://と書いてください。

これもデモ動画を置いておきます。起動したのはobjectタグ版です。


動画で見ると大したことないですが、実際自分で動かしてみると初めてやる時は感動しましたよ。

最後に。

YouTubeが貼りつける動画のHTMLコードを変更しない限りはかなり使えるブックマークレットに仕上がったかなと自分では思っています。

ブログに動画をたくさん貼りつけるブロガーのみなさま、ぜひお使いくださいませ。

最後の最後。

YouTube2HTML改修にあたり@nori510さんのエントリーをヒントにさせていただきました。アドバイスもいただき、ありがとうございました。

 

 

この投稿へのコメント

コメントはありません。

メッセージをどうぞ!!

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

  1. […] New YouTube2Hmlを使ってみました 投稿日: 2011/04/23 作成者: kuracyan   YouTube2HTMLをバージョンアップ! | Feelingplace […]

  2. D’s Focus ダイジェスト版【20110423版】〜 iPhone4/5/6 噂揃い踏み | 覚醒する? @CDiP said on 2011年4月23日 at 8:17 PM

    […] ◇ YouTubeの動画をブログに貼りつけるためのブックマークレット、YouTube2HTMLをバージョンアップ!出力をiframeタグとobjectタグの2種類から選択可能になりました!さらに…。 (via Feelingpla […]

  3. […] YouTubeの動画をブログに貼りつけるためのブックマークレット、YouTube2HTMLをバージョンアップ!出力をiframeタグとobjectタグの2種類から選択可能になりました!さらに…。 […]

トラックバック URL