スマホアプリが作りたくなる衝動
RubyでWEBサイトはつくれる。
でも最近のZ世代はスマホしか使わん。
そしてよく使うサービスはAppStoreとかGooglePlayからダウンロードしてる。
だからWEBサイトだけでなくこのスマホアプリが作りたいのだ。
JavaもSwiftも知らん素人がIonicでスマホアプリをつくるには
Androidアプリの場合はJava、iOSアプリの場合はSwiftとなんで2言語も勉強せねばならんのか。
技術を磨くのではなく、アプリを作りたいだけで、AndroidアプリもiOSアプリも作る必要あるなら、
その選択肢の1つはIonicというヤツをつかえばよい。
IonicはHTML5でつくったアプリをWebだけでなく、iOSアプリやAndroidアプリとしてもリリースすることができる。
ようは、いままでRubyでWEBサイトつくってんなら、多分使ってる言語はHTML, CSS, Javascript, Rubyだろう。
で追加で言語勉強せずにスマホアプリも作れるってわけだ。
あんま難しいこと考えず、さっそく開発環境構築する。
ちなみに環境は開発端末→Widows10、コマンドライン→Gitbushだ。
それ以外のひとは雰囲気で応用してほしい。すまん。
Node.jsのインストール
Node.JSっていうのは言語だ。PHPで開発したい時、事前にPHPをインストールするのとにたようなイメージだ。細かいことは気にするな。
まずはずでにNode.jsがインストールされているかチェックすべく、
下記コマンドを実行。
$ node -v
下記のようにバージョン表示されたらすでにインストールされてるのでOK
もし反応しなかったら下記サイトにアクセス
インストーラをダウンロードして、実行して、インストール。
でコンソールでnode -vを実行してバージョン表示されたらインストールは成功しているということ。
Ionic CLIのインストール
Ionic CLIというのはionicコマンドをつかえるようにするヤツ。
下記コマンドでIonic CLIをインストール。
※結構時間かかる。
$ npm install ionic cordova -g
$ ionic -v
Gitのインストール
Gitは何やかんやいるんですよ。詳しくはしらん。とりあえずいるのでインストール必須。
すでにGitがインストールされてるか下記コマンドで確認。
$ git --version
上のようにバージョンが表示されたらインストール済。
もし動かんかったら下記サイトにアクセスしてインストールしよう。
Android Studioのインストール
Android StudioはAndroidアプリのリリース時に必要なので、しゃあなしでインストール。
下記サイトにアクセス。
信じられへんくらい時間かかるからカップ麺でもくいながらインストール推奨。
Xcodeのインストール
iOSアプリのっリースに必要だが、Macbookもってないので、いったん断念。スルー。
Ionicプロジェクト作成
では早速テストアプリを作成する。
まずはテキトーにionic開発用のディレクトリを作成して、そのディレクトリの中で下記コマンドを実行する。
$ ionic start test03 tabs --type=ionic-angular
# コマンドの構文としては ionic start アプリ名 テンプレート名 --type=ionic-angular
そうするとアプリ名のディレクトリが出来上がっているので、そこに入って下記コマンドを実行
$ ionic serve
すると勝手にブラウザがたちあがる。
余裕やな。