2016年06月05日

◆ Google マップがスマホでエラー

 Google マップをページに埋め込むと、スマホでエラーを起こすことがある。画面サイズが大きいと、そうなる。

 ──

 この件は、ユーザーから苦情の形で届いた。
 不明男児 発見 の教訓 という前出ページで、縦に細長い Google マップを埋め込んだのだが、これをスマホで見ると、エラーを起こすという。
 なぜかというと、スマホの画面全体をGoogle マップが埋めてしまうからだ。こうなると、ページをスクロールしようとしても、Google マップの地図( or 写真)をスクロールしてしまうので、ページをスクロールできなくなる。
 大失敗でした。ごめんなさい。

 本サイトは、Seesaa ブログに写った際、スマホの対応ページが専用にできたので、スマホ対応は十分だと思っていた。しかるに、「スマホの画面はもともと小さすぎる」という点には、考えが及ばなかった。また、上記の問題にも、考えが及ばなかった。
 こんなことが起こるなんて、たいていの人はわからないですよね? そこで、本項で紹介しておくわけだ。問題の紹介。

  ────────────

 では、解決策は? Google マップの埋め込み画像を、スマホの画像よりも小さくすればいい。
 では、スマホの画面解像度は? 下記にある。
  → iPhone/iPad解像度(画面サイズ)早見表
 これからすると、幅は 320 で、高さは 480 〜 568 と見ればいいようだ。
 このサイズに収めればいいか? いや、幅と高さの、どちらか一方が条件に入ればいい。他方は、はみ出しても大丈夫だ。(幅がはみ出したら、高さ方向の余白でスクロールすればいい。高さがはみ出したら、幅方向の余白でスクロールすればいい。)
 
 結論。

 Google マップのサイズについては、次のうち、少なくとも一方を満たすべき。
  ・ 高さが 450 以下
  ・ 幅 が 300 以下。

 これなら、トラブルは発生しない。

 【 追記 】
 さらに、 UL タグを使って、右にインデントすると、左端に余白ができるので、好都合だ。
( ※ ただし、インデントの目的で UL タグを使うことは、非正規の方法であり、HTML の規定では非推奨である。)

 HTML の規定に合致して、正しい方法は、下記だろう。
 「 div class によって Google マップの書式の指定をしてから、css で左に余白を入れる。css は、PC用とスマホ用で、切り替える」

 これなら万全だと思える。



 [ 余談 ]
 今回の上記記事には、非常に多くのアクセスがあった。その大半は、スマホからだった。これはビックリだ。普段のアクセスは、パソコンからの方がいくらか多い。スマホは半数をかなり割っている。ところが、今回のアクセスでは、スマホが圧倒的に多かった。
 これはどうも、twitter の影響だな。はてな経由も多かったが、 twitter 経由だと、スマホが圧倒的に多くなるようだ。
 ただ、時間帯を見ると、午前中にまんべんなく散らばっている。午後は漸減している。……通勤時間に見るだけかと思ったが、仕事中の時間であっても、スマホで本サイトを見た人が多いようだ。
 仕事中にスマホでブログを見るのって、どういうことなんですかね? サボっているんですかね? (でも、よく考えたら、パソコンで見てもサボっているのは同じだ。……ただ、パソコンで見ると、サボっているのはバレにくい。スマホなんか見ていたら、サボっているのがバレバレだと思うんだが。……)
 
 ──

 蛇足だが、今回の記事は、アクセス数は多大だったが、社会的な反響とまではならなかった。保育園の補助金廃止の項目のときは、有名人がリツイートして、社会的反響になったのだが、今回の不明男児の記事は、面白記事の扱いにすぎなかったようだ。

posted by 管理人 at 22:47| Comment(7) | コンピュータ_04 | 更新情報をチェックする
この記事へのコメント
世の中にはサービス業というものがあります
平日の昼間から酒飲んで
openブログを読むという堕落生活もありです
Posted by 先生 at 2016年06月05日 19:02
いやいや、それはseesaaのスマホ対応がダメなんじゃない?
もしくはデバイス非依存な埋め込み方法があるとか
Posted by 通りすがり at 2016年06月05日 21:28
 Google の仕様のせいだ、とみんな言っていますよ。
 Seesaa でなくても、同じ状態になったら、どうしようもない。どのブログであっても同じ。
 Google マップ(埋め込み)の外周部に、固定枠があるといいんですけどね。

 css で iframe に
    margin-left:10px
 と指定するといいかも。……と思って、実行してみたが、影響は出なかった。何も変わらない。失敗。
 
Posted by 管理人 at 2016年06月05日 21:54
モバイルフレンドリーとか宣ってるくせに、なにそれ
Google堕落してね?

というか、maps埋め込みをよく知らんのでちょっと調べてみます
そこまでマヌケだとはちと思いづらいので、実はヘルプの奥深くにーとか
Posted by 通りすがり at 2016年06月05日 22:11
モバイルフレンドリー google maps 地図の埋め込み - Google 検索:
https://www.google.co.jp/search?q=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%83%AC%E3%83%B3%E3%83%89%E3%83%AA%E3%83%BC%20google%20maps%20%E5%9C%B0%E5%9B%B3%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF&gws_rd=ssl

で検索すると、結構出てきましたよ

確認はしてないので、それぞれ有効かどうかは分からず
Posted by 通りすがり at 2016年06月05日 22:18
iPhoneのSafariで見てましたが、地図に触れないように一気にスクロールするとか、画面の端の方を移動するとなんとかなりましたよ。ま、メンドクセーと思ってましたが。
Posted by 京都の人 at 2016年06月05日 22:24
上で書いた検索の、一番目にあるね
https://goo.gl/0pTW6m
Posted by 通りすがり at 2016年06月08日 05:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

過去ログ