このガイドでは、人気のあるアプリ構築プラットフォームPhoneGapを使用してハイブリッドアプリを作成する方法を説明します。これから行うことは、Webサイトをインストール可能な.apk（Androidアプリケーション）ファイルに変換して、任意のAndroidフォンにインストールできるようにすることです。アプリを起動すると、AndroidのネイティブWebViewブラウザでウェブサイトが開くだけですが、全画面アプリとして表示されます。URLナビゲーションバーや、ウェブサイトがブラウザに表示されていることを示すその他の手がかりはありません。
要件
あなた自身のウェブサイト（このガイドに従うために、あなたは単に無料のWordPressブログを始めることができます）
GitHubアカウント
PhoneGapアカウント
メモ帳++ （またはコードを認識できる同様のテキスト編集ソフトウェア）
アプリアイコン（Photoshop、GIMPなど）を作成するための写真編集ソフトウェア
コーディングテンプレート
これらは、このガイドの目的で使用できるコードテンプレートです。これらは、PhoneGapで開発された独自のアプリからのものですが、個人情報を削除しました。正しいパラメータをすべて使用してこれらを最初から設定すると、トラブルシューティングに何日もかかったので、便宜上提供しています。どういたしまして！
>> Config.XML
>> Index.HTML
入門
デスクトップにフォルダを作成し、「 www： 「」 引用符なし。これはプロジェクトのメインディレクトリになり、PhoneGapビルダーはプロジェクトのすべてのファイルを見つけることを期待します。次に、アプリのアイコンを作成します。
写真編集ソフトウェアを開き、.PNG形式で新しい画像を作成します。画像設定は次のようになります。
これで、アイコンを描くことができます。たとえば、小さなボタンを作成します。
画像のサイズは携帯電話の画面によって異なりますが、複数のデバイス向けのアプリを開発する場合は、もちろん同じアイコンのサイズを複数作成します。使用した画像サイズの表は次のとおりです。
36×36（120dpi / LDPI）
48×48（160dpi / MDPI）
72×72（240dpi / HDPI）
96×96（320dpi / XHDPI）
144×144（480dpi / XXHDPI）
192×192（640dpi / XXXHDPI）
画面サイズとDPIについてあまり長く話したくありません。ただ、DPIは画面の解像度とほぼ相関していることを知っています。 1080×1920の画面解像度を使用する電話は480dpiを使用しますが、これは使用しません 必ずしも 画面サイズと正確に相関します。電話は5.2インチの画面または6インチの画面を持ち、1080×1920の解像度を持つことができます。ただし、このガイドはスマートフォンの画面に関するものではないので、次に進みましょう。
アイコンを作成したら、名前を付けて保存します icon.png www：フォルダ内に移動します。これはになります デフォルト アプリのアイコン。ユーザーの画面解像度に一致するさまざまなサイズのアイコンを作成する場合は、アイコンをさまざまなサイズと名前で保存します（Icon144.png、Icon192.png、Icon96.pngなど）。次に、編集します Config.xml 個々のアイコンを指すファイル。次へ移りましょう。
アプリのアイコンができたので、スプラッシュ画像が必要です。これは基本的に、アプリが読み込まれる前に表示される壁紙のような読み込み画面です。スプラッシュ画像のサイズはアイコンと同じ原理で機能しますが、少し大きくなります。表は次のとおりです。
- LDPI：
- 肖像画： 200x320px
- 風景： 320x200px
- MDPI：
- 肖像画： 320x480px
- 風景： 480x320px
- HDPI：
- 肖像画： 480x800px
- 風景： 800x480px
- XHDPI：
- 肖像画： 720px1280px
- 風景： 1280x720px
- XXHDPI：
- 肖像画： 960px1600px
- 風景： 1600x960px
- XXXHDPI：
- 肖像画： 1280px1920px
- 風景： 1920x1280px
そのため、デバイスの解像度でスプラッシュ画像を作成し、次のように保存します Splash.png 次に、プロジェクトのフォルダ内に移動します。これで、アプリのアイコンとスプラッシュイメージができました。次に、構成ファイルとインデックスファイルの設定に移りましょう。
Index.HTMLとConfig.XMLの説明
config.xmlファイルは、ビルド環境（Android、iPhone、Windows Phone）、アイコンとスプラッシュの場所、およびアプリで使用するApacheCordovaプラグインを設定するものです。
Notepad ++で提供したテンプレートを開くと、上部に次の行が表示されます。
これらのフィールドを自分の情報で更新しますが、「設定」フィールドはそのままにしておきます。値を見るだけで、構成ファイルの残りの部分は一目瞭然です。たとえば、Preference name =” fullscreen”は、アプリにフルスクリーンアプリとして起動するように指示します。ファイルの下部にあるこの最後の値を除いて、すべてをそのままにしておきます。
実際のウェブサイトのURLに変更してください。これにより、アプリユーザーはウェブサイトを完全にナビゲートできます。ウェブサイトのみをナビゲートできます。アプリの使用中にウェブサイトを離れることはできません。もちろん、アプリにはURLナビゲーションバーはありません。これは実際には問題ではありませんが、ユーザーがWebサイトのすべてのページにアクセスできるようにします。ウェブサイトのURLの後の*は ワイルドカード 、これは、専門用語のコーディングにおいて、*記号の代わりに入力されたものをすべて受け入れることを意味します。
もちろん、ユーザーをWebサイトの特定のページのみに制限する場合は、次のような個別の値を追加します。
に移りましょう Index.html ファイル、これはアプリを実際に機能させるためのパンとバターです。 Notepad ++内で開き、ドキュメント言語をHTMLに切り替えます。 index.htmlが基本的に行うことは、AndroidブラウザーにWebサイトの表示方法を指示することです。提供したテンプレートには、ブラウザーからURLナビゲーションバーを削除し、電話の「戻る」ボタンでアプリを終了して起動するためのタグがあります。スプラッシュ画面が表示された後のアプリ。変更したい行は次のとおりです。
var url = ‘http：//yourwebsite.com’
PhoneGapビルドでアプリをビルドする
したがって、GitHubアカウントにログインし、リポジトリのメインページに移動します。リポジトリ名の下にある「ファイルのアップロード」をクリックし、プロジェクトフォルダをファイルツリー画面にドラッグします。次に、下部に「 私の最初のアプリの試み」 。最後に、[変更のコミット]をクリックします。
今すぐに行きます PhoneGapビルド ページにサインインします。次に、ビルドページの[新しいアプリ]ボタンをクリックします。これにより、GitHubリポジトリへのパスを入力するように求められるので、入力してから、[。gitリポジトリからプル]をクリックします。
メインのビルドページに戻り、[コードの更新]と[最新のプル]をクリックします。
最後に、「ビルド」をクリックします。アプリを.apkファイルにコンパイルしてから、.apkをダウンロードするオプションを表示します。これで、この.apkファイルをコンピューターにダウンロードして電話に転送し、そこからインストールできます。または、携帯電話を使用してコンピューター画面のQRコードをスキャンし、.apkファイルをAndroidデバイスに自動的にインストールすることもできます。
それでおしまい！さて、あなたにいくつかの重要なことを説明するために：
- これは非常に単純化されたガイドであり、最も基本的なハイブリッドアプリの構築について説明しました。通常、ウェブサイトをネイティブブラウザでラップして、GooglePlayストアでAndroidアプリとして渡すことはありません。しかし、その方法がわかったので、アプリをカスタマイズして多くのフレーバーを追加する方法に関するPhoneGapのドキュメントを読み始めて、実際に役立つアプリを作成できるようになります。
- 第二に、Google Playは、収益のみを目的としたリンクスキームアプリを作成するためのこの種のアプリ構築方法を禁止しています。そのため、「Earn MoneyToday！」というアプリを作成することはできません。それは広告と広告収入の銀行で絶対にいっぱいのウェブサイトを開きます。あなたはグーグルプレイストアから禁止されます。
