![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5004a_6a8Ut-s2IgrQ80ltTT9SE3VuC-oHoIHDmYXCUNb2BEQi0LWr-nElwMGLOT0epZEXt1vA9cPm2-CQrt18puKGx1Gs-JwvQuMpb1i_MDK9viZVVOM4-IH45FFiFhD33-ikXvL1_l/s1600/m.gif)
「Bot3D StoryGraphEditor」はパソコンのブラウザで動くWebアプリケーションです。ログインは以下より。
動作環境:
Google Chrome最新版, Mozilla FireFox最新版, Apple Safari最新版 推奨
Microsoft Internet Explorer11, Microsoft Edge
- StoryGraphEditorにログインする
- StoryGraphEditorのホーム画面
- 編集画面:セリフをしゃべらせる
- ストーリーをBot3D Playerで確認する:セリフ
- 編集画面:ユーザーに選択させるボタンを作る
- ストーリーをBot3D Playerで確認する:ボタン
- ストーリーを公開する
StoryGraphEditorにログインする
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABJEvUoysPiME65dWHxhVgvIVuBfV35XZ-GVBNid1DJc23k0lodhZ1DSry9PnaYkYgMBaumV2E_knZSV4r9WoeNHqqQbUtUwcnYdFPBBA5nZdVK-GtqRRQYfvGK43wyx9B7iiMMCrgOUe/s320/login.gif)
Facebookアカウントでログインすることができます。
アプリが勝手にFacebookタイムラインに投稿することはありません。
※メールアカウントによるログインは現在招待制になっています。
StoryGraphEditorのホーム画面
ホームが表示されますので、「新規ストーリーを作成」を押します。新しい「ストーリー」ファイルが作成されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GU6Hn1DCOSOUY_X1r4H5Vhd4xmSkZKjZvnTpdZ3kiXoL73WX60DBeyavIkQ-KA9LIIEygaGREr6xUjDADuuubO6xzps2-RxNT4IFnhe2Uk5hA398m8nac7Gcz_p-dFzVXqdQsEkv5cSJ/s1600/home.png)
編集画面:セリフをしゃべらせる
ホームでファイルをクリックして編集画面に移動します。画面上の各部の名前は以下のように呼びます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJvzKMwJMWu6jTS0IuDgovE3eXyVEiUXqJg1fwl3NRgPVC2-mhAyNdHeGIMOu_7EO_2E3onZl9ELse7oODwSR0M6Kxx-UTQdJjlyCiRHKZhCwBQ_-BDuiOUz0Ge5W8oB6PyQ7L0pHb3b5/s1600/fp1.png)
- 会話ボックス:「アクション」をひとまとめにするボックスです
- "Botのセリフ"アクション:Botに喋らせる内容を書いたり、ユーザーが入力する内容を設定したりするのが「アクション」です。
- アクションの追加:プラスボタンでいくつかの「アクション」を追加できます
- 会話ボックスの新規追加:新しい会話ボックスを作ります
- 会話ボックスの複製:会話ボックスを複製します
- 終了ボックス:会話が終わって一番最後の会話ボックスを終了ボックスにつなげて、会話を終了させます
まず最初にBotにあいさつをさせてみましょう。
最初のオレンジ色の"Botのセリフ"アクションをクリックします。
そうすると画面下にエディタが表示されます。
ここでは3DキャラクターのBotに喋らせたい内容を書きます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4KyP8fzSeKIHi6-bvxb7O8Pa4ylzaWoNoC_TvUK5GgjS3bWxF5FM-mOya3vUeOGoABfezYRNJsGOw2HPUBspOWExeNMd5DJmpP_5pAYCwwWpzVdYIzGC8SkMt427lqRFStjZUuvMlPdr/s1600/d1.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaLqOOqmof3K8fba_1MZ8hidpX7Rnmkpwmjejg2xDMm9ns2BMpuLqE36Sbwi_Igdwj3yk8wweOF_cRW6se68K9ykwUhL4M8O-OfQfZuIFQYiHXY0568SPJKLCltmpXR5wX4-KpQA61Tds/s1600/d2.png)
実はBotのセリフ中に絵文字があると、Bot3D Playerで再生したときに、絵文字にわりあてられた感情表現のアニメーションを自動的に再生してくれるんです!
絵文字を活用して表現豊かな身振り手振りをさせてみましょう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4MvpAuMncUQt54XXu7X7UHvu5B8Hw0uqkOQp-MGn42QOdxusJ6mHtz-BT_ejx4AKj7SNZ1Rr0Qqcy0UB5DxpliZHQM0xygU9qEV0AXGmlQLTc0Iv9spi9vqTZ9Ni4TFCXFwz5dVIefqJ/s1600/d3.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BYyA6tAlhGkkn2Dx9yfBDjJejvK1SG_yloOEznAIc81TCdm89GGYzS7maiHMAwWs5ekDHPbiOgWP7_RfFuX4dBiy-mlAYwnw_2ybogYtoovyHvNLyxm1bTxpa4tOcyv8IykY8c1j-qhx/s1600/d4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN79E_ycrhWC6DXPONIB-lvYJPn5GaScNPs74HXYmU7Fu_VWgU9k6B6DTdFg8ehtodSDW8BGg2pNfpOFPtrdy_ti6iAGfd3y4QBBarsr8TchuLFeAZCscwztff06t_ShpTlC19zSSscdLT/s1600/d5.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvOzoCbTfvUV77aQ0tgBEm-_1HEJo_DpvwgipCE_pbdm0lRieXi0lb9mbSeN8l_ZSwTqw2Y6I9ouLLQw_seDYwuqzodOLLLT6whSjvaGvc4BpQqugj7A3xEP1gdG9T_r6WTzz7CG07-FHk/s1600/d6.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAiWbItvjNCPXrBMULagABdjn5LYCUsK83hkf7OqC3tqQ6VgnehInlxcS-xLw0mp14HGJPpe2PLMtiW4JdKWQJyicsf4aKKeyMyJ1spLUdSVkKgA0qxxQIek0ilvivXs-Nm_ezm-4fZac/s1600/d7.png)
ストーリーをBot3D Playerで確認する:セリフ
それでは出来たストーリーをBot3D Playerで確認してみましょう。その前に、あいさつのセリフひとつだけの、練習用のストーリーなので「公開」はまだしませんが、ストーリー名にわかりやすい名前をつけたいです。
Bot3D Playerで再生するために、お使いのiPhoneまたはiPadにBot3D Playerをインストールしてください。
Bot3D Playerの基本的な使い方はこちら。
編集画面:ユーザーに選択させるボタンを作る
まず、会話ボックスと終了ボックスをつないでいる線をクリックして、切断します。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ipr-R49fssK_zyTCDioEdtMh4o2Z_l4lxPyLW_L4pAMih5vB0FZUnaOBDZOptsWvmpLJWm4_MtYcS-TjBkWhPVeSZqla-H-uRS8yixAucuvcO2DKZsgOWDCJuVIY1Mje-WO_Yy-goAAe/s1600/d22.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-7AtQR5nGWQAeqmAmL5Pysry2GIbt5p3VEuiMXKQ7_hojr5c2S4Q7KFtDXlEMa-Lku2EjiJ9Rx6klGroSlfDz-MgW4Bmg365ZEAipXMNff-dlAh3HMSqvrp2UmTYNa8W3azDmm-x_Av8/s1600/d21.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3mtNKS2ASdXOq16HbpLwE7b00pvdZwyO0wReOhYfhzt3aeOTDPw-wQo0x1CTEmbuzK_9sTju9PBFeanyACRbwfVPoK6XCdpEBEG6qoSgefEXP8kER8ckaz9-nAYiLYjCMOPPYXLSR6mD/s1600/d23.png)
ここでユーザーが選ぶボタンを作ってみましょう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQfxt5vPF2o_-mZXdxDfMRmHiUzIBBNFV08CtF7jQYiy80SX8ISQd8HIjIOIGyMUKxwVzbPcEPK5fqTmpepwqm-J9V-y4ExHhSAyjVjxpU4oquNfWKQKbao9IrCpTWrVpKZVDKsqqEK-k/s1600/d24.png)
ここでは「やあやあ」と入力しました。そうすると、「やあやあ」に対応したタブがエディタに作られます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JlPqQJa7aEmpqk3HCAX6vEjlSTdZvgVEYLWUUeMgK422_CTWpo8qDs4D9NjnrpYTJ38v4tJQKAEi1LzoqQ6TPwDPaFBfAKd7dLW4sqkSWZtXLgcUjlHTBhOLYcOJ8t0K407meyslXpU_/s1600/d25.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTwyEHE-s4ycWGMuBJpbDAz-veY_4bguxSjcNn97gkOm_57mR52AW6zxoCxCgY7JCjAsym8tcVgalo-BpagkKUD-EvPLpj7K-GXFWmtt4ukWSpV1KPhMUX1whhHk0x23ilGEOQQjXwPfC6/s1600/d26.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ8qYIytVu9SblG-gX_XCD3UlCYcslsbRScJYA0KmYSXCEija-18Wi_ZxZLYd9PDCG4zjK-wecADBmoDH-bf_msm68Pt5H8EzlqC2o4QWjIm2SxgHKesvGsgsT7VOulFeuXJX6p6jrNIB/s1600/d27.png)
分岐先でまたBotに喋らせたいので、新しい「会話ボックス」を作ります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVh1h6tFPSXh4e6CFpXq2jWwWzzgT0X-nT69oiz7wDYalYsfzqIljoHtoeoKFX8hxMiKrfb5MLbxRF9QT0H_wg1lJfKtoLCLEPpw078rcPMmgCFT1JXuuZzp_loIZ3uIMV9iGuVcBoTmc/s1600/d28.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYyps0YHDH8pEvFLHAr-xeQny_UVgvPycO7kz3drEKEchASq9I5Y549ssLCVGlulvaxQHhAg5uz3f1KeqeDDRnCB-xIJMYph3akRXArm3H7lqf2wbF2WBU1I_E3CKV_BVVEmk5MigZbPGB/s1600/d29.png)
保存して、Bot3D Playerで確認してみましょう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nPzJvCx09JecrQv2XdjD3daZJd9FqDcr0SYbDU-drhuxgRJ6LiIP4xaJdMw3A_e3vtvAHG7nCcXtnvjRza7P2CqZo-nvec2fCOndg80YF5tMY4qCWFCr_xlproNwSGf5S8Gh4XQxL4xP/s1600/d30.png)
ストーリーをBot3D Playerで確認する:ボタン
このようにして楽しい会話を作ってみてくださいね!単純な日常会話や、クイズ、エデュケーションコンテンツ、人生相談、チャットノベルなどアイデア次第でいろいろな会話型コンテンツが作れます。
ストーリーを公開する
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfAURjXB4LI5eMgMwE0GZy6OF6q5vpFiRd-lTnAnLj-kGbnX0qiu7ZHrmUxJ6dDyvffydv4Aifzg-k8xQs2g5eAPGKngh7ZLtTyEvzzktj_Zd6zwUZw3InezsMK4EMX_D9-DEOnMlEsEN/s400/p3.png
)
画像が思いつかない場合は、著作権が放棄されている「CC0」ライセンスの画像がインターネット上から探せますので、活用してみてくださいね。
入力できたら「公開」ボタンを押します。
クリエイティブ・コモンズ・ライセンスの画像の場合は細かく利用条件が決められていますので注意してください。また、第三者が権利を保有している画像は権利者の許諾無しに利用しないように注意してください。
より細かい使い方は関連記事をご覧ください。