前回の投稿( LINEボットでゲームブックを作ってみた )で、ゲームブックを作ったのですが、ついでにシナリオエディタも作りました。
これで完成です。

画面はこんな感じです。

シナリオ作成画面です。
テキストを入力したり選択肢を入力したり、背景画像を決めて、重ね合わせる人物画像を指定したりします。

こっちが、画像ファイルのアップロード画面。

こっちが、音声ファイルのアップロード画面。

GitHubにソースコード一式上げておきます。

pururuba/LinebotGamebook
　https://github.com/poruruba/LinebotGamebook

勉強になった機能

これまで個々に勉強してきましたが、それらを総ざらいした感じです。
（私自身はこれが目的でして）

・ファイルのアップロード、ダウンロード機能
・AWSのS3アクセス、DynamoDBアクセス
・vuejs-paginateの利用
・オーディオファイル再生
・LINEのMessaging API、Flex Message

サーバ側エンドポイント

前回の投稿でもエンドポイントを用意していましたが、作り替えた部分もあるので、改めて整理します。

• /linebot ： LINEボット用エンドポイント

api/controllers/linbot/index.js が処理します。
LINEのMessaging APIの処理をして、Flex Messageのレスポンスを返しています。
詳細は、前回の投稿を参照してください。

• /linebot-image/* ： 画像処理用エンドポイント

api/controllers/linbot-contents/index.js が処理します。
背景画像の名前と、人物画像の名前をHTTP GETで受け取って、重ね合わせた画像(image/png)を返します。
詳細は、前回の投稿を参照してください。前回からエンドポイント名を変えましたが、処理内容は同じです。

• /linebot-upload ： ファイルアップロード用エンドポイント

api/controllers/linbot-contents/index.js が処理します。
シナリオエディタでのみ使います。
画像ファイルや音声ファイルのバイナリファイルのアップロードを受け付けます。

• /linebot-contents ： シナリオエディタ用エンドポイント

api/controllers/linbot-contents/index.js が処理します。
シナリオエディタでのみ使います。
画像ファイルや音声ファイルやシナリオファイルのリストを返したり、削除を受け付けたり、シナリオファイルをアップロードしたりダウンロードしたりします。
とはいっても、基本的な処理しかしていないので、理解してしまえば単純です。

今回ちょっと頑張って、AWSのAPI GatewayやLambdaで動作し、コンテンツ類はS3やDynamoDBで保持できるようにしたつもりです。
フォルダやファイルで動作させるのが一番手っ取り早いですが、切り替える場合は、以下のいづれかにしてください。

フォルダやファイルで動作
　const AWS_ENABLE = false;
　const FILE_ENABLE = true;

AWSで動作
　const AWS_ENABLE = true;
　const FILE_ENABLE = false;

上記の互換をとることは結構勉強になりました。

あと、sharpというnpmモジュールを使って画像の合成をしているのですが、いろいろできそうで、今後も使っていきたいなあ。

ブラウザ側処理

シナリオエディタのメインは、ブラウザ側の処理Javascriptです。

Webページは、GigHubの
　public/gamebook/index.html
にあります。

画像ファイル・音声ファイルのアップロード・削除処理が多く見えますが、それ以外は、エンドポイントの呼び出し処理や、Vueに処理してもらうデータの変更処理です。
ほとんどのことは、Vueがユーザの操作と内部で保持するデータの処理を同期してくれるので楽ちんです。

詳細は、GitHubを参照してください。
Vueの機能をフルに使っているので、Vueの知識が必須です。それさえわかっていれば、理解できるはず。。。。

以上