はじめてのjQueryMobile - WCAN 2011 Autumn フォロー記事
Posted: Updated:
当日のスライド
さる2011年9月10日に，WCAN 2011 Autumnのセッション2-Cで，jQuery Mobileについて紹介させていただきました．jQuery Mobileを都合良く取り回して，モバイルサイトに役立てようという主旨でございます．
HTMLスライドですが，なるべくWebKit系のフルブラウザでご覧ください．（FirefoxやIEは閲覧を確認できておりませんので...）
当日の要点
当日は，下記のように各トピックにフォーカスをあてて，jQuery Mobileの光と闇（嘘）について紹介させていただきました．
- スマフォサイトを取り巻く背景
- jQuery Mobile自身の特徴・メリット
- 実装のデモンストレーション
- jQueryMobileを活用している国内外の事例
使い所を選びつつも，モバイルフレームワーク界の本命ファストフードjQuery Mobileをオイシイところで使ってみてください！
当日セッションでの口頭補足
- DOMキャッシュは基本の原理はこうですが，クラッシュする問題はbetaで改善ずみ
- 反面教師の例は当日セッション内でのみの紹介となります ;-)
- alpha4.1時点のトランジションには同情の余地
- beta2以前のHash-Based URLを嫌ってAjaxをdisableにするのも同情の余地
割愛シリーズ
当日の時間配分による都合，半端にしか言及できなかったポイントについて補足させていただきます．ひとつひとつの単語について，参考URLを載せていますのでご参考ください．
XSSとアップデートの問題
少し前に，jQuery MobileにXSS（クロスサイトスクリプティング）脆弱性があると話題になりました．現在の最新バージョンでは，既知の問題は解消されていますが，今後も必要なときにすぐにアップデートできる体制作りが必要です．
そのためにも，簡単なところで「jQuery Mobile本体のJavaScriptとCSSを編集しない」ことが望ましいです．jQuery Mobileに限ったことではありませんが，導入後に発生した不測の事態にも，後々対応しやすくするための考慮が必要です．
IPA：知っていますか？脆弱性／2. クロスサイト・スクリプティング : http://www.ipa.go.jp/security/vuln/vuln_contents/xss.html
data-* カスタムデータ属性
HTML5の中にある，任意のメタデータをHTMLに埋め込むための仕様です．JavaScriptで利用したいデータを入れる用途が主で，セマンティックさが求められるmicrodataとは異なります．Twitterのツイートボタンやmixiチェックなどで身近ですね．
HTML5では、data-* の書式でカスタムデータ属性を定義できるらしい : http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html
Embedding custom non-visible data with the data-* attributes : http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
WAI-ARIA
多様化するWebアプリケーションにおける，アクセシビリティ確保のための仕様です．画面上のコンポーネントの役割(role)や状態(state)を，role属性や，aria-*属性などとして示します．スクリーンリーダのような支援技術は、それらの属性情報を元に，ユーザーのWebアプリ操作をサポートします．
WAI-ARIA導入（日本語訳） - TRANS : http://d.hatena.ne.jp/aratako0/20090709/p1
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C勧告候補) : http://www.w3.org/TR/wai-aria/
脱線シリーズ
本編にあまり関係ありませんが，今回のセッションでデモ・スライドに使用したツール類につきまして．興味のある方がいらしたらご参考ください．
iOSシミュレーター
jQuery Mobileの事例を紹介しているときに，しれっと使っていたソフトウェアはiOSのシミュレーター（エミュレーター）です．XCodeというAppleが提供しているIDE（統合開発環境）をインストールすると，もれなくついてきます．
じつは当日のスライドも
今回セッションで使用したブラウザ上のスライドも，jQuery Mobileのアニメーションとスタイルを利用して作られていました．興味のある方は公開されているスライドの公開URLからソースコードを参照してみてください．作りはとても邪悪ですが・・・．
当日のご静聴ありがとうございました
人前で話す機会があまり多い方でもないので，大変貴重な機会をいただいた次第で．みなさまご参加いただきありがとうございました！ m(_ _)m
アンケートでご質問いただいた方々には，また順次個別でお返しいたしますので，よろしくおねがいします．
