Welcome to IKOMA360 ! – Virtual PANO Tour – バーチャル・ツアーをもっと身近に

Blog

ストリートビュー画像の活用方法「画像の埋め込み」について

投稿日:2017年7月20日 更新日:

ストリートビュー埋め込みコード活用法

ストリートビュー埋め込みコード活用法

緊急告知(2018.09.22)

iPhone5S以降の端末をご利用の方は、不具合の解消されたiOS12.xへのアップデートをお願いします。スムーズに操作可能となっています。

 

ストリートビュー画像の活用方法として、外部サイト(ブログなど)への埋め込み表示について考察します。はたして、埋め込みとは?

 

※上記の画像をモバイルビューでは操作できません。

コチラのリンクをタップするとマップ・アプリで操作可能です。

“iframe”というHTMLのタグを利用すると、ページ内に窓枠を作って他のサイトなどの一部を表示させることができます。この機能を利用したのが、上掲のストリートビュー画像です。まるでページの一部であるかのように、マウスや指先でグリグリ回せるインタラクティブなページが一瞬のコピペで完成します。

「埋め込み」の呪文をマップから取得する方法

呪文の意味を深く知る必要はありません。しかし、呪文にはサイズがあるので、用途に合わせて調整しましょう。その前に手順を見ていきます。

 

※上記の画像をモバイルビューでは操作できません。

コチラのリンクをタップするとマップ・アプリで操作可能です。

呪文(以下、コードと言い換えます)は、Google Mapsの利用規約に従えば、誰でも好きな公開画像のコードを取得可能。ここでは、IKOMA360が撮影した画像のコードで説明します。

デスクトップ版Google Maps / ストリートビュー

ストリートビュー埋め込みコード

Step.1 ストリートビュー埋め込みコード

最初に埋め込み画像を表示します。左上にキャプションなどの情報が表示され、その右端の三点マーク(ドットが縦に三つ並ぶ)をポイントします。

※この作業はパソコンなどのブラウザから行う必要があります。アプリでは表示されません。

ストリートビュー埋め込みコード

Step.2 ストリートビュー埋め込みコード

ポイント(この場合クリックでも可)すると、右に上から「印刷、問題の報告、画像を共有または埋め込む」のメニューが表示されます。

ストリートビュー埋め込みコード

Step.3 ストリートビュー埋め込みコード

「画像を共有または埋め込む」をクリックすると、中央にダイアログが表示されます。初期は「リンクを共有」になっていますので、右の「画像の埋め込み」を選択します。

※SNS等で撮影画像を共有したい場合は「リンクを共有」で提供される短縮URLをご利用ください。コピー&ペースト可能です。
ストリートビュー埋め込みコード

Step.4 ストリートビュー埋め込みコード

ダイアログに埋め込み画像のプレビューが表示されるので、プレビュー画像をドラッグで操作して、最初に見せたい方向を決定しましょう。上部にコードが表示されていますので、青く反転させて全選択してコピーします。

※全選択が上手くできない場合は、コード上を適当にクリックする、または、”CTRL” + “A”押下で「青反転→右クリック→コピー」を試してください。

取得したコード

<iframe src="https://www.google.com/maps/embed?pb=!4v1536640015506!6m8!1m7!1sCAoSLEFGMVFpcFAtYjV5QlFGZ3NlZHE1ZjRHV1ZuZjhHZm1ubDVhZkZSVGV4ZzFs!2m2!1d34.69017574!2d135.51826598!3f235.04810718138867!4f-0.6368112066152918!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

上記は中サイズです。表示先のサイズに合わせて「小・中・大」とあり、カスタムサイズを選ぶか、数字を変更して任意の大きさに設定可能です。

※横幅を端末に合わせて変更できるブログやサイトでは、横幅を”100%”にすることで自動的に調整されます。(レシポンシブ対応)

ブログへ埋め込みしてみるテスト

一部のブログサービスでは、セキュリティ対策として「iframeタグ」の使用を禁止しています。以下のサイトについて、貼り付けを実際にやってみました。実例としてページへのリンクも添付しました。※サイズは全て600×450に設定しています。

FC2ブログ

FC2 投稿画面

FC2 投稿画面

新規記事の投稿画面で、コードをペーストするだけです。画面下部に「リアルタイムプレビュー」で表示されますので、確認しながら記事の編集を進めることができます。

実際のページ
http://ikoma360.blog.fc2.com/blog-entry-1.html

アメーバブログ

アメブロ 投稿画面

アメブロ 投稿画面

管理ページの「ブログを書く」ページで、入力スペースの下段にあるタブを「HTML表示」に切り替えてから、コードを貼り付けます。前後のPタグは、保存後に自動的に付されました。

実際のページ
http://ameblo.jp/juantonto/entry-12294228008.html

ココログ

ココログ

ココログ 投稿画面

管理ページの「記事を編集」画面で、入力欄の右上にあるタブを「HTMLの編集」に切り替えます。FC2やアメブロのようなプレビュー画面はありません。代わりに公開前のドラフト状態で「確認」できました。

上記以外にも、無料で使えるブログサービスはたくさん存在します。全てを検証できませんので、「ここはどうか?」と言うのがあれば、コメント欄でご教示ください。また、利便性や拡張性を求める向きには、WordPressやBloggerをおススメします。当サイトは、WordPressで構築しております。

-Blog
-

執筆者:

関連記事

streetview-story-007

ストリートビュー撮影と公開にまつわるお話(その7)

Google マイビジネスをご利用中のビジネス・オーナー様向けに、施設内のストリートビューを手軽に低価格で導入できる「Googleマイビジネス向け特別プラン」を提供中! 撮影と公開を進める中で気が付い …

ストリートビュー認定フォトグラファー

「ストリートビュー認定プログラム」の情報交換ができる掲示板(Local Guides Connect / SVTP)

認定フォトグラファーとつながろう(2017.04) Google Mapsの日本語プロダクトフォーラムで、「現在のストリートビュー認定プログラムで認定された認定フォトグラファーの方は、ストリートビュー …

IKOMA360

Google マイビジネスへの「動画投稿」を活用しましょう。

GMB Video Post 今回ご紹介する機能はマイビジネス独自のものではありません。今年の夏ごろに始まったグーグル・マップの新機能を応用したものです。安定して運用可能となりましたので、ご紹介します …

IKOMA360

最近のストリートビューにおける既知の問題(Known Issue)について

Elevator Widget Known Isuue この問題は、2017年11月18日(土)未明に問題が解消されました。IKOMA360にて公開したツアー画像においても、全て再表示されたことを確認 …

Facebookでストリートビューを楽しむ方法

ストリートビュー撮影と公開にまつわるお話(その6)

撮影と公開を進める中で気が付いたことを書き綴る第六弾は、「グーグルマップの共有リンクをFacebookのiPhoneアプリで開く時」について考察します。心当たりのあるビジネス・オーナー様の参考となれば …

GMB Special Plan

Google+

Google+

Facebook

Facebook