DreamweaverとFireworksを連携し、jQuery Mobileのサイトを作る方法の基本編です。

1. DreamweaverとFireworksを連携し、
jQuery Mobile使用したサイトを作る方法
2013/01
Yuki Yokoyama
13年1月27日日曜日

2. 目次
jQuery Mobileの必要ファイルとテーマ構造
Fireworksでのテーマ作成
Dreamweaverのjquery mobile機能
まとめ
13年1月27日日曜日

3. jQuery Mobileの必要ファイルと
テーマ構造
13年1月27日日曜日

4. 必要なファイル
jQuery本体
jQuery Mobile本体
jQuery MobileのCSS
jQuery Mobileの画像（images）
13年1月27日日曜日

5. あれ？
たくさんファイルがあるやないかい!?
13年1月27日日曜日

6. あれ？
たくさんファイルがあるやないかい!?
尼崎のゆるキャラ
ちっさいおっさん
13年1月27日日曜日

7. 必要なファイル
min → 改行を省いた縮小版
structure → 構造のみCSS
theme → カスタマイズテーマのみのCSS
13年1月27日日曜日

8. 必要なファイル
min → 改行を省いた縮小版
structure → 構造のみCSS
theme → カスタマイズテーマのみのCSS
テーマをカスタマイズするときは、
structure.cssを使用する！！
13年1月27日日曜日

9. CDN
（*コンテンツデリバリーネットワーク）
jQuery本家で配布されているで、
サイト高速化のためにCDNを推奨
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
*ライブラリや画像リソースなど、
コンテンツ配信専門に最適されたネットワークのこと。
13年1月27日日曜日

10. jQuery Mobileのテーマ構造
デフォルトで 5種類のテーマが存在
テーマ属性をつけなければ、データaが適用
全体を同じテーマで統一することも、部品ごとに組み替えるこ
とも可能
13年1月27日日曜日

11. Fireworksを使用してテーマを作成する
13年1月27日日曜日

12. 新規テーマを作成
13年1月27日日曜日

13. ページ機能の中にアイコンや各
テーマが入っている
無駄なCSSを省くため、aとbを残し、
cdeは削除。
aをメインテーマにし、
bをサブテーマにする。
13年1月27日日曜日

14. アイコンとUIの変更
13年1月27日日曜日

15. テーマの色を変更する
13年1月27日日曜日

16. ブラウザでプレビュー
13年1月27日日曜日

17. テーマの書き出し
•
imagesフォルダ
•
icon用CSS
•
theme CSS
13年1月27日日曜日

18. Dreamweaverを使用して
jQuery Mobileのサイト作る
13年1月27日日曜日

19. サイトを定義し、index.htmlを作成する
13年1月27日日曜日

20. pageを挿入する
13年1月27日日曜日

21. 読み込みファイルを設定する
リンクの種類 → ひとまずローカルに。
CSSのタイプ → 分割
テーマ → Fireworksで作成したテーマを選択
13年1月27日日曜日

22. テンプレートが生成される
13年1月27日日曜日

23. metaタグを変更・追加する
13年1月27日日曜日

24. <meta name="viewport" content="width=device-
width,user-scalable=no" />
<meta name="format-detection"
content="telephone=no" />
<link href="./css/g-theme.css" rel="stylesheet" type="text/
css" />
<link href="./css/jquery.mobile.structure-1.2.0.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/
jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.js"></script>
</head>
13年1月27日日曜日

25. 画像を挿入してみよう
画像は表示したい倍のサイズで作成し、
必ず100%で指定
もしくは、cssファイルに以下を追加
img{ max-width: 100%;height: auto;width /***/:auto; }
13年1月27日日曜日

26. リストビューを追加してみよう
<ul data-role="listview" data-inset="true">
<li><a href="#">
<h3>ページ</h3>
<p>Lorem ipsum</p>
</a></li>
<li><a href="#">
<h3>ページ</h3>
<p>Lorem ipsum</p>
</a></li>
<li><a href="#">
<h3>ページ</h3>
<p>Lorem ipsum</p>
</a></li>
</ul>
13年1月27日日曜日

27. その他のデフォルト挿入機能
レイアウトグリッド設定
縮小可能ブロック
テキスト入力
パスワード入力
テキスト領域
メニューを選択
チェックボックス
ラジオボタン
ボタン
スライダー
フリップトグルスイッチ
13年1月27日日曜日

28. さらに、便利なコード補完機能
コレがめっちゃ便利！！！
13年1月27日日曜日

29. さらに、便利なコード補完機能
コレがめっちゃ便利！！！
jQuery Mobileは独自のタグで
構成され、覚えるのが大変
13年1月27日日曜日

30. 例えば、
ページ遷移にアニメーションをつけたいとき
アイコンをつけたいとき
13年1月27日日曜日

31. まとめ
13年1月27日日曜日

32. jQuery Mobileのファイル、テーマ、基本
タグを理解する
Fireworksでカスタムテーマ作成を作成す
ることができる
Dreamweaverでライブデザインビューを
見ながら、簡単に作成することができる
13年1月27日日曜日

33. 補足
jQuery Mobileには「themeroller」という、
テーマ作成用サイトがある
http://jquerymobile.com/themeroller/
※fireworksとの違いはアイコンは作成できないこと。
13年1月27日日曜日

34. ご清澄ありがとうございました。
13年1月27日日曜日