Page.jsonからプロパティ定義や読み込み関数を作る
実機でテストできる段階まで来ました。
１．プロパティの大量追加およびページデータ読み込みは大変？
目標とするゲームブックアプリは、処理的に複雑な事は行いません。
とは言え、必要となるプロパティはそれなりの数になります。
まず"Page.json" で使ったフィールド(例えば選択肢1のテキストとか)は全てプロパティとして対応させることになると思います。
C:\MyTest\GameBook\src\app\MyData\Page.json
https://ncode.syosetu.com/n5283hn/15/
このファイル各ページの下に(簡易的なデータなので)は12個のフィールドがあるだけですが、全部定義を書くのはめんどくさいです。
そしてページが変わるたびに各プロパティに値をセット・・・
さらに"Page.json" にフィールドを追加したり削除したりフィールド名が変わったりしたら・・・
プログラムは、愚直に書くのも実は悪くはないのですが、横着するのも悪くなかったりします。
ですので、ここは出来るだけ楽になるよう工夫したいと思います。
２．ソースコードを自動的に書かせる
"Page.json"は、5つのページとそれに紐づいた12のフィールドで出来ています。
参照 https://ncode.syosetu.com/n5283hn/15/
やりたいことは、ページを指定したら各ページのフィールドの値を対応するプロパティの値にセットする事です。(すべてのフィールドをセット)
もちろん普通に"Page.json"を見ながら書いても良いのですが、"Page.json"自体が変更されたり、うっかり見落としたりはありそうですよね？
そこで、それに対応するソースコードをプログラムで書いてconsole.logと言う形で出力させたいと思います。(本番時には、この部分をコメントにして動かなくしましょう)
まずプロパティの名前ですが、各ページのフィールド名の先頭に"Page" を付けたものにします。
(例:Text1ならばPageText1)
次に、各ページフィールド("Page"は除く)の名前をconsole.logに列挙させてみましょう。
"home.page.ts"のconstructor の中に次のコードを加えてみます。
（インデントは半角スペース２つから全角スペース1つに変換しています）
---------------------------------------------------------------
//ページ1の中身(フィールド名と値の組み合わせ全て)
let objTemp = PageData["1"];
//キーの名前を順番にconsole.log に表示
for(let i=0;i<Object.keys(objTemp).length;i++){
console.log(Object.keys(objTemp)[i]);
}
---------------------------------------------------------------
保存してコマンドプロンプトから"ionic serve"を走らせるとブラウザが起動してアプリが表示されます。
---------------------------------------------------------------
cd c:\MyTest\Gamebook ← プロジェクトフォルダに移動して
ionic serve ← アプリを起動する
---------------------------------------------------------------
ブラウザのウェブ開発ツール(ブラウザによって名前は異なるかも？)を使い console.log に表示された内容を確認します。（console.logの内容を選択してCtrl+Cでコピーしました。）
---------------------------------------------------------------
Text1
Text2
Text3
Text4
Text5
SelectNum
SelectText1
SelectText2
SelectText3
SelectPage1
SelectPage2
SelectPage3
---------------------------------------------------------------
これで各ページのフィールド名を扱えることが判りましたので、対応するプロパティの定義も同様にconsole.logに出力できます。(プロパティ定義のひな型を用意して名前の部分を置換)
プロパティ定義のひな型(インデント部分を全角スペース変換しています)
---------------------------------------------------------------
private _value : string;
public get value() : string {
return this._value;
}
public set value(v : string) {
this._value = v;
}
---------------------------------------------------------------
ここでもうひと手間掛けて各プロパティの定義と、ページを指定した時に書くプロパティへの値をセットする関数を書かせてconsole.logに出力させる関数を用意します。
(インデント部分を全角スペース変換)
------------------------------------------------------------------------------------
// Function Set Property Value From Page.json End
//Book.jsonの構造がかわった時用
makePropertyAndFunction(test:boolean){
if(test){
let objProp = [];
objProp.push(" private _value : string;");
objProp.push(" public get value() : string {");
objProp.push(" return this._value;");
objProp.push(" }");
objProp.push(" public set value(v : string) {");
objProp.push(" this._value = v;");
objProp.push(" }");
let objTemp = PageData[1];
let strTempProperty ="// Prpoperty From Page.json Start";
let strTempFunction ="// Function Set Property Value From Page.json Start";
strTempFunction += "\n";
strTempFunction += " setPropValFromPage(){";
for(let i=0;i<Object.keys(objTemp).length;i++){
//Property
let strReplaceWord = "Page" + Object.keys(objTemp)[i];
for(let j=0;j<objProp.length;j++){
strTempProperty += "\n";
strTempProperty += objProp[j].replace("value",strReplaceWord);
}
strTempProperty += "\n";
//function
strTempFunction += "\n this.";
strTempFunction += strReplaceWord;
strTempFunction += " = PageData[this.ThisPage].";
strTempFunction += Object.keys(objTemp)[i];
strTempFunction += ";";
}
strTempProperty +="// Prpoperty From Page.json End";
strTempFunction +="\n this.setTitle(this.PageText1);";
strTempFunction +="\n }";
strTempFunction +="\n// Function Set Property Value From Page.json End";
console.log(strTempProperty);
console.log(strTempFunction);
}
}
------------------------------------------------------------------------------------
引数にtrueを入れて呼びだすと、console.logにプロパティ定義とプロパティへの値をセットする関数を出力します。
セット関数の方は現在何ページなのかを示す"ThisPage"と言うプロパティの値を見て、そのページの各値を書くプロパティにセットします。(ページタイトルもセットしています)
"ThisPage"プロパティは値stringでVisualStudioCodeの入力補助機能で作りました。
プロパティ定義は割愛しますが、セット関数は以下の通りです。
(インデント部分を全角スペース変換)
---------------------------------------------------------------
// Function Set Property Value From Page.json Start
setPropValFromPage(){
this.PageText1 = PageData[this.ThisPage].Text1;
this.PageText2 = PageData[this.ThisPage].Text2;
this.PageText3 = PageData[this.ThisPage].Text3;
this.PageText4 = PageData[this.ThisPage].Text4;
this.PageText5 = PageData[this.ThisPage].Text5;
this.PageSelectNum = PageData[this.ThisPage].SelectNum;
this.PageSelectText1 = PageData[this.ThisPage].SelectText1;
this.PageSelectText2 = PageData[this.ThisPage].SelectText2;
this.PageSelectText3 = PageData[this.ThisPage].SelectText3;
this.PageSelectPage1 = PageData[this.ThisPage].SelectPage1;
this.PageSelectPage2 = PageData[this.ThisPage].SelectPage2;
this.PageSelectPage3 = PageData[this.ThisPage].SelectPage3;
this.setTitle(this.PageText1);
}
// Function Set Property Value From Page.json End
---------------------------------------------------------------
ここで出来たプロパティ定義と関数をVisualStudioCode側に貼り付ければPage.jsonの全データを利用可能になります。
最後にconstructorの内容を以下に示しますが、次回は各ページに応じてページ内容の画面表示に反映させていきます。(選択肢の数に合わせて表示非表示など)
(インデント部分を全角スペース変換)
---------------------------------------------------------------
constructor(private titleService: Title) {
//Book.jsonの構造がかわった時、trueセット
//プロパティやfunctionの自動生成
this.makePropertyAndFunction(true);
this.ThisPage = "1"; //最初は"1"ページを設定
this.setPropValFromPage(); //現在のページ(ここでは1ページ)の値読み込み
}
---------------------------------------------------------------
投稿します。
