Blogをスマートフォン(iphone,Android)向けに最適化

  • 投稿日:
  • by
  • カテゴリ:
  •       

管理人@千葉です。

すでに過去の遺産となりました。今はPC、スマホでアクセスできます。


半年ほど前からBlogの記事をTwitterでつぶやくようにしていますが、その影響でスマートフォン(ガラパゴス携帯含む)
からのBlogへのアクセスが意外と増えてきています。
ガラパゴス携帯(日本の普通の携帯)からのアクセスについては、パケホーダイじゃない人もいるのでシンプルに
テキスト表示変換ライブラリMT4iを利用させていただいています。左メニューのQRコードがそれですが、使い勝手も
よく感謝しています。
ガラパゴス携帯用トップページ http://too-server.dyndns.org/cgi-bin/mt5/mt4i/mt4i.cgi?id=4

ただ、やはりパケット定額制前提の携帯(iPhone,Xperiaなど)だとなんか寂しい・・・・
ということで、重い腰を上げて探してみたらありましたよ。ライブラリが。タダなら使わない手はないということで早速導入。

イメージが沸かない方もいらっしゃると思うのでひとまずiPhoneで見たときのBeforeを。
(僕自身はiPhoneユーザーではないのでiPhoneブラウザエミュレータiBBDemoを借りました。謝謝。)

20100511-1.jpg

















携帯とかのモバイル環境で見ると
スクロールが大変(泣)ってことに・・・・・

まぁ、いままでこのBlogに携帯からアクセスいただいていた方にはこんな苦労をさせてしまっていたわけです。
ほんとに申し訳ありません。気が回らなくて。

で、今回導入したライブラリはiPhone テンプレートfor MT, iui(Google Code) の2本。
画面をiPhoneスタイルにするテンプレートとタッチパネルに最適化するライブラリです。
MT4用なので動作するか不安でしたが、当サイトではテンプレート1行目defaultcharsetを削除のみの改変でした。
これをMobableTypeのテンプレートに合体させると・・・・Afterです。

20100511-2.jpg










横幅スッキリ。タッチも楽々・・・・のはず。
実機未確認です(苦笑)


ということで、スマートフォンでもかなりストレスなく見れるはずです。ただ、Android、Windows携帯で確認した
ところ、横幅がぴったりにはならないことも判明。ちょっとガックリ。(UAをiPhoneにすれば大丈夫ぽいです)

なので、当初はこのBlogに飛んできた場合にUAを判別してiPhoneな人は自動的に最適化したページに飛ばそう
と思っていましたが、しばらく仮運用でアドレスを設定します。末尾に"i"をつけてください。
スマートフォン用トップページ http://nagoya88.net/i/
様子を見て問題なさそうなら自動で転送することにします。

他団の方も参考にして試してみてください。アクセス解析によると携帯を含めると倍くらいに
伸びているようなので・・・・(苦笑)  布教活動楽して頑張りましょう。

以上、携帯ユーザーの方はCheck it out!

こちらの記事も一緒に読まれてます。