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

Apple

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

投稿日: コメント (0)



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
-, ,

スポンサーリンク


comment

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


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

友だち追加

関連記事

あなたのiPhoneが遅くなったのは「iOS11」のせいではない

かなりのユーザーがiOS10からiOS11へアップデートするようになりました。そこで毎回聞こえてくるのが「iPhoneの動作が遅くなった」。これは本当にiOS11のせいなのでしょうか。データをみながら …

iPhone8Plusの写真

「iPhone 8 Plus」のカメラが過去最高評価をマーク!

各種カメラの評価を行なっている「DxOmark」がiPhone 8 Plusのカメラ性能について、「今までテストしたスマートフォンカメラで、過去最高のものだ」という評価をしています。作例も含めてどんな …

icloud

iOS&macOSユーザーはiWorkやiMovieが無料に。iPhoneユーザーにPagesをオススメするたった1つの理由。

これまで、新しいiPhoneなどでは無料で利用できたiWork(Pages、Numbers、Keynote)、iMovieおよびGarageBandが全てのiOS、macOSで無料となりました。その中 …

popup

iOS10.3でひそかに大きな改善が。ブラウザのSafariが「身代金ウィルス」にかからない設計に。

Appleは3月27日にiOS10.3をリリースしました。大きな変更点としては、AirPodsを探す、Siriの改善、ファイルシステムの変更などですが、その陰にかくれてブラウザ「Safari」の設計変 …

【iOS11】iPhoneの画面や音楽をパソコンの大きい画面でみる方法

iPhone SEなどの小さな画面のiPhoneを使っていると、ゲームの細かな字などが読みにくいかもしれません。そうでなくても大きな画面でiPhoneの画面をみたいシチュエーションがあるでしょう。また …