今回は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/
