とりあえず実験実験
前回までで、なんとなくわかってきた気がするので色々試してみたいと思います。
まず、当面の目標は、ゲームブックの各ページをデータとして用意して、これをモバイルアプリで利用(中身を表示)するまでです。
試行錯誤が多いと思いますが、それも含めて書いていきましょう。
１．データ用のフォルダーとデータを用意
プロジェクトフォルダ内の\src\app\home\内に、 mydata と言うフォルダを作りました。
次にVisualStudioCodeで新規ファイル作成→形式：JSONでpage.jsonと言うファイルを作りました。
中は、こんな感じです。
------------------------------------------------------------
{
"1":{
"Text1":"湖畔の城",
"Text2":"湖畔にそびえる古城。かっては白鳥城の名で呼ばれたほどの名城だが、現在は住むものとて無い。",
"Text3": "あなたは、ふとした事からこの城に眠る宝物の噂を聞いた。その噂によれば、城の秘密部屋に、かっての城主で白鳥の騎士と呼ばれた『ロラン・ドゥ・オーベルジーン』の宝剣が眠るというものだ。",
"Text4": "",
"Text5": "あなたは、その宝剣を手に入れようと決意した。"
},
"2": {
"Text1": "湖畔にて",
"Text2": "かっての名城も今は城下に山賊の集団が住みつき、陸伝いにはとても近づけないという。そんな訳で白鳥城に向かうには湖を渡るしかないらしいが、あいにくとあなたは泳ぎが出来ない。",
"Text3": "とりあえず湖畔に沿って歩いていると、あなたは一人の漁師に会った。漁師は４００ GPで白鳥城の船着場まで送ってくれるという。",
"Text4": "",
"Text5": ""
}
}
------------------------------------------------------------
ここまではVisualStudioCodeの便利さも感じつつ(メモ帳で書いちゃうような人なので)問題なく終了！
２．ページデータのモバイルアプリでの利用
このページJSONをアプリで使うには、プロジェクトフォルダ内の\src\app\home\内の app.module.ts あたりでimportしてやれば良いのかなと、VisualStudioCodeで app.module.ts を編集してみました。
----------------------------------------
import{ PageJson} from './mydata/Page.Json'
----------------------------------------
するとVisualStudioCode様に、『モジュール './mydata/Page.Json' またはそれに対応する型宣言が見つかりません。ts(2307)』と怒られました。(でも怒ってくれるのはプログラム開発的にはありがたい限りです)
まずピンと来たのは、先ほど作ったmydataと言うフォルダが信用されていないのでは？と言う事です。
そこでVisualStudioCodeのファイルメニューからフォルダーをワークスペースに追加してやりました。
すると若干文言が違うエラーをアドバイス付きで吐き出してきました。
------------------------------------------------------------
'PageJson' が宣言されていますが、その値が読み取られることはありません。ts(6133)
モジュール './mydata/Page.json' が見つかりません。'--resolveJsonModule' を使用して '.json' 拡張子を持つモジュールをインポートすることをご検討ください。ts(2732)
------------------------------------------------------------
ここで出てきた'--resolveJsonModule'とは何者？という事で調べてみると、プロジェクトフォルダ内のtsconfig.jsonと言うファイル内にちょこっと追加するといいよと言う情報が出てきたので、その通りにします。
------------------------------------------------------------
{
前略
"compilerOptions": {
中途略、以下2行追加
"resolveJsonModule": true,
"esModuleInterop": true
}
後略
}
------------------------------------------------------------
まだエラーと言ってますが、少しは改善。以下メッセージです
------------------------------------------------------------
import PageJson
'PageJson' が宣言されていますが、その値が読み取られることはありません。ts(6133)
モジュール '"c:/gamebook/MyFirstApplication/GameBook/src/app/mydata/Page"' にエクスポートされたメンバー 'PageJson' がありません。ts(2305)
------------------------------------------------------------
色々試行錯誤で、次の書き方なら通るのを確認
----------------------------------------
import page from './mydata/page.json';
----------------------------------------
ただし読み取られることはない。と言う警告は相変わらずです。
うん、困りました。
仕方ないので、色々試してみますが、まず色々(エラーなどを探すための）情報を吐き出すことに挑戦です。
３．console logの実装
とりあえずアプリ開発でつまずいたとき、どこで何があったのかを調べることは重要です。
Ionicでのモバイルアプリ開発でもそれは同じでしょうが、良くあるconsole logが動くかを試します。
プロジェクト内の\src\app\home\home.page.ts のconstructorにちょっとコードを追加して実験です。
（constructorと言うのは、自分自身を作る命令とでも考えてください。一番最初に問答無用で動く部分です）
----------------------------------------
export class HomePage {
title = 'テストタイトル';
constructor() {console.log('test log')} ← ここの()の間にconsole.log('test log')を追加
}
----------------------------------------
アプリを起動すると思惑通りに、ブラウザ開発ツール内に'test log'の文字が出力されました。
４．エラーコードの解決
読み取られることはない。と言う警告ですが、解決です。
宣言したけど使っている場所がないよ？と言うエラーでした。
試しにconsole logで出力させたら、以下のように表示です。
----------------------------------------
Object { Text1: "湖畔の城", Text2: "湖畔にそびえる古城。かっては白鳥城の名で呼ばれたほどの名城だが、現在は住むものとて無い。", Text3: "あなたは、ふとした事からこの城に眠る宝物の噂を聞いた。その噂によれば、城の秘密部屋に、かっての城主で白鳥の騎士と呼ばれた『ロラン・ドゥ・オーベルジーン』の宝剣が眠るというものだ。", Text4: "", Text5: "あなたは、その宝剣を手に入れようと決意した。" }
----------------------------------------
うん、さすがに(進んでいるとはいえ)がっくり来たので、本日はこれまで！
