サンプルアプリを起動しました
※こちらは右も左もわからない状態から始めた、ほぼリアルタイムの記録です。
明らかな間違いも『記録』として放置しています。
一か月後に書き始めたまとめバージョンがありますので、これから始めようという方は、そちらの方がまだ良いと思います。
(勉強中ですので、こちらにも誤りが無いとは言いませんが）
https://ncode.syosetu.com/n7839ho/
むしろ、なろう初投稿で緊張しまくりましたが、開発環境を整えるまでが完了です。
ここからは、失敗しまくりな気もしますがIonicの初体験です。
むしろ、なろうの投稿と同時進行で有る事を考えると失敗も美味しいのかもしれませんね。
さて、参考書籍"Ionicで作るモバイルアプリ制作入門[Angular版]"（ISBN978-4-86354-292-1)(以降、参考書籍と呼びますね)では、まず「プロジェクトを作ろう」となっています。
ですのでこちらもその順で進めますが、ちょっと判りづらい、あるいは知りたい順番でないので細かいところをアレンジするかもしれません。
さてプロジェクト。要は一つの作品を管理する単位です。色んな情報やら部品や手順の詰め合わせとでも言えばよいのでしょうか？複数のプロジェクトを抱えないうちは、それほどありがたみは感じないかもしれないけれど、間違いなく便利な概念です。
１．フォルダーを作る
まず、諸々を入れるフォルダーを作ります。諸々の中には複数のプロジェクトがあるかも？もちろん一つでも良いですけれど、その辺は慣れるうちに自分の好みが出てくる部分だと思います。
練習用ですので、エクスプローラーでC:\gamebook\MyFirstApplication と言うフォルダーを作りました。
(筆者はWindowsユーザーです)
２．カレントディレクトリ変更
コマンドプロンプトを立ち上げ、"cd " と言うコマンドを打ち(エンターはまだ押さない)、エクスプローラからC:\gamebook\MyFirstApplicationフォルダーをドラッグアンドドロップします。
すると "cd " の末尾に "C:\gamebook\MyFirstApplication" が自動的に入力されるのでエンターを押し、カレントディレクトリー(作業をする場所、要するにそこで作業しますよ！と言う宣言)を、上記フォルダーに変更してやります。
３．Ionic のプロジェクト作成
カレントディレクトリーを変更したら、いよいよIonicのプロジェクト作成ですが作るだけならば拍子抜けするくらい簡単です。
２．の続きで、コマンドプロンプトに ionic start --type=angular のコマンドを打ちこみます。
すると、プロジェクト名を聞いてきます。
私は取説読まないタイプですが、ここに書くことも考えて "tutorial" (チュートリアル、個別指導）とします。
すると、５つのひな型(テンプレート。template)を提示してきますので上下矢印キーで使用するひな型を選び、Enterキーで実行するだけです。(ちなみに英語で表示されますが意外になれます)
どのひな型を選ぶか、悩みますが参考書籍にならって、 "sidemenu" を選択しました。
すると、選んだカレントディレクトリーの中に色々と部品やら材料を作ってくれるようです。
(この段階でwarningエラーつまり警告エラーが出てますがgitの部分のようです。とりあえず無視しましょう。[WARN] Error encountered during commit. Disabling further git operations.）
ちなみに、この段階でカレントディレクトリー内のtutorialフォルダー(プロジェクト名と一緒です)の中は、フォルダー数4966、ファイル数46412、容量444MBとなっています。
参考書籍に従い、Next Stepsに進みます。
カレントディレクトリー(作業するディレクトリー)をプロジェクトのディレクトリー(フォルダー)である"tutorial"に移動します。コマンドプロンプト的には以下のようなメッセージとして表示されます。
---------------------------------------------------------
[INFO] Next Steps:
- Go to your newly created project: cd .\tutorial
- 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 .\tutorialと言うコマンドでカレントディレクトリーを\tutorialにしろ。
・ionic serve と言うコマンドを実行して、ディレクトリーの中のアプリを見て見よう
・以下、現時点では省略(まだ見てないです。)
と言う感じです。
４．アプリ実行
上でionic serve と言うコマンドを走らせるとそこそこ時間をかけて(数分ですが)ブラウザにこのチュートリアルアプリが表示されます。
はじめてWebアプリを作ろうと言う方は、ビックリするかもしれませんが、アプリのアドレスは以下のようになっています。
http://localhost:8100/folder/Inbox
このアドレスの示すところは、自分のPCの中にサーバーを用意して、そのサーバとブラウザがやり取りしているという事ですね。
うろ覚えの知識で恐縮ですが、コンピューター同士がやり取りするには、やり取りの種類によって港（Port)が決まっていて、それによって(比較的)安全に通信ができるようになっています。
そしてlocalhost:8100というのが、8100と言う港とIonicアプリがやり取りしてますよと言う事を示しています。
コマンドプロンプト上のメッセージは以下の通り
---------------------------------------------------------
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
---------------------------------------------------------
※ Use Ctrl+C to quit this processと言うのは、今動いているローカルサーバを終了するにはCtrlとCを同時に押してください！という事ですね。
５．出来たアプリを触ってみよう
さて、ブラウザに表示されているアプリを触ってみます。
左側にサイドバーがあって、それを押すと右側の表示が変わる、多分それだけのアプリのようです。
ここで実験です。アプリを立ち上げたまま、コマンドプロンプトでCtrl+Cを押してみましょう。
以下のメッセージが出ます。
---------------------------------------------------------
[ng] √ Browser application bundle generation complete.
---------------------------------------------------------
この段階では、立ち上げたままのアプリの動作は変わらないように見えます。(つまり通信していないのでしょう)
しかし、アプリの再読み込みを行うとブラウザ上に以下のエラーメッセージが表示されます。
---------------------------------------------------------
正常に接続できませんでした
localhost:8100 のサーバーへの接続を確立できませんでした。
---------------------------------------------------------
上でも書きましたが、これは単にパソコン上のファイルを読み込んでいるのではなく、サーバと端末のやり取りを再現していることが判りますね。（そしてCtrl+Cでサーバ機能を終了した）
コマンドプロンプトのカレントディレクトリーは変わっていないので、もう一度コマンド ionic serve を実行します。
また、先ほどと同じようにブラウザ上にアプリが表示されます。
これで最低限、色々実験や開発が出来ることが判った気がします。
一旦、ここで投稿して、色々試してみます。
