(1/3)Dreamweaver環境をセットアップし簡単なWebアプリを作ってAndroidで動くネイティブアプリにする手順を紹介します。World!」アプリの制作までを紹介しました。1.0がリリースされました。詳細は、記事「HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。Publickey」をご参照ください。Mobileを使って、スマートフォンで動く簡単なネイティブアプリケーションを作る手順を紹介します。5.5は、30日間は機能制限なく使うことのできる体験版として無料でダウンロードできます。ダウンロードアシスタント「AdobeDownloadAssistant.exe」をダウンロードしてください。AIRの実行環境のアップデートが必要な場合もあるので、こちらも最新版をダウンロードしてインストールしておいてください。登録しておくか、ダウンロードアシスタントから作成するかして、入手しておいてください。無事にDreamweaverのインストーラがダウンロードできたら、セットアップを始めます。インストールに関しては、手順通り進めれば問題ありません。途中でシリアル番号を聞かれるところがありますが、体験版として使用する分にはシリアル番号は必要ありません。Mobile+PhoneGapアプリ作成の準備Dreamweaverを起動すると、どのタイプのファイルを作成するか聞かれるので、[新規作成]欄の一番下にある[詳細情報]を選択します。Mobile(PhoneGap)]とし、作成ボタンを押します。MobileとPhoneGapがセッティングされたHTMLファイルが作成されます。そのままでは、[デザインビュー]であっても、実際のアプリ/Webブラウザでの見た目と違っています。[ライブビュー]実際の見た目をDreamweaver上で確認するには、[ライブビュー]ボタンを押します。Mobileが適用された、実際の見た目と動きを確認できます。Dreamweaver付属のサンプルでは、トップページから各サブページへの遷移アニメーションを確認できます。マシンのスペックが低いと、アニメーションがキレイに表現されませんが、あくまでプレビューですので、心配ありません。次に、アプリ作成に必要な、サイトの設定を行います。メニューの[サイト]→[新規サイト]を選択します。[サイト名]を「PhoneGap」、[ローカルサイト]はマイドキュメント内に新規フォルダを作成することをお勧めします。後述のDreamweaverでネイティブアプリを作成する際の設定で、フォルダを参照する際に、英数字や一部の記号で表せるパス以外の場所だと、設定を完了できないためです。[保存]ボタンを押し、新規サイト作成は終了です。[依存ファイルのコピー]ここで、いったんファイルを保存しましょう。先ほど作成したサイト内に「index.html」ファイルとして、サンプルのファイルを保存してください。その際、依存ファイルの[コピー]を選択します。Mobileに関するファイルがサイト内にコピーされます。Mobileのアプリを作ります。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。