Ionicフレームワークは、HTML、CSS、JavaScriptなどのコアWebテクノロジーを使用してモバイルおよびデスクトップアプリケーションを構築するためのオープンソースUIツールキットです。 Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく機能し、表示されるように設計されています。
この記事は、Ubuntu 20.04 LTSシステムにIonicフレームワークコマンドラインユーティリティをインストールするのに役立ちます。
前提条件
sudo特権ユーザーを使用してUbuntuシステムにログインします。次に、システムパッケージを最新に更新します。
sudo apt update && sudo apt upgrade
ステップ1 –ノードのインストール
まず、次のコマンドを使用して、システムにNPMとNode.jsをインストールします。以下のコマンドは、node.jsのPPAをシステムに追加します。
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt install nodejs
ステップ2 – Cordovaをインストールする
システムにNode.jsをインストールした後、次のコマンドを実行してCordovaをインストールします。これにより、必要なすべてのノードモジュールがシステムにインストールされます。
sudo npm install -g cordova
ステップ3 – Ubuntu 20.04にIonicをインストールする
次に、システムにIonicノードモジュールをインストールする必要があります。 Ionicは、パッケージの作成、アプリケーションのビルドおよび開始のためのコマンドラインユーティリティを提供しています。以下のNPMコマンドを実行して、システムにIonicフレームワークをインストールします。
sudo npm i -g @ionic/cli
Ionicフレームワークのインストールが完了したら、次のコマンドを使用して、インストールされているバージョンを確認します。
ionic -v 6.10.1
ステップ4 – Ionicアプリケーションを作成する
ここで、次のコマンドを実行して、コンピューターに新しいIonicアプリケーションを作成する必要があります。
ionic start
ウィザードに従ってください:
- ReactまたはAngularからフレームワークを選択します。
- 次に、新しいアプリケーションの名前を入力します
- スターターテンプレートを選択します。各テンプレートの詳細が画面に表示されます。
- 次に、新しいアプリをCapacitorと統合して、ネイティブiOSおよびAndroidをターゲットにしますか?
ウィザードを完了すると、「Your Ionic app is ready!」というメッセージが表示されます。画面に次のステップも表示されます。
次に、アプリケーションディレクトリから以下のコマンドを実行します。
cd ionic-app ionic serve --host 0.0.0.0 --port 8100
次に、システムIPを使用してWebブラウザーでイオンアプリケーションにアクセスします。
詳細については、 http://ionicframework.com/docs/guide/installation.htmlにアクセスしてください
結論
このチュートリアルでは、UonicシステムにIonicフレームワークCLIをインストールする方法を学びました。また、サンプルのIonicアプリケーションを作成してアクセスします。