jQuery mobileの使用
javascriptのフレームワークjQueryには、
スマートフォンやタブレット型パソコンに特化したコンテンツ用のフレームワークjQuery mobileも有ります。
jQuery mobileを使用すれば、簡単にiPhoneライクなデザインを導入できるだけなく、
アニメーションを多用したインターフェースも同時にサポートされますが、注意も必要です。
ここでは、jQuery mobile使用時の注意事項を簡単にご説明します。
※本サイトは、jQuery mobileを使用して、スマートフォン、タブレット型パソコン用に最適化されています。
スマートフォン、タブレット型パソコンをご使用の方は、直接アクセスしてみてください。
自動的にご利用の環境に合わせてレイアウトが調整され、最も快適な状態で表示されます。
これは、今までのようにキャリアごとにコンテンツを作成して、振り分けているのではなく、
1つのコンテンツがスタイルを変えて表示しています。
その証拠に、モバイル機を縦、横にするだけでもレイアウトが変わる事が分かります。
言い換えれば、見る人の環境で見え方が違う次世代のwebサイトと言えます。
- jQuery mobileは、jQueryのプラグインの1つですので、jQueryも必須です。
jQueryなら何でも良いわけでなく、バージョンが1.6.4以上でなければなりません。
最低でもこれだけのスタイルシートとjavascriptが必要です。
<link type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" /> <link type="text/css" href="/common/themes/default/default.css" rel="stylesheet" /> <script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/jquery/js/jquery.mobile-1.0.1.js"></script>
1行目は、jQuery mobileの基本設定用スタイルシートですので、直接jQueryのオフィシャルサイトからインクルードしています。 こうしておけば、常に最新版が利用できるだけでなく、他のサイトでどなたかがインクルードしていればキャッシュされていますので非常に高速です。
2行目は、ご自身でデザインしたjQuery mobileのスタイルシートです。これは、 オフィシャルサイトに用意されている専用のテーマローラーで簡単に設計できます。
4行目でjQuery mobile対応のフレームワークjQuery 1.6.4を、5行目でjQuery mobileを読み込んでいます。
jQueryのバージョンは1.6.4以上にしてください。2012/04現在、TryCMSで正式にサポートしているのはjQuery-1.6.4、jQuery bobile-1.0.1です。 - jQueryには、オフィシャルサイトが公開するプラグインjQuery uiが有りますが、jQuery mobileはjQuery uiを正式にはサポートしていません。 したがって、jQuery uiのほとんどの機能が正式に動作しないだけでなく、jQuery uiのスタイルシートをインクルードすると、 jQuery mobileまで正常に動作しなくなります。 一部、工夫することで動作可能になりますが、基本的には動作しないものと思っていただいたほうが安全です。
- jQuery ui以外のプラグインもほとんどが動作しないものと思ってください。
スタイルだけでなく、プラグインが作成するレイヤーもjQuery mobileが制御してしまう為正常に動作しません。
特に、jQueryのプラグインで最も利用されている画像をポップアップさせて表示する「ライトボックス系」のプラグインは軒並み駄目です。
少しづつですが、jQuery mobile専用のプラグインも公開されてきていますので、気長に待ちましょう。 - TryCMSが採用しているwysiwygエディタTinyMCEは、jQuery mobileをサポートしません。
したがって、TinyMCEでjQuery mobile用のタグを編集することはできません。
自動的にリスト表示させるdata-role="listview"や、
アコーディオンのdata-role="collapsible-set"を設定しても不正なタグと判断して削除されてしまいます。
手動で作成されたjQuery mobile用のコンテンツも、TryCMSのコンテンツマネージャで開き、 編集して保存すると、すべてのjQuery mobile用のタグがすべて削除されますので十分ご注意ください。