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. ストリートビュー撮影ルール

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

  3. ヘルシーフードショーに行きました!|日本最大級の介護食品の展示会

  4. 日本最大級のスポーツ・健康産業総合展示会「SPORTEC(スポルテック)2018」~NEC歩行姿勢測定システム編~

  5. 眠りSCAN | パラマウントベッド

  6. ストリートビュー撮影モード

  7. 日本最大級のスポーツ・健康産業総合展示会「SPORTEC(スポルテック)2018」~ICTリハ編~

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

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