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. 日本最大級のスポーツ・健康産業総合展示会「SPORTEC(スポルテック)2018」~Curaria アームリリース編~

  2. Googleマイビジネス登録有無の見分け方

  3. 介護施設で受け入れられる製品とは?

  4. MEOとは

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

  6. 自立支援に向けたIoT機能訓練サービス |モフトレ|三菱総合研究所/Moff/早稲田エルダリーヘルス

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

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

  9. 個別機能訓練加算 とは 〜個別機能訓練計画書編〜