iOS端末でのiframe版ストリートビュー動作不具合対策方法

今回はiOS端末におけるiframe版のストリートビューが不具合を起こした時の対処法について説明します。

そもそも、iOSやiframeとは何なのか疑問に思われた方も多いでしょう。そこで初めに、iOSとiframeについて説明します。

iOSとは

iOSとはiPhoneなどに搭載された基本ソフトです。主に、iPhone、iPad、iPad miniの各シリーズ、およびiPod touchやApple TVに搭載されていますが、基本的にはアップル製品のみに搭載されています。また、iOSが搭載された端末を『iOS端末』と呼びます。

iframeとは

iframeとはInline Frameの略語です。「インラインフレーム」や「アイフレーム」と呼ばれています。具体的には指定したURLをインラインフレーム表示できるHTMLタグのひとつです。

では不具合とは一体どのようなものなのでしょうか。操作を行った際に強制的にページの最下部まで移動させられるといったものです。その解消方法については2つの方法が存在します。特定の要素にCSSを指定するのと、iframeでの埋め込みをやめて、APIを使うようにするものです。それぞれ、詳しく見ていきましょう。

特定の要素にCSSを指定する方法

htmlとbody要素に対して

html,
body{
   height:100%;
   overflow:auto;
   -webkit-overflow-scrolling:touch;
}

こちらのCSSを指定しましょう。

APIを使うようにする方法

上記の対応が難しい場合などはこちらの方法をとりましょう。

APIキーを用意する

APIを使って埋め込みを行うのでAPIキーが必要となります。

位置情報・パノラマIDを用意

次に表示したい場所の位置情報またはパノラマIDを用意しましょう。位置情報に関してはGoogleマップ上で位置の表示を行い、そこで右クリックをし「この場所について」を選択しましょう。そこで表示された緯度・経度をメモしましょう。

パノラマIDはGoogleマップで埋め込みをしたいストリートビューの場所のURL欄を確認しましょう。それがパノラマIDとなります。

コードの実装

コードの実装は、位置情報もしくはパノラマID、APIキーを入力するだけです。

以上が不具合が起きてしまった場合の対処方法となります。

もっと知りたい方はこちらをクリック→https://caitech.jp/indoorview-lp/

参考URL:http://www.tabroid.jp/news/2014/09/ohayougo0003.html

https://omotenashi.com/indoorview/iframe-defect/

 

関連記事

  1. GPS と インターネット でより安心の介護を目指す。|WillGPS|

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

  3. MEOとは

  4. 日本最大級のスポーツ・健康産業総合展示会である「SPORTEC(スポルテック)2018」に行って来ました!

  5. 今を輝く介護従事者インタビュー Vol.1

  6. 誰でも簡単にVRツアーを作成することができる、「Tour Creator」

  7. Googleマイビジネスで特別営業時間を設定する

  8. 日本最大級のスポーツ・健康産業総合展示会「SPORTEC(スポルテック)2018」~ペグ・アモーレ編~

  9. GoogleプレイスからGoogleマイビジネスに変える利点