PhoneGapで最速アプリ開発(iOS/Android両対応) | 第一章 PhoneGap基礎

こんにちは。ポータル・メディアサービスグループの夏井です。

新規サービスを立ち上げる際、お客様にプロダクトを実際に使ってもらい仮説検証することはとても重要です。

リーンスタートアップのアプローチでは、MVP(実用最小限の製品:Minimum Viable Product)を構築し、価値提供できているか顧客実証・仮説検証を行うことが一般的です。

私が最近携わったプロジェクトでは、PhoneGapを使ってMVPを構築していました。

PhoneGapを利用することで、以下のようなメリットがあります。
・MVP構築/改善を素早く行えるため、仮説検証を高速で行うことができる
・WEBの技術があればネイティブアプリの学習コストをかけずにアプリ制作ができる
・iOS/Androidアプリをワンソースで開発できる
・ビルドしなくてもブラウザでUIが確認できる

私は、PhoneGapを使ったことがなくイチから調べていたのですが、

PhoneGapとは」「PhoneGapCordova違い」「実はPhoneGapBuilderについての情報」「PhoneGapの環境構築手順」など、PhoneGapそのものを解説している情報は見つかるのですが、「アプリ制作~ストア提出までの一連の流れ」がまとまっている情報を見つけられずとても苦労したのを覚えています…

本記事では、PhoneGapを活用した”アプリの作り方からストア提出まで”の情報を4回に分けて説明しようと思います。

前提として、PhoneGapのインストールと環境構築は終わっているものとします。

参考:PhoneGap(Cordova) のインストールと始め方

 

PhoneGapのディレクトリ構成を理解する

以下の環境で作業しました。

  • macOS Sierra 10.12.6
  • Xcode 9.1
  • AndroidStudio 3.0.1
  • Node.js 8.4.0
  • CocoaPods 1.2.1
  • PhoneGap 7.1.1

 

作業ディレクトリに移動して、ターミナルで以下のコマンドを実行します。

コマンドを実行するとアプリのプロジェクトディレクトリが作成されます。

以下の構成のディレクトリが出来上がります。

よく使うファイル、ディレクトリは以下4つです。

  • config.xml

    • アプリ名、アプリアイコン、アプリバージョンの指定…等のアプリの設定を記入するファイル
  • www
    • アプリの見た目となるHTML/CSS/JSを格納するディレクトリ
    • アプリ開発は基本的にこのディレクトリを利用する
    • アプリアイコンやスプラッシュ画像等はwww/resの中に格納する
  • platforms 
    • ビルド後のアウトプットが出力されるディレクトリ
    • ビルド前は空のディレクトリ
  • plugins
    • アプリならではの挙動にする為のプラグインのプログラムが配置されるディレクトリ
    • プラグイン導入前は空のディレクトリ

ここまででアプリ制作の準備は整いました。

次回「第二章」では、PhoneGap Pluginのインストールについて解説予定です。

リンク

  • 第一章 PhoneGap基礎
  • 第二章 PhoneGap Pluginのインストール(近日公開予定)
  • 第三章 アプリのコードの書き方(近日公開予定)
  • 第四章 ビルド~ストア提出(近日公開予定)