ゲームブックアプリを作りましょう

第8話 初めてのアプリ起動

　この連載ではゲームブックアプリを中心に投稿予定です。徐々に変更や機能追加をする感じで進めていきたいと思います。

　なおionicのアプリ作成一般については、同じ筆者の下記の投稿をご覧ください。

Webアプリを作ってみよう

https://kakuyomu.jp/works/16818093076529875420

（重なる部分もありますが、分けてみました。）

　なお各プロジェクトはどちらもC:\MyTest直下に作成する前提で話を進めます。

　今回の投稿の内容は

・プロジェクトをまとめるディレクトリを作る

・プロジェクトのひな型を作る

・プロジェクト(Webアプリ)を動かす

　以上になります。

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

【プロジェクトをまとめるディレクトリを作る】

　コマンドプロンプトを立ち上げ以下のコマンドを打ちこみます(コピーペースト可)

mkdir C:\MyTest

　仮に同じ名前のディレクトリが存在する場合、エラーにはなりますが問題ありません。

　次に続きます。

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

【プロジェクトのひな型を作る】

　以下のコマンドを入力してC:\MyTest直下にGameBook01と言う名前のionicプロジェクトを作ります。

cd c:\mytest

ionic strat GameBook01 blank --type=angular

　初回のプロジェクト作成なので、少し細かく見ていきます。

　上記の２番目のコマンドを入力すると、以下のように表示されコマンドが回答待ちになります。

(Use arrow keys)

> NgModules

Standalone

　これは少し前のionicでは無かった挙動ですが、--type=で指定したangularと言うツールに二つのモードが増えたので、どちらを選ぶのかを聞いています。

　ここでは(規定値である)NgModulesを選び(上下の矢印キーで変更可能)エンターキーを押して処理を続けます。

　しばらくすると、以下のように表示されコマンドが回答待ちになります。

Join the Ionic Community! 💙

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を入力して処理を進めます。(yは選んだことが無いのでわかりません)

　この段階で、プロジェクトの作成は成功しています。以下のメッセージが出てコマンドプロンプトが入力待ちになります。

- Go to your new project: cd .\GameBook01

- 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>

　これはプロジェクトが出来たので、

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

・ionic serveと言うコマンドでブラウザで動くよ

・iOSやAndroid向けのアプリを作るにはこうしたらいいよ

　的なことが書いて有ります。

　【プロジェクトのひな型を作る】はこれで終了です。

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

【プロジェクト(Webアプリ)を動かす】

　プロジェクトが出来たならば、これを動かしてみましょう。

　以下のコマンドを入力してプロジェクト(Webアプリ)を動かしましょう。

cd c:\mytest\gamebook01

ionic serve

　コマンドプロントを立ち上げたら、まずカレントディレクトリをプロジェクトフォルダに変更し、"ionic serve"と言うコマンドでこれを動かします。

　しばらく時間がかかりますが、エラーがなければブラウザが起動し(あるいは新しいタブが開き)プロジェクトが動きます。

　いか、起動したプロジェクトの事をWebアプリと呼びます。

　ソースコードを変更した場合、エラーがなければ、ブラウザ上で動いている変更された状態でWebアプリも再起動します。

　そして最後になりましたが終了時の注意です。このWebアプリが動いている最中は、このコマンドプロントは仮想のWebサーバとして動きっぱなしになっています。

　ですので、終了時にはコマンドプロント画面でCtrl+Cを入力させて、処理を終了させてください。

　【プロジェクト(Webアプリ)を動かす】はこれで終了です。

　次の投稿では、今回作成したWebアプリのソースコードを開いてみます。