DreamweaverとFireworksを連携し、jQuery Mobile使用したサイトを作る方法

2013/01Yuki Yokoyama

13年1月27日日曜日

目次

jQuery Mobileの必要ファイルとテーマ構造

Fireworksでのテーマ作成

Dreamweaverのjquery mobile機能

まとめ

13年1月27日日曜日

jQuery Mobileの必要ファイルとテーマ構造

13年1月27日日曜日

必要なファイル

jQuery本体jQuery Mobile本体jQuery MobileのCSSjQuery Mobileの画像（images）

13年1月27日日曜日

あれ？たくさんファイルがあるやないかい!?

13年1月27日日曜日

あれ？たくさんファイルがあるやないかい!?

尼崎のゆるキャラちっさいおっさん

13年1月27日日曜日

必要なファイル

min → 改行を省いた縮小版structure → 構造のみCSStheme → カスタマイズテーマのみのCSS

13年1月27日日曜日

必要なファイル

min → 改行を省いた縮小版structure → 構造のみCSStheme → カスタマイズテーマのみのCSS

テーマをカスタマイズするときは、structure.cssを使用する！！

13年1月27日日曜日

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>

jQuery本家で配布されているで、サイト高速化のためにCDNを推奨

*ライブラリや画像リソースなど、 コンテンツ配信専門に最適されたネットワークのこと。

13年1月27日日曜日

jQuery Mobileのテーマ構造デフォルトで 5種類のテーマが存在

テーマ属性をつけなければ、データaが適用

全体を同じテーマで統一することも、部品ごとに組み替えることも可能

13年1月27日日曜日

Fireworksを使用してテーマを作成する

13年1月27日日曜日

新規テーマを作成

13年1月27日日曜日

無駄なCSSを省くため、aとbを残し、cdeは削除。aをメインテーマにし、bをサブテーマにする。

ページ機能の中にアイコンや各テーマが入っている

13年1月27日日曜日

アイコンとUIの変更

13年1月27日日曜日

テーマの色を変更する

13年1月27日日曜日

ブラウザでプレビュー

13年1月27日日曜日

テーマの書き出し

• imagesフォルダ • icon用CSS • theme CSS　

13年1月27日日曜日

Dreamweaverを使用してjQuery Mobileのサイト作る

13年1月27日日曜日

サイトを定義し、index.htmlを作成する

13年1月27日日曜日

pageを挿入する

13年1月27日日曜日

読み込みファイルを設定する

リンクの種類 → ひとまずローカルに。CSSのタイプ → 分割テーマ → Fireworksで作成したテーマを選択

13年1月27日日曜日

テンプレートが生成される

13年1月27日日曜日

metaタグを変更・追加する

13年1月27日日曜日

<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日日曜日

画像を挿入してみよう

画像は表示したい倍のサイズで作成し、必ず100%で指定もしくは、cssファイルに以下を追加img{ max-width: 100%;height: auto;width /***/:auto; }

13年1月27日日曜日

リストビューを追加してみよう

<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日日曜日

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

13年1月27日日曜日

さらに、便利なコード補完機能

コレがめっちゃ便利！！！

13年1月27日日曜日

さらに、便利なコード補完機能

コレがめっちゃ便利！！！

jQuery Mobileは独自のタグで構成され、覚えるのが大変

13年1月27日日曜日

例えば、ページ遷移にアニメーションをつけたいとき

アイコンをつけたいとき

13年1月27日日曜日

まとめ

13年1月27日日曜日

jQuery Mobileのファイル、テーマ、基本タグを理解する

Fireworksでカスタムテーマ作成を作成することができる

Dreamweaverでライブデザインビューを見ながら、簡単に作成することができる

13年1月27日日曜日

補足jQuery Mobileには「themeroller」という、テーマ作成用サイトがある

※fireworksとの違いはアイコンは作成できないこと。

http://jquerymobile.com/themeroller/

13年1月27日日曜日

ご清澄ありがとうございました。

13年1月27日日曜日