Yet Anotherな「Live Photos」の鑑賞方法

iOS 9で登場した「Live Photos」は、静止画と動画の融合形だ。対応する端末はiPhone 6s/6s Plus以降、カメラアプリでLIVEモードを選択すると、シャッターを切る前後の約1.5秒、あわせて約3秒の動画を静止画とともに記録できる。シャッターを切るときの効果音がやや控え目なため、周囲の迷惑にならないよう気を使う場面で利用されることもあるが、鮮明な静止画を撮りつつ動きも出せるという"いいとこ取り"なところが最大の評価ポイントだ。

しかし、Live Photosは扱いがやや難しい。MacではOS X El Caitan(v10.11.4)以降、QuickLookや「写真」で表示可能だが、iCloudフォトライブラリまたはUSB経由で転送しなければならない。iOSデバイス同士でやり取りする場合でも、対応機種以外へ送信すると動画部分が失われてしまい、ただの静止画になってしまう。

iOSデバイスからバックアップしたデータについても同じことがいえる。カメラロールの内容を自動バックアップするアプリを用意した(Lightning接続の)外部メモリがいくつも販売されているが、筆者が知る範囲ではLive Photosを扱えず、静止画/動画はそれぞれ独立したファイルとして保存される。メタデータに含まれるUUIDさえ失われていなければ、静止画と動画のひと組を写真アプリ(Photos.app)へドラッグ&ドロップすると復元できるが、Mac以外で鑑賞できないことは変わらずだ。

Live Photosが登場してから1年以上経過し、こういうものかと半ば諦めかけていたところ、Appleが「LivePhotosKit JS」を公開した(リンク)。名称からお察しのとおり、Live Photosを扱うためのJavaScriptライブラリだ。主にWEBデベロッパー用だが、これをうまく使えばローカルで動作するちょっとしたLive Photos鑑賞ツールを用意できる。「写真」も「QuickLook」も必要なし、サポート対象のWEBブラウザ(Safari/Chrome/Firefox/Edgeなど)が動作するデバイスさえ用意すればいいところがうれしい。

iOS 9からサポートされた「Live Photos」

Photos.appでLive Photosを表示したところ。LIVEボタンにマウスオーバーすると、静止画が動き出す

LivePhotosKit JSを動かす

LivePhotoKit JSを動作させるには、LivePhotoの構成要素である静止画(JPEG)と動画(MOV)の2つが必要。メタデータに含まれるUUIDが共通である必要はないが、元は同じLivePhotosであることが前提だ。

もうひとつ忘れてはいけないのが、HTMLとJavaScriptを実行するWEBサーバ。macOS Sierraには「Apache」が収録されているため、以下のとおり設定ファイル(/etc/apache2/httpd.conf、/etc/apache2/extra/httpd-userdir.conf)を書き換えたうえでサービスを再起動(sudo apachectl restart)すれば動作するが、Live Photosを閲覧するためだけにApacheを常時稼働させるのはいかがなものか。

・/etc/apache2/httpd.conf

166 #LoadModule userdir_module libexec/apache2/mod_userdir.so
503 #Include /private/etc/apache2/extra/httpd-userdir.conf
    ↑
行頭にある「#」を削除し上書き保存



・/etc/apache2/extra/httpd-userdir.conf

16 #Include /private/etc/apache2/users/*.conf
   ↑
行頭にある「#」を削除し上書き保存

Apacheの設定は面倒だし過剰、とりあえずLivePhotosを鑑賞できればOK、という場合には「コマンドライン1行で実行できるWEBサーバ」を使おう。macOS Sierraの場合、標準装備のPythonにはWEBサーバモジュールが付属しているので、それを利用するとかんたんだ。Terminalを起動し、以下のとおりコマンドを実行しよう。

$ python -m SimpleHTTPServer

もちろん、WEBページのHTMLも必要だ。ヘッダー部分にLivePhotosKit JSをロードするための記述と、これを呼び出すための記述(本文中の<div>～</div>、JPEGファイルを「data-photo-src」、MOVファイルを「data-video-src」のデータ属性に指定する)があれば、とりあえず閲覧できる。なお、ファイル名は静止画が「photo.JPG」、動画が「movie.MOV」で決め打ちとし、index.htmlと同じディレクトリに保存したうえで、そこをカレントディレクトリとして前述のpythonコマンドを実行すること。

これで、同じMac上で動作するWEBブラウザ(サポートされるのはSafari/Chrome/Firefox)から「http://localhost:8000」にアクセスすれば、Live Photosとして鑑賞できる。PCのWEBブラウザは「LIVE」アイコン部分をマウスオーバー、iOS/Android端末のWEBブラウザは静止画部分をタップすると、Live Photosらしく動画が動き出すはずだ。

・index.html

<html>

<head>
    <title>LivePhotosをブラウザで!</title>
    <meta charset="utf-8">
    <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>

<body>
    <h1>LivePhotosをブラウザで!</h1>
        <div
            data-live-photo
            data-photo-src="./photo.jpg"
            data-video-src="./movie.mov"
            style="width: 1024px; height: 768px">
        </div>
</body>

</html>

「python -m SimpleHTTPServer」を実行中の間は、WEBサーバとして動作する。停止するにはControl-Cを押す

macOSのSafariで「http://localhost:8000」にアクセスしたところ。LIVEボタンにマウスオーバーすると、カモメが動き出す

iOSのSafariで「http://mbair.local」(MacのBonjour名)にアクセスしたところ。画像の適当な位置をタップするとLive Photosとしての本領を発揮する

Android OS上で動作するChromeからアクセスしたところ。操作感はiOSのSafariと変わらない