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

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

関連記事

フリートライアル画面

「App Store」へ不正請求アプリが混入している実態が明らかに。その手口とは?

iPhoneユーザーはApp Storeでアプリを検索します。キーワードで検索すると関連するアプリが表示される「Search Ads」という仕組みを悪用して、無料アプリをダウンロードさせ、高額なアプリ …

押収された部品

非正規のiPhone修理業者が逮捕される。非正規修理にかかるリスクとは…?

産経Westによると京都市下京区の携帯電話修理会社の社長ら四人を逮捕したと京都府警からの発表がありました。容疑は偽のアップルロゴがかかれたiPhoneバッテリーや、充電器を所持していた疑い。非正規にi …

iOS10.2.1でひっそりと追加された便利機能とは?バッテリー交換時期に関するもの。

1月24日に配信された「iOS10.2.1」 主な内容はバグ修正とセキュリティFIXでした。しかし、追加された機能があったのです。それはバッテリーの交換時期に関するものです。 スポンサーリンク バッテ …

price

新「iPad」は順当に進化しつつ、歴代最安値!?今わかっていることをまとめました。

3月25日から発売開始される新「iPad」。Air 2から無印になりました。性能としては順当に進化しつつ、価格も安い。性能面で今わかっていることと、歴代iPadの価格を比較してみます。 スポンサーリン …

iPhone修理は総務省認定業者が値下げ競争でお得!

iPhoneの液晶割れ、非常によくある故障です。AppleCare+に加入していれば、Appleか正規代理店へ持ち込めば交換してくれます。しかし、加入していなければ……。そんなとき、総務省登録の修理業 …