DW CS5.5＋jQuery Mobileを使いこなすための心得10項目

Dreamweaver CS5.5とjQueryMobileを使えばスマートフォンサイトは簡単に作成できますが、やはり使いこなすためには、CS5.5だけでは不足な部分や注意点を知っていなければなりません。
ここであげた点について自信を持って大丈夫と言える人はDW CS5.5＋jQuery Mobileマスターといえるのではないでしょうか。


1. jQuery Mobileの要素を簡単に作成することはできますが、オプションは基本的な項目のみです。また、いったん出力した要素のオプションは変更できません。
→手動で属性を追加したり変更したりする必要がでてきます。


2. コードの自動補完は属性名の候補などは出ますが、そもそもどの要素にどの属性を付けられるかなどには対応していません。
→属性の内容や効果については知っておく必要があります。属性名がうろ覚えでも指定できたり、タイプミスを防ぐものになります。


3. 親要素と子要素の組み合わせで、複雑なjQuery Mobleの要素を構成するものに対応していません。
→例えば、<select>要素にある属性を指定すると、<option>要素にこの属性を指定できるなどの組み合わせを考える必要があります。


4. 最新のビルドに対応していなければ、いくつかの機能で不具合がでる可能性があります。
→jQuery Mobileは当面の間、頻繁にアップデートされると予想されます。バグフィクスのためにも使用するライブラリを更新する必要がありますが、実際DW5.5でビルトインされているバージョンはalpha3となっています。(現在のリリースはalpha4.1)


5. CSS3のマルチスクリーン（メディアクエリ）の機能は、Androidなど一部で非対応端末があります。
→jQuery Mobileの対応した疑似マルチスクリーン（メディアクエリ）機能があるのでそちらに手動でのせ替える必要があります。


6. jQuery Mobile用のスニペットは用意されていないので、自分でノウハウを溜める必要があります。
→日本語化、テーマのカスタマイズ、アイコンなどなど


7. jQuery Mobileのデザインのカスタマイズに対応していないため、jQuery Mobileの作法にのっとった記述が必要です。
→jQuery Mobileの要素の装飾の仕方やクラス名の使い方、内容を知る必要があります。


8. 単一ページで作成したとき、複数ページに分ける場合の作法などがあります。
→例えば、複数ページにしたときに<script>要素、<style>要素などは<div data-role="page">の中に配置しないと読み込まれないなど。


9. デザインビューのもっさり感が気になる人は、スクラッチで作成しながら確認していくのはある程度の目処で行う。
→最初にDW5.5でモックを作成(テンプレートを利用)し、カスタマイズを手動で行い、最後にDW5.5で確認を行うのが良いと思います。


10. jQuery Mobileは自動でモバイル向けのサイトを構築しますが、ボタンの大きさに見られるように一定の規約やデザイン指向に準拠しています。
→スマートフォン制作のためのハウツーを知らなければ、より良いカスタマイズはできません。（アップルの規約ではボタンの大きさは最低44px必要など）

以上です。（文字だけですみません…）

逆にDW CS5.5がこれらの手の届かないところに対応していけば、もっと素晴らしいツールになることは間違いありません。筆者も今後のバージョンアップに期待しています！


[PR] 2011年7月9日（土）に、jQuery Mobile徹底習得講座を予定しています。詳細は，jQuery Mobile徹底習得講座詳細ページまで。