web制作してる人間がIonicでアプリ作った話(Ast制作):3 ionicでまずはベース用意

こんにちは、初めての方は初めまして。

AstCrowと申します。

タイトルのとうりですが、この回ではionicでまずはベース用意云々を書こうかなと思います。

今回は

  • ionicの準備（インストール等）
  • テンプレートを使用してベースとなるファイル一式作成
  • ionicでの作成の際によく使ったコマンド

あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。

次回からionicでのガワの制作について書いていく予定です。

 

ionicの準備（インストール等）

まずはionicを使えるようにしないと始まらないので必要なものをインストール。

色々書こうかなと思ったのですが、既に有志の方が素敵にまとめてくださっているので、こちらを参考にどうぞ。

 

node.jsはこちらから

 

node.jsですがnodebrewというnode.jsのバージョン管理ツールもあり、こいつを先にインストールしてからnodebrewからインストールすることもできますし、おすすめです。

インストールしたけれど、これ本当に入っているのかな？と思ったら、ターミナルという黒い怪しげな画面（？）を開いて

 

node -v

 

を入力してエンター。するとターミナル画面にnode.jsのバージョンが表示されるのでインストールされているか確認できます。

インストールされていない場合はバージョンが表示されずエラー文章がでます。（command not found: node　だったかな…）

インストールできたらターミナルから

 

npm i -g ionic cordova

 

を入力してエンターでcordovaをインストール。

 

ionic -v

 

を入力してエンターで肝心のionicをインストール。

 

cordovaとはなんぞや？と思った方もいるかもしれない方はこちらをどうぞ。

 

なんだか難しいですが、要はモバイルアプリ開発向けのオープンソースフレームワークというもので、クロスプラットフォームに対応したアプリ開発ができるものと。で、こいつがいないとhtml/css/js等でのアプリ開発始まらないと。

 

ionicも似たような説明でややこしいですが、ionicはAnglerをベースにしたJavaScriptフレームワークでこいつはよりhtml5での開発に特化していると。Web/iOS/Android アプリが全て同時に開発できると。

 

ちょっとマニアックな表現ですがひと昔よく使われたjQueryと、そいつを使った便利なライブラリのような関係に近いのかなと個人的に思います。（間違っていたらすみません）

インストールできたらionic使える準備は完了です。

 

テンプレートを使用してベースとなるファイル一式作成

ここからガンガンターミナルという怪しげな黒い画面をどんどん使います。

VScodeインストールするとVScodeのメニューからもターミナル開けますね。widowsの方ならどうせcssやらhtmlいじるのですし、VScode入れるのおすすめします。

 

開発やらGitやらでよく使うことのある方なら特になんの感情も湧かないかもですが、普段触らない人間からするとこの画面なんかすごく怖いですよね。

見えないけれど何かインストールしたり、削除したり内部の設定いじったりできたり…目でその画面が見えないからこそ謎の恐怖心をそそるというか……私も昔は苦手でした。今も得意というわけではないですが。話が逸れるので閉廷。

 

早速ionicでベースになるファイル一式を作成。

まずはデータの格納場所を決めてから

 

cd ●●格納場所のファイルパス●●〜

 

と入力してエンターでまずは格納場所に移動。(cd ~~ でファイル移動)

パスはmacならフォルダの場所をFinderで開いて下に出ているファイル階層の一番右を右クリックで「●●のパス名をコピー」でコピペできます。

windowsならフォルダを開いて上に出ている階層クリック⇒パスの文字列になるので選択してコピペかな。

 

移動したら上記の有志の方の素晴らしいまとめにも書いてあるのですが、ターミナル画面で

 

ionic start ●●好きなフォルダ名●●

 

と入力してエンター。このコマンドが新しいアプリのベース作る子です。

ちなみに後ろに --type=ionic-angularをつけると3系のionicフレームワークが追加されます。

 

そうするといくつかionicから質問されるので応答します。

 

 

? Starter template

 

これはベースとなるテンプレートを選択してね、といっているので上下キーでテンプレートを選択してエンター。

テンプレートですがこちらも素敵な有志の方がまとめてくださっているので参考にどうぞ。

 

おすすめはtabです。上にヘッダ、下に3つのタブがあるテンプレートが選択されます。

3タブが入らなかったら削除すればいいですし、もっと必要なら増やしたりできますし、なんやかんやバランスがいいというか使いやすい印象です。

Astもtabのテンプレートをベースに制作しています。

blankはシンプルで悪くないですが、逆にシンプルすぎて色々追加したりが少し面倒だったりします。

 

 

Integrate your new app with Capacitor to target native iOS and Android?

 

Capacitorがプロジェクト内にiOSとAndroid追加しておくけどどうするー？と聞いています。

これを追加するとiOS/Android用のビルドができるようになります。

ちなみに後からでも追加変更できるのでどちら選んでも大丈夫です。

はいならyを入力してエンター。（y = はい）
いいえならnを入力してエンター。（n = いいえ）
 

Capacitorとはなんぞや？という方はこちらをどうぞ。

 

難しいですがざっくりいうとIonicがcordovaを改良したものでしょうか。ちなみにionicでベース作成した時点でデフォルトでこの子が入っています。

 

 

? Install the free Ionic Appflow SDK and connect your app?

 

これはAppflowを使いますかー？と聞いています。

Appflowとはなんぞや？と思いますが、ちょっと説明が難しい……。

 
ままざっくり言ってAmazonさんのWebサービスでAppflowてのがあるよ、データを安全に転送できる云々サービスだよ、てな感じです。
使う場合はyを入力してエンター。（y = はい）
使わないならnを入力してエンター。（n = いいえ）
 
 
これでベースがフォルダ内に作成されたはずです。
ターミナルで
 
cd ●●上記で作成したフォルダ名のファイルパス●●〜
 
を入力してエンターで開く。ここで
 

ionic serve

 
を入力してエンター。
しばらくするとデフォルトのブラウザが立ち上がり、http://localhost:8100というURLで作成したページが表示されます。
 

ionicでの作成の際によく使ったコマンド

もっといっぱいありますが、一旦ざっくりまとめてみました。
今回の記事で説明等してないのもありますが気にせず…。
アップデートとかもちょこちょこあるのでどこかにメモとかしておくと便利です。一から打つと面倒なので、私はメモ帳によく使うコマンドはメモしています。
 

▼フォルダ移動

cd ●●格納場所のファイルパス●●〜

 

▼ionicのページ確認（ブラウザ確認）

ionic serve

 

▼ionicのアップデート

ng update @ionic/angular

 

▼Capacitorのプラグイン等アップデート

npx cap update

 

▼Capacitorのプラグイン等の動機

npx cap sync

 

▼AOTコンパイル

ionic build —prod

 

▼capacitorでiOSアプリビルド（AOTコンパイルしてから実行すること）

ionic cap add ios

 

▼capacitorでiOSアプリビルドしたものをxcodeで開く

ionic cap open ios

 

▼capacitorでAndroidアプリビルド（AOTコンパイルしてから実行すること）

ionic cap add android

 

▼capacitorでAndroidアプリビルドしたものをAndroid studioで開く

ionic cap open android

 

最後に

これでベースのファイル一式は用意完了。

ここから自分のアプリに作り替えていく感じです。