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

Blog

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

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

Streetview embedding code

Streetview embedding code

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


ストリートビュー

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

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

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


ストリートビュー

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

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

Streetview embedding code

Streetview embedding code

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

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

Streetview embedding code

Streetview embedding code

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

Streetview embedding code

Streetview embedding code

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

Streetview embedding code

Streetview embedding code

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

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

取得したコード

<iframe src="https://www.google.com/maps/embed?pb=!1m0!4v1500505424441!6m8!1m7!1sF%3A-KPQdjjKG4Sg%2FWT-51gWRwJI%2FAAAAAAAA5SM%2F0dgqa0kB6cIbHWo9wd34RdScAYDXgVN9gCLIBGAYYCw!2m2!1d34.68276622415832!2d135.5242461338639!3f122.1492121475448!4f-1.7117918411853452!5f0.4000000000000002" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

上記は中サイズです。ブログのサイズに合わせて「小・中・大」とあり、カスタムサイズを選べば、任意の大きさに設定可能です。中サイズだと幅が600pxとなっていて、たいていの場合はこれでOKでしょう。以下のテストは全て「中サイズ」です。

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

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

FC2ブログ

FC2 投稿画面

FC2 投稿画面

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

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

アメーバブログ

アメブロ 投稿画面

アメブロ 投稿画面

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

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

ココログ

ココログ

ココログ 投稿画面

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

番外編「ローカルガイド・コネクト」

ローカルガイド・コネクト(localguidesconnect.com)は、Google Mapsの利用者でローカルガイド・プログラムに参加するとだれでも登録可能です。記事の閲覧のみであれば、登録さえも不要。しかし、全世界のユーザーが集うコミュニティサイトなので、ちょっと覗いてみるだけでも面白い。

http://ikoma360.official.jp/blog/%e3%80%8c%e3%82%b9%e3%83%88%e3%83%aa%e3%83%bc%e3%83%88%e3%83%93%e3%83%a5%e3%83%bc%e8%aa%8d%e5%ae%9a%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0%e3%80%8d%e3%81%ae%e6%83%85%e5%a0%b1%e4%ba%a4%e6%8f%9b/

ストリートビュー認定プログラムの情報交換ができる掲示板 | IKOMA360 Official Blog

link

このサイトは以前お伝えしたように、ストリートビュー認定フォトグラファーのサポート・フォーラムとしても機能しており、ストリートビュー関連の最新情報が飛び交っています。認定フォトグラファーにのみ「埋め込み」機能が許可されました。

LGC

LGC 投稿画面

「Start Discussion」をクリックして、テキストフィールド(Body)下段のタブを「HTML」に変更して、コードをペーストします。初期は「RICH TEXT」になっていて、この状態では貼り付けても表示されません。

LGC

LGC 投稿画面

コードを貼り付けてから、「HTML → RICH TXT」に変更すると、画面内に画像が表示されます。順番を間違えないように。

※重要
iframeタグを使って埋め込みを許されているのは、Google Mapsで公開中のストリートビューに限られます。マイマップなど、同じGoogle Mapsであっても許可されていません。

https://www.localguidesconnect.com/t5/Share-Your-Photos-and/Old-Temple-Explore-in-360-%E7%89%B9%E9%9B%86-%E5%90%8D%E5%88%B9%E6%8E%A2%E8%A8%AA/m-p/302846#M20787

Local Guides Connect – Old Temple Explore in 360: 特集・名刹探訪 – Local Guides Connect

link

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

-Blog
-

執筆者:

関連記事

no image

保護中: Hello world!

この投稿はパスワードで保護されているため抜粋文はありません。

IKOMA360

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

How to delete old tour Google マイビジネスチームとの連携で「Googleマイビジネス向け特別プラン」を提供中! 撮影と公開を進める中で気が付いたことを書き綴る第四弾は、「 …

動画投稿

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

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

blog title 20170629

Android版ストリートビュー・アプリが10億ダウンロードを突破!

Google Play ストアで無料配布されているストリートビュー・アプリのダウンロード数が10億回を突破しました。 Googleストリートビュー 開発元:Google Inc. 価格:無料 平均評価 …

Blog Title 20170712

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

Google マイビジネスチームとの連携で「Googleマイビジネス向け特別プラン」を始めました。撮影と公開を進める中で気が付いたことを書き綴っていこうと思います。ご検討中のビジネス・オーナー様の参考 …

GMB Special Plan

Googleマイビジネス向け特別プラン

Google+

Google+

Facebook

Facebook