いきなりゲームブック２
いきなりゲームブック１の続きです。
参考書籍"Ionicで作るモバイルアプリ制作入門[Angular版]"（ISBN978-4-86354-292-1)(以降、参考書籍）
取説読まないマンの本領発揮で、いきなりIonic制のアプリを調べてます。
さて、前にソースを見た訳ですが、まず間違いなくIonicで作るアプリは<app-root></app-root>の間をアプリの動いてる間に色々変更することで表示していますね。
これ自体は、目新しい話でもないですし、最初にちょっと書いたように私の作ったゲームブックHTML版も基本は同じです。
各ページのデータを用意して、選択肢を選ぶと、それに対応するページを表示する。そんなやり方ですね。
本当は、この辺りで色々調べるのが効率の良いやり方な気もしますが、色々楽しくなってきたのでこのまま続けます。
１．動いているコードを見て見る
さて、このアプリですが、プロジェクトの中の静的なソースを見ても判らないと思います。
根拠と言うほどでも無いですが、コマンドプロンプトで ionic serve コマンドを実行した際のメッセージが以下のように、内部的にソースからアプリを作ったよ！と報告しているからです。
------------------------------------------
[ng] Build at: 2022-03-17T09:25:26.418Z - Hash: ac2bf66162a12692 - Time: 6411ms
[ng] √ Compiled successfully.
------------------------------------------
そこで直接動いているアプリの方から、中身を追いかけたいと思います。
やり方としては、たいていのブラウザについている機能、ブラウザ開発ツールを使います。
とりあえずソースコードに記述してある以下の5つのjavascriptを見ていきましょう。
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
２．"runtime.js"
ソースコードを貼り付けようかと思いましたが、軽く1万字を超えますので(行数にして339行)せっかく入れたVisualStudioCodeに貼り付けて、眺めてみます。
私の見た感じでは、細かいところをいじるためではなさそうです。Ionicで作るアプリに共通の部分かなと推測？
３．"polyfills.js"
こちらも同様ですが、デザインなど表示関係の役割？行数にして10484行。
４．"styles.js"
はい、以下同様です。
５．"vendor.js"
以下同様ですが、10万行超えてますね。
６．"main.js"
以下、同様。
すがすがしいまでに何も分かりませんでした。まあ厳密には、このページのデザインの元となったtemplate.htmlと言うファイルは見つけたのですが、アプリとしての動作の規定はコンパイル前のファイルをいじるのでしょう。
７．参考書籍に戻る
ソースの中にはそれなりに興味を引く情報もあったのですが、当座の役には立ちませんので参考書籍に戻ります。
参考書籍によれば、ベースとなるhtmlはプロジェクトフォルダー内の src フォルダーにある index.html 。また、最初に読み込むスクリプトは 同じく src フォルダー内の main.ts との事。
そしてアプリ内のページや機能は、モジュールと言う単位にまとめて使う事がしっかり記載されています。
とは言えプログラミングと言うものは、(確実にあとで後悔すると思われても)勢いで動く事も重要かと思っていますので反省は致しません(￣▽￣)
きりが良いので、一旦ここで保存とします。
