0%

Programmingプログラミングナレッジ

Posted:2016.05.03

【Macでアプリ開発】CordovaのAndroidアプリ制作フロー(環境構築編)

スマートフォンなどのネイティブアプリを制作する時にはJavaやObjective-C、Swiftなどのプログラミング言語が必要となり、プログラマーでなければ結構ハードルが高いものです。その上、OSによってプログラミング言語や開発環境も変わるという問題もあります。

 

しかし、最近はHTMLとjavascriptを使ったアプリ開発が可能となるフレームワークが登場したことで、よりアプリ開発が身近なものになり、同時にOSが異なる場合でも同じ開発環境で対応できるようになりました。今回はそんなハイブリットアプリ開発のフレームワークの一つである「Cordova」のMacでAndroidアプリ開発をするときのフローをまとめてみました。

 

各種開発環境インストール

まずはマシンに開発環境アプリケーションのインストールが必要になります。

 

1. JDKのインストール

Javaアプリケーション開発用のアプリケーションパッケージです。

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

※各OSに合わせた最新版をインストールします。

 

2. SDK(AndroidStudio)のインストール

Androidアプリケーション開発に必要となる各種ツールが含まれています。

http://developer.android.com/intl/ja/sdk/index.html

 

SDKの環境変数のパスを通す

1. SDKのパスをAndroid SDK Managerで確認

コマンドラインで次のように入力し、Android SDK Managerを立ち上げる。

$ android

ウィンドウ上部のSDK PATHのところを確認する

 

2. bash_profileへSDKのパスを記述

コマンドラインでホームディレクトリへ移動

$ cd

 

bash_profileへ追記する

$ sudo vi .bash_profile

 

パスを通すためSDKのパスを記述する

export PATH=${PATH}:/Users/ユーザー名/Library/Android/sdk/platform-tools:/Users/ユーザー名/Library/Android/sdk/tools
export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=${JAVA_HOME}/bin:$PATH
export PATH=/usr/local/bin:$PATH

最初のパス名を指定するところが、Android SDK Managerで確認したSDK PATHの内容になります。

 

保存して終了する

:wq

 

正しく設定されたか確認する

$ sudo cat .bash_profile

 

次のコマンドを入力し再度確認する

//adbコマンドで動作を確認:詳細が表示されればOK
$adb
//adbコマンドで動作を確認:バージョンが表示されればOK
$adb version
//androidコマンドで動作を確認:ヘルプが表示されればOK
$ android -h

 

Homebrewのインストール

1. Homebrewのインストール

パッケージ管理ツールでおなじみのHomebrewをインストールします。次のコマンドを入力するとインストールが開始します。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

完了したら問題なくインストールされているか確認します。

//バージョンが表示されればOK
$ brew -v

 

念のため最新版にアップデートしておきます。

$ brew update

 

次のコマンドで使える状態になっているか確認します。

//Your system is ready to brew.と表示されればOK
$ brew doctor

 

Node.jsとnpmのインストール

javascriptでのアプリ開発には必須となるプラットフォームである、サーバーサイドjavascript「Node.js」と、各種プラグインなどをインストールする時に役立つパッケージマネージャー「npm」をインストールします。

 

1. Node.js&npmのインストール

Homebrew経由でNode.js&npmをインストール

$ brew install node.js

 

インストールされているかを確認します

//バージョンが表示されればOK
$ node -v
//バージョンが表示されればOK
$ npm -v

 

Cordovaのインストール

いよいよHTMLでのアプリ開発プラットフォーム「Cordova」をインストールします。と、言っても次のコマンドを入力するだけですぐに終わります。

 

1. Cordovaのインストール

npm経由でCordovaをインストール

$ sudo npm install -g cordova

sudoを付けること、グローバルなディレクトリにインストールするため「-g」を忘れないようにします。

 

インストールされているかを確認します。

//バージョンが表示されればOK
$ cordova -v

 

Cordovaプロジェクトファイル作成

ここまで一通りのインストール作業が終わるとアプリ用のファイルが入るフォルダを準備していきます。

 

1. アプリ開発用プロジェクトフォルダを作成する場所へ移動

アプリ開発用のプロジェクトフォルダを作成し、そのフォルダの場所まで移動します。

$ cd ~/プロジェクトフォルダ名

このフォルダの中にCordovaのプロジェクトファイルが入ることになります。

 

2. Cordovaプロジェクトファイル生成

Cordovaでのアプリ開発に必要となるファイル群の一式を作成します。プロジェクトフォルダのディレクトリで次のコマンドを入力します。

$ cordova create ディレクトリ名  アプリ識別子  アプリ名 -d
  • ・ディレクトリ名:プロジェクトファイルのルートディレクトリフォルダ名
  • ・アプリ識別子:リリースの際に必要となるアプリを特定する為のパッケージ名
  • ・アプリ名:アプリ固有の名前

例として次のように設定します

$ cordova create sampleapp  jp.co.sample  Myapplication -

※アプリ識別子はドメインを逆に記述したものに設定します

 

3. OS別のプラットフォームを追加

Cordovaは一つのソースで複数のOSに対応できるハイブリットアプリです。リリースするOS用のプラットフォームを追加します。

 

Android用のプラットフォームを追加します

$ cordova platform add android

 

プラットフォームが追加されているか確認します

$ cordova platform ls

 

Cordovaのファイル構成

以上でアプリを開発する環境が整いました。

生成されたファイル群を確認すると次のような構成になっています。

 

プロジェクトルート
 ├ config.xml
 ├ hooks
 ├ platforms
 ├ plugins
 └ www

 

このwwwフォルダの中に、アプリのHTMLやjavascriptファイル、画像ファイルなどが入ります。あとは通常のウェブ制作と同じようにコーディングをしていきます。

 

 

以上がCordovaでのネイティブアプリ開発の環境構築となります。やることが多くて少し大変かもしれませんが一つひとつ確実に行っていくことが大切だと思います。

 

次回は「【Macでアプリ開発】CordovaのAndroidアプリ制作フロー(ビルド・各種設定編)」で実機でアプリを動かし、ストアでリリースするまでのフローをまとめていきます。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】