HTML5／CSS3だけじゃない！
jQuery Mobileにも対応したDreamweaverを使ってみよう
モバイルアプリ開発者必見！Dreamweaver CS5.5概説
ダウンロード サンプルソース (851.3 KB)
マルチスクリーンビューでブラウザチェック
一覧ページと詳細ページが完成しました。［マルチスクリーンプレビュー］画面で動作確認をしましょう。［マルチスクリーン］ボタンをクリックしてダイアログを開きます。
デフォルトの状態では、スマートフォン、タブレット、デスクトップの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の魅力を体感してみてください。
参考リンク
この記事は参考になりましたか？
既に会員の方はを行ってください。
- この記事の著者
-
原一浩（はらかずひろ）
Greative（グレーティブ）代表/Design Wedge編集長/ワイヤーフレームコミュニケーション研究会主催。1998年にWebデザイナーとして独立。同年、ウェブデザイン専門のメールメディアDesignWedgeの発行を開始。Webデザインやシステム開発業務の傍ら、海外のWebデザインに関する情報発信および、研究、開発に関わる。CSS Nite出演など講演および、雑誌への寄稿多数。主な著書に、『プロ...
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
ハラナツコ（ハラナツコ）
1980年生。Webデザイナ。 主にデザイン担当、コーディングは嗜む程度。 出産後、現在は社会復帰すべく鋭意リハビリ中。子育ても絶賛奮闘中。Web：http://cofcof.net/ Twitter：@COF Facebook：http://www.facebook.com/#!/natsucof
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
