激変するモバイル業界をキャッチアップ

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

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

関連記事

Apple Payに対応するクレジットカードが8社追加。合計20社でさらに便利に。

モバイル決済サービスの黒船「Apple Pay」が好調な滑り出しをみせています。 3月1日にはさらに8社のクレジットカードがApple Payに対応しました。 スポンサーリンク 新たに対応したクレジッ …

iPhone

Apple、非正規の修理でiPhoneを利用不可にするアップデートは、不当だと訴えられる。

オーストラリアの公正取引委員会(ACCC)がアップルを訴えました。これは日本にも関係してくる話になるかもしれません。これは非正規の修理をしたiPhoneがアップデートによって「文鎮化」され使えなくなる …

iphone

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

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

clips4

Apple渾身の動画作成アプリ「Clips」を早速使ってみた。これはすごい!楽しい!

3月21日に突然発表されたApple制作の動画作成アプリ「Clips」。正式にリリースされましたので、早速使ってみました。これはすごい。とても簡単という言葉では済まないほど、新しい体験として動画を作成 …

AppleのIR情報画面

次期iPhoneの噂が原因か?AppleのQ2決算が予測を下回る。

第二四半期におけるApple決算が発表されました。予測は売上530億ドルに対して、決算の売上は529億ドル。わずかな差で株価は1%下がりました。わずかな差ですが、数分間で数十億ドルが消えるという大きな …