Video2HTML という動画をブログに簡単に埋め込めるブックマークレットを公開していましたが、どうも調子が悪くうまく動かないことが多々出てきました。

思い切って今回全面リニューアルに踏み切りましたので、今日はその新しいブックマークレットのご紹介をしたいと思います。

リニューアルの理由

これまで同じようなブックマークレットで Video2HTML というものを公開していましたが、少し前から使えなくなっていました。

使えなくなっていた理由は、ブックマークレット内部で利用していたWebサービスの仕様変更。これまでにもたび重なる仕様変更がありその都度対応してきましたが、今回から API の呼び出しに ユーザーkey が求められるようになったため、抜本的に作り直すことにしました。

今回は oEmbed というものを活用しています。

対応サイト

対応サイトは現時点で

• YouTube
• Vimeo
• Dailymotion
• SlideShare
• Instagram
• Twitter

で6つ。とりあえず自分がモブログで使いそうなものは入れたつもりです。

出力サンプル

出力できるものは

• メディア（動画,画像など）
• メディアのサムネイル

の2種類。サムネイルが出力できるものは基本的には動画のみです。

それでは出力サンプルを見ていただきましょう。

YouTube

<img src="https://i.ytimg.com/vi/Mjv64RMVpps/hqdefault.jpg" width="500">

<iframe width="500" height="281" src="https://www.youtube.com/embed/Mjv64RMVpps" frameborder="0" allowfullscreen></iframe>

Vimeo

<img src="https://i.vimeocdn.com/video/464335329_295x166.jpg" width="500">

<iframe src="https://player.vimeo.com/video/86601144" width="500" height="281" frameborder="0" title="Staccal 2 - Icon Redesign" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Dailymotion

<img src="http://s1.dmcdn.net/MdP9x/x240-0xi.jpg" width="500">

<iframe frameborder="0" width="500" height="281" src="http://www.dailymotion.com/embed/video/x2ywrao" allowfullscreen></iframe>

SlideShare

<iframe src="https://www.slideshare.net/slideshow/embed_code/key/baMnPbrTVy1dI" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/tomohirokumagai54/swift-20-49927701" title="Swift 2.0 大域関数の行方から #swift2symposium" target="_blank">Swift 2.0 大域関数の行方から #swift2symposium</a> </strong> from <strong><a href="http://www.slideshare.net/tomohirokumagai54" target="_blank">Tomohiro Kumagai</a></strong> </div>

Instagram

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/5b2KBFuGdn/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">なんでパパはそんなとこにいるの？とソファからのぞき込むフォルテとピアノ。#fp_forte #fp_piano</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">@feelingplaceが投稿した写真 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-07-22T10:29:12+00:00">2015
7月 22 3:29午前 PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

なんでパパはそんなとこにいるの？とソファからのぞき込むフォルテとピアノ。#fp_forte #fp_piano

@feelingplaceが投稿した写真 – 2015
7月 22 3:29午前 PDT

Twitter

<blockquote class="twitter-tweet" width="500"><p lang="ja" dir="ltr">今日は∈( °◎ °
)∋食べられそうにないな</p>&mdash; ふぃーぷれ (@feelingplace) <a href="https://twitter.com/feelingplace/status/624514117546590208">July 24, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

今日は∈( °◎ °
)∋食べられそうにないな

— ふぃーぷれ (@feelingplace) July 24, 2015

Instagram が標準で出力されるコードと違いますが、oEmbed ではこのように出力されるのでご了承ください。

ブックマークレットメーカー

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

予約語

出力に使える予約語は2種類だけのシンプルさ。

名称	予約語
メディア（動画,画像など）	${html}
メディアのサムネイル	${thumbnail}

必要に応じて div や span で囲ってください。

お試しください！！

YouTube だけでなく、他にもいくつかのメディア共有サイトに対応しているので、自分としては使い勝手はいいかなと思っています。

今回は connect1ngdots/AppHtml · GitHub にならって、このブックマークレットも Github に置くことにしました。

機能追加・修正はみなさんのお力を借りてやっていければいいなと思っていますので、まずは1度試していただきたいなと思います(^-^)

Posted from PressSync Pro – WordPress Blogging App – Hiroaki Hayase on iPhone.