Havelog.aho.mu

CSS Nite HIROSHIMA, Vol.4 〜 はじめてのjQuery Mobileフォローアップ

Posted: Updated:

フォローアップ

ご参加いただいた皆様へ，当日のご清聴ありがとうございました．

当日のスライド

当日のHTMLスライドです．Webkit系のフルブラウザ( Safari, Chrome )でご覧ください．

フォローアップコンテンツ見出し

jQuery Mobileに関連したリソースの紹介

Resources | jQuery Mobileでは，jQuery Mobileを利用したサイトの事例や書籍，プラグインツールなどが紹介されています．

jQuery Mobileは標準でも様々な機能が提供されていますが，そこにプラグインを加えることで更に表現の幅が広がると思います．特にプラグインは使い始める前に目を通しておくと良いと思います．

テーマのカスタマイズに役立ちそうなサイト

当日にデモでご紹介した公式のTheme Rollerの他にも，jQuery Mobileっぽくないサイトを作る際に，実装面で参考になりそうなリソースがあります．

Theme Rollerで大枠をざっと整えてから，参考情報を元に細かいところを調整していくと良いのではないでしょうか．

その他，data-*の使い回し等の応用的カスタマイズは公式ドキュメントほか，日本語のコンテンツも充実してきていますので，ぜひ参考にしてみてください．

事例として紹介させていただいたサイト

どのサイトも共通して，jQuery Mobileをうまく使いつつ量産品のように感じさせないカスタマイズがされているので参考になります．

Boorbool Communication Mobile (※1) : http://m.boorbool.com/

BARACKOBAMA.com : http://www.barackobama.com/m/

优众-全球顶级时尚奢侈品在线零售商 (※1) : http://m.ihaveu.com/

C . D R I C : http://c.dric.be/

※1 PCで見る場合はUserAgentを偽装してください．なにもしないとPCサイトにリダイレクトされます．（普通にiPhone・Androidの実機でご覧いただいたほうがいいと思います）

当ブログ内のjQuery Mobile関連情報

手前味噌ですが，当ブログ内に過去のjQuery Mobileに関連した情報（技術寄り）がありますので，ご参考までに紹介します．

アルファ以前のバージョンで触ったことがある方は，変更点をチェックしていただくとよりjQuery Mobileの良くなった所や変更点をカバーできるとおもいます．

当日のデモに利用したコード

実装デモ中に紹介していたスニペット部分のコードです．jQuery Mobile v1.0正式版時点のものですので，バージョン番号等は随時最新のDonwloadのCopy-and-Paste Snippet for CDN-hosted filesから差し替えてください．

<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

このコードをHTMLのHEAD要素内に入れることで，すぐにjQueryMobileを利用できる状態になります．

また，上記ではjQuery本体のバージョンが1.6.4となっていますが，これはjQuery Mobile v1.1から本体も最新の1.7対応に更新される予定です．

XSS脆弱性にご注意ください

jQuery Mobile 1.0のアルファバージョン ( 1.0a4.1以前 ) には，XSS(クロスサイトスクリプティング)脆弱性の存在が確認されています．

オーサリングツールが組み込み機能で提供しているjQuery Mobileのバージョンも古いことがあります．そのまま使用してしまうと，閲覧者に予期せぬ不具合が発生する恐れがあります．必ず正式版を使用しているかを確認し，古ければ正式版に差し替えてください．

Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search