jQuery Mobileにチャレンジ
自分の管理しているサイトで、スマホからのアクセスが20%を越えてきています。この数字はまだまだ増え続けるはずです。スマホの普及でいつでもどこでもウェブが利用できるようになったこと、これまでウェブを利用する機会自体が少なかった人も、スマホでウェブを利用する機会がグンと増えたこと、の2つの要因があると思います。
かつてケータイ（ガラケー）対応が求められ、iMode独自のHTMLに対応させたりしていたのですが、自分のアクセス解析ではガラケーからのアクセスは微々たるものです。元々少なかったものが、携帯でウェブを利用する人なら殆どスマホに買い換えたため、どんどんこの数字は小さくなってきていると思われます。
ということで、スマホ対応はウェブ屋にとっては、もう生命線になってきていると思います。調べてみたら、自分がスマホ対応を始めてまだ1年です。基本的にPC用のコンテンツはそのままに利用することを前提に：
- サイドバーをなくし、サイドバーのブロック要素は、モバイル専用の別ページを出力する。
- ナビゲーション（ページ間移動）は、プルダウンリストにまとめる。
- 画像はモバイル用に別のキャッシュ画像を出力する。
といったことで対応してきたのですが、最近同業者さんでも人気のjQuery MobileをどうDrupalに組み込むか、この自分のブログをその叩き台にチャレンジしてみました。
で、できたのがこれです。ぜひスマホでチェックしてみていただけるとありがたいです。JQuery Mobileはスマホ出力を前提にしたオープンソースの開発者用フレームワークです。iPhone、Android、Windows Mobile、BlackBerryなど異なるプラットフォームに対応し、HTML5、CSS3、JavaScriptがベースです。これからのウェブ制作に欠かせないHTML5やCSS3の勉強にもなると思って始めた次第です。
マイクロソフトが漸くInternet Explorerの強制アップデートを始めることになったようです。ウェブ屋の長年の宿敵、古いIE6やIE7が淘汰され、HTML5やCSS3でウェブ屋の存分な表現が可能になる訳ですが、その分、自分のブラッシュアップも避けて通れない、ということになります。
できあがったJQuery Mobileサイト、ページの遷移とか、iPhoneやAndroidのアプリっぽい動きになりました。Drupalのテンプレートの部分部分にちょこっと属性を追加するだけで、ダイナミックな変化が実装できます。ちょっとレゴを組み上げているような感じで、その辺は楽しく作業できました。
がーーーーっ！、実はブロックを組み上げる下地づくりの部分で、相当苦労してしまいました。以下はちょっと専門的になるので、ご興味のある方のみどうぞ。
JQuery Mobileのページの遷移はAjaxです。つまりiframeのようにリンク先を元のページの部分として読み込みます。例えば、a.htmlからb.htmlへ移動する場合、b.htmlは、a.html/#/b.htmlといった#（ハッシュ）で繋がれたurlで表示されるようになります。これにより先にリンク先の内容を読み込んでからアニメーションによるページ遷移が実現します。
ところが、これがクセモノで、HTMLのリンク画像、例えば<a href="原寸画像のパス"><img src="縮小したキャッシュ画像のパス"></a>があると、最初に表示したページではOKなのですが、リンク先のページではパスがずれてしまい表示できなくなります。
初期設定でajax自体を無効化すると大丈夫になるのですが、それだと、せっかくのjQuery Mobileの面白さが半減してしまいます。
リンク先にrel="external"あるいはtarget="_blank"で外部であること明示すればいいとわかったものの、別フィールドであればphpのテンプレートにその属性を追加するだけですが、既存のHTMLに組み込むとしたらjQueryで属性を追加するしか思いつきません。
この属性追加のためのカスタムスクリプトを組み込んでみても、読み込んでくれません。調べて調べて、漸くわかりました。<head></head>内ではなく、data-role="page"属性の中に組み込めばOKでした。実はこれがわかるのに1週間近く悩んでしまいました。おかげで、お酒を飲んでも酔えない、寝ていても、あの方法があるのでは、と目が覚めるような数日を過ごしてしまいました(^ ^);
ま、とりあえず解決、これで、このブログだけじゃなく、お預かりしているサイトや新しいサイトで、いろいろ工夫ができる下地が完成です！