iPhone の動く写真を Web でも表示できる！「LivePhotosKit JS」を試してみた

iPhone 6s から撮影できるようになった「動く写真」こと Live Photos がウェブサイト上での表示に対応しました！

今回、Apple が公式に API を提供開始したことにより、簡単な HTML コーディングだけで Live Photos を自分のウェブサイトに埋め込めるようになっています。

というわけで、早速この LivePhotosKit JS を試してみました。

ご存じの方も多いかと思いますが、簡単におさらいしておきましょう。
この Live Photos は、iPhone の「カメラ」アプリで LIVE モードを選択しておけば

• 静止画
• シャッターを押す前後1.5秒ずつ（合わせて3秒間）の動画

がセットになって撮影されるというものです。

撮った Live Photos は「写真」アプリ内で普通の写真として閲覧でき、長押しすると動画で再生されます。

このように、普通にシャッターを切るだけで動く写真が撮れるという魅力はありながらも

• iPhone や Mac など特定のデバイスでしか再生できない
• Web 上では、Tumblr や Google フォトなど特定のサービスしか再生に対応していない

といった難点を抱えていました。

しかし、これからは LivePhotosKit JS を使って、ウェブページ上での再生が可能になるというわけです。

百聞は一見にしかず、ということで実際に作ってみたサンプルをご覧ください。

See the Pen LivePhotosKit by gtad (@gtad) on CodePen.

PC では右上の「LIVE」マークにマウスカーソルを合わせることで、スマホでは画像を長押しすることで動画が再生されます。

マークアップは至ってシンプルです。
ご覧いただいたサンプルのような形式であれば、JavaScript を一行も書くことなく実装できます。

また、HTML の属性で指定できるオプションとして

• data-shows-native-controls=“false” → 右上の LIVE マークを非表示にする
• data-proactively-loads-video=“true” → 事前に動画をロードする

といったものが用意されています。

ちなみに、3秒間の動画でも 3MB 前後の容量があります。そのため、動画の先読み設定なしだと再生までにそれなりにタイムラグを感じます。
これを回避できるのが「data-proactively-loads-video=“true”」です。

乱用はユーザーの通信容量を無駄遣いする恐れがあるので避けるべきですが、再生してもらえる可能性が高い場所ではこのオプションを指定しておきたいですね！

また、独自の動画コントロールやエラー処理といった高度な実装をしたい場合は、JavaScript を書く必要があります。
興味のある方は、リファレンスに目を通してみてください。

• 表示するだけならすごく簡単！
• HTML 属性だけでも多少のカスタマイズができる
• iPhone で撮影するだけなので、動画やアニメ GIF より素材の作成が楽

• iPhone から一度 PC に Live Photos を取り込むのが少し手間に感じる
• マウスオーバーで再生開始というのが若干わかりにくいかも……

想像していたよりも簡単に、ウェブページへ埋め込めることが分かりました。
まだ、この Live Photos を使用しているウェブサイトは少ないので、うまく使えば目を引くことができそうです。
手軽にウェブページへ動きのあるコンテンツを取り入れたい方は、ぜひ一度お試しください！