WEB カメラ 作りたい 撮りたい

insta360シリーズの360度写真を簡単にブログやサイトに貼る方法【プラグインなし】

insta360シリーズの360度写真を簡単にブログやサイトに貼る方法

以前の記事でWordPress(ワードプレス)のプラグインを使って
360度画像をブログに埋め込む方法を紹介しました。

あわせて読みたい!
360度画像をブログに埋め込む方法
【2020年】撮影した360度画像をWordPressブログに埋め込む方法【THETA、insta360】

続きを見る

プラグインはWordPress(ワードプレス)でサイトを管理している場合でしか使えませんので、
今回はプラグインを使わずに、360度画像を簡単にホームページやブログに掲載する方法をご紹介いたします。

こんな方におすすめ

  • htmlベースでサイトの管理をしている方
  • サーバの容量を使いたくない方
  • 360度視点を変えれる状態で埋め込みたい方

insta360アプリで埋め込みたい写真を開く

insta360シリーズ製品で撮影する時に必要な、それぞれのデバイスのアプリを起動します。

insta360シリーズ製品で撮影する時に必要な、それぞれのデバイスのアプリを起動します。

insta360シリーズアプリを起動し、アルバムからWEBページに埋め込みたい写真を選択します。

insta360シリーズアプリを起動し、埋め込みたい写真を選択

共有ボタンからinsta360のサーバーにアップロード

アルバムからWEBページに埋め込みたい写真を開いたら、右上の「共有マーク」を選択。

insta360アプリから右上の「共有マーク」を選択。

下から共有・シェアしたいアプリのアイコンが出てきますので「リンク」を選択します。

共有・シェアしたいアプリのアイコンが出てきますので「リンク」を選択します。

そのまま右上のチェックマークを選択します。
初めてのときは「ユーザーサービス契約書」への同意を求められますので「承認します」を選択します。

そのまま右上のチェックマークを選択します。
初めてのときは「ユーザーサービス契約書」への同意を求められますので「承認します」を選択します。

アップロードが始まり、完了するとQRコードとURLが生成されます。
出てきたURLをコピーします。

アップロードが始まり、完了するとQRコードとURLが生成されます。
出てきたURLをコピーします。

URLをPCで開き、埋め込みコードをコピー

出てきたURLへアクセスすると、下のようにWEBページが表示されます。
真ん中に選択した360度画像、左右にinsta360の広告が表示されてます。
真ん中の画像の右上にシェアアイコンが並べられてます。

出てきたURLへアクセスすると、下のようにWEBページが表示されます。
真ん中に選択した360度画像、左右にinsta360の広告が表示されてます。

一番右のボタンをクリックすると、ポップアップでソースコードが表示されます。
上段の「Copy(コピー)」ボタンをクリックし、コードをコピーします。

一番右のボタンをクリックすると、ポップアップでソースコードが表示されます。
上段の「Copy(コピー)」ボタンをクリックし、コードをコピーします。

任意のhtmlにペースト

コピーしたコードはこちら。

<iframe class="embed_iframe" src="https://s.insta360.com/p/90d64fa09f20eae38080b0edf445c1a3?e=true&locale=en-us" frameborder="0" width="666" height="413"></iframe>

コピーしたコードを、埋め込みたいhtmlへペーストすると
下のように埋め込み表示されます。

コード内のwidth、heightの値を編集するとリサイズも可能です。
「width="666"」となっているところを、
「width="100%"」に変更すると、下のように表示可能な横幅の目一杯まで表示することが可能です。

まとめ

いかがでしたでしょうか。
insta360側が用意してくれているサービスを利用すると、専門知識がなくても誰でも簡単にWEBページに360度画像を埋め込むことができます。

insta360のサーバにアップロードする事で下のようなメリットがあります。

メリット

  1. 作業が簡単
  2. 自分のサーバの容量をくわない
  3. アプリで見るのと同じように視点を4種類から選べる
  4. htmlベースで作業が可能
ノーマル視点
プラネット視点
フィッシュアイ視点
ボール視点

他にも360度カメラで撮影した写真を動画を独自の拡張子ファイルから一般的な拡張子ファイルに変換し、ブログやホームページ・Youtubeへ公開する方法を紹介しています。よければ合わせてご覧ください。

あわせて読みたい!
360度画像をホームページで埋め込み公開する方法まとめ【insta360】
360度画像をホームページで埋め込み公開する方法まとめ【insta360】

続きを見る

-WEB, カメラ, 作りたい, 撮りたい
-, , , ,

© 2021 ひゃくやっつ