【Macでアプリ開発】CordovaのAndroidアプリ制作フロー(環境構築編)
最終更新日: Update!!
スマートフォンなどのネイティブアプリを制作する時には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.htmlSDKの環境変数のパスを通す
1. SDKのパスをAndroid SDK Managerで確認 コマンドラインで次のように入力し、Android SDK Managerを立ち上げる。$ androidウィンドウ上部のSDK PATHのところを確認する 2. bash_profileへSDKのパスを記述 コマンドラインでホームディレクトリへ移動
$ cdbash_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 cordovasudoを付けること、グローバルなディレクトリにインストールするため「-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アプリ制作フロー(ビルド・各種設定編)」で実機でアプリを動かし、ストアでリリースするまでのフローをまとめていきます。sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories