読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログから簡単にVine動画を埋め込めるプラグインでスマホからのグルメ動画レポートが捗る

はてな公式で対応しました(2016/2/17)

 以下の記法でイケます。

https://vine.co/v/OqTE5BwBqml:embed

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

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

Vine

Vine

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

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

https://vine.co/v/OqTE5BwBqml

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

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

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

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

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

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

プラグイン設置方法 

f:id:bulldra:20141025180523j: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">
runVineEmbed(480, 300, 480);
</script>

 設定方法は以下の通り。

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

使用方法

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

https://vine.co/v/OqD7TiVVdqx

 エントリ内の↑が↓のように表示される。本文を書いたり、複数のVine動画を貼り付けてももちろん大丈夫。この記事自体でも動かしている。

https://vine.co/v/OqD7TiVVdqx

まとめ

 そんなわけで、はてなブログで簡単にVine動画を埋め込めるようになるプラグインを作った。Youtubeみたいに作りこんだものじゃなくて、気軽に撮って気軽に観れる感覚が気持ち良い。焼き肉炎上パーティの時も豚トロが炎上している動画を撮っておけばよかったな。今後はVine動画でのレポートも増えていく気がする。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

僕の仕事は YouTube

僕の仕事は YouTube