エミュレート成功！したので一旦、整理－２
前の所までは、おそらく問題なく出来たと思います。
(出来なかった場合はバックアップを戻して、再度試す位しかアドバイスできません)
ここではiconicで作ったひな形アプリをVisualStudioCodeで修正して、ゲームブックもどきにまで変更します。
１．コマンドプロンプトでひな形アプリを立ち上げる。
コマンドプロンプトを使いひな形アプリを立ち上げます。
・"cd c:\MyTest\Gamebook"でひな形プロジェクトフォルダに移動
・"ionic serve"でひな形アプリをブラウザに表示
これからVisualStudioCodeでプロジェクトのソースコードをいじりますが、
その編集結果は、今表示されているブラウザのページに反映されます。
(エラーがあればエラーとして)
２．VisualStudioCodeでプロジェクトを読み込む。
VisualStudioCodeを立ち上げてください。(初めての起動が前提)
ファイルメニューでフォルダを開くで"c:\MyTest\Gamebook"を開く。
確認メッセージが出ます。
------------------------------------------
このフォルダー内のファイルの作成者を信頼しますか?
------------------------------------------
ここでは"親フォルダ―'MyTest'内のすべてのファイルの作成者を信頼します"に
チェックを付けた上で、作成者を信頼するボタンを押下してください。
３．ファイルを開く
VisualStudioCodeの左側にエクスプローラが表示され、各フォルダとファイルが
確認できます。
ゲームブックもどきのために変更する必要があるファイルは以下の通りです。
(相対パス表記。絶対パスならば"C:\MyTest\GameBook\"を頭につける)
・src\app\home\home.page.html ← アプリの見え方を定義
・src\app\home\home.page.ts ← アプリの動作を定義
・src\app\home\home.page.scss ← アプリのデザイン(文字の色とか)
・tsconfig.json ← 様々な基本設定
４．データの追加
また、ゲームブックのページ情報ファイルを追加したいと思います。
VisualStudioCodeのエクスプローラで"src>app"の"app"を右クリックして
"MyData"と言うフォルダを新規に作成します。
この"MyData"フォルダを右クリックし新しいファイル"Page.json"を作ります。
ファイルの相対パスは以下の通り
・src\app\MyData\Page.json
また内容は以下の通り
https://ncode.syosetu.com/n5283hn/15/
このデータ"Page.json"はJSONと言う形式で書かれています。
"1" ～ "5" の5つのページに文章と選択肢の数、選択肢の文章が書かれています。
５．ページデータ"Page.json"を扱えるようにする。
さて、このJSONと言う形のデータをアプリで使うには一工夫必要になります。
プロジェクトフォルダ直下の"tsconfig.json" に２行加えます。
(正確には前の項目の最後に、追加項目がある印として "," を追加）
内容は以下の通り
https://ncode.syosetu.com/n5283hn/16/
さらに他所のファイル"Page.json"をアプリで使うよ！と言う宣言が必要です。
これは"src\app\home\home.page.ts"に宣言します。
２行目に次の行を追加。
import PageData from 'src/app/MyData/Page.json';
簡単に説明します。
『PageDataと言う名前のデータを'src/app/MyData/Page.json'
から取り込みます。』という事です。
さて、この段階でこの行は薄暗い色で、カーソルを行の上に持ってくると
”この行は読み取られることはありません”と言うメッセージが出ます。
これは、まだPageDataを使っていない事を意味しますので無視してください。
６．アプリの表示をいじる(ページタイトル)
現在、アプリのタイトルは"Ionic App"となっていますので、これをPageDataの
２ページの"Text1":"湖畔にて"に変更します。(ページを変えるごとに変更予定)
今回作ったひな形アプリは、Angularがベースになっています。
(コマンド"ionic start --type=angular"で作りましたね。)
Angularは色々な機能が詰め込まれ、HTMLページTitleを取得・設定する機能も
あります。
Angularの公式ドキュメントの方法です。
https://angular.jp/guide/set-document-title
筆者の理解は十分では無いですが以下のソースコードで実装出来ました。
(この段階では長くないので全文コピー)
src\app\home\home.page.ts
-------------------------------------------------------------
import { Component, setTestabilityGetter } from '@angular/core';
import PageData from 'src/app/MyData/Page.json'; ← ４．のページデータ
import { Title } from '@angular/platform-browser';← Title取得設定機能
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private titleService: Title) { ← 実行した時にTitle取得設定機能
を使用するための引数定義追加
this.setTitle(PageData[2].Text1); ← この下で定義した関数でPageDataの
２ページ目"Text1"をTitleにする。
}
public setTitle(newTitle: string) { ← 引数に入れた文字列をTitleにする関数
this.titleService.setTitle(newTitle);
}
}
---------------------------------------------------------------
きりが良いのでここで投稿。(次はクラスとか多少説明がいると思うので）
