PhoneGap-概要

モバイル、ハンドヘルド、持ち運びに便利なデバイスは、ソフトウェアエンジニアリングに新たな革命をもたらしました。これらの小型で効率的なデバイスは、ハイエンドのプログラミング言語で作成されたアプリケーションを実行できます。携帯電話などのこれらのデバイスは、いつでもどこでも使用するのに非常に便利であるため、これらのデバイスを所有する人々は最大限にそれらを使用する傾向があります。

モバイルデバイスのアーキテクチャは、コンピューターシステムのアーキテクチャに似ています。カスタムビルドのハードウェア、ファームウェア、およびオペレーティングシステムがあります。

モバイル

これらの3つのアイテムは、ほとんどが独自のものであり、1つの旗艦組織の下で設計、開発、および組み立てられています。アプリ（アプリケーションソフトウェア）は、旗艦組織と組織外の開発者の両方によって開発されます。

独自のカテゴリとオープンソースのカテゴリの両方で、多くの有名なモバイルオペレーティングシステムが市場で入手できます。最も広く使用されているモバイルオペレーティングシステムは-

アンドロイド
IOS
BlackBerry
Windows

モバイルオペレーティングシステム

すべてのモバイルオペレーティングシステムは、それらで実行されるアプリを開発するための独自のツールと環境のセットを提供します。 1つのオペレーティングシステム用に作成されたアプリケーションは、完全に異なるため、他のプラットフォームでは実行できません。開発者は、ユーザー間の到達可能性を高めるために、すべての主要なモバイルオペレーティングシステムをカバーする傾向があります。

したがって、すべての主要なOSプラットフォームで実行できるアプリケーションプログラムを開発し、その外観、操作性、および機能をすべてのプラットフォームで同一にすることは、退屈な作業になります。この作業では、開発者はすべてのプラットフォームを理解する必要があり、さまざまなオペレーティングシステム用の主要な開発ツールを十分に理解する必要があります。

PhoneGap

PhoneGapは、上記のすべての問題の解決策と見なされる場合があります。 PhoneGapは、すべての主要なモバイルオペレーティングシステムで標準のWeb APIを使用して開発者がアプリを開発できるようにするフレームワークです。オープンソースで無料です。

開発者は、HTML、CSS、およびJavaScriptを使用したWeb開発のみを知っている必要があります。 PhoneGapは、アプリのルックアンドフィールやさまざまなモバイルオペレーティングシステム間の移植性など、残りの作業を処理します。

モバイルOSI

PhoneGapを使用すると、Apple iOS、Android、BlackBerry、Windowsなどのすべての主要なモバイルオペレーティングシステム用のアプリを作成できます。これには、開発者が上記のプラットフォームのいずれかに関する専門知識を持っている必要はありません。開発者は、アプリをゼロからコーディングするためのプログラミングを知っている必要もありません。

PhoneGapを使用すると、ユーザーはWebサイトにデータコンテンツをアップロードでき、さまざまなアプリファイルに自動的に変換されます。

このチュートリアルでは、オフラインツールを使用せずにオンラインでApple、Android、およびWindowsプラットフォーム用のアプリを作成する方法を説明します。

PhoneGap-環境設定

この章では、アプリを簡単に作成するための基本的な環境の設定方法を学びます。 PhoneGapは、http：//www.finddevguides.com/cordova/cordova_environment_setup [Cordova command line]インターフェースとhttp://www.finddevguides.com/git/git_environment[Github repository]メカニズムを使用したアプリのオフライン作成をサポートしていますが、ここでは集中します。最小労力の手順。

Webテクノロジーに精通しており、Webアプリケーションをアプリとして出荷する準備ができていることを前提としています。 PhoneGapはHTML、CSS、およびJavaScriptのみをサポートするため、これらのテクノロジのみを使用してアプリケーションを作成する必要があります。

開発者の観点から見ると、アプリのパッケージには次のアイテムが含まれている必要があります-

構成ファイル
アプリのアイコン *情報またはコンテンツ（Webテクノロジーを使用して構築）

設定

Webアプリに必要な設定ファイルは1つだけで、必要なすべての設定を構成するのに十分なはずです。その名前はconfig.xmlです。このファイルには、アプリのコンパイルに必要なすべての情報が含まれています。

私たちの例のconfig.xmlを見てみましょう-

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets"
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.finddevguides.onlineviewer" version = "1.0">

   <name>Tutorials Point</name>

   <description>
      Tutorials Point Online Viewer
   </description>

   <author href = "http://finddevguides.com" email = "[email protected]">
      Tutorials Point
   </author>

   <preference name = "permissions" value = "none"/>

   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "ldpi"/>

   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "mdpi"/>

   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "hdpi"/>

   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xhdpi"/>

   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xxhdpi"/>

   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57"/>
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72"/>
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114"/>
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144"/>

</widget>

すべての構成コンテンツは<widget>タグでラップされます。これらの簡単な説明は次のとおりです-

<widget id = ”app_id”>

idは、さまざまなアプリストアで予約されているapp-idです。これは、逆ドメイン名スタイルです。 com.finddevguides.onlineviewerなど

<widget version = "x.y.z">

これは、x.y.z形式のアプリのバージョン番号です。（x、y、z）は正の整数です。 1.0.0、major.minor.patchバージョンシステムを表します。

<name> App Name</name>

これはアプリの名前で、モバイル画面のアプリアイコンの下に表示されます。この名前を使用してアプリを検索できます。

<description> My First Web App </description>

これは、アプリの内容と内容を簡単に説明したものです。

<author> Author_Name </author>

このフィールドには、作成者またはプログラマの名前が含まれ、通常、このアプリを起動する組織の名前に設定されます。

<preferences name = "permissions" value = "none">

設定タグは、アプリのFullScreen、BackgroundColor、Orientationなどのさまざまなオプションを設定するために使用されます。これらのオプションは、名前と値のペアです。例：name = "FullScreen" value = "true"など。これらの事前設定は必要ないため、アクセス許可は何も設定しません。

<icon>

アプリにアイコンを追加できます。さまざまな方法でコーディングできますが、すべてのショートカットを学習しているため、ここにあります。* .src は、アイコン画像のパスを決定します。 *gap：platform は、このアイコンを使用するOSプラットフォームを決定します。 gap：qualifier は、Androidデバイスで使用される密度です。 iOSデバイスは width＆height パラメーターを使用します。

アイコン

同じモバイルオペレーティングシステムを搭載したさまざまなサイズのデバイスがあるため、1つのプラットフォームの視聴者をターゲットにするには、すべてのモバイルタイプのアイコンも用意する必要があります。特定のモバイルオペレーティングシステムに必要な正確な形状とサイズのアイコンを用意することが重要です。

ここでは、フォルダー res/icon/ios および* res/icon/android/drawable-xxxx。*を使用しています。

この作業を迅速に行うには、サイズ1024x1024のロゴを作成し、makeappicon.comにログオンします。このWebサイトは、AndroidプラットフォームとiOSプラットフォームの両方のあらゆるサイズのロゴを即座に作成するのに役立ちます。

アプリアイコン

サイズ1024x1024のアイコン画像を提供した後、makeappicon.comは以下を提供する必要があります-

iOS用アイコン*

IOS

Android用アイコン*

Android

このWebサイトでは、すべてのロゴをzip形式で玄関口（a.k.a. もちろん、メール！）

PhoneGap-アプリのコンテンツ

オフラインWebサイトはローカルハードドライブにコピーされ、ユーザーがインターネットに接続せずに必要なときにいつでもアクセスできます。同様に、このオフラインWebアプリでは、そのオフラインにアクセスできるユーザーのモバイルデバイスに完全にダウンロードされるWebアプリケーションを作成できます。

このタイプのアプリのアプリケーションには、ストーリーのコレクション、短いチュートリアル、またはユーザーが関心を持つその他のオフラインコンテンツを含むアプリが含まれます。ユーザーは、インターネットが利用できない場合でもオフラインで読むことができます。

オフラインアプリ

次の画像は、オフラインアプリのフォルダー構造を表しています。ルートディレクトリでは、config.xmlとindex.xmlの2つのファイルのみが必要です。

オフラインPhoneGapアプリ

config.xmlには、前のセクションで学習したアプリの構成設定が含まれています。 indexlファイルには、Webコンテンツのホームページが含まれています。

ここで学ぶべき重要なことの1つは、すべてのhtmlファイル内のすべてのリンクに相対パスのみを含める必要があることです。つまり、絶対パスやベースhrefタグは存在しないはずです。

オンラインアプリ

次の画像は、アプリをオンラインモードにするためのフォルダー構造を示しています。オンラインモードでは、Webコンテンツ全体がインターネットWebサイトからロードされます。

オンラインPhoneGapアプリ

すべてのファイルは実際のサーバーにあり、インターネット経由でアクセスできるため、オンラインモードアプリでは data フォルダーが欠落していることに気付くかもしれません。 indexlファイルには、Webサーバーに含まれる実際のリンクが含まれており、そのすべてのリンクは絶対リンクであるか、 base href タグで使用されています。

アプリのモードを決定し、上記のファイル構造でファイルを整理したら、標準のzipツールでファイルを圧縮して保存する必要があります。このファイルは次のセクションで使用します。

アプリに署名する

アプリを開発者または開発中の組織が署名して、物事を整理することが不可欠です。このため、アプリに署名する必要があります。標準のJavaディストリビューションの一部である keytool が必要になる場合があります。

WindowsコマンドプロンプトまたはLinuxシェルの％JAVA_HOME％で次のコマンドを実行します-

keytool -genkey -v -keystore my_keystore.keystore
   -alias finddevguides -keyalg RSA -keysize 2048 -validity 10000

これによりmy_keystore.keystoreファイルが生成されます。これは次のセクションで必要になります。

PhoneGap-アプリのコンパイル

これで、最初のWeb APIベースのクイックモードアプリをコンパイルする準備ができました。この最後のセグメントでは、Webコンテンツを、オンラインアプリストアにアップロードできるアプリ形式に変換するプロセスについて学習します。

PhoneGapは、GitHubまたはAdobeIDを使用して作成されたユーザーログインを受け入れます。 GitHubは、ユーザーがコンテンツをアップロードし、URL参照を提供することで使用できるリポジトリサービスです。たとえば、作成したコンテンツをGitHubにアップロードしてから、PhoneGapに直接呼び出すことができます。

次の手順では、Adobe IDを作成する方法について詳しく説明します。

Adobe IDを作成する

www.build.phonegap.comに移動し、[登録]をクリックします

以下に示すように、新しいウィンドウが開きます-

Adobe

詳細を入力し、サインアップをクリックします。同じユーザーIDでPhoneGapにログインできるようになりました。デフォルトでは、このページは以下に示すようにPhoneGapコンソールにつながるはずです-

Adobe PhoneGap

[.zipファイルをアップロード]をクリックして、作成した.zipファイルをアップロードします。これには、ウェブコンテンツ全体と設定が含まれています。アップロードが成功すると、次のウィンドウが表示されます-

最初のアプリ

署名済みのキーを提供していないため、iOSアプリの処理が失敗したことがすぐにわかります。 Androidのみに集中しており、PhoneGapによって作成されたことがわかります。このアプリはキーで署名されていないため、Googleストアにアップロードできません。

Androidのアイコンをクリックすると、次の画面が表示されます-

最初のApp2

キーが選択されていないというAndroidアイコンの横にあるドロップダウンオプションメニューをクリックし、[キーの追加]をクリックすると、次の画面が表示されます-

キーストア

選択したタイトルとエイリアスを指定し、キーストアファイルをクリックします。最後のセクションで作成したキーストアファイルを提供します。次に、横にある[再構築]ボタンをクリックします。

このプロセスで作成されたアプリは、Google Playに直接アップロードできます。 .apkファイルをクリックすると、最初のWebベースの無料アプリをダウンロードできます。

アップロードする前に、仮想デバイスまたは実デバイスでアプリをテストする必要があります。

Phonegap-quick-guide

目次