知人の忠告でブログのモバイル対応をちょこっと修正 2014年01月12日

Mobile Worker
“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/&#8221; width=”500″ height=”375″ frameborder=”0″ allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

** 問題ないほう
<a href=”http://www.flickr.com/photos/yama-taka/9849930725/&#8221; title=”264/365 – 12180days by yamataka, on Flickr”><img src=”http://farm3.staticflickr.com/2838/9849930725_e4438813f1.jpg&#8221; 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のダッシュボードに適用することとして今日は眠ることにしたいと思います。おやすみなさい。。。

新たにWebサイトを作成中

現在、彼女のお店のホームページを作成中。

santhai_top

http://www.santhai.net

このyamagiwa2000.comと同じく、ホスティングサーバはロリポップを使用して独自ドメインも取得しました。当然ロリポップと同じ会社のサービス「ムームードメイン」を使用。現在まだ工事中です。

で、このUnderConstructionの画面、タイトルの画像は実際にお店で看板を写真撮影、その後GIMPを使用して周りの背景を切り抜き透過PNGにしております。

参考:
PNGについてあれこれ http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/PNG_descript.html
Gimpの使い方メモ 透過PNGの作り方 http://oasis.halfmoon.jp/other-pc/gimp/

そしてタイトル画像下の鏡面反射のようなエフェクトはJavaScriptでやっております。

参考:
Reflection.js http://cow.neondragon.net/stuff/reflection/
to-R 画像に鏡面効果を与えるreflection.js http://blog.webcreativepark.net/2007/09/21-181239.html

これからWeb作成の過程も載せて行きまーす。