お仕事かんたん生成2.0のTIPS

こちらは、[Pepper Advent Calendar 2018](https://qiita.com/advent-calendar/2018/pepper)の17日の記事となります。

#はじめに
みんな大好き人型ロボットPepperの法人向けモデル、Pepper for Bizに関係するサービスとして、Pepperのお仕事(コンテンツ)を作成する、「お仕事かんたん生成」というWebサービスがあります。最新バージョンは2017年11月にリリースされた「お仕事かんたん生成2.0」です。

この記事では、「お仕事かんたん生成2.0でこんな事ができるよ」というご紹介をしようと思います。

まず、お仕事かんたん生成2.0の使い方については[ヘルプページ](https://doc.robot.softbank.jp/pepper_biz/manual/index/)を見るのがいいと思います。
また、お仕事かんたん生成2.0を使うにあたってSBRアカウントの作成が必要となりますので、[こちらの情報](http://help.mb.softbank.jp/robot/pepper-for-biz/pc/04-01.html)が参考になると思います。


#お仕事かんたん生成2.0の超絶ラフな解説
お仕事かんたん生成2.0の「フリーテンプレート」でお仕事の雛形を作るとこんな状態になります。
![Kobito.npkclh.png](https://qiita-image-store.s3.amazonaws.com/0/35808/9a2f6af0-42c7-c627-6803-38631546bb3b.png "Kobito.npkclh.png")

この右側の「＋」になっているところをクリックして新しいボックスを追加していきます。ボックスにはいくつかの種類があります。
![Kobito.8Rqh6E.png](https://qiita-image-store.s3.amazonaws.com/0/35808/0fdb17a4-d630-b25f-907c-1720280db7e3.png "Kobito.8Rqh6E.png")

一番基本となるのは左上にある「トーク」のボックスです。このボックスはすごくざっくりいうと

- 何を発話するか
- 胸のタブレットに何を表示するか

を設定することが出来ます。紙芝居の紙1枚だと考えていいと思います。これをつなげていくとちょっとしたプレゼン的なものが実現できます。(例では画像は設定していないです)

【紙芝居サンプル】
![Kobito.muIwGe.png](https://qiita-image-store.s3.amazonaws.com/0/35808/e6434e9f-d873-6d8e-ca66-6db8f1aa3f1c.png "Kobito.muIwGe.png")

【トーク1の中身】
![Kobito.uBstEw.png](https://qiita-image-store.s3.amazonaws.com/0/35808/609d53e7-9ccb-1ccc-6145-4a51dfb06cf5.png "Kobito.uBstEw.png")

【トーク2の中身】
![Kobito.jYHO5u.png](https://qiita-image-store.s3.amazonaws.com/0/35808/e7e2f9f4-19c9-f65b-053d-ac9fbebca004.png "Kobito.jYHO5u.png")

単純に話すだけならこれでOKです。

重要な点としては、一番左にある「呼び込み」とそれ以降との区別です。
「呼び込み」はいわば待受状態で、Pepperの周りにいる人を自分の近くに呼び込む動作をします。
人がPepperの近くにやってきて、「タブレットに触る」、あるいは「Pepperに人として認識される」のいずれかのイベントが発生すると、「呼び込み」が終了し、右側に処理が遷移します(実際にはもうちょっと細かい制御ができますが割愛)。
![Kobito.pp6b8J.png](https://qiita-image-store.s3.amazonaws.com/0/35808/b39bedf9-2128-dc35-4ac0-c90b49620696.png "Kobito.pp6b8J.png")


あとはメニューで分岐させたりとかジャンプさせたりとかでちょっと複雑なことも出来たりします。このあたりはニーズありそうだったら別途書いてみます。


# コンテンツ再生後に最初まで戻ってほしくないとき
お仕事かんたん生成2.0は、コンテンツの再生が終わると最初の呼び込みに戻ります。
![Kobito.AzE8en.png](https://qiita-image-store.s3.amazonaws.com/0/35808/12b1be3d-c422-e3cd-7046-45f693f62ff1.png "Kobito.AzE8en.png")


基本的にはそれで問題ないのですが、メニューを挟んだ構成になっていたりすると動きとして微妙になるケースがあります。

## 呼び込みまで戻るパターン
例えば、こんなメニューを表示するお仕事があったとします。
![Kobito.8Zi4rI.png](https://qiita-image-store.s3.amazonaws.com/0/35808/998ae450-824d-21a0-820d-9055639ea4a3.png "Kobito.8Zi4rI.png")

で、メニューで分岐した2つのコンテンツが有る場合、コンテンツの内容を再生したあと、一番最初の呼び込みに戻ります。

![Kobito.9pD6RY.png](https://qiita-image-store.s3.amazonaws.com/0/35808/225d6303-955a-d7d2-ef30-3e37563f9057.png "Kobito.9pD6RY.png")

そうすると、Pepperの前にいるユーザさんが施設案内と商品紹介の両方を聞きたい場合、

- 呼び込み
- メニュー画面が表示される
- ＜施設案内のボタンを押す＞
- 施設案内のコンテンツが再生される
- 呼び込み
- メニュー画面が表示される
- ＜商品紹介のボタンを押す＞
- 商品紹介のコンテンツが再生される

という遷移になります。

こだわり方次第だと思いますが、僕はこの遷移が好きじゃなくて、コンテンツの再生が終わったら、「他にも聞きますか？」と発話してメニューを表示し、そこで利用者さんが離脱したら適当な時間でタイムアウトして呼び込みに戻るほうが好みです。

## メニューに戻るパターン
で、こんなふうにすると上記のような動きになります。
![Kobito.c3WFdK.png](https://qiita-image-store.s3.amazonaws.com/0/35808/6662749d-b289-594a-8c12-fbbd8586a610.png "Kobito.c3WFdK.png")

「他にも聞きますか？」という名前になっているボックスはトークボックスで、単に「他にも聞きますか？」と発話するだけです。
キモになるのはその後ろにあるジャンプボックスで、中身はこんな設定になっています。
![Kobito.lH2RJP.png](https://qiita-image-store.s3.amazonaws.com/0/35808/a67fb7d2-7a6f-0e36-afb5-dcc51361642f.png "Kobito.lH2RJP.png")

このようにしておくと、ジャンプボックスのところに来るとメニュー1に戻る動きとなるため、こんな感じの遷移になります。例では施設案内(トーク1)を選択したときの遷移しか書いていませんが、商品紹介(トーク2)を選択したときも同様に発話後はメニュー1に戻ります。
メニュー1を表示してボタンを押されない状態がしばらく続くと呼び込みに遷移します(このタイミングは制御できません)。
![Kobito.vTvcEG.png](https://qiita-image-store.s3.amazonaws.com/0/35808/c39f1d7d-030d-9c12-d18d-ab88c4bac7b3.png "Kobito.vTvcEG.png")


# 階層化されたメニューで「戻る」をつけたい
これは「最初まで戻ってほしくない」の応用で実現できます。
イメージとしてはこんなケースを想定しています。
![Kobito.xkQJ9K.png](https://qiita-image-store.s3.amazonaws.com/0/35808/2b08bb84-5274-7d83-4387-109b367c2ea1.png "Kobito.xkQJ9K.png")

メニュー画面はこんな感じになります。
![Kobito.k9LAku.png](https://qiita-image-store.s3.amazonaws.com/0/35808/537f9376-4ea0-4675-a02a-a74971c4e8ec.png "Kobito.k9LAku.png")


このとき、例えば、1階の情報を見たかったのに間違って2階を押しちゃった、というときに、一度コンテンツを再生させてからでないと上位のメニューに戻れなくなってしまいます。


## 一つ上の階層に戻るボタンを付ける
2階層目のメニューをこんな感じにしてあげます。
![Kobito.TCLvzK.png](https://qiita-image-store.s3.amazonaws.com/0/35808/21af44c0-d88e-c748-100b-544180e86bad.png "Kobito.TCLvzK.png")

新しく出来た「戻る」という選択肢の先にはジャンプボックスを配置して、一つ上の階層のメニューに戻してあげます。
![Kobito.QNpGp8.png](https://qiita-image-store.s3.amazonaws.com/0/35808/d0d8d410-600b-3358-0082-dc6a5abcf11a.png "Kobito.QNpGp8.png")


メニュー画面はこんな感じになります。
![Kobito.exCl3q.png](https://qiita-image-store.s3.amazonaws.com/0/35808/6c6e0a36-5abf-7cfb-3ca2-d49871331758.png "Kobito.exCl3q.png")

こうすると、下の階層のメニューから一つ上の階層に戻ることができるようになります。
![Kobito.duCnxp.png](https://qiita-image-store.s3.amazonaws.com/0/35808/41c9fe74-e983-6641-61b6-278a3f731557.png "Kobito.duCnxp.png")

全体の動きとしてはこんな感じです。それぞれのトーク内容(ブックストアの紹介、メンズファッションの紹介etc...)が終わると二階層目のメニューに戻り、二階層目のメニューで「戻る」を選択するとフロア選択のメニューに戻る、という構造になります。
![Kobito.mEc7IV.png](https://qiita-image-store.s3.amazonaws.com/0/35808/d1f68ae3-79cf-b983-31f2-0dec44567888.png "Kobito.mEc7IV.png")


# ずっと同じ内容で案内し続けたい (無限ループさせたい)
展示会などでありそうなケースとして、例えば商品紹介のコンテンツを作成し、ずっとこれを続けたい、ということもあるかと思います。

ここまでの例と同様にジャンプボックスを使うと簡単に実装できます。
イメージとしてはこんな感じです。
この例では、最後にあるジャンプ1というボックスがトーク1にジャンプしていますので無限ループになります。
![Kobito.Kpehrp.png](https://qiita-image-store.s3.amazonaws.com/0/35808/34434360-f1b3-fad1-093b-15e7618083d8.png "Kobito.Kpehrp.png")



ついでにもうひと工夫するといい感じになります。
今の内容では、本当にずっと(絶え間なく)喋り続けることになります。何度繰り返してもブレない、へこたれないのがPepperのいいところではありますが、とはいえ近くにいる人間にとってあんまり繰り返しが続くと疲れてしまいます。

ここで登場するのがモーションです。

モーションは本来、セリフと合わせてなにかの動きを設定するものですが、セリフのどのタイミングにあわせて動きをつけるかという設定が可能です。たとえば「お辞儀」のモーションを、話し始めから20秒後に、と設定しておくと、発話介しから20秒待ってお辞儀のモーションが始まります。
これをうまく使うと、無限ループの間隔を設定することが出来ます。
この例では、トーク2の発話のとき、発話開始から10秒してからお辞儀のモーションをするようにしています。
![Kobito.OCxcbc.png](https://qiita-image-store.s3.amazonaws.com/0/35808/49f526c4-ad75-ba8e-4200-ca0bdc1e3f85.png "Kobito.OCxcbc.png")
こうすることで、トーク2の発話が終わってからジャンプするまでに10秒ちょっと(お辞儀のモーション分が入るので)の時間を稼ぐことが出来ます。やったー。

## 動作例
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Qiitaサンプル_Pepper_ループ01 <a href="https://t.co/MjfnCeu7cb">https://t.co/MjfnCeu7cb</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 魂司 (@tamatsukasa_biz) <a href="https://twitter.com/tamatsukasa_biz/status/1074316851880947713?ref_src=twsrc%5Etfw">2018年12月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




# 異なる内容で案内し続けたい (無限ループ＋ランダム抽選)

ずっと案内し続けたいけど、中身は複数持たせたい、ということもあると思います。
たとえば、新商品が3つあってそれぞれの案内をさせたい、というようなケースです。

一番単純に考えれば、こんな構成になると思います。例によってループするためにジャンプのボックスを最後につけています。
![Kobito.Gj3Yk3.png](https://qiita-image-store.s3.amazonaws.com/0/35808/190a6bee-d208-ae62-3bc3-a872429e4ebd.png "Kobito.Gj3Yk3.png")

これで良ければいいんですが、ずっと同じ順番で喋ってると結構飽きます。また、商品紹介が3つでそのうち、最新製品の商品2だけは他の2つよりもプッシュしたい、みたいな要件もあるかと思います。

そんなときに使うのが「ランダム分岐」のボックスです。
![Kobito.y9U90D.png](https://qiita-image-store.s3.amazonaws.com/0/35808/2a1c5d14-9743-2091-e0fe-fa185e2a2f6c.png "Kobito.y9U90D.png")

ランダム分岐はその名前の通り、ランダムに分岐します。
![Kobito.gfKhre.png](https://qiita-image-store.s3.amazonaws.com/0/35808/2ddb7522-4dc9-0869-9d85-940039f91ed0.png "Kobito.gfKhre.png")

このとき、分岐率を設定できるのがいいところです。上の例では全て0になっているので当選確率は一緒ですが、たとえば以下のようにすると、圧倒的に2が当たりやすくなります。分岐率は正確には「率」ではなく「重み」のようで、分岐率の合計が100になる必要はありません。
![Kobito.gfX67K.png](https://qiita-image-store.s3.amazonaws.com/0/35808/fdbdb907-eb99-98dd-fb80-7d5ab97cf2ce.png "Kobito.gfX67K.png")

全体としてはこんな感じになります。それぞれの商品の説明をした後ランダム分岐のところに戻るので商品の説明を繰り返します。間隔をあける必要があれば、先に説明したように、時間をずらしたモーションを入れておくと良いでしょう。
![Kobito.aDcsQm.png](https://qiita-image-store.s3.amazonaws.com/0/35808/b33e5676-5487-5492-c381-aa69960e9f78.png "Kobito.aDcsQm.png")


## 動作例
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Qiitaサンプル_Pepper_ループ02 <a href="https://t.co/b1FQ0LyCGW">https://t.co/b1FQ0LyCGW</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 魂司 (@tamatsukasa_biz) <a href="https://twitter.com/tamatsukasa_biz/status/1074317331747106816?ref_src=twsrc%5Etfw">2018年12月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# まとめ
いかがでしたでしょうか。お仕事かんたん生成2.0はただボックスを並べていくだけでも十分使えますが、工夫次第でより現実的なお仕事のパターンを作ることが出来ます。
需要ありそうでしたらまた何か別の形で書くことも考えたいと思います。

それでは皆様、よいクリスマスを！＼(^o^)／