LINEボット"rizm"で簡単なストーリーを作って他の人に遊んでもらう（１）

以下のエントリの続編です。

LINEボットでアドベンチャーゲームツクール"rizm"を作った
http://qiita.com/firenavi/items/ed1d0f7c875ae3f125b2



## 早速Botを作ってみましょう。
rizmのHOME画面を出してください。

LINEボット "rizm" （以下のURLでLINEが起動、rizmが登録されます）
https://line.me/R/ti/p/%40shi9833m

下図の「ボット作成/管理」をタップします。
<img width="375" alt="qiita_200.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/1f79bb5e-fa95-ed25-e45a-fb207518a249.png">

あなたが作成したボットの一覧がでます。当然ながらリストにはまだ何も表示されません。
下図の中段真ん中あたりの「新規作成」をタップします。
<img width="375" alt="qiita_201.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/11513f23-f6ad-dd8f-090f-56ea63ce4a2a.png">


#名前を入れます
新しいボットを作成するための画面がでてきます。まずは名前を入れましょう。
<img width="373" alt="qiita_202.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/fb4f223b-f204-9d4e-5902-7c78358b7652.png">

8文字以上で入れてください。
<img width="375" alt="qiita_203.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/9dfca8f7-8df4-e190-3a67-0cf0f0f3b088.png">

# アイコンを選択します
次にボットのアイコンを選択します。ボットの一覧表などで使われるアイコンです。
rizmがあらかじめ用意した画像（信長、秀吉、家康、ロボット、犬、猫）と、
あなたが登録した画像が使えます（画像登録については後述）
とりあえず猫の笑い顔アイコンを選びます。
「rizmが用意した画像」をチェックして、選択をしてみます。
<img width="375" alt="qiita_204.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/dbf9249d-dc77-f06d-d013-5c4231cd3842.png">

こんな風に選べます。猫１（笑顔）を選びます。
<img width="375" alt="qiita_205.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/d3176519-9af8-7a2e-1176-ea025d9eab8c.png">

するとプレビューが表示されます。
<img width="375" alt="qiita_206.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/ae03e531-0c04-164c-511c-c141cfccb2e1.png">

次にボットの説明を入力します。
その下のセリフ表示速度はそのままでいいです。これで「新規作成」をタップします。
<img width="375" alt="qiita_207.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/57dfc480-80fa-7b62-8ebd-a72d71545aca.png">

とりあえずボットができました！「Bot設定管理へ戻る」をタップします。
<img width="375" alt="qiita_208.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/761d1485-767c-74c1-1184-b41b3f018899.png">

ちゃんとできています。
<img width="375" alt="qiita_209.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/c0e5228c-bfd0-c56e-d246-5d29b9fbe9d5.png">


## 動作確認
ここでボットを表示させてみましょう。現在このボットは非公開なので誰も見れない
のですが、ボットオーナーのあなただけは動作確認ができます。
猫のアイコンの右下にある「テスト」をタップしてください。
チャット画面に自動的に移動され、このボットのバナーが表示されます。この
バナーをタップしてください。
<img width="375" alt="qiita_210.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/61801789-efd1-8709-838f-328c3ecd2762.png">

するとボットが始まります。現在テスト中ということを示す「---test---」という
のが出ています。あたりまえですが、まだ何もセリフを作っていないので、始まって
すぐに終わります。
<img width="375" alt="qiita_211.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/69071b50-4a60-b688-007b-6d2ec69ecc57.png">


## セリフを変えてみよう
では、「→HOME」→「ボット作成/管理」をタップして以下の画面に戻り、
猫アイコンの右下にある「編集」をタップしましょう。
<img width="375" alt="qiita_2110.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/ebbd99b2-8312-a2cc-0bf2-d42fd5199289.png">

このような編集画面になります。
<img width="375" alt="qiita_212.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/f8ba53e1-2c1a-f33f-fe11-765eff869c29.png">

初期設定ではセリフがひとつあるだけなので、セリフを変更します。
（スタート）と書いている文字をタップします。
<img width="375" alt="qiita_213.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/0c73feef-fcb7-fa85-3e62-329adb88df78.png">

するとセリフが編集できるモードになります。ここで好きなセリフに
書き換えてください。
<img width="375" alt="qiita_214.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/bb445ce2-9a2d-5ec2-4010-81e59e0b4b81.png">

「僕はネコだにゃん！」に書き換えて、完了をタップします。
<img width="374" alt="qiita_215.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/9ce89fe0-2aee-b02e-d843-8bc46ddb5663.png">

このようにセリフが書き換わりました。
<img width="375" alt="qiita_216.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/b871577f-876e-660c-0959-c85dfcd1e6b7.png">

## アイコンを追加してみよう
新しくアイコンや画像、セリフを追加するにはどうしたらいいでしょうか。
よく見ると、セリフ吹き出しの上下に境目があります（図内の赤丸）
境目をタップすると「 [追加] セリフ | 画像」というのが出てきます。
「画像」をタップします。
<img width="375" alt="qiita_217.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/90754c21-f8d8-4466-80a9-9b6eceb881d7.png">


するとイメージ追加というポップアップがでます。ここで追加する画像を選択
します。ボットのアイコンを選択するときと同じ要領で追加してください。
（画像の登録は後述します）
<img width="375" alt="qiita_218.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/70b3405c-4867-6cb7-3ca7-77da2f5d3c6d.png">

猫画像をアイコンとして利用します。選択が終わったらOKをタップしてください。
<img width="375" alt="qiita_219.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/51b186cb-0b81-7124-e0de-88aa3f51222e.png">

どうようにロボのアイコンも追加してみます。
<img width="375" alt="qiita_220.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/f85c5503-efdb-3d28-ec13-c36b84a7ca27.png">

## セリフを追加してみよう
セリフの追加も、追加したい位置の境界線をタップ→「セリフ」をタップすると
メッセージの追加というポップアップが出ます。
<img width="375" alt="qiita_221.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/6b14eeb6-5035-aefa-bd17-a64307f5b834.png">

セリフを入力して、追加をタップ
<img width="375" alt="qiita_222.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/c4aaf65b-f507-b488-a2f1-a2850d6baa9b.png">


## ボットをリリースしてみよう
アイコンとセリフを追加しました（選択肢作成は後述）
今の段階ではボット作成者のあなただけが、テスト版でボットを表示させる
ことができますが、他の人には見れません。このボットを公開してみましょう。
編集画面上部のメニューの「あなたのBot」をタップします。
<img width="375" alt="qiita_223.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/4cb13e4e-e6af-44c5-45ca-209254832934.png">

Bot設定管理の画面に戻りました。ここで「設定」をタップします。
<img width="375" alt="qiita_224.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/13ace197-5af2-d4c5-8735-c4a0820a3885.png">

このBot全体設定の画面になります。ここで、一番下にある「公開する」を
タップします。
<img width="375" alt="qiita_225.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/8d316cf1-2fd0-d943-84c7-b43568b2cf57.png">

公開する前の確認画面が出てきます。
「公開する」にチェックを入れて「実行」をタップします。
<img width="375" alt="qiita_226.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/4342b07d-aeda-6dec-1a15-f8c3f3a9d447.png">

完了しました、とでたら成功です。Bot一覧画面に移動すると、、
<img width="375" alt="qiita_227.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/be46bb13-8ae0-09e4-1a9f-e64b5b0be3b5.png">

出ています。ここで表示されているということは他のユーザにも見れているということ
になります。おめでとうございます。
<img width="375" alt="qiita_228.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/75f8afe0-8b43-2ffc-2bb8-a2d99b01dada.png">

## 編集→動作確認→公開 が基本
ちなみに、編集画面でストーリーを編集しても、テスト版には反映されますが、
一般公開版には反映されません。編集した内容を一般公開版に反映するには
設定画面の下部で「編集中の内容を公開する」をタップしてください。
<img width="375" alt="qiita_229.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/123556/dd95520c-216f-1e33-a840-3e7c215796a0.png">

編集する → テスト版で動作確認 → 設定画面で「編集中の内容を公開する」
という流れでストーリーボットを開発することになると思います。

・ピリオドの概念
・選択肢の追加
・画像登録
・終了ピリオド

などはまた別記事で。。