Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作

Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作

2011/8/3ADC MEETUP ROUND 02

Toru Yoshikawa ( @yoshikawa_t )

自己紹介

• HTML5 Developers JP 「HTML5とか勉強会」スタッフ

- Chrome+HTML5 Conference～第20回HTML5とか勉強会～(8/21)

• gihyo.jpと@ITでChrome Web Storeについて連載

• jQuery Mobile本執筆中

• allWebクリエイター塾 jQuery Mobile担当講師

吉川　徹Toru Yoshikawa( @yoshikawa_t )

アジェンダ

• jQuery Mobile概要

• CS5.5 + jQuery Mobileによるスマートフォンサイト制作デモ

jQuery Mobileとは？

• モバイルサイト構築のためのフレームワーク

• 有名なJavaScriptライブラリのjQueryをベースとしたフレームワーク

• まだβ版（β1を含む以前のバージョンにはセキュリティに注意）

jQuery Mobileの特徴

• Cross-Platform

• Markup-driven

• Progressive Enhancement

• jQuery Mobile + PhoneGap

• jQuery Mobile + DW CS5.5

Cross-Platform

Markup-driven

• HTMLのマークアップで構築可能

<!-- リンクボタン --><a href="#" data-role="button">ボタン</a>

Progressive Enhancement

JavaScript ON JavaScript OFF

jQuery Mobile＋PhoneGap

• iPhone/Androidアプリに変換

• 公式サポート

• ネイティブの機能を利用できる

jQuery Mobile＋DW CS5.5

• jQuery Mobile Widget

• テンプレート生成

• コードの入力補完

• PhoneGapのビルドとエミュレートをサポート

スマートフォンサイト制作

DEMO

Adobe GEEK Festival

• ホーム

• お申し込み

• コンテスト概要

• 会場

• Adobe GEEKとは

関連記事

jQuery Mobile Widgetでスマートフォン対応サイトを作ろう

その1　http://adobe.ly/q6DtnD

その2　http://adobe.ly/q7JLH7

jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペットhttp://adobe.ly/oOYPcH

参考情報

Android SDK の簡易インストールに失敗する（Dreamweaver

CS5.5）http://kb2.adobe.com/jp/cps/905/cpsid_90589.html

Thank You!!Toru Yoshikawa ( @yoshikawa_t)