講師だって、最初は初心者だもの[番外]Dreamweaver & Fireworks CS6「jQuery Mobileページの組み立てをもっと手軽に」〜CS6 その5〜/森 和恵

投稿:  著者:  読了時間:8分(本文:約3,600文字)


こんにちは。森和恵です。お盆前にお休みをいただいたので、だいぶ空いてしまいました。<(_ _)>
あっという間に、もう8月も最終週。夏も終わりに近づいていますね。

さて今回は、CS6新機能ネタのラストになる、jQuery Mobileがらみの新機能をご紹介します。

完成データはこちらです。

  【素材】今回作成したサイトデータ
  < http://r360studio.com/dgcr/dgcr-extra24.zip >

●jQuery Mobileとは?

jQuery Mobileは、モバイルサイト構築のためのフレームワーク。スマホ対応サイトっぽいデザインや、ページ遷移アニメーションを手軽に組み込めます。コードは、「HTML5+CSS3+Javascript」で構成されています。プログラムが軽量・高速化されているのと同時に、対応デバイスが多いのが特徴です。

Dreamweaver CS5.5 から、jQuery Mobile関連のツールが追加されていましたが、今回CS6となり、DreamweaverとFireworksを連携させて更に機能が進化しました。

Fireworksで、デザインを担当する「テーマ」を書き出し、Dreamweaverでページを組み立てるという流れで使います。

  【参考】講師だって、最初は初心者だもの[番外]
  Dreamweaver CS5.5 をチェック(3)JQuery Mobile簡単書き出しが超便利
  < http://bn.dgcr.com/archives/20110728140100.html >



●Dreamweaverで jQueryMobileページを作成

サイト定義をした場所に、新規でHTMLページ(HTML5)を作成します。body要素内の任意の位置で、[挿入パネル](jQuery Mobileカテゴリ)から、[ページ]を挿入します。挿入時のダイアログでは、「リモート(CDN)」・「結合」を選んで進みます。続く画面では、ページIDを指定します。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-001.png >

この時点で、ライブプレビューした画面は下記のようになります。CDN(サーバー参照)でjQuery Mobileが読み込まれ、ページが一つ作成されています。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-002.png >

CS6から追加された[jQuery Mobile スオッチ]パネルを使って、テーマを変更することもできます。ライブビューで変えたい部分をクリックし、パネルでテーマを選びます。下記の画面では、[ウィンドウ]メニューからパネルを呼び出し、ライブビューでヘッダーとフッターを選択し、テーマ'b'に変えてみました。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-003.png >

リンク先のページを2ページ追加し、コンテンツを書き足して今回は完了です。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-009.png >


●Fireworksでテーマを書き出し

今度は、Fireworksでテーマを作成してみます。
まず、[コマンド]-[jQuery Mobileテーマ]-[新規テーマを作成]メニューを実行してテーマファイルを作ります。[ページ]パネルを確認すると、用途に合わせたページが作成されています。

[01 グローバルセットおよび...]ページを選び、各テーマで共通に使用されるパーツを変更します。下記の画面では、リストメニュー右側に表示される「>」アイコンと「アイコン背景」を変更しました。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-004.png >
  ※アイコンは、高解像度/低解像度/白/黒の4種類があります。

次に[02 a]と[03 b]ページで、テーマ"a"とテーマ"b"の「ヘッダーまたはフッター」と「コンテンツ」の色を変更しました。その他に必要ないテーマのページは削除しています。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-005.png >
  < http://r360studio.com/dgcr/dgcr-extra24-006.png >
  ※必要のないテーマを削除すると、書き出されるCSSファイルの容量が軽
  くなる

Fireworksで作成したテーマを確認します。[ウインドウ]-[エクステンション]-[jQuery Mobileテーマのアプリ内プレビュー]を実行します。[ページ]パネルで表示したいテーマを選択し、[jQuery Mobileテーマのアプリ内プレビュー]パネル右下の[パネルの更新]をクリックするとビューが切り替わります。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-007.png >

●テーマの書き出しと適応

Fireworksから、テーマの書き出しを行います。
[コマンド]-[jQuery Mobileテーマ]-[テーマを書き出し]メニューを実行します。Dreamweaverでサイト定義したフォルダ内に書き出します。5つのCSSファイルとimagesフォルダが作成されます。そのうち、HTMLページから呼び出すのは、書き出し途中で自分で名付けたCSSファイルのみです。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-008.png >
  ※今回は jqmフォルダ内に、jqm.cssと名付けて書き出しました。

次に、テーマを適応します。ついでに、jQueryMobileの最新バージョンを使うようにコードを書き換えます。Themeroller < http://jquerymobile.com/themeroller/ >を表示し、[Download]をクリックします。[Download Theme]ダイアログの<meta name="viewport">〜</script> までをコピーします。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-010.png >

作成中のHTMLページの該当部分と差し替えます。次に、最初に読み込むCSSファイル(<link rel="stylesheet" href="〜.css" />)をFireworksから書きだした自分で名付けたCSSファイルに書き換えます。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-011.png >

これで完成です。書き換え後、ライブプレビューや[jQuery Mobile スオッチ]パネルを確認すると、Fireworksで書き出したテーマに変わっています。

  【画面】
  < http://r360studio.com/dgcr/dgcr-extra24-011.png >

適応時のおまじない(head要素内の書き換え)さえ間違えなければ、すごく楽ちんにjQuery Mobileテーマの変更が出来ちゃいますね! いままで苦手だった方も是非チャレンジしてみてください。

......ということで、今回は終わりです。次回は、10月に神戸で開催されるCSS Nite in KOBE に関連した話題をと思っております。
ではまた!(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜 Web系インストラクター 〜】
site: < http://r360studio.com > twitter:< http://twitter.com/r360studio >
mail: <r360studio@gmail.com >
サイト制作の教科書 r360study: < http://www.facebook.com/r360study >

「Web制作者のモチベーションアップ」をテーマに行われるCSS Nite in KOBE,Vol.1。実は"地元スピーカー"として登壇いたします。
※何を隠そうワタクシ、生まれは兵庫区、育ちは須磨区の神戸っ子なのです。「教えてみてわかった、新しいことを覚える仕組み」というタイトルで、私がいつもどんなふうに情報を仕入れて、セミナーにしているか...という企業秘密的なこと(笑)をお話したいと思います。

・CSS Nite in KOBE, Vol.1
< http://cssnite-kobe.jp/ >