ここからは足早に手じまい
初めてのなろう投稿に、初めての連続投稿、初めてのIonicを使ったモバイルアプリ制作挑戦と初めて尽くしの体験ですが、いよいよ終盤(書きながら試してるから、まだまだの可能性もありますが)
まず参考書籍として"Ionicで作るモバイルアプリ制作入門[Angular版]"（ISBN978-4-86354-292-1)を使いました。近所の書店応援で注文しましたが、在庫最後の一冊は縁を感じますね(電子書籍版もあるようです)
もっとも読み込んだというよりは、開発環境設定の面で使った感じもあります。技術書はわずか数行のために買ったりしちゃう事もままあるので、役に立っているのは間違いないですが。
それでIonicを使ったゲームブックモバイルアプリ、この数日の経験で確実に出来ることは確信しました。
(console.logを使ったのをアプリと言ってよいならば、うん、ゲームブックと言えなくもない)
特にプログラミングですが、出来そうと出来るな、そして出来た！の間には大きな壁がありますが、備忘録的な面が大きいので、やったことをまとめていきながら最後のコーディングしてみたいと思います。
----- 前準備等 -----
０．参考書籍注文
----- 開発環境編 -----
１．開発環境を作る前にPC（Windows)バックアップ
２．必要なツール等のインストール。参考書籍の通りに。深く考えなくても良いですが、どうにもならないとなったらバックアップ環境に戻して再チャレンジする覚悟が大事！
ツールは以下の通り
・Node.js(裏側で動いているので使っている意識はない）
・Ionic CLI(使っているけれど呪文を唱えるのに近い)
・Git(現在までほぼ出番が無い)
・Android Studio(現在まで出番が無い)
・VisualStudioCode(大活躍)
----- 開発準備編 -----
３．開発用のフォルダとプロジェクト名を決める。(開発用フォルダの中にプロジェクト名のフォルダが出来ます)
４．コマンドプロンプトでプロジェクトのひな型を作る。
・cd 開発フォルダ名で開発フォルダをカレントディレクトリー(作業する場所)に指定。
・ionic start --type=angular と言うコマンドで開発フォルダ内にひな形を作る。
まずプロジェクト名を教えて！と言ってくるので(英語)、GameBookと入力
ひな形の種類を聞いてくるのでblankテンプレートを選択。以後自動的に作られる。
５．出来上がったら、 cd 開発フォルダ\プロジェクト名フォルダ でカレントディレクトリーを変更。
ionic serve と言うコマンドでひな形を動かす。(英語でそうしてねと4．の終わりで指示してきます)
６．ブラウザ上にひな形のアプリが表示されます。
７．VisualStudioCodeでの作業
・データ用のフォルダをプロジェクト\src\app\MyDataとして作成（MyDataの上は準備されてます)
・簡単なゲームブックデータを上のフォルダにJSONとして作成(ページとテキスト複数)
----- 開発仕上げ編 -----
ここからは現在進行形で書いていきます。(これが終わったら清書版でまとめた方が良さそうですね)
編集するファイルは大してありませんので、現時点のファイル内容をコピーします。
src\app\home\home.page.html（表示のひな型みたいなもののようです）
------------------------------------------------------------
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
------------------------------------------------------------
tsconfig.json(プロジェクトフォルダー直下です。JSONファイルの処理のために変更が必要でした）
------------------------------------------------------------
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": ["es2018", "dom"],
"resolveJsonModule": true, ←この行追加
"esModuleInterop": true ←この行も追加
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
------------------------------------------------------------
src\app\home\home.page.ts とりあえずゲームブックデータを表示して見ただけです。
------------------------------------------------------------
import { Component } from '@angular/core';
import PageData from '../MyData/page.json' ←この行を追加
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() { ←下の’｝’までの間は、すべて追加(もともとは'｛｝'となっていた)
console.log(PageData[1]); ←この行で1ページ目のデータを表示
console.log(PageData[2].Text1); ←この行で2ページ目のText1を表示
}
}
------------------------------------------------------------
src\app\MyData\Page.JSON 実験用ゲームブックデータ
------------------------------------------------------------
{
"1":{
"Text1":"湖畔の城",
"Text2":"湖畔にそびえる古城。かっては白鳥城の名で呼ばれたほどの名城だが、現在は住むものとて無い。",
"Text3": "あなたは、ふとした事からこの城に眠る宝物の噂を聞いた。その噂によれば、城の秘密部屋に、かっての城主で白鳥の騎士と呼ばれた『ロラン・ドゥ・オーベルジーン』の宝剣が眠るというものだ。",
"Text4": "",
"Text5": "あなたは、その宝剣を手に入れようと決意した。"
},
"2": {
"Text1": "湖畔にて",
"Text2": "かっての名城も今は城下に山賊の集団が住みつき、陸伝いにはとても近づけないという。そんな訳で白鳥城に向かうには湖を渡るしかないらしいが、あいにくとあなたは泳ぎが出来ない。",
"Text3": "とりあえず湖畔に沿って歩いていると、あなたは一人の漁師に会った。漁師は４００ GPで白鳥城の船着場まで送ってくれるという。",
"Text4": "",
"Text5": ""
}
}
------------------------------------------------------------
現在までのテンプレートをいじったり追加した部分はここまでです。
きりがいいの、ここで投稿
