More than 5 years have passed since last update.

スマホアプリを作ったことなので作ってみたかった

ionic

Posted at 2019-04-29

やったことないことをたしなんでみようと思い、スマホアプリを作ってみることにした。
※Android Studioでやったことはあるけど、当時のマシンパワー的にきつくてストレスたまりまくりで挫折したことあり。

参考資料：とらラボ！ Vol.2(by 技術書典6)
Ionicで簡単に作れそうなことが書いてあったのでこれを試してみる。

What's Ionic

この辺参照。
https://ionicframework.com/
https://ionic.keicode.com/dev/what-is-ionic.php

環境構築

まずは環境構築。
インストール先の端末の環境は以下
・Windows10 Home

Node.js

Node.jsのHPからインストーラーをダウンロードしてインストール。
https://nodejs.org/en/download/

と思ったけど、すでにインストールしてた。
バージョンを確認してみると以下。

PS C:\Program Files\nodejs> node -v
v8.12.0

C:\WINDOWS\system32>npm -v
6.4.1

git

以下からダウンロードしてインストール
https://git-for-windows.github.io/

が、これも入っているので今回はスルー。

VS CODEのエクステンション

VSCは入っているので、[Angular Language Service]というエクステンションを追加

lonic CLI

npm install ionic cordova -g

Android Studio

以下からダウンロードしてインストール
https://developer.android.com/studio

インストーラが1G弱なのでインストールしちゃったら削除してもいいかもしれない

これで環境構築はいったん完了。
ここまでは特に問題は発生せず。

Hello World

<参考>
http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/windows%E3%81%A7ionic%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95
とらラボ！ Vol.2

プロジェクトを作成

ionic start HelloWorld

どういうものを作る？って聞かれるので、とりあえずtabsを選択。特に深い意味はない。

Install the free Ionic Appflow SDK and connect your app?

これに対してはとりあえず[n]。どういう意味なのかよくわからないけど。

プロジェクト起動

サンプルプロジェクトができあがるので、起動させてみる

cd ./HelloWorld
ionic serve

http://localhost:8100
こんな感じでブラウザから確認できる

Ctrl+C で停止させるっぽい。

androidアプリ化

ionic cordova platform add android
ionic cordova build android

これであっさりとapkが出来上がるかと思ったらエラー

Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

[ANDROID_HOME]が設定されていないとダメなのか。
Android Studioのインストールの後で設定しておく必要があるのかな。

→ Android Studioのセットアップがちゃんと終わっていなかったのが原因だった模様。

再確認

必要なものが足りているのかを改めて確認

cordova requirements

JDKも入ってなかった。
※どうもJREしか入れてなかったみたいだ。というか、全部まとめてインストールしてくれるものが欲しいわ。

改めて確認

cordova requirements

PS C:\Users\RyoNakamae\Ionic\HelloWorld> cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle

準備OK

これで準備OKなんで改めてビルド

ionic cordova build android

BUILD SUCCESSFUL in 6m 59s
42 actionable tasks: 42 executed
Built the following apk(s):
        C:\Users\RyoNakamae\Ionic\HelloWorld\platforms\android\app\build\outputs\apk\debug\app-debug.apk