Dreamweaverでスマートフォンサイト作成

DreamweaverCS5.5の新機能

DreamweaverCS5.5からJavaScriptフレームワークの『jQuery Mobile』に対応するようになりました。これまでDreamweaverはモバイルサイトを作成するのに決して使い勝手のいいソフトではありませんでしたが、今回の新機能によりかなり使い勝手がよくなりました。今回から数回にわたり『jQuery Mobile』を使ったサイトの作り方を検証してみたいと思います。 今までのサイトと区別するため新しく『sp』フォルダを作成して、そこにスマートフォン用のサイトを作成していきたいと思います。

①ファイル→新規作成で『新規ドキュメント』ダイアログを開き、『サンプルから作成』→『モバイルスターター』→『jQuery Mobile(ローカル)』とクリックします。下記のようなソースコードが作成されました。

②スマートフォンではどのように表示されるのか『ライブコード』をクリックしてみます。すると『jQuery Mobile』特有のレイアウトが表示されます。

③それでは、どんな構造になっているのか『ライブコード』を解除して調べてみます。同じファイルの中にトップページ、2ページ目、3ページ目と配置され、アンカーリンクが張られています。

④それでは少し編集してみましょう。『ライブビュー』を解除します。表題を『WinRoad会員サイト』に変更し、リスト名を変更したら、対応している箇所(アンカーリンクの張られている箇所)の名称も変更します。フッダーは全て同じにしました。

⑤『ライブビュー』をクリックして、実際にどのように表示されるか見てみます。

⑥リストの中の『DVD一覧』をクリックしてみます。

⑦『DVD一覧』のページが表示されます。トップページに戻るための『Back』ボタンも作成されています。

⑧このようにコンテンツさえ決まっていれば30分程度で簡単なスマートフォンサイトが作成できます。 それでは、いったん最初に作った『sp』フォルダにindex.phpとして保存します。

⑨『ファイル』→『別名で保存』で保存先とファイル名(index.php)を入力し、『保存』ボタンをクリックすると、『依存ファイルのコピー』ダイアログが表示されますので、そのまま『コピー』ボタンをクリックします。

⑩『依存ファイル』のダイアログボックスで『コピー』をクリックします。ファイルの一覧を見てみると、『jquery-mobile』のフォルダと関連ファイルが作成されています。

以上、今日はDreamweaverCS5.5の新機能『jQuery Mobile』の使い心地を簡単に検証しました。

Adobe Dreamweaver CS5.5 Windows版
アドビシステムズ (2011-05-20)
売り上げランキング: 265

マッキーさんのご質問にお答えします。以下のようなタグでBackボタンを生成することができるはずです。試してみてください。

<div data-role=“header”>
<a href=“” data-rel=“back”>Back</a>
</div>

タグ

このページの先頭へ