99. A-tag-not-highly-recommended

Macにionicをインストールしてサンプルプロジェクトを作成する

アプリ開発をイメージさせる写真
クロスプラットフォームアプリケーションのフレームワークであるIonicをMacにインストールする方法について紹介します。 まず、node.jsをインストールする必要があります。インストールしていない方はこちらに最も簡単なインストール方法を記載していますのでご覧ください。
https://np-sys.com/macでnode-jsをインストールする/

インストール方法

npm経由でのインストールとなりますので、sudo npm install -g @ionic/cliコマンドを打ちます。
% sudo npm install -g @ionic/cli
Password:
⸨   ░░░░░░░░░░░░░░░⸩ ⠇ loadDep:yallist: sill resolveWithNewModule smart-buffer@
ionic -vでバージョンが表示されたらインストール完了です。
% ionic -v
6.12.3

アプリを作ってみる

ionic startコマンドで簡単なアプリを作ってみます。
 % ionic start

Pick a framework! ?

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: (Use arrow keys)
❯ Angular | https://angular.io 
  React   | https://reactjs.org 
今回はAngularを選びます。プロジェクト名やCapacitorがいるかなど聞かれますので、入力します。CapacitorはIonicのプロジェクトをAndroid,iOS,デスクトップアプリとして動作させる環境(ランタイム)です。Web用なら入りませんが、今回は入れておきます。
? Project name: my-first-app

Let's pick the perfect starter template! ?

Starter templates are ready-to-go Ionic apps that come packed with everything
you need to build your app. To bypass this prompt next time, supply template,
the second argument to ionic start.

? Starter template: tabs
✔ Preparing directory ./my-first-app in 1.93ms
✔ Downloading and extracting tabs starter in 998.19ms
? Integrate your new app with Capacitor to target native iOS and Android? (y/N) 
y
ダウンロードしたら、プロジェクトへ移動します。
% cd my-first-app/
ionic serveコマンドでビルドしてみます。
% ionic serve    
> ng run app:serve --host=localhost --port=8100
アプリケーションが立ち上がったら完了です。

参考文献

https://ionicframework.com/docs/intro/cli
Meditation Tools開発者
絹田 雅
複数の瞑想を学ぶことができるMeditation Toolsの開発者。 売上は人権段階を通じた寄附により社会をより良くすることに使われます。 利用はこちら
twitter-timeline