“Mobile Worker” photo by mikecogh
会社の人から、「あんたのブログがiPhoneで見るときGoogle Mapの埋め込みがうまく動かず、なぜかGoogle Mapアプリにリダイレクトされる」とご指摘を受け、めんどくさかったので今のいままでかなり適当に放置していたブログのモバイルデバイス対応を久しぶりに見直すことになった。
とりあえず以前から僕が写真の埋め込みで多用しているFlickrの写真とGoogle Mapの埋め込み表示がスマートフォンで表示させるとき、縮小がうまくいかず写真の縦横比などが崩れているのは以前からわかっていた。しかし修正がめんどくさく、さらには他の細々とした用事に追いやられて放置していたのだが、やっぱり今のご時世モバイル対応をおざなりにしてたらダメよね。。。ということで見直し。
最初表示がおかしくなったのは、モバイル用のWORDPRESSのテンプレート(プラグイン)を変更した後からだと思い込んでいて、これを機にと有料のモバイル用のプラグインを購入して適用してみるも変わらずでガックリ。
30分ほどでガックリから立ち直り、改めて表示のおかしいFlickrの埋め込みのタグと以前の表示の問題なかったタグを見比べる
** 問題あるほう
<iframe src=”http://www.flickr.com/photos/yama2k/11908456484/player/” width=”500″ height=”375″ frameborder=”0″ allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
** 問題ないほう
<a href=”http://www.flickr.com/photos/yama-taka/9849930725/” title=”264/365 – 12180days by yamataka, on Flickr”><img src=”http://farm3.staticflickr.com/2838/9849930725_e4438813f1.jpg” width=”500″ height=”332″ alt=”264/365 – 12180days”></a>
全然タグ違うやん。。。問題なかったほうは単純にimg src=~~の画像埋め込みで、問題あったほうはiframeか。googleってみると普通にiframeがレスポンシブデザインとして機能してないという記事がいっぱい出てくる。ア、ナルほど。
レスポンシブデザインとは 【 responsive design 】 〔 レスポンシブWebデザイン 〕 – 意味/解説/説明/定義 ： IT用語辞典
ということでFlickrの埋め込みに関してはFlickrのWebインタフェースを旧版に戻してそこから埋め込み用のタグを取得する方法で以前のimg src=~~の形式になった。
ガジェット録: Flickrの新しいインターフェースを試したら、ブログに貼り付けるためのHTMLコードが表示されないので仕方なく古いインターフェースに戻しました
あと、Google MapはこちらのサイトでHTMLのタグ(というかCSSで)をレスポンシブなものに変換してくれるようなのでとりあえずそちらを使う。
youtubeやinstagramの埋め込みコードをレスポンシブ化させてくれるwebサービス「embedresponsively.com」*prasm
embedresponsively.com
それでもまだGoogle Mapのほうは表示がちょっとおかしい。とりあえずこの辺は明日以降またちょこちょこ対応。だいぶマシにはなりました。
しかし、Google MapもFlickrもどちらもiframeから問題が来ているんだけど、なんかWebではiframeを多用する時代になってきているんだろうか？時間なくてiframeを使うメリットとか全然把握できてないんだけど、もしこれから先、iframeが正当として認知されていろんなWebサービスなどで使われるようになるとすれば上にあげたような対応ってそれに逆行するような対応だからまたいつかの時点で大きな修正をが必要になるはず。。。ああ、めんどくさい。いや、2,3日中にはちょっとiframeを調べとかないといけないな。。。
あとはこちらのサイト、
WordPressにyoutubeやgoogle mapをレスポンシブに埋め込んでみた｜ウェブシュフ
でこのembedresponsively.comのタグ変換を元にしてWORDPRESSでボタン一発で入力できるようにダッシュボード上のボタンに入力機能を実装する手順が綺麗にまとめられていたのでこれをまた数日中に自分のWORDPRESSのダッシュボードに適用することとして今日は眠ることにしたいと思います。おやすみなさい。。。
