ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iOSの新機能であるLive Photoは多くのサービスに影響を与えました。Tumblrもその一つです。Tumblr for iOSでは2015年12月からサポートされていましたが、Webブラウザでは長らく対応していませんでした。

それがついに対応しました。その機能はLaphs(Tumblr製)を使って実現されています。

Laphsの使い方

Laphsでは次のようにHTMLを記述します。

<img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/>

Laphsを読み込むとLive Photo対応の写真に対してLive Photoのアイコンが追加表示されます。それをマウスクリックすると動画が読み込まれて再生される仕組みです。

ちょっと拡大されて表示されるのがユニークです。この方法であればマウスをクリックし続けるまでは動画は読み込まれないので帯域に優しいのが利点です。また、WebベースであればAndroidやデスクトップでも楽しめるようになります。

LaphsはJavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

Home - Documentation

tumblr/laphs: Apple Live Photo support on the web, courtesy of Tumblr

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2