ハンズオン
2013.07.13
AITC第2回勉強会
TAKAOKA Daisuke
本日の目標
• 気象庁防災情報XMLを使った、防災くんの
作成
• http://xml.kishou.go.jp/
• http://cloud.projectla.jp/jmaxmldb/
• デモ
• http://dsuket.gith...
演習資料
https://github.com/dsuket/
aitc_handson2
準備
環境確認 (1)
•ブラウザ
•Google Chrome
•テキストエディタ
•(Sublime Text2)
環境確認 (2)
• jQuery
• http://jquery.com/
• jQuery Mobile
• http://jquerymobile.com/
• Node.js
• http://nodejs.org/
• Express...
作業環境の準備
• 今日の作業ディレクトリを作成(以下 $WORK)
• 例)$HOME/work/aitc_handson2
• $WORKに jquery_mobile, sencha_touch,
server の3つのディレクトリを作成...
Serverセットアップ
• コマンドプロンプトを立ち上げる。
• $WORK/serverへ移動
$ cd $WORK/server
Drag&Dropすると簡単
• express を実行し、npmをインストール
$ express
$ n...
Server起動
•app.js を node で実行
•ブラウザでアクセス
•http://localhost:3000
• 出ない人はFireWallとか、アンチウイルスソフトをチェック
$ node app.js
Express serv...
Server設定
•app.js を編集
•次の2行を追加
・・・
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use('/...
Server再起動
• jquery_mobile/ に適当なファイルを置く
• index.html とか
• サーバーを再起動
• Ctrl-C で停止して、再度起動
Ctrl-C
$ node app.js
Express server ...
作ってみよう!
•演習資料
• jquery_mobile/
• js/lib/jquery-2.0.2.min.js
• js/lib/jquery.mobile-1.3.1.min.js
• hello.html
•ポイント
• viewport
• sc...
formの作成
• 概要
• form要素を表示してみよう。
•演習資料
• form.html
• css/form.css
•ポイント
• formのウィジェット
• ボタン
• スタイル
listの作成
• 概要
• リストビューを表示しよう
• 詳細ページを表示する
•演習資料
• list.html
•ポイント
• listウィジェット
• 画面遷移
• 戻るボタン
formとlistを繋げる
• 概要
• formとlistページを繋げよう
• スマホで見てみよう
•演習資料
• list-form.html
•ポイント
• 画面遷移
• 戻るボタン
• スマホで確認
動的ページに挑戦!
01. pageの初期化
• 概要
• 現在の日付をセットする。
• ボタンを押したときフォームの値を取得。
•演習資料
• index01.html
• js/app01.js
•ポイント
• pageinit
• tap イベント
02. ajaxでデータ取得
• 概要
• ajaxでデータを取得しよう
•演習資料
• index02.html
• js/app02.js
•ポイント
• $.get
• jQuery.param
• fail
• $.mobile.loa...
03. ページ遷移
• 概要
• JavaScriptでページ遷移する
• リストの動的生成
•演習資料
• index03.html
• js/app03.js
•ポイント
• $.mobile.changePage
• listview
04. 詳細ページ
• 概要
• リストの詳細を表示しよう
• 演習資料
• index04.html
• js/app04.js
• ポイント
• $list.on('tap', '.list-
item', onTapItem)
• __d...
(おまけ) 05. read more
• 概要
• リストの追加読み込みをしてみよう
•演習資料
• index05.html
• js/app05.js
•ポイント
• data.paging.next
• createMore
お疲れ様でした
Upcoming SlideShare
Loading in …5
×

jQuery Mobile ハンズオン 資料

2,472 views

Published on

AITC勉強会 第2回 資料
http://aitc.jp/events/20130713-HTML5/info_v2.html

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,472
On SlideShare
0
From Embeds
0
Number of Embeds
1,028
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery Mobile ハンズオン 資料

  1. 1. ハンズオン 2013.07.13 AITC第2回勉強会 TAKAOKA Daisuke
  2. 2. 本日の目標 • 気象庁防災情報XMLを使った、防災くんの 作成 • http://xml.kishou.go.jp/ • http://cloud.projectla.jp/jmaxmldb/ • デモ • http://dsuket.github.io/aitc_handson2/
  3. 3. 演習資料 https://github.com/dsuket/ aitc_handson2
  4. 4. 準備
  5. 5. 環境確認 (1) •ブラウザ •Google Chrome •テキストエディタ •(Sublime Text2)
  6. 6. 環境確認 (2) • jQuery • http://jquery.com/ • jQuery Mobile • http://jquerymobile.com/ • Node.js • http://nodejs.org/ • Express • http://expressjs.com/
  7. 7. 作業環境の準備 • 今日の作業ディレクトリを作成(以下 $WORK) • 例)$HOME/work/aitc_handson2 • $WORKに jquery_mobile, sencha_touch, server の3つのディレクトリを作成 - $WORK/ - jquery_mobile/ - sencha_touch/ - server/
  8. 8. Serverセットアップ • コマンドプロンプトを立ち上げる。 • $WORK/serverへ移動 $ cd $WORK/server Drag&Dropすると簡単 • express を実行し、npmをインストール $ express $ npm install
  9. 9. Server起動 •app.js を node で実行 •ブラウザでアクセス •http://localhost:3000 • 出ない人はFireWallとか、アンチウイルスソフトをチェック $ node app.js Express server listening on port 3000
  10. 10. Server設定 •app.js を編集 •次の2行を追加 ・・・ app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); app.use('/jqm', express.static(path.join(__dirname, '../jquery_mobile'))); app.use('/sencha', express.static(path.join(__dirname, '../sencha_touch/SampleApp'))); ・・・
  11. 11. Server再起動 • jquery_mobile/ に適当なファイルを置く • index.html とか • サーバーを再起動 • Ctrl-C で停止して、再度起動 Ctrl-C $ node app.js Express server listening on port 3000 • ブラウザでアクセス • http://localhost:3000/jqm/index.html
  12. 12. 作ってみよう!
  13. 13. •演習資料 • jquery_mobile/ • js/lib/jquery-2.0.2.min.js • js/lib/jquery.mobile-1.3.1.min.js • hello.html •ポイント • viewport • scriptタグと位置 • data-role • Chrome Dev Tools Hello jQuery Mobile • 概要 • 簡単なページを表示してみましょう。
  14. 14. formの作成 • 概要 • form要素を表示してみよう。 •演習資料 • form.html • css/form.css •ポイント • formのウィジェット • ボタン • スタイル
  15. 15. listの作成 • 概要 • リストビューを表示しよう • 詳細ページを表示する •演習資料 • list.html •ポイント • listウィジェット • 画面遷移 • 戻るボタン
  16. 16. formとlistを繋げる • 概要 • formとlistページを繋げよう • スマホで見てみよう •演習資料 • list-form.html •ポイント • 画面遷移 • 戻るボタン • スマホで確認
  17. 17. 動的ページに挑戦!
  18. 18. 01. pageの初期化 • 概要 • 現在の日付をセットする。 • ボタンを押したときフォームの値を取得。 •演習資料 • index01.html • js/app01.js •ポイント • pageinit • tap イベント
  19. 19. 02. ajaxでデータ取得 • 概要 • ajaxでデータを取得しよう •演習資料 • index02.html • js/app02.js •ポイント • $.get • jQuery.param • fail • $.mobile.loading
  20. 20. 03. ページ遷移 • 概要 • JavaScriptでページ遷移する • リストの動的生成 •演習資料 • index03.html • js/app03.js •ポイント • $.mobile.changePage • listview
  21. 21. 04. 詳細ページ • 概要 • リストの詳細を表示しよう • 演習資料 • index04.html • js/app04.js • ポイント • $list.on('tap', '.list- item', onTapItem) • __data__
  22. 22. (おまけ) 05. read more • 概要 • リストの追加読み込みをしてみよう •演習資料 • index05.html • js/app05.js •ポイント • data.paging.next • createMore
  23. 23. お疲れ様でした

×