Webアプリを作ってみよう

第4話 ionicで作る初めてのWebアプリ

---------------------------------------------------

＊＊＊　重要　＊＊＊

--------------------------------------------------

　この投稿でプロジェクトの作成タイプにangular-standaloneを選んでいます。

　しかしながら、その後のテストで、このタイプは比較的初心者である私には荷が重すぎる(というか対応が出来ない)事が判りました。

　ここまでの部分では問題ありませんが、以後のプロジェクト開発は、standalone抜きのangularで行います。

---------------------------------------------------

前書き

---------------------------------------------------

　さて開発環境が整ったので、いよいよionicサンプルプロジェクトを作りたいと思います。

　ionic(Webアプリのひな型を作りテストするツール)のstartコマンドは、カレントディレクトリの直下にプロジェクト名と同じフォルダを作成しプロジェクトで使うファイルとフォルダをその中に作ります。

　この連載ではお使いのPCのC:\直下にMyTestと言うフォルダを作成して、その中に各連練習用プロジェクトを作る事にします。

(すでに同名のフォルダがある場合、別の名前に読み替えて下さい)

---------------------------------------------------

フォルダの用意を行う

---------------------------------------------------

まず各プロジェクトを入れるフォルダ"MyTest"を作ります。

　コマンドプロンプトを立ち上げて、以下のコマンドを実行してください。もし既に同じ名前のフォルダがあってもエラーが表示されるだけで問題はありません。

　mkdir C:\MyTest

　余談ですが、実は大文字小文字をWindowsは区別していなかったりしますので、すべて大文字や小文字でも問題はないです。(エクスプローラ上では作った通りの大文字小文字で表示されますが)

　次にカレントディレクトリーを上のC:\MyTestに変更するため、コマンドプロンプトに次のコマンドを打ちこみます。(もちろんコピーペーストしても構いません)

　cd C:\MyTest

このコマンドを打つことによって、カレントディレクトリが"C:\Mytest"になり、この状態で作るプロジェクトは、すべて"C:\Mytest"の中に作られます。

---------------------------------------------------

ionicプロジェクトの作成

---------------------------------------------------

　いよいよionicのコマンドの出番です。

　まずカレントディレクトリが"C:\Mytest"であることを確認した上で、以下のコマンドをコマンドプロンプトに打ち込んでください(あるいはコピーペーストでも可)

　ionic start test00 blank --type=angular

　これは

　・ionicのstartコマンドで新しいプロジェクトを作る。

　・プロジェクトの名前はtest00である。

　・ひな形テンプレートとしてblank(特定の機能を持たない)を使用

　・angularの機能を使用する

　と言った意味です。

　使用できるひな形を見るには

　ionic start --list

　と言うコマンドで表示されます。機会が有れば色々お試しください。なおインストールした時期によりバージョンが異なり種類も異なっていました。

　最後の--typeなのですが、ionicで作るプロジェクトをどのようなエンジンで動かすか？と言う認識で良いかもしれません。

　水素エンジンだろうとガソリンエンジンあるいはハイブリッドエンジンだろうと車が目的地に着く事には変わりがないように、裏で動く機能に種類があっても目的のWebアプリは作れると言う認識で良いと思います。

　ここでAngularを選んだのは、多少なりとも知っているのがAngularだけだったという事です。

　さてコマンドを入力して頂けたでしょうか？

　私と同じionicのバージョン(7.2.0)を使用しているならば、Angularの種類を選択するように求められていると思います。

・NgModule

・standalone

以前はstandaloneは無かったのですが、今後はstandaloneが主流になるかもしれません。ですので上下の矢印キーでstandaloneを選びエンターキーを押してください。

なお--typeをangularではなく、angular-standaloneにして置けば、この質問は無いようです。

なおバージョンの確認コマンドは

　ionic --version

で行えます。

　かなり時間がかかりますがお待ちください。

　以下のような質問が表示され作業が止まっているはずです。(これもバージョンによって異なる動きをする可能性があります)

Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.

? Create free Ionic account? (y/N)

　要はionicのコミュニティに入らないか？と言うお誘いですがNを入力してエンターキー押下で断って構わないと思います。(毎回聞くと思うので必要と思ったらお入りください)

　この段階ではプロジェクトは出来ているので、すぐに以下のメッセージが表示されます。(最後の行はコマンドの入力待ちを示す)

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd .\test00

- Run ionic serve within the app directory to see your app in the browser

- Run ionic capacitor add to add a native iOS or Android project using Capacitor

- Generate your app icon and splash screens using cordova-res --skip-config --copy

- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs

- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

c:\MyTest>

　これはプロジェクトが出来たのでカレントディレクトリを次のコマンドを入力してプロジェクトのフォルダに移そうという事とiOSやanndroidのモバイルアプリを作成するための方法について書いて有ります。

cd .\test00

上のコマンドを入力する事で今作成したプロジェクトフォルダがカレントディレクトリになります。

これでionicプロジェクトの作成が完了しました。

---------------------------------------------------

作成したプロジェクトを起動する

---------------------------------------------------

　作成したプロジェクトの起動は

　・コマンドプロンプトを立ち上げ

　・プロジェクトフォルダをカレントディレクトリにして

　・以下のコマンドを入力

　　　ionic serve

　　以上で行います。

　エラーが無ければ、ブラウザが立ち上がり作ったWebアプリを表示するはずです。

　少し解説します。

　内部的には、上のコマンドはこのPC内に仮想のWebサーバーを立ち上げて、この作成したプロジェクトのWebアプリを起動しています。

　従って、現在使ったコマンドプロンプトは入力のできない状態になっていることに注意しましょう。

　このコマンドプロンプトでCtrl+Cを押下する事で、Webアプリが終了してコマンド入力ができる状態に戻ります。

以上で、初めてのionicプロジェクトの作成を終わります。

次の投稿から作ったプロジェクトの編集方法と簡単なWebアプリの機能実装を練習したいと思います。