iPhoneの「Live Photo」をあなたのブログにも!AppleのJavascript APIの使い方を解説。

Apple

iPhoneの「Live Photo」をあなたのブログにも!AppleのJavascript APIの使い方を解説。

投稿日:

参考になったらシェアお願いします!


iPhoneに新機能として搭載されている「Live Photo」機能。写真を撮った前後1.5秒づつを保存しておき、アルバムでは写真として、長押しすれば動画としてみられる機能ですが、SNSなどではほとんどみられません。そこでAppleは公式のJavascript APIを公開しました。しかし、利用がちょっと面倒なので、使い方を解説します。

スポンサーリンク

まずは、Live Photoの書き出しから

Live Photoは画像と動画の組み合わせから出来ています。普通に画像を取り込むと、ただの画像になってしまいます。例えば、Macの写真アプリからだとこのように書き出します。

「オリジナルを書き出す」を選択することで、「mov」と「JPG」のファイルが保存されます。Windowsなどを使っている場合など、公式の説明はこのようになっています。

save3
save2
筆者は写真アプリをiCloudアルバムと共有して、iPhoneからMacへ転送しました。

HTMLで実際に表示させる

Appleのデベロッパー向けサイトではこのようなコードがサンプルにあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>
<body>
<div
data-live-photo
data-photo-src="https://..."
data-video-src="https://...">            
</div>
</body>
</html>

「DIV」がこのように拡張されます。「data-photo-src」には先ほどのJPGを、「data-video-src」にはmovを指定すれば良いようです。が!ちょっとはまりました。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>
<body>
<div style="height:640px"
data-live-photo
data-photo-src="test.jpg"
data-video-src="test.mov"></div>
</body>
</html>

一緒なのですが、「DIV」の高さを明示的に指定しています。「IMG」のように勝手に表示してくれるものかとおもったのですが、指定しないと0pxのDIVになってしまう……。

実際に動作させてみたのが、下記になります。「LIVE」ボタンにマウスカーソルを持っていくと、Live Photoが動きます。iPhoneの場合は「LIVE」ボタンを長押しすれば動きます。余談ですが、琵琶湖の湖岸です。北の方へ行くと綺麗なんですよー。

Live Photoのこれから

そもそも、iPhoneに「Live Photo」機能があることを知らないユーザーの方が多いのではないでしょうか。しかし楽しい機能なので、今後、TwitterやInstagramに実装されるの良いのですが、編集を考えると難しいかもしれません。世界的にSNSが動画に移行している中、どのように「Live Photo」が位置付けされるのか興味深いところです。

The following two tabs change content below.
奥村卓也

奥村卓也

通信事業者のネットワークエンジニアとサービスクリエーションに従事した後、フリーランスの道へ。趣味はVespa Vintage 100で旅に出ること。人生はMacとiPhoneとVespaで出来ている。
参考になったらシェアお願いします!

-Apple
-, ,

スポンサーリンク

最新ニュースをLINEでお届け!

友だち追加

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

イギリス・マンチェスターでの自爆テロの中、iPhone 6が女性の命を救っていた…!

アリアナ・グランデさんのコンサート公演後のマンチェスターで、自爆テロが発生し22人が死亡しました。現在もその被害が伝えられてきます。アリアナさんはツアーを一時中断し、マンチェスターでの慈善公演を行うと …

【iPhone】「iOS11」のアップデートが早くもリリース。

9月23日にリリースされた「iOS11」。バッテリーの消費が多すぎると話題になっていますが、早くもそのアップデート「iOS11.0.1」がリリースされました。このリリースに関する詳細な説明はなく、バグ …

iOS11「ARKit」のすごいデモをピックアップ。初音ミクが自分の部屋で踊る!?

デベロッパー向けにリリースされたiOS11「ARKit」。リリースからしばらく経ち、高度なデモ動画が続々と登場しています。その一部をご紹介。また、IKEAがAppleと共同でARアプリを開発していると …

ポケモンGOのプレイ画面

「WWDC 2017」でiPhoneの新機能「AR(拡張現実)」を発表。Appleの本気度をみた!!

AppleはiPhoneやiPadの次期OSである「iOS11」に新たな開発環境「ARKit」を提供すると発表しました。iOS11は数億のiPhoneやiPadで動く「世界最大のARプラットフォーム」 …

iOS11の「ARKit」アプリをiPhoneで早速使ってみた!!

iOS11の正式版がリリースされ、まだアップデートしていないユーザーも多いかもしれません。今回のiOS11で一番大きな変更点は「ARKit」が含まれていることではないでしょうか。iOS11と同時に使え …