「Bot3D StoryGraphEditor」を使うと、3Dチャットボット「Bot3D Player」で3Dキャラクターを自由にしゃべらせたり、動かしたりできます。この記事は、操作を覚えて、簡単な会話を行うまでのクイックスタートです。「Bot3D StoryGraphEditor」はパソコンのブラウザで動くWebアプリケーションです。ログインは以下より。
動作環境：
Google Chrome最新版, Mozilla FireFox最新版, Apple Safari最新版 推奨
Microsoft Internet Explorer11, Microsoft Edge
- StoryGraphEditorにログインする
- StoryGraphEditorのホーム画面
- 編集画面：セリフをしゃべらせる
- ストーリーをBot3D Playerで確認する：セリフ
- 編集画面：ユーザーに選択させるボタンを作る
- ストーリーをBot3D Playerで確認する：ボタン
- ストーリーを公開する
StoryGraphEditorにログインする
まずはStoryGraphEditorのログイン画面にアクセスします。Facebookアカウントでログインすることができます。
アプリが勝手にFacebookタイムラインに投稿することはありません。
※メールアカウントによるログインは現在招待制になっています。
StoryGraphEditorのホーム画面
ホームが表示されますので、「新規ストーリーを作成」を押します。新しい「ストーリー」ファイルが作成されます。
ファイルをクリックすると編集画面に入ります。また、プルダウンメニューを開くことでいくつかの操作が可能です。
- 編集：編集画面に移動します
- 複製：ファイルをコピーできます
- 公開設定：ストーリーの名前を変えたり、説明をつけて公開することができます
- 削除：ファイルを削除します
編集画面：セリフをしゃべらせる
ホームでファイルをクリックして編集画面に移動します。画面上の各部の名前は以下のように呼びます。
- 会話ボックス：「アクション」をひとまとめにするボックスです
- "Botのセリフ"アクション：Botに喋らせる内容を書いたり、ユーザーが入力する内容を設定したりするのが「アクション」です。
- アクションの追加：プラスボタンでいくつかの「アクション」を追加できます
- 会話ボックスの新規追加：新しい会話ボックスを作ります
- 会話ボックスの複製：会話ボックスを複製します
- 終了ボックス：会話が終わって一番最後の会話ボックスを終了ボックスにつなげて、会話を終了させます
まず最初にBotにあいさつをさせてみましょう。
最初のオレンジ色の"Botのセリフ"アクションをクリックします。
そうすると画面下にエディタが表示されます。
ここでは3DキャラクターのBotに喋らせたい内容を書きます。
「こんにちは」と入力してみましょう。
また、絵文字を入力ボタンを押して好きな絵文字を選び、テキスト中に挿入します。実はBotのセリフ中に絵文字があると、Bot3D Playerで再生したときに、絵文字にわりあてられた感情表現のアニメーションを自動的に再生してくれるんです！
絵文字を活用して表現豊かな身振り手振りをさせてみましょう。
保存を押して確定します。
ストーリーを終了させるために会話ボックスの右端のマルからドラッグして終了ボックスの左端のマルにむけて線をひきます。
ストーリーが完成したので画面上のメニューから保存を押します。
その次に編集終了を押してホームにもどります。
ストーリーをBot3D Playerで確認する：セリフ
それでは出来たストーリーをBot3D Playerで確認してみましょう。その前に、あいさつのセリフひとつだけの、練習用のストーリーなので「公開」はまだしませんが、ストーリー名にわかりやすい名前をつけたいです。
ホームでファイルのプルダウンメニューから公開設定を選びます。
公開設定の画面でストーリー名に「あいさつの練習」とつけて保存しましょう。
名前が変わりました。
Bot3D Playerの基本的な使い方はこちら。
さきほど作ったストーリーを確認するには、Bot3D Playerを起動し、まず右下のメニューボタンを押します。
メニューから「ログイン」を選びます。
Facebookアカウントでログインすることができます。「Bot3D StoryGraphEditor」で使用しているログインアカウントと同じアカウントでログインしてください。
ストーリーリストを開くと「プレビュー」タブで、「Bot3D StoryGraphEditor」でさきほど作った「あいさつの練習」ストーリーを確認できます。
「あいさつの練習」ストーリーが再生されました。絵文字の箇所でアニメーションが再生されるのも確認できます。
編集画面：ユーザーに選択させるボタンを作る
次にユーザーのボタン入力を受け付けて対話してみましょう。Bot3D Playerで、2つの選択肢から選んでもらうようなストーリーを作ります。
プラスボタンを押して「アクション」の新規追加をします。
メニューから"ボタン選択"アクションを選びます。
"ボタン選択"アクションを選ぶと、画面下にエディタが表示されます。ここでユーザーが選ぶボタンを作ってみましょう。
ボタンを追加フォームにボタン名をいれて追加を押します。ここでは「やあやあ」と入力しました。そうすると、「やあやあ」に対応したタブがエディタに作られます。
同様に「いい天気だね」というボタンを追加します。
保存ボタンを押して確定します。
"ボタン選択"アクションに選択によって分岐する項目ができました。分岐先でまたBotに喋らせたいので、新しい「会話ボックス」を作ります。
"Botのセリフ"アクションにBotの返答のセリフを入力し、"ボタン選択"アクション右側のマルから会話ボックス左のマルに線をつなげます。
最後に作った"Botのセリフ"アクション2つから終了ボックスに線をつなげてストーリーを終了します。保存して、Bot3D Playerで確認してみましょう。
ストーリーをBot3D Playerで確認する：ボタン
先ほどと同じようにBot3D Playerで再生してみます。さっき作ったボタンが表示されましたね。
会話の分岐も動作しました。
単純な日常会話や、クイズ、エデュケーションコンテンツ、人生相談、チャットノベルなどアイデア次第でいろいろな会話型コンテンツが作れます。
ストーリーを公開する
さて、力作ができたら公開してみましょう。これから公開するストーリーのプルダウンメニューを開きます。
メニューから公開設定を選びます。
作ったストーリーを魅力的に伝えるために、タイトルや紹介文を書きましょう。ストーリーのアイコン画像があると、ぐっと引き立つので、是非設定してくださいね！画像が思いつかない場合は、著作権が放棄されている「CC0」ライセンスの画像がインターネット上から探せますので、活用してみてくださいね。
入力できたら「公開」ボタンを押します。
クリエイティブ・コモンズ・ライセンスの画像の場合は細かく利用条件が決められていますので注意してください。また、第三者が権利を保有している画像は権利者の許諾無しに利用しないように注意してください。
まだプロフィールを設定していない場合は、プロフィールを入力し、「次へ」ボタンを押します。
投稿される際にかならず守っていただきたことを投稿ガイドラインとしてまとめていますので、同意していただければ「投稿ガイドライン・Bot3D利用規約に同意します」を押します。
ご了解いただければ「了解して公開」を押します。おめでとうございます！公開されました！
公開されると、ファイルの右上のステータスが公開中になります。
なお、公開中もストーリーを編集することができます。その場合、再公開しない限り公開ファイルには反映されません。また、非公開にしたい場合は、非公開ボタンを押します。
Bot3D Playerで公開されたストーリーはストーリー一覧にはこのように表示されます。
ストーリー再生中は画面左上のバナーをタップすることで、ストーリーの詳細を見ることができます。
より細かい使い方は関連記事をご覧ください。