LINEボットでゲームブックを作った、ついでにシナリオエディタ作ったので完成

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

画面はこんな感じです。

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

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

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

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

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

(2020/10/4 修正)
・ページの移動にはポストバックを使うとソースコードがすっきりしました。
・シナリオ切り替え時に、シーン番号も指定できるようにしました。

勉強になった機能

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

・ファイルのアップロード、ダウンロード機能
・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/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ページは、GitHubの
　public/gamebook/index.html
にあります。

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

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

#起動方法

まずはGitHubからZIPをダウンロードします。

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

> unzip LinbotGamebook-master.zip
> cd LinbotGamebook-master
> npm install
> mkdir data/gamebook/users
> mkdir public/gamebook/{images,audio}
> mkdir certs ★1
> vi app.js ★1
> vi .env ★2

★1
HTTPSとするために、SSL証明書のファイルを配置し、app.jsを編集します。フロントに別のHTTPSを立てている場合は不要です。
以下のところをSSL証明書ファイル名に合わせます。

app.js

  const options = {
    key:  fs.readFileSync('./cert/privkey.pem'),
    cert: fs.readFileSync('./cert/cert.pem'),
    ca: fs.readFileSync('./cert/chain.pem'),
  };

★2
LINEのシークレットを.envに付記します。

LINE_CHANNEL_ACCESS_TOKEN="【LINEのチャネルアクセストークン(長期)】"
LINE_CHANNEL_SECRET="【LINEのチャネルシークレット】"

あとは、以下のようにして起動します。立ち上がるとログが表示されると思います。

> node app.js
/linebot post fulfillment {"operationId":"linebot","func_type":"normal","content_type":"application/json","files":[]}
/linebot-image/* get handler {"operationId":"linebot","func_type":"normal","content_type":"application/json","files":[]}
/linebot-contents post handler {"operationId":"linebot-contents","func_type":"normal","content_type":"application/json","files":[]}
/linebot-upload post handler {"operationId":"linebot-contents","func_type":"normal","content_type":"multipart/form-data","files":[{"name":"upfile"}]}
/swagger get handler {"operationId":"swagger","func_type":"normal","content_type":"application/json","files":[]}
https PORT=10443
http PORT=10080

立ち上げたサーバのLINEボットとしての登録は、前回の投稿を参照してください。

シナリオエディタは、以下の場所をブラウザで開きます。
　https://【立ち上げたサーバのホスト名】/gamebook/index.html

#お礼

今回は著作権の関係で、GitHubにはおけませんでしたが、以下の画像ファイルや音声ファイルを利用させていただきました。ありがとうございました。

<画像ファイル>

• http://iwayu2.blog.fc2.com/blog-entry-9.html
• https://publicdomainq.net/castle-bridge-0007545/
• http://creativefreaks.net/?page_id=4392

<音声ファイル>

• https://soundeffect-lab.info/sound/voice/line-girl1.html

以上