週刊ヒロテックにiphone版をリリースしました

お客様から「サイトをiphone対応にしたい」とのご要望をいただき、制作に先立って、まずは自分のブログをiphone対応版にしようと、先週、仕事の合間をぬってトライしてみました。

約２日間の悪戦苦闘の結果、こーんな感じに。（一見シンプルで簡単にできそうですが、ハマッた点は後述しますのでご参考に・・・）

▲左がトップページ、右がブログ記事ページ

▲ブログ記事内の写真。幅が広いものは右側に横スクロールすると表示される。
iphoneの特長を活かし、記事や写真を拡大して読めるようにした（右側の写真）


このサイトはiphoneで見た人だけに表示されるので、iphoneでない人のため、動画版も作ってみました。表示速度、画面遷移など、iphoneでの雰囲気を見ていただければと思います。

 


自分のメモも含めて、使ったツールやハマッたポイントなどを記しておきます。（技術者向き）

===========
★基本
===========
iphoneライクなライブラリ「iui」を使用。ボタンなどが用意されているのがありがたい。サンプルのHTMLがあるが、解説はないので、自分で必要な箇所のソースを見て使えそうなものを取る。

週刊ヒロテックはMTブログなので、使えそうなプラグインなどを調べてみたが、カスタマイズなどを考えると自分で作ったほうがいいということに落ち着き、iphone用に

トップページ、ブログ記事リスト、ブログ記事

の３つのテンプレートを追加。
iphone用のページはPC版のサブフォルダとした。つまり、blog/index.htmlはPC用のトップページ、blog/iphone/index.htmlはiphone用のトップページになる。

==========
★ハマッた点その１
==========
まずは画面遷移をどうするかということ。iphoneのページは１つのファイルに複数ページをid付きで指定できるようになっており、この機能のメリット（手軽）、デメリット（ファイルサイズが大きくなる）を考えながら、

どのページをどのファイルに入れていくか
グローバルナビゲーションをどのようにするか

についてけっこう悩んだし、使いやすさの試行錯誤で時間がかかった。
だいたいのコツはつかんだので、これからは着手前にきちんと設計しておこう。

===========
★ハマッた点その２
===========
一番ハマッのが、iphoneユーザーだけに表示するための.htaccessのRewrite記述。
iphoneの人が、http://www.hirotec-k.jp/blog/にアクセスしたときに自動的にhttp://www.hirotec-k.jp/blog/iphone/に変更するのはいたって簡単。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ /blog/iphone/ [R]

これを記述した.htaccessをblogフォルダに入れればいいのだが、これだとトップページしか変換されない。
検索エンジンには、ブログ記事やカテゴリーページも登録されており、そのページをダイレクトに指定したときだって、自動的に変換したい！

ということで、単純に考えたのが次の記述。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^(.*)$ /blog/iphone/$1 [R]

これをやりはじめて、うまくいかずに、はまりまくった。
「多くのリダイレクションが発生」とエラーになってページが一切切り替えられなくなり・・・

ググってもググっても、どうしてこの記述が違っているのか、わからない・・・
正規表現をいろいろ変えてみてもうまくいかず・・・

あるQ&Aでようやくヒントが・・・この指定をblogフォルダに入れると、そのサブフォルダすべてに影響が及ぶので（すっかり忘れてた！）、blog/iphoneフォルダにも影響し、ループのリダイレクションが発生するのです。
そこで、blog/iphoneフォルダ以外のときだけこのルールを適用するようにすればいいわけ。

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/blog/iphone
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule  ^(.*)$ /blog/iphone/$1  [R]

要するに、上から２行目の記述が必須。これで、どのページも変換できた！やったー！！

思ったら、さっきまで表示されていた画像がすべて表示しなくなってる！
画像もこのルールにしたがって、URLが変換されちゃったんですね・・・

で、最終的な記述がコレ。

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/blog/iphone
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule  ^(.*)\.html$ /blog/iphone/$1\.html  [R]

HTMLだけを変換しておけばいいんですね。画像はblogフォルダのものをそのまま使っているんだし。

ってことでメデタシ、メデタシ。

その他、細かい画面表示などでハマッた点、工夫した点も多々あり、iuiライブラリで提供されているjavascriptのロジックを追って修正するハメにもなったが、細かいことはここでは省略。

あー、苦労した。
ま、ものごとにはじめてチャレンジするときはこんなものかな・・・
でも、できて良かった。