Dreamweaver＋PhoneGapでjQuery Mobileアプリのネイティブ化：PhoneGapで始めるWeb→スマホアプリ制作入門（2）（3/3 ページ）

Dreamweaver環境をセットアップし簡単なWebアプリを作ってAndroidで動くネイティブアプリにする手順を紹介します。

[鴨田健次，アシアル株式会社] PC用表示関連情報

LINE

Hatena

DreamweaverにAndroid SDKをインストール

　Mac OS X版ではiOS（iPhone／iPad／iPod touch）アプリもAndroidアプリも作成できますが、Windows版ではAndroidアプリのみ作成可能です。今回は、どちらのOSでもビルドできるAndroidアプリを作成します。

　Androidアプリとしてビルドを行うには、Android SDKが必要です。Dreamweaverでは、簡単にインストールできるので、Android SDKをインストールしたことがない人でも安心です。

　メニューから［サイト］→［モバイルアプリケーション］→［アプリケーションフレームワークの設定］を選択します。［アプリケーションフレームワークの設定］ダイアログが開きます。

　すでにAndroid SDKをインストールしている場合はAndroid SDKのパスを入力し、［保存］ボタンを押します。まだAndroid SDKをインストールしていない場合は［簡易インストール］ボタンを押し、好きな場所にフォルダを新規作成します。

その後、保存ボタンを押すと、Android SDKのインストールを促されるので、［はい］を選択します。

　すると、Android SDKのインストールが始まるので、インストールが終了するまで待ちましょう。

　インストールが完了したら、アプリの設定を行います。もし、簡易インストールがうまくいかなかった場合は、正規のAndroid SDKをインストールしましょう。インストールの仕方は、連載第1回を参考にしてください。

　ここからがネイティブアプリケーションとしての設定です。メニューから［サイト］→［モバイルアプリケーション］→［アプリケーション設定］を選択します。

［ネイティブアプリケーション設定］ダイアログが開きます。

　［バンドルID］は、デフォルトで入っている文字列で構いません。バンドルIDの詳しい説明は、ウィンドウ内にも書いてありますが、自分で所有しているドメインがあれば、「【トップレベルドメイン】.【所有ドメイン】.【ユニークな識別子】」です。他のアプリと被らないようなIDにしましょう。

　［アプリケーション名］［作成者名］は自由に入力してください、［ターゲットのパス］は「マイドキュメント」など好きな場所で構いません。他は、デフォルトのままで問題ありません。アイコンやスプラッシュを付けたい場合は、おのおの用意してみてください。

　アイコンは横72px、縦72px、スプラッシュは横480px、縦640pxで用意するといいでしょう。

　以上で、アプリケーション設定は完了です。いよいよビルドします。

　メニューから［サイト］→［モバイルアプリケーション］→［ビルドおよびエミュレート］→［Android」を選択します。すると、「AVD（Android Virtual Devices）」という、Android SDKに付属するAndoridアプリのシミュレータが起動します。

　Andoridのシミュレータが起動するには少し時間がかかりますが、しばらく待ちましょう。もしもエラーが表示されて、AVDが立ち上がらない場合は、Android SDKを再インストールしてみましょう。

　下記のような画面が表示されれば、ビルドに成功しています。

　［ネイティブアプリケーション設定］で指定した［ターゲットのパス］の中に、「バンドルID_Andorid」というフォルダが作成されています。APKファイルは、その中の「bin」フォルダ内に、「アプリケーション名-debug.apk」という名前で格納されています。

　前回紹介したように、Eclipseを使ってPhoneGapのアプリを作るときは、USBケーブルで接続することで、アプリをインストールできますが、Dreamweaver CS 5.5ではビルドしたAPKファイルをサーバにアップして、ダウンロードすることでアプリをインストールします。

　レンタルサーバなどに、APKファイルをアップし、Webブラウザからそのファイルを参照することで、ダウンロードできます。インストールする際、Androidの設定で［アプリケーション］→［提供元不明のアプリ］を許可しておく必要があります。

　このように、Dreamweaver CS 5.5を使うと、簡単にアプリが制作できます。Eclipseなどに比べると環境設定が簡単で、Webデザイナにとっては普段から親しんでいるDreamweaverでアプリが制作できるので、活用してみてはいかがでしょうか。

　次回から、PhoneGapのネイティブAPIを使ったサンプルアプリを紹介していきます。

鴨田健次（かもたけんじ）

1980年生まれ。東京都出身。アシアル株式会社所属。

大学卒業後、Web制作会社やデザイン事務所、コンテンツポータル会社で、Webデザイナ・HTMLコーダー・グラフィックデザイナとして腕を磨く。2010年よりアシアル株式会社にてWEBディレクタ／デザイナとして勤務。

座右の銘はSimple is Best。シンプルで見やすいデザインがモットー。

「PhoneGapで始めるWeb→スマホアプリ制作入門」バックナンバー