激変するモバイル業界の情報をお届けするメディア

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」が位置付けされるのか興味深いところです。

-Apple
-, ,

スポンサーリンク

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

友だち追加

執筆者:


comment

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

関連記事

truetone

2017年に発売される3種類のiPhoneは「True Tone」ディスプレイを搭載する?

バークレイ投資銀行によると、2017年に発売されるiPhone 7s/7 Plus/8は「True Tone」ディスプレイを搭載するとの予測がたてられました。これは現行の「iPad Pro」に搭載され …

モバイルSuica

「iOS11」ではNFCの利用が大幅に拡張される予定。でもNFCって何?Suicaなの?

2017年秋にリリースされる「iOS11」ではこれまでApple Payでしか利用できなかった「NFC」が大幅に拡張されるとみられています。WWDCでは明らかにされませんでしたが、開発者向けベータ版に …

中古買取のGEOがiPhone修理サービスの事前予約を開始。その前にGEOの修理ってどうなの?

中古ゲームや携帯の買取、販売を行うGEOがiPhone修理サービスをネットで事前予約できるようになりました。その前に、GEOのiPhone修理はどのようなサービスになっているのか、お伝えします。 スポ …

ガラス割れ

「ミスターミニット」でiPhoneのガラス割れが修理できる??

合鍵や靴の修理を行っている「ミスターミニット」。駅の近くなどでよくみかけます。そこでiPhoneのガラス割れが修理できることをご存じでしたか?公式にホームページでアナウンスされています。 スポンサーリ …

iPhone8モックアップ

次期「iPhone 8」についての噂のまとめ

各メディアから次期iPhone 8についての噂がたくさん出ています。あまりにも多くて食傷気味なのではないでしょうか。なぜこんなにも色々な噂が出ているのか、解説も含めて、これさえ読んでもらえれば、わかる …