ファイル/新規を選択します。
Web アプリケーションのネイティブモバイルアプリケーションとしてのパッケージ化(CS5.5)
Dreamweaver の jQuery Mobile および PhoneGap 連携機能を使用すると、Android™ および iOS ベースのデバイスでデプロイするための Web アプリケーションを作成およびパッケージ化できます。Dreamweaver では、パッケージの作成に PhoneGap SDK を使用します(Android/ の場合は .apk ファイル、iPhone/iPad の場合は .xcodeproj)。
Dreamweaver でパッケージ化されたモバイルアプリケーションは、デバイスエミュレーターで表示したり、自身のデバイスに展開することができます。
Dreamweaver でパッケージ化したモバイルアプリケーションは、デバッグの目的でのみ使用されるアプリケーションです。アプリケーションは Android や iOS エミュレーターで実行されるか、転送する場合は個人のモバイルデバイスで実行されますが、デバッグモバイルアプリケーションを Apple ストアや Android ストアにアップロードすることはできません。iOS または Android のアプリケーションをアップロードするには、Dreamweaver 以外でそれらのアプリケーションを使用する追加の手順が必要です。Apple および Android ストアへのアプリケーションのアップロードについて詳しくは、Android のドキュメントまたは Apple iOS プロビジョニングポータルの『プログラムユーザーガイド』を参照してください(Apple iOS プロビジョニングポータルにアクセスするには、Apple デベロッパープログラム(無料)に登録するか、iOS デベロッパープログラム(年会費あり)に登録する必要があります)。
スターターページを使用した Web アプリケーションの作成
どのスターターページを使用しても、Web アプリケーションを作成できますが、モバイルアプリケーションとしてデプロイされた Web アプリケーションが、モバイルデバイスにネイティブな機能にアクセスする場合は、jQuery Mobile(PhoneGap)ページを使用します。
jQuery Mobile(PhoneGap)スターターページには、他の jQuery Mobile ファイルに加えて phonegap.js ファイルも含まれています。phonegap.js ファイルには、GPS、加速度センサー、カメラなどネイティブモバイル機能の動作に必要な API が含まれています。
-
-
サンプルから作成/モバイルスターター/jQuery Mobile(PhoneGap)を選択します。
-
「作成」をクリックします。
-
挿入パネル(ウィンドウ/挿入)で jQuery Mobile を選択します。Web アプリケーションに追加できるコンポーネントが表示されます。
-
デザインビューで、コンポーネントを挿入する位置にカーソルを置いて、挿入パネルでコンポーネントをクリックします。表示されたダイアログボックスで、オプションを使用してコンポーネントをカスタマイズします。
注意:PhoneGap.js ファイルを編集するには、アプリケーションフレームワークおよびアプリケーションの設定を行います。詳しくは、アプリケーションパッケージの作成に関するトピックを参照してください。
ライブビューでページをプレビューします。ライブビューでのみ適用される CSS クラスもあります。
アプリケーションのパッケージ化のシステム要件
アプリケーションをパッケージ化するには、次のシステム要件を満たしている必要があります。
MAC OS - iOS
Mac OS X Snow Leopard バージョン 10.6.x またはそれ以降
Xcode 3.2.x with the iOS SDK(インストール手順が以下に用意されています。)
MAC OS - Android
Mac OS X 10.5.8 またはそれ以降(x86 のみ)
Android SDK(インストール手順が以下に用意されています。)
Windows - iOS
iOS は Apple コンピューターのユーザーのみ利用できます。
Windows - Android
Windows XP(32 ビット)、Vista(32 ビットまたは 64 ビット)、または Windows 7(32 ビットまたは 64 ビット)
Android SDK(インストール手順が以下に用意されています。)
アプリケーションパッケージの作成(Windows)
サンプルファイルを含む Web アプリケーションの作成について詳しくは、_jpDreamweaver デベロッパーセンターのこのチュートリアルを参照してください。
-
モバイルアプリケーションに変換する Web アプリケーションを開きます。Web アプリケーションが Dreamweaver でサイトとして設定されており、サイトのサイズが 25 MB より小さいことを確認します。
注意:アプリケーションに HTML5、CSS、JavaScript の各ファイルのみが含まれていることを確認してください。
-
サイト/モバイルアプリケーション/アプリケーションフレームワークの設定を選択します。
-
「簡易インストール」をクリックして、Android SDK をインストールします。
注意:簡易インストールに失敗した場合は、テクニカル ノート 90408 を参照してください。
-
SDK ファイルをインストールする場所を選択して、「選択」をクリックします。インストールが完了したら、「保存」をクリックします。
-
サイト/モバイルアプリケーション/アプリケーション設定を選択します。
-
バンドル ID には、ダイアログボックスの情報を使用して、パッケージの名前を入力します。
-
アプリケーションの名前、およびアプリケーションを設計したユーザーの名前を入力します。
-
必要に応じて、以下を指定します。
-
アプリケーションのアイコン PNG で、アプリケーションのアイコンとして使用する PNG ファイルを指定します。アイコンのサイズを変更していない場合は、標準のサイズに自動調整されます。
-
パッケージのターゲットパスを指定します。
-
Google から最新の SDK コンポーネントをダウンロードしてインストールするには、「AVD の管理」をクリックします。「Android SDK and AVD Manager」を使用して、Android SDK を更新します。Manager の使用について詳しくは、http://developer.android.com/sdk/adding-components.html を参照してください。
注意:「保存」をクリックすると、phonegap.js ファイルがサイトルートにコピーされます。
-
-
次のいずれかの操作を実行します。
アプリケーションをデバイスに直接デプロイしている場合は、サイト/モバイルアプリケーション/ビルドを選択します。ビルドのプラットフォーム/デバイスを選択します。
ビルドする前に、ビルドがエミュレーターでどのように見えるかを確認するには、サイト/モバイルアプリケーション/ビルドおよびエミュレートを選択します。
アプリケーションパッケージの作成(Mac OS)
サンプルファイルを含む Web アプリケーションの作成のチュートリアルについては、Dreamweaver デベロッパーセンターのこの記事を参照してください。
-
モバイルアプリケーションに変換する Web アプリケーションを開きます。Web アプリケーションが Dreamweaver でサイトとして設定されており、サイトのサイズが 25 MB より小さいことを確認します。
注意:アプリケーションに HTML5、CSS、JavaScript の各ファイルのみが含まれていることを確認してください。
-
サイト/モバイルアプリケーション/アプリケーションフレームワークの設定を選択します。
-
必要に応じて iOS または Android の SDK をインストールします。
「Apple iOS Dev Center」リンクをクリックして、xcode および iOS SDK をダウンロードおよびインストールします。アプリケーションは、初期設定では OS <バージョン番号>/デベロッパーディレクトリにインストールされます。
Apple ID を使用してデベロッパーセンターにログインします。登録は無料です。登録ユーザーでない場合は、アカウントを作成します。
注意:Apple のデベロッパーセンターからテストに使用する SDK パッケージをダウンロードして使用できますが、Apple Store にアプリケーションをアップロードするには、必要な料金を払って、Apple デベロッパーとしてユーザー登録する必要があります。
- 「簡易インストール」をクリックして、Android SDK をインストールします。
注意:簡易インストールに失敗した場合は、テクニカル ノート 90408 を参照してください。
-
「保存」をクリックします。
-
サイト/モバイルアプリケーション/アプリケーション設定を選択します。
-
バンドル ID には、ダイアログボックスの情報を使用して、パッケージの名前を入力します。
-
アプリケーションの名前、およびアプリケーションを設計したユーザーの名前を入力します。
-
必要に応じて、次の操作を行います。
(Android の場合)アプリケーションのアイコン PNG で、Android アプリケーションのアイコンとして使用する PNG ファイルを指定します。アイコンのサイズを変更していない場合は、標準のサイズに自動調整されます。
(Mac® OS 10.6.x の場合)スタートアップスクリーン PNG で、iOS アプリケーションのアイコンとして使用する PNG ファイルを指定します。アイコンのサイズを変更していない場合は、標準のサイズに自動調整されます。
(Mac OS 10.6.x の場合)パッケージを作成する iPhone/iPod Touch/iPad のバージョンを選択します。
パッケージの別のターゲットパスを定義します。
注意:「保存」をクリックすると、phonegap.js ファイルがサイトルートにコピーされます。
-
次のいずれかの操作を実行します。
アプリケーションをデバイスに直接デプロイしている場合は、サイト/モバイルアプリケーション/ビルドを選択します。ビルドのプラットフォーム/デバイスを選択します。
ビルドする前に、ビルドがエミュレーターでどのように見えるかを確認するには、サイト/モバイルアプリケーション/ビルドおよびエミュレートを選択します。