360度画像をWordPressのサイトに埋め込んでみたい！
どうも、Linです。日光を呼び寄せてます。
勢いで、360度動画・画像を簡単に撮影できる、
Gear360
を購入。
さっそく、アイアンマンの像を撮影しに行ってみました。
撮れた写真は次のものです。
「あれ、これが360度画像なの！？」
「詐欺にあったんじゃね？」
という声がちらほら聞こえた来そうですが、これは360度画像の元データ。
360度画像として閲覧するためには、スティッチングという作業が必要です。
縫い合わせて360度画像を作らないといけないのですね。
今日は、このスティッチングという作業をWordPressのサイト上で行い、
綺麗に360度画像を表示できるプラグインを発見してしまったので、使い方を忘れないうちにメモしておきます。
WordPressのサイトに360度画像を表示できるプラグインの使い方
360度画像をWordPressのサイトに埋め込んでいきましょう。
Step1. 「WP-VR-view」というプラグインをダウンロード
まずは、360度画像をWordPressのサイトに埋め込めるプラグインをダウンロードしていきます。
プラグインの新規追加画面から、
「wp vr」
と検索してみましょう。
一番上に、
「WP-VR-view」
というプラグインが見当たりませんか？？
おそらく、たぶん、安全なプラグインですのでダウンロード。
そのまま有効化してしまってください。
Step2. 360度画像をアップロード
次に、撮影した360度画像をワードプレスのメディアにアップロードします。
よっこらせ。
Step3. VR Imageマークを選択
いざ、WordPressの投稿画面へ。
編集ツールの中に、新しく、次の2つのアイコンが追加されていることでしょう。
今回は360度画像を追加したいので左の「VR Image」をクリック。
Step4. ソース追加
すると、次のような設定画面が表示されます。
先ほどアップロードした360度画像のソース先のURLを「PhotoSphere image URL」という欄に追加していきましょう。
ここでいうURLはメディアを追加する際に出現する「URL」のことですよ。
URL追加が終わったら下の「INSERT」でいざ、360度画像を挿入です。
すると、次のようなコードが現れることでしょう。
このコードの部分に360度画像が表示されることになります。
うまく行くとこんな感じですね↓↓
ジャイロ付きのスマホなら、スマホを動かして画像を楽しむことができます。
ぜひ、アイアンマンを探してみてください。
ちょっと境界部分がスティッチングしきれてない部分が散見されますが、一旦最低限埋め込めた気がします笑
360度画像をWordPressのサイトに埋め込みたい方はよかったら試してみてくださいね。
追記
やっとステッチングをマスターしました！
原因は、先ほどまでSDカードから直接360度画像のローデータを取り出していたことでした。
一旦、アプリの方で保存してこのような長方形の画像に変換してやると、うまく切れ目なく表示できるみたいです。
これで好きなだけ360度画像をワードプレスのサイトに埋め込めますね！
こんな感じでGear360で撮影した360度画像は簡単にWordPressの記事内に埋め込めますので、よかったらGear360を試してみてくださいね。
それでは！
Lin
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。好きな映画は「メリーに首ったけ」
>>Twitterをフォローする
