前の記事 [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

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

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

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



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


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


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


スポンサーリンク