ionicを試す 1日目 テンプレ-トプロジェクトを動かす
開発環境の設定は出来たという前提で進めます。
環境さえできていれば今回は特に悩むこともなく出来ると思います。
目標：ionicを使ってブラウザアプリを作り、自分のブラウザで表示させます。
ionicの操作はコマンドプロンプトからコマンドを入力し実行させることで行います。
Windowsのスタートキーを右クリックして、真ん中あたりにあるコマンドプロンプトを起動してください。
次のコマンドを打ちこんでください。(以後、コマンド両端の " は無視してください。)
---------------------
"mkdir c:\MyTest"
---------------------
"mkdir"と言うコマンドはフォルダの新規作成コマンドです。
もし、『既に存在しています』とメッセージが返ったならば、別な名前でフォルダを作り今後出てくる"MyTest"の部分を読み替えてください。
あるいは、既存の"c:\MyTest"の名前を変えて、再度"c:\MyTest"を作成してください。
次に、今作った"c:\MyTest"で作業をします。
(その中にプロジェクトフォルダを作ったりします。）
そのために現在のフォルダを変更します。
＊＊＊＊＊＊＊＊ ヒント ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
現在、コマンドプロンプトの左端には
"C:\Users\ユーザー名>"と表示されていると思います。
(ユーザー名は使用しているPCのユーザ名)
これが(コマンドプロンプトにとっての）現在のフォルダです。
カレントディレクトリ（英語: current directory）とも呼びます。
フォルダとディレクトリは同じものと考えて(通常は)OKです。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
現在のフォルダ(カレントディレクトリ)を変更するために、次のコマンドを打ちこんでください。(両端の " は無視してください。)
---------------------
"cd c:\MyTest"
---------------------
コマンドプロンプトの左側が"c:\MyTest>"に変わったと思います。
いよいよ初のionicコマンドを打ちこみます。
次のコマンドを打ちこんでください。(両端の " は無視)
コピーして、コマンドプロンプトに貼り付ける方がミスがないかも？
---------------------------------------------------------------
"ionic start test000 blank --type=angular"
---------------------------------------------------------------
エンターキーを押すと、何やら作業を始めますので、その間に上記のコマンドの説明をします。
"ionic start"：これは新規にionicのプロジェクトを始めますという命令
"test000"：このプロジェクトの名前（既存でなければ他の名前でもOK）
"blank"：いくつかあるプロジェクトのひな型のうち"blank"と言うひな形を使用する
"--type=angular"："angular"と言う技術を使う事を宣言（決め打ちと思ってください）
しばらくするとコマンドプロンプトが停止して、英文でフリーアカウントを作るか？と質問が出ます。
（コマンドプロンプトを使っていると、ユーザの回答待ちにたまに出くわします）
"N"を入力して、エンターキーを押すと作業が続きます。
しばらくすると以下のようなメッセージが出て終了します。
（コマンドプロンプトに次のコマンドが入力できる状態になsる）
---------------------------------------------------------
[INFO] Next Steps:
- Go to your newly created project: cd .\test000
- Run ionic serve within the app directory to see your app
- Build features and components: https://ion.link/scaffolding-docs
- Run your app on a hardware or virtual device:
https://ion.link/running-docs
---------------------------------------------------------
上の三行は、意訳すると
・次のステップの情報
・コマンド"cd .\test000"で、今作った作った新しいプロジェクトに移動しよう
・コマンド"ionic serve"であなたの今作ったアプリが動くよ
残りの行はリンク先を見ると判りますが（日本語表示に変更出来ます。翻訳済みのページならばですが）、フォルダ構造や動かすとどうなる的な話です。
指示に従い、次の2つのコマンドを順に打ち込んでください。
------------------------------------------
"cd .\test000"
"ionic serve"
------------------------------------------
しばらくすると、あなたのブラウザに今作られたアプリが表示されます。
ただしひな形に"blanc"を選んだので動く要素は無いですが。
コマンドプロンプトの方には以下のようなメッセージが出ていると思います。
------------------------------------------
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[ng] √ Browser application bundle generation complete.
[ng] 60 unchanged chunks
[ng]
[ng] Build at: 2022-04-15T00:52:02.274Z - Hash: 96c1f27ca658bbd9 - Time: 1211ms
[ng] √ Compiled successfully.
------------------------------------------
重要な事は以下の2点です
・ローカルサーバを立ち上げたから"http://localhost:8100"でアクセスできるよ
（インターネット上のサーバのローカル版）
・今、その仕事で忙しいからコマンド受け付けないけど Ctrlキーと"c" を同時に入力したら、ローカルサーバの仕事を終わらせるよ
『Ctrlキーと"c" を同時に入力』は今後も良く使うので覚えておいてください。
さて、ここでブラウザのアプリのアドレスを見てください。
インターネットのサイトを見た時の"https://"でもなく、パソコン上のファイルを開いたときの"file:///C:"でもなく、"localhost:8100"で始まっています。
これによりWebサーバとやり取りするのと同様なテストが出来る事が判ります。
次の投稿は、ソースコードを変えて表示を変更したいと思います。
引き続き続けるならばコマンドプロンプトのローカルサーバは立ち上げたままで問題ないですが、そうでないならば『Ctrlキーと"c" を同時に入力』で終わらせてください。
投稿
