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

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

関連記事

ひねる動きに追従する様子

ARで表示された物体を直接「手」で操作する!

AppleがiOS11で実装する「ARkit」とモーショントラッキングデバイス「LeapMotion」を組み合わせて、ARで表示された物体を手で操作するデモが公開されました。ARの物体を直接操作できる …

緊急SOS画面

iOS11の「緊急SOS」ではTouch IDをオフにできる。警察への対抗処置?

アメリカでは旅行者に対して、iPhoneの指紋認証でロックを解除することを強要することがあります。iOS11の「緊急SOS」ではTouch IDを瞬時に無効にし、パスコードで守ることができます。これは …

ポケモンGOのプレイ画面

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

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

iphone

大手キャリアのiPhoneで格安SIMを使うときの注意点。意外な制約も?

最近は格安スマホという言葉がよく聞かれるようになり、格安SIMに移行すると同時に安いスマホを購入するケースが増えています。しかし、iPhoneが使いたいユーザーはかなり多いはず。大手キャリアのSIMロ …

iPhoneX

iPhoneの10周年スペシャルモデル「iPhone X」は9月に発売される可能性が高い!?

次期iPhoneの高級モデルは「iPhone8」「iPhone Pro」「iPhone X」など様々な名前が予測されています。iPhone発売開始から10周年を迎える記念モデル。その発売は9月になるだ …