※サンプルページもありますので面倒でしたらそちらをご覧ください。

以下はサンプルページです。

https://aticlab.com/kakuyomu/gamebook/gamebook01/home

　まずコマンドプロンプトを立ち上げ、以下のコマンドで【第8話　初めてのアプリ起動】で作成したプロジェクトを起動します。

cd c:\mytest\gamebook01

ionic serve

　ブラウザに、このプロジェクトが表示されたら【第9話　初めてソースコードを見る】を参考にVisualStudioCodeを起動して、このプロジェクトフォルダを開いて下さい。(プロジェクト起動前から開いたままでも構いません）

　ごく簡単なゲームブックを作ります。

　プログラミング的な部分の説明は別投稿の【Webアプリを作ってみよう】の方で解説予定です。

　こちらでは、主にゲームブックの機能とシナリオデータを中心に解説したいと思います。

　なにはともあれ現在のプロジェクトのコピーをとっておきましょう。

　新しいionicの機能を付け加えたりしない限り(例えばデータの保存読み込み機能などを追加予定)、C:\MyTest\GameBook01\srcのフォルダ全体をコピーするだけで充分です。

　考えて見ると、こちらの投稿に全ソースコードを投稿するわけですから、最初の作成直後のsrcフォルダだけでも良いかもしれません。

　さて、ソースを変更します。この連載の以下の投稿に3つのファイルのソースコードがコピーされていますので、これをC:\MyTest\GameBook01\src\app\home以下の以下のファイルにコピーして置き換えてください。

第10-1話　home.page.ts

第10-2話　home.page.html

第10-3話　home.page.scss

このアプリは

・ページを表示する

・選択肢がある

・選択肢ごとに異なるページへ飛ぶボタンがある

それだけの機能です。

　ページごとにタイトルとテキスト、選択肢のテキストとボタンのテキスト、そしてボタンを押した時の移動する先のページを書いているだけなので、それ程難しくはないかと思います。

　シナリオ自体は【第10-1話　home.page.ts】の中に書き込んでいますのでご覧ください。

　今後、少しずつ、これに機能を追加していきます。

　次回の投稿は、来月を予定しています。

　最後にプログラム機能的なことについては、下記の別投稿で解説する予定ですが、こちらもご興味があればお読みください。

Webアプリを作ってみよう

ハートをクリックで、簡単に応援の気持ちを伝えられます。（ログインが必要です）

新規登録で充実の読書を

マイページ: 読書の状況から作品を自動で分類して簡単に管理できる; 小説の未読話数がひと目でわかり前回の続きから読める; フォローしたユーザーの活動を追える
通知: 小説の更新や作者の新作の情報を受け取れる
閲覧履歴: 以前読んだ小説が一覧で見つけやすい