Brighten up your day !!

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

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

0

クロスプラットフォームアプリケーションのフレームワークであるIonicを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

0

⭐️Brighten up your day with NP-Systems⭐️


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • 3月15日AngularでAdsense

    更新日時:2021年3月15日 06時46分

    0 もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。 昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。 http://ocr-app.np-sys.com/…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • Integrate adsense in Ionic Angular.

    更新日時:2021年3月14日 20時36分

    0 Note:please keep in mind that I am not native English speaker. In this article, I would like to summarize ho…


  • HTMLで要素の位置を調整する

    更新日時:2021年3月14日 14時23分

    0 my-class-parentでBody要素に対する長さを100%に指定しており、それに対してmy-class-childで場所を指定している、 0


  • (Google Cloud Platform)CloudFunctionsとAppEngineどちらにするか

    更新日時:2021年3月13日 20時12分

    0 外貨預金としてFXを使用していますが、自動売買のようなものをやってみたくなりました。でもFXは外貨預金として始めたものだし、FXのギャンブル性に危険が怖くもあるので、外貨預金用の口座と自動売買用の口座を別に持つことに…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


this is single-default.php