戻る

試してみよう Dreamweaver CS5.5:挿入パネルを使ってスマートフォンサイトの開発を快適に!

Adobe Dreamweaver CS6 体験版 ダウンロード

「試してみよう! Dreamweaver CS5.5」第二回は、挿入パネルを活用したスマートフォン向けサイト開発の方法をご紹介します。
挿入パネルを活用すると、jQuery Mobile の知識や経験が無くても簡単に開発を始めることができます。早速、挿入パネルの使い方を見てみましょう。

挿入パネルについて

jQuery Mobile はスマートフォンサイト構築用にボタン、スライダー、リストなどの要素を提供します。jQuery Mobileを学習する場合、どのような要素が存在し、それぞれの要素にどのようなオプションがあるのかを学ぶことから始めますが、jQuery Mobile には非常に膨大な種類の要素やオプションがあります。一方、通常の開発に必要となる要素はほんの一部です。
Dreamweaver CS5.5 の挿入パネルを開くと、利用できる要素が一覧表示されます。そのため、必要な要素の選択が容易です。また、要素を選択すると、設定可能なオプションがダイアログボックスに表示されます。このように、挿入パネルを活用すれば一から jQuery Mobile を学習しなくても開発を始められます。さらに、挿入パネルを使うと、コードを1行も書くことなく要素を追加できます。
それでは実際に使ってみましょう。 →サンプルコードのダウンロード

挿入パネルから「jQuery Mobile」を選択します。

挿入パネルを表示し、パネル内のタブを「一般」から「jQuery Mobile」に切り替えます。
jQuery Mobile用の要素が表示され、選択できるようになります。

要素を挿入してみましょう。

リストを挿入してみましょう。サンプルの HTML ファイルを Dreamweaver CS5.5 で開き、デザインビューで「1 ページ」と書かれた領域の下の領域をクリックします。領域がフォーカスされると、領域の上に「jQuery Mobile: content」が表示されます。
次に、挿入パネルから「リスト表示」を選択します。ダイアログが表示されたらそのまま「OK」を押すと、フォーカスしていた場所にリスト要素が挿入されます。Dreamweaver CS5.5 をライブビュー表示にすると、下図のように表示されます。

このように、挿入パネルから選んだ項目が HTML ページに展開され、スタイルも自動で設定されます。リスト以外にもテキスト入力などのフォームに必要な要素やヘッダーやフッターなど様々な要素を挿入パネルから追加できます。

オプションの設定も簡単になります。

jQuery Mobile の要素には様々なオプションがあります。例えば、リストには「番号の有無」「テキスト説明の有無」などのオプションが用意されています。挿入パネルを活用すれば、これらのオプションをダイアログボックスから指定することができます。HTML コードの書き方を調べる必要はありません。
以下の図はリストに「分割ボタン」のオプションを有効にした状態です。先ほどのリストと比べてみてください。リストの右端に独立したボタンが追加されていることが分かると思います。

より高度な使い方

挿入パネルを含めた Dreamweaver のより高度な使い方に興味のある方は、ADC の関連記事をご覧下さい。