前の記事 [iPad / iPhone] 360 Panorama アプリで旅の記録をする で、iPhone / iPad の 360 Panorama アプリでパノラマ写真の撮り方を書きました。


360panorama01

この写真を、ブログなどの Webページに埋め込む方法を記載します。


単純に横に伸びたパノラマ写真を載せたり、URL リンクを載せるのではなく、Webページに埋め込んでマウスで横にスクロールできるよう載せるため、記事内容を有効に見せながら、360度の感覚をサイトの読者に伝えることができますよー。


360 Panorama アプリで撮った写真を Webページに埋め込む方法

  1. 360 Panorama アプリを使ってパノラマ写真を撮り、アカウントを登録して Upload します。アプリの操作方法が不明な場合は、 [iPad / iPhone] 360 Panorama アプリで旅の記録をする を参考にしてください。

  2. ブラウザで http://occipital.com/account/panoramas にアクセスします。

  3. 埋め込みたい写真の右側にある Embed をクリックします。
    4. 360panorama_embed01

  4. 写真の左下に埋め込む用の javascript (<script 〜 で始まる文字列)が生成されるので、それをコピーします。
    5. 360panorama_embed02

  5. 表示させる Webページの HTMLソースにコピーした javascript を貼り付けます。

これだけ！ これだけで以下のように埋め込まれた形で表示されます。



表示された写真をマウスでなぞれば 360度写真が回ります！(上の写真は 180度までしか撮りませんでしたが 汗)


この写真をもとに書いた記事が 北海道に行ってきた④ ～釧路湿原を散歩 何もなくて気持ちよい～ です。訪れた先の景色をブログで伝えるのにはもってこいですね！


360 Panorama (Version 4.2) App
カテゴリ: 写真／ビデオ
価格: ￥85 (記事公開時)


スポンサーリンク