Googleストリートビューであそぶ

Googleストリートビューのアプリで360°ビューの撮影とGoogleマップでの公開に挑戦してみました。これはSNSやブログ同様にインターネットで情報発信するワクワクがあります。加えて誰かの役に立つかもという満足感も。ただ、アカウントが晒されるのが課題かもしれません。

以下では360°ビューの撮影の仕方、Googleストリートビューで公開する方法、Wordpress への埋め込み方法を順にご紹介したいと思います。

Googleストリートビューアプリでの360°ビュー撮影方法

360°ビューの撮影方法はいろいろありますが、ここではGoogleストリートビューアプリを使いスマホで360°ビューの撮影をしている際のスクリーンキャプチャを使いご紹介します。

アプリの入手方法

Apple、GoogleそれぞれのAPPストアでアプリは入手可能です。

‎Google ストリートビュー
‎ストリートビューで世界の名所を巡ったり絶景を眺めたりしてみましょう。博物館や競技場、レストラン、お店といった施設の中の様子も見ることができます。 また、このアプリを使ってパノラマ写真を作成することができます。スマートフォンのカメラはもちろん、シャッター 1 回で 360° のパノラマ写真を撮影できる全天球カメラ(R...
Googleストリートビュー - Google Play のアプリ
オリジナルのストリートビュー画像を作成したり、世界をバーチャルに探索したりしましょう

アプリの使い方

スマホのカメラの向きをアプリ上に表示されるガイド従って何度も変えて周囲を撮影していきます。全天周撮影が完了すると各画像の合成が始まり、ストリートビューでおなじみの360°ビューが生成されます。

ガイドに従うだけで十分実用に足る360°ビューを撮影できますが、よりなめらかなものを撮影するには以下に留意ください。

  • 軸足を決め、その軸を中心に顔の前あたりにスマホがくるようして撮影する。
  • 横方向の撮影を連続して進める。

Googleストリートビューでの公開方法

※準備中です。Googleストリートビューアプリで撮影した360°ビューを公開するまでの流れをご紹介します。

GoogleストリートビューをWordpressに埋め込む

ここでGoogleストリートビューをWordPressブロックエディターを使い埋め込む方法を解説します。なお、ここではPCで「Googleストリートビュー」「Wordpress」を使う際の手順を説明します。スマートフォンのブラウザやアプリではリンクの取得やブロックの準備がうまくいかない場合がありますからご注意ください。

埋め込む作業はPCのブラウザでやるのがよさそうです

Googleストリートビューでの準備

Googleストリートビューには「共有」のためにメニューが用意されていますのでこれを利用します。これを使えば、自分でタグを書く必要はなく、Googleストリートビューで表示されている画面の方向のまま表示できるリンクURLか埋め込み用のiflameタグを生成することができます。

共有用のウィンドウを開くには「ストリートビュー」画面左上方にある位置名称横の縦に3つに「・」が並んだ部分をクリックし、出てくるメニューから「画像を共有または埋め込む」を再びクリックすると共有のためのウィンドウが開きます。

共有用のウィンドウでは「リンクを送信する」「地図を埋め込む」の2つの方法が選べます。Wordpressに埋め込む場合は「地図を埋め込む」を選びます。

「地図を埋め込む」画面で「HTMLをコピー」をクリックすればクリップボードに必要な「埋め込み用タグ」がコピーされます。「埋め込み用タグ」はタグの記述を見ればわかる通りiframeを使用したものです。なお、埋め込むフレームのサイズを選ぶことができますので、それぞれのWordpressのレイアウトに合わせ試してみてください。

「ストリートビュー」の共有情報が記載されたウィンドウ

注意点としては、生成されるURLないしは「埋め込み用タグ」はまさに画面に表示されている向き/アングルのストリートビューになることです。お店の紹介や目指すランドマークを見せた形でGoogleストリートビューを使うのであれば、事前にGoogleストリートビュー上で表示を調整し、意図する場所を画面上に出した上で「ストリートビュー」画面左上方にある位置名称横の3つの「・」を押す必要があります。

「ストリートビュー」で表示されたものと同一の方向/アングルを表示する埋め込み用タグが生成されます。

WordPress上での作業

Googleストリートビューの画面を埋め込む投稿記事を用意します。なお、以下はブロックエディターを使用した場合の説明です。クラッシックエディターを使用する際は、クラッシックエディターのHTMLモードを利用することになります。

WordPressでは記事に「カスタムHTML」ブロックを追加し、そこにGoogleストリートビューで生成した「埋め込み用タグ」を書き込みます。新しいブロックの一覧はブロックエディター上の「+」記号をクリックすることで呼び出せます。

投稿記事本文に「カスタムHTML」ブロックを追加する

「カスタムHTML」はウィジェットに分類されるため、「+」をクリックしただけでは出てこないかと思います。「検索」機能を使い「カスタムHTML」を探すか、メニューをスクロールして探してください。

「カスタムHTML」のブロックができたらブロック上のフォームにGoogleストリートビューからコピーした「埋め込み用タグ」を貼り付けます。プレビューを選択して編集画面上にGoogleストリートビュー画面が表示されたら成功です。

コメント

タイトルとURLをコピーしました