サーバサイドのレガシーなHTMLに負けずに jQuery Mobile を使おう

このエントリーをはてなブックマークに追加

こんにちわ、 chappie です。

少し前に、とある案件で jQuery Mobile を触って iPad 用に画面をカスタマイズする機会がありました。
jQuery Mobile (以下 JQM) 自体については素敵な紹介記事が世の中にたくさんあるので(末尾の参考リンク参照ください)、ここでは個人的に対応しなければならなかった細かい問題について小ネタをシェアしたいと思います。


JQM は、HTMLをセマンティックに記述しておけば自動的にモバイル端末向けの画面にレンダリングしてくれるライブラリです。

- 超カンタンなサンプル(@ jsFiddle) (http://jsfiddle.net/somat/NrCGb/7/)

全く新規にスマートフォン/タブレット向けにサイトを作るといったようにHTMLを自由に書ける場合は、JQM が求めるとおりの記述をしておけばいいだけなのでとても楽チンです。しかし、SaaSアプリケーションなど既存のWebアプリをカスタマイズする場合、一部のパーツがサーバサイドから固定出力されるため、必ずしも JQM に都合のよいHTMLが生成されるとは限りません。

今回私が担当した件では、入力フォームのチェックボックスが問題になりました。

JQM では、チェックボックスやラジオボタンの選択肢は label タグとセットで記述されていないと正しくレンダリングしてくれません。

<input type="checkbox" name="chk1" value="1" id="chk1-1"><label for="chk1-1">せんたくし1</label><input type="checkbox" name="chk1" value="2" id="chk1-2"><label for="chk1-2">せんたくし2</label>

label タグがない、たとえば以下のような記述だと、とても残念な出力結果になってしまいます。
<input type="checkbox" name="chk1" value="1">せんたくし1<br><input type="checkbox" name="chk1" value="2">せんたくし2<br>

(上のチェックボックスグループが label タグ付き、下が label タグなし)

サーバサイドで出力されるHTMLを label 付きのコードに変更できれば一番よいのですが、出力を変えることは既存の他のユーザ環境にも影響を与えることになってしまい、簡単には変えられません。ここが SaaS アプリケーションのムズカシイところです。サーバサイドのプログラムを変えてもらう交渉するのも大変でしょう。(注: 弊社のエンジニア同士の仲が悪いわけではありません)

しかし、諦めるのはまだはやい。

多少ムリヤリでもクライアント側で DOM を加工してやればいいのではないか、、、そう思ってやってみたら、(一応)うまくいきました。


- サンプルコード (@ jsFiddle) (http://jsfiddle.net/somat/u2a79/5/)

元々のチェックボックスと、label タグがついてない素のテキストを取り出し、新しい要素を作ってその中に順番にチェックボックスとlabelでかこったテキストをつめて、元の要素を置き換えています。とってもクルシイことしてますが、今回の案件は短期プロジェクトだったので、割りきって対応しました。

ちなみに、案件担当当時は JQM はまだ アルファ版でした。
そのころのバージョンでは、head タグ内で、DOMの加工処理をJQMのロード箇所よりも前に記述する必要がありました。

- サンプルコード @ jsFiddle (http://jsfiddle.net/somat/9mnAq/2/)

その後、当時のバージョンにはセキュリティホールが見つかったりして、ほんと短期プロジェクトでの利用でよかったな。。。と思った次第。

というわけで、JQM本体もいよいよ安定してきている?ようですし、サーバサイドの中の人と仲が悪くても大丈夫!積極的に jQuery Mobile つかっていきましょう。(注: 弊社のエンジニア同士の仲が悪いわけではありません)


参考リンク:
次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...