マルチスクリーンビューでブラウザチェック
一覧ページと詳細ページが完成しました。［マルチスクリーンプレビュー］画面で動作確認をしましょう。［マルチスクリーン］ボタンをクリックしてダイアログを開きます。
デフォルトの状態では、スマートフォン、タブレット、デスクトップの3種類の画面サイズで確認ができます。［ビューポートのサイズ...］ボタンをクリックすると［ビューポートのサイズ］ダイアログが開き、それぞれの画面サイズを変更することも可能です。
PhoneGap機能を使ってモバイルアプリに変換
Dreamweaver CS5.5では、iOSおよびAndroidのモバイルアプリケーションを手軽に作成できます。今回は、Android用モバイルアプリに変換する手順を紹介します。
まず、［サイト］-［モバイルアプリケーション］-［アプリケーションフレームワークの設定...］を選択します。
［アプリケーションフレームワークの設定］ダイアログが開きます。［Android SDKのパス］のテキストフォームの右にある、［簡易インストール］ボタンをクリックします。
すると、自動的にAndroid SDKのダウンロードとインストールが行われます。
［簡易インストール］ボタンについての不具合があり、AdobeのWebサイトでホットフィックスがリリースされています。Adobeサポートページの手順にそって、［Dreamweaver CS5.5 Android PhoneGap ホットフィックス］を適用してください。
［サイト］-［モバイルアプリケーション］-［アプリケーション設定...］を選択して［ネイティブアプリケーション設定］ダイアログを開き、アプリケーション名やアプリケーションアイコンなど、アプリの情報を設定します。必要項目を入力したら［保存］ボタンをクリックし［ネイティブアプリケーション設定］ダイアログを閉じます。
最後に、モバイルアプリをビルドし、エミュレータ上で実際に動作の確認をしましょう。［サイト］-［モバイルアプリケーション］-［ビルドおよびエミュレート］-［Android］を選択するとモバイルアプリのビルドが始まり、ビルドが完了するとエミュレータの起動が始まります。
エミュレータ起動後、作成したモバイルアプリの動作確認ができるようになります。
以上で、Dreamweaverで簡単なスマートフォン用Webページを作成し、モバイルアプリに変換する作業は終了です。あまりにも簡単で、びっくりされたのではないでしょうか？ Dreamweaverの強力なサポートがあれば、初めてスマートフォン用Webページを作る場合でも、スムーズかつスピーディに開発を進めることができることでしょう。
まとめ
これまでのDreamweaverといえば、単にWebページを作成・編集するソフトウェアというイメージでしたが、CS5.5では最新のフレームワークをサポートし、次世代のWeb制作の現場のニーズに存分に応えることのできるソフトウェアへと進化しました。
ぜひサンプルを実際に構築してみて、Dreamweaver CS5.5の魅力を体感してみてください。
