Vine動画をはてなブログから簡単に扱いたい

　いま、『Vine』がアツい。Vineとは写真感覚で6秒間の動画を撮って共有するサービスである。ステーキのシズル感を表現したり、旅行先の風景を撮ったり、ネタ動画をループさせたりが気軽に出来る。

Vine Labs, Inc.
写真／ビデオ
無料

　ブログとの親和性も高くて、『6秒動画「Vine」は思い出消費ブロガーにぴったり : Blog @narumi』などでも紹介されている。スクリプトの動作を直感的に紹介するのにも最適である。

モブログでVine動画を扱うのは捗らなかった

　だけどVine動画をブログに貼り付ける時に、アプリから埋め込みコードを取得できないから、一旦ウェブ版で表示させる必要があるし、取得したコードをそのまま使うと画面サイズとフレームの関係でスマートフォンで見た時に大きな空白が出来たり、毎回スクリプトへのリンクを貼る必要があったりして捗らない。

はてなブログから簡単にVine動画を埋め込めるプラグイン

　Vine動画こそ気軽にモブログ更新していきたいわけで、以下の機能要件を定義した。

VineのiPhoneアプリからほぼシームレスにブログに貼り付けられること
PCで見た時には大きく表示して、スマートフォンで見た時には小さく表示すること

　これを実現するため、ブログのエントリ内でVineへのリンクを見つけると画面サイズに適した埋め込みコードに変換するプラグインを作った。画面をロードし終わってから変換するので僅かなタイムラグがあるけど、ほとんど気にならない・・・はず。

プラグイン設置方法　

f:id:bulldra:20141017102848j:plain

　ブログデザイン内のヘッダーまたはフッターに以下のスクリプトを配置。ソースコードは『bulldra.github.io/vine.js at master · bulldra/bulldra.github.io · GitHub』に公開。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/vine.js" charset="utf-8"></script>
<script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<script type="text/javascript">
google.setOnLoadCallback(function(){ runVineEmbed(480, 300, 480); });
</script>

　設定方法は以下の通り。

google.setOnLoadCallback(function(){ 
  runVineEmbed(スマートフォン判定に使う画面横幅(px), スマートフォン表示時サイズ(px), PC表示時サイズ(px)); 
});

使用方法

　Vineアプリの動画で「↑」→「その他のオプション」→「リンクをコピー」でパーマリンクを取得して、ブログにURLを貼り付けるだけ。あとは勝手に埋め込み表示される。PCだと音声なしで自動再生するのでGIF画像感覚。

https://vine.co/v/OqD7TiVVdqx

　エントリ内の↑が↓のように表示される。

https://vine.co/v/OqD7TiVVdqx

まとめ

　そんなわけで、はてなブログで簡単にVine動画を埋め込めるようになるプラグインを作った。Youtubeみたいに作りこんだものじゃなくて、気軽に撮って気軽に観れる感覚が気持ち良い。『ブログの炎上に飽々としてきたので吉祥寺で焼き肉炎上パーティをしてきた - 星がまたたいたから』の時も豚トロが炎上している動画を撮っておけばよかったな。今後はVine動画でのレポートも増えていく気がする。