Adobe Creative Cloudで遊んで見る(その2: Dreamweaver CS6 + PhoneGapを試す)

Filed in Adobe, Web関係, 日記

以前、Dreamweaver CS5.5 + PhoneGapを用いたiPhoneアプリの制作方法について取り上げましたが、CS6ではやり方が大きく変わっている様なので、調べてみました。

下の動画は、AdobeがYouTubeで公開しているデモ動画です。これを見様見真似で試してみます。

YouTube Preview Image

まずは、Dreamweaverで適当なサイトを開きます(もちろん新規作成でも可)。この辺の手順は5.5と変わらないので、説明は割愛します。

メニューから「サイト」->「PhoneGap Build サービス」->「PhoneGap Build サービス」の順に選択すると、図1の様な画面が表示されます。

 

図1: PhoneGap Build サービスのウィンドウ

図1: PhoneGap Build サービスのウィンドウ

今回から、ビルドにはphonegap.comのアカウントが必要なので、アカウントを持っていない場合は、ここで作成します。

フォームに必要事項を入力して送信すると確認メールが届くので、メール中の”Confirm my account”のリンクをクリックするとアカウントが作成されます。この時、”create a new application”というページに飛ばされますが、とりあえずこれは無視して閉じてかまいません。

アカウントを作成したら、図1のウィンドウに、phonegap.comのアカウント作成時に設定したメールアドレスとパスワードを入力して、「ログイン」ボタンをクリックします。

初回ビルド時は、図2の様なエラーになるので、「新規プロジェクトとして作成」を選択して「続行」ボタンをクリックするとビルドが開始されます(図3)。

 

図2: エラー画面

図2: エラー画面

図3: ビルド画面

図3: ビルド画面

 

図3から分かる通り、iOSやandroidなど、5つのプラットフォームに対応している様です。ただし、iOSだけは予めここに書かれている作業をしておく必要がある様です(未調査)。

ビルドが完了したら、図3の画面上にある「QRコードの表示」ボタンをクリックすると、ビルドしたアプリのURLが記録されたQRコードが表示されます。このQRコードを実機から読み込むと、その端末にアプリがインストールされます。

ビルドしたアプリはphonegap.comのサーバ上に保存され、ここのページで管理出来ます。直感的に操作出来るはずなので、色々試してみる事をお勧めします。

ちなみに、phonegap.comには図4の様な料金がかかるので、注意が必要です(私もよく分かっていないので、詳細はphonegap.comで確認して下さい)。

 

図4: phonegap.comの料金

図4: phonegap.comの料金

(その3に続く?)

 
Click to view/hide