Pepperチュートリアル (2)：ボックスの考え方

#このチュートリアルの内容

[チュートリアル(1)](http://qiita.com/Atelier-Akihabara/items/c5f57358a7b333eef397) では、ボックスをつないでいくという操作で、Pepperにしゃべらせるということをおこないました。

このチュートリアルでは、Choregrapheでの開発の中心となる **ボックス** について、それがどのような考え方で構成されているのかを具体的な例を通じて説明します。

1. ボックスの構成要素
2. 標準ボックスの利用
3. 独自ボックスの作成

#ボックスの構成要素

ボックスはアプリケーションの振る舞いの定義(フロー)の基本構成要素で、Sayのような単純な機能から、部屋を探索するような複雑な機能まで幅広い機能まで、さまざまな機能を表現する部品です。

ボックスは、標準でボックスライブラリとして使用できるものもありますし、利用者がボックスを独自に定義したり、第三者が定義したボックスをボックスライブラリにインポートして利用することもできます。

ボックスは以下のような要素から構成されます。

![tutorial2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/3d588fed-ba40-15a1-5ed7-ea74501a322b.png)

1. ボックスの名前
2. ボックスイメージ
3. ボックスの説明 ... ボックスでマウスオーバーすることで確認することができます
4. 入力 ... ボックスを起動したり停止したりするためのシグナルや、データを受け取るためのコネクタです
5. 出力 ... ボックスからのデータや、終了を示すシグナルを出力するためのコネクタです
6. パラメータボタン ... ボックスに関連するデータを設定することができます

##入力と出力

ボックスの入力と出力には以下のようなものがあります。

###アイコンによる種類

入力、出力にはアイコンがついています。

* 入力
    * ![chore_input_onstart_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/5eef59e8-57a6-8cce-3760-44ca7bfa3bde.png) ボックスの開始(onStart)。この入力にシグナルが送られると、ボックスは開始状態になります。開始状態での振る舞いはボックスの種類により異なります。
    * ![chore_input_onstop_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/0fcc228e-4d2e-886a-88ba-8a2923695cd9.png) ボックスの停止(onStop)。この入力にシグナルが送られると、ボックスは停止状態になります。
    * ![chore_input_onevent_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/8c31cc9a-e9ea-b1d0-5ebc-0af7af0dc45b.png) 開始/停止以外の入力(onEvent)。ボックスによりこの入力に対する挙動は異なります。
* 出力
    * ![chore_output_onstopped_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/401b1d63-d323-ce78-99d9-53d316859ac0.png) ボックスの停止(onStopped)。この出力からシグナルが送られた場合、ボックスが停止したことを意味します。
    * ![chore_output_ponctual_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/8cca3711-d7f7-158a-cf12-6d767e7765bd.png) ボックスからの出力(punctual)。ボックスによりこの出力の意味は異なります。

###色による種類

入力、出力ともに色がついています。色により、この入力がどのようなデータを受け取るものなのか、あるいは出力がどのようなデータを引き渡すものなのかがわかります。

* ![chore_input_onevent_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/8c31cc9a-e9ea-b1d0-5ebc-0af7af0dc45b.png) ![chore_output_ponctual_outside.png](https://qiita-image-store.s3.amazonaws.com/0/28770/8cca3711-d7f7-158a-cf12-6d767e7765bd.png) 単純イベント(Bang)。この入出力ではデータはともないません。
* ![chore_input_number.png](https://qiita-image-store.s3.amazonaws.com/0/28770/d9272775-b1b9-9853-75dd-7b3c53797f7e.png) ![chore_output_number.png](https://qiita-image-store.s3.amazonaws.com/0/28770/96b81195-53ce-2d80-1b49-5f8250b9220c.png) 数値(Number)。この入出力では数値(小数点値もしくは整数値)が引き渡されます。
* ![chore_input_string.png](https://qiita-image-store.s3.amazonaws.com/0/28770/383f0f14-c786-c9ff-61e4-dc0fcc25ace2.png) ![chore_output_string.png](https://qiita-image-store.s3.amazonaws.com/0/28770/567dacea-39b7-da36-8c9c-e47dab60d730.png) 文字列(String)。この入出力では文字列が引き渡されます。
* ![chore_input_dynamic.png](https://qiita-image-store.s3.amazonaws.com/0/28770/d8ac9291-57a1-1366-d8f9-65052a2e7ace.png) ![chore_output_dynamic.png](https://qiita-image-store.s3.amazonaws.com/0/28770/b9bd203b-43e6-6e43-3dcf-7f316db57ab8.png) 動的(Dynamic)。単純イベント(値なし)あるいは何らかの値あり。値がある場合は、数値、文字列、数値の配列、文字列の配列のいずれかとなる。

##パラメータ

ボックスの設定のうち、変数として定義されているものはパラメータボタンで確認、変更することができます。
パラメータボタンを押すと、以下のようなダイアログが現れます。

![parameter-dialog.png](https://qiita-image-store.s3.amazonaws.com/0/28770/670a2834-7664-7a1d-ec49-147606cce4f6.png)


設定可能な内容はボックスにより異なります。具体的にはチュートリアルを通じて説明していきます。

##ボックスの内容

ボックスの構成方法により、以下の4種類のボックスがあります。

1. Pythonボックス：Pythonによって記述されたボックスです
2. フローダイアグラムボックス：ボックスとそれらの接続の組み合わせをひとつのボックスにまとめたボックスです
3. ダイアログボックス：QiChat scriptという、Pepperとの対話を定義するスクリプト言語によって記述されたボックスです
4. タイムラインボックス：1つの時間軸に沿ってポーズやフローなどの動きを並べたボックスです

このチュートリアルでは、まずはフローダイアグラムボックス、タイムラインボックスについて説明します。Pythonボックス、ダイアログボックスについては別のチュートリアルで説明していきます。

#標準ボックスの利用

ボックスでできることを、標準のボックスライブラリを使って説明していきます。

##ボックスライブラリの種類

標準のボックスライブラリには以下のようなカテゴリが用意されています。

* standard ... 基本的なボックス群
* advanced ... 高度な機能を実現するために必要なボックス群
* tablet ... タブレットを持つ(Pepperのような)ロボット用ボックス群

このチュートリアルでは、standardなボックス群を利用して説明していきます。

##フローの組み立て

具体的なフローの組み立てを通じて、どんなボックスがあるのか、どんなボックスのつなぎ方があるのかを説明していきます。それぞれ、Pepperの実機がなくても動作確認できるよう、バーチャルロボットでの確認方法をあわせて説明します。

###順序実行

ボックスを複数、順番につなぐことで、あるボックスの処理が終わってから、別のボックスの処理に移ることができます。
ここでは、 **前に進ませてから、「こんにちは」としゃべらせる** ことをやってみます。

####つくってみる

1. 利用するボックスの準備

     ボックスライブラリのstandardタブから、以下のボックスをフローダイアグラムにドラッグ＆ドロップしてください。
     * Motions > Move To ... 現在位置から指定座標だけ移動する
     * Audio > Voice > Set Language ... 言語設定を変更する
     * Audio > Voice > Say ... こんにちはと言う
     
     ボックスライブラリは階層構造になっており、Motions, Audioなど、ボックスの種類によって分類されています。

2. ボックスを順番につなげる

    ![move-to-say.png](https://qiita-image-store.s3.amazonaws.com/0/28770/db1d3a3e-6215-f8f9-6a85-fb599e28769a.png)


3. 言語を設定する
     * Set Languageボックスによって言語設定を日本語へと変更します。パラメータボタンをクリック**[1]** し、言語に Japanese を設定 **[2]**、[OK]ボタンをクリック **[3]** します。

     ![スライド5.PNG](https://qiita-image-store.s3.amazonaws.com/0/28770/6747a4a5-c5a8-c482-1c18-dd77f60c4180.png)

     
3. 移動する距離を設定する
     * Move Toボックスでどの程度移動するかをパラメータダイアログで変更します。パラメータボタンをクリック**[1]** し、X方向の移動距離に 0.2 (m) を設定 **[2]**、[OK]ボタンをクリック **[3]** します。
     
     ![スライド5.PNG](https://qiita-image-store.s3.amazonaws.com/0/28770/f2d3a293-ecfb-c9f1-585e-6f238669fdeb.png)
     
このように、onStartとonStoppedを接続することで、 アプリケーションの開始→Move Toが開始→Move Toが終了(20cm前に移動することが完了)→Sayが開始 という順序実行が実現できます。

####バーチャルロボットでの動作確認

1. [接続]メニューの [バーチャルロボットに接続] をクリックします
    * [ロボットビュー]パネルにバーチャルロボットが表示されます
2. ロボットビュー上で マウス**右ボタン** を押しながら **[A]** のようにマウスをドラッグしたり、**左ボタン**を押しながら **[B]** のようにドラッグすることで、ロボットビューの視点を移動します
    * このようにすることで、移動の様子がわかりやすくなります
    
    ![robot-view-camera.png](https://qiita-image-store.s3.amazonaws.com/0/28770/817b0278-ec45-ad8d-8dad-88781790c6ec.png)
    
3. [表示]メニューの [ダイアログ] をクリックします
    * Choregrapheの画面に [ダイアログ]パネル が表示されます
4. ツールバーの [ロボットにアップロードして再生] をクリックします

    ![upload-and-play.png](https://qiita-image-store.s3.amazonaws.com/0/28770/a8d3ff3d-9ce5-b1b0-5f96-f7a56c0c9cfc.png)

5. バーチャルロボットが前面に移動した **[A]** (ロボットは画面中央に固定されるので、相対的に床が後ろに動く)後、ロボットビューとダイアログパネルに こんにちは と表示され **[B]** れば成功です

    ![virtual-robot-move-and-hello.png](https://qiita-image-store.s3.amazonaws.com/0/28770/4217472d-979e-21d4-b0f7-750300567ece.png)



####Pepperでの動作確認

1. ツールバーの **[接続…]** をクリックし、しゃべらせたいPepperと接続します

    ![connect-to-pepper.png](https://qiita-image-store.s3.amazonaws.com/0/28770/c458ae7e-8925-4824-5766-7cdcc8dc2078.png)

2. ツールバーの [ロボットにアップロードして再生] をクリックします

    ![upload-and-play.png](https://qiita-image-store.s3.amazonaws.com/0/28770/a8d3ff3d-9ce5-b1b0-5f96-f7a56c0c9cfc.png)

3. Pepperが前面に動いてきて、「こんにちは」と言えば成功です

    > ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) [Tips]動かないときは
    > 周りに障害物などがあり、Move Toが正常に終了しなかった場合(つまり、20cmより短い距離で止まってしまった)に、次のボックスが起動されないことがあります。
    > このような場合は、以下のような点を疑ってみてください。
    >
    > **Rest(おやすみ)中**
    > Pepperが以下のような状態になっているときは、おやすみ中です。
    > ![rest.jpg](https://qiita-image-store.s3.amazonaws.com/0/28770/e5ec9255-6e8b-0d17-30b5-00ae2269da1f.jpeg)
    > このような場合は、[Wake Up]をクリックして起こしてあげてください。
    > ![wake-up.png](https://qiita-image-store.s3.amazonaws.com/0/28770/34da3e56-5f29-7aa1-717d-99a1f62fe886.png)
    >
    > **センサーによるセーフティ**
    > Pepperは足元にレーザーとソナーによるセンサーを持っており、移動先に障害物などがある場合は移動を行わないなどのセーフティ機構がはたらきます。
    > このような場合、障害物を取り除くなどの対応をしてください。


####ボックスをカスタマイズしてみる

ここまでで利用してきたSayボックスですが、実際には、いくつかの基本的な機能を持つボックスを組み合わせたものです。
これを編集して、「やあ」としゃべらせてみます。

1. フローダイアグラム上のSayボックス(入出力、パラメータボタン以外)をダブルクリックします
2. Localized TextというボックスとSay Textというボックスが現れます。これは、Sayボックスは複数のボックスを組み合わせた **フローダイアグラムボックス** であるということを意味しています
 
    ![inside-say.png](https://qiita-image-store.s3.amazonaws.com/0/28770/a45e6026-485c-b5d7-d3e5-06977ee9d237.png)
    * SayボックスにonStartが入力されると、Sayボックス内部が開始状態となり、ボックス内のonStart **[A]** からシグナルが送られます
    * Localized Textボックスは、現在の言語設定(この例ではSet Languageによって設定されたもの)にしたがって入力された文字列を、Say Textボックスに送ります **[B]**
    * Say Textボックスが停止すると、そのシグナルはボックス内のonStopped **[C]** にシグナルが送られ、Sayボックス全体が停止状態になります
    
    ※なお、フローダイアグラム上の [root] **[D]** をクリックすると元のフロー(ビヘイビア)の表示に戻れます

3. Localized Textの言語をJapaneseに切り替え、「こんにちは」となっていた文字列を「やあ」に変更します
    
    ![customize-say.png](https://qiita-image-store.s3.amazonaws.com/0/28770/d2b3f729-d58a-3dfd-72ab-7565a7366305.png)
 
4. [ロボットにアップロードして再生] で、しゃべる内容が変わったことを確認します

ボックスはコピーをして増やすことができますが、ペーストしたボックスはコピー元のボックスとは異なるボックスになるので、それぞれを自由に変更することができます。

###並列実行

シグナルを二又に複数のonStartに入力させると、複数のボックスを同時に実行することができます。
ここでは、 **汗をぬぐうモーションを再生しつつ、モーション開始後3秒後に「ふう」としゃべらせる** ことをやってみます。

####つくってみる

1. 利用するボックスの準備
     * Motions > Animations > Wipe Forehead ... 汗をぬぐうモーション
     * Flow Control > Time > Wait ... 一定時間待つ
     * Audio > Voice > Set Language ... 言語設定を変更する
     * Audio > Voice > Say ... こんにちはと言う
     * Flow Control > Wait For Signals ... 2つのシグナルが両方とも入力されるまで待つ

2. ボックスをつなげる
     * onStartと同時に、Wipe ForeheadボックスとWaitボックスを開始し、Waitボックス側は3秒待ったらSayボックスに処理を渡します。Wipe ForeheadとSayボックスの両方が終わったら、このビヘイビアの終了とします
     * **Wait For Signalsボックス**は、2つの入力両方にシグナルが入力されると、自身からシグナルを出力しますので、これを停止条件の制御に利用しています

     ![wipe-and-fuu.png](https://qiita-image-store.s3.amazonaws.com/0/28770/c08d8608-0696-1056-ad0d-7ff39f264e19.png)


3. パラメータを設定する
     * WaitボックスのTimeoutには3 (秒)を、Set LanguageボックスにはJapaneseを、それぞれ設定します

     ![wipe-params.png](https://qiita-image-store.s3.amazonaws.com/0/28770/d565adaf-7c45-cdd1-35f8-2ce9b95c58ca.png)

4. Sayの文字列を設定する
     * Sayボックスをダブルクリックし、Localized Textを Japanese にし、内容は「ふう」と入力します
     
     ![say-fuu.png](https://qiita-image-store.s3.amazonaws.com/0/28770/01c9674b-426e-a65d-8da3-f7114d674530.png)


このようにすることで、モーション開始のonStartと同時にWaitボックスが開始され、3秒後にonStoppedシグナル発生、Sayボックスが開始されるようになります。

動作確認方法は先のチュートリアルと同様です。汗をぬぐうようなモーションが実行され、指定されたタイミングで「ふう」と言うことを確認してみてください。

![fuu-virtual.png](https://qiita-image-store.s3.amazonaws.com/0/28770/459d8582-b171-a0d7-4dac-170fc095872e.png)

####カスタマイズしてみる

Wipe Forehandボックスは **タイムラインボックス** という形式のボックスで、時間ごとにモーションやビヘイビアを組み合わせた形で表現されています。このタイムラインに修正を加えて、汗をぬぐうはじめのモーションを少し遅くしてみましょう。

1. Wipe Forehandボックスをダブルクリックします
2. 以下のようなタイムラインパネルがあらわれます
     * タイムライン **[A]** はモーション(ポーズの変化)の時間進行をあらわします。タイムライン中のグレーの箇所は、モーションキーフレームと呼び、それぞれに、その時点でPepperがとるべきポーズが記録されています。(キーフレーム間の動きは、なめらかにつながるように自動的に補間されます)
     * タイムラインの単位はフレームで、このタイムラインにおいて1秒間に何フレームを実行するかは、プロパティ **[B]** により設定できます。通常は25フレーム/秒です
     * 動作レイヤー **[C]** は、(このボックスにはありませんが、)タイムラインとあわせて動作させたいビヘイビアを定義したいときに利用します
         * プロジェクトのビヘイビア(ボックスをつなぎ合わせたフロー)はプロジェクトの再生とともに開始状態になりますが、タイムラインの動作レイヤーとして定義することで、特定のフレームに到達したら開始状態にするフローを定義することができます

         ![timeline-basic.png](https://qiita-image-store.s3.amazonaws.com/0/28770/7dbed179-ddf9-6e2b-e335-23497e4bd907.png)

3. タイムラインの一部をマウス左ボタンドラッグにより選択し **[A]**、選択領域右端をマウスでドラッグ **[B]** します。すると、タイムラインが引き延ばされます
    
    ![edit-timeline.png](https://qiita-image-store.s3.amazonaws.com/0/28770/de5f47af-e659-347a-753a-0143fd43a3cb.png)
    
4. また、タイムラインの一部をマウス左ボタンドラッグにより選択し **[A]**、選択領域左端をマウスでドラッグ **[B]** します。すると、タイムラインを移動することができます

    ![edit-timeline-move.png](https://qiita-image-store.s3.amazonaws.com/0/28770/4db532cb-986a-834f-80bf-83d3b16cbf0a.png)

5. タイムライン上、特にキーフレームが配置される領域上を範囲選択することも可能です。以下のようにマウスドラッグすることで、複数キーフレームを選択することができます。この後、右クリックするとコピーすることができ、他の領域に貼り付けなどおこなうことができます。

    ![copy-keyframes.png](https://qiita-image-store.s3.amazonaws.com/0/54394/33c9db46-e835-3780-213b-77570b1fbcd0.png)

動作確認をしてみると、モーション初期の動きがすこしゆっくりになったことが確認できるはずです。このように、モーションはタイムラインの形で編集、管理します。

###制御構造

値を出力するボックスの場合、その値によって続くフローを切り替えることができます。
ここでは、 **言うことを聞き取り、「いちご」ならば「あかい」と言い、「ばなな」ならば「きいろい」と言う** ことをやってみます。なお、このアプリケーションは、 **「おしまい」と言われたら「ばいばい」と言って停止する** ことにします。

####つくってみる

1. 利用するボックスの準備
     * Audio > Voice > Set Language ... 言語設定を変更する
     * Audio > Voice > Speech Reco. ... 音声認識をおこない、パラメータで与えられた単語候補のいずれかを判別する
     * Flow Control > Switch Case ... 入力された値に対して、条件に応じて異なる出力をおこなう
     * Audio > Voice > Say ... こんにちはと言う (3回ドラッグ＆ドロップ)

2. ボックスをつなぐ

     ![speech-switch-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/25c40981-58bf-045c-a4de-846d91ceb410.png)
     * Set Languageボックスで言語設定をしたのち、Speech Reco.ボックスへと接続します
     * Speech Reco.ボックスは音声認識処理を実装するボックスで、話しかけられると候補の単語から最も候補としてふさわしいものを選択し、文字列として出力します
     * この出力を、条件分岐機能を提供するSwitch Caseボックスで分岐させ、「あかい」と言うSayボックス、「きいろい」と言うSayボックス、「ばいばい」と言うSayボックスへと接続することで、話者への応答を実現します。これらのボックスの設定、接続はこの先の手順でおこないます
     * 3つめのSayボックス(「ばいばい」と言うSayボックスに変更する予定)が停止したらアプリケーションが停止するように、SayボックスのonStopped出力をビヘイビアのonStopped出力に接続します

3. パラメータを設定する
     * Set Languageボックスにはいつも通りJapaneseを、Speech Reco.ボックスには いちご;ばなな;おしまい (セミコロンで区切る)を設定します。これにより、Speech Reco.ボックスは、話しかけられた内容に対して「いちご」か「ばなな」か「おしまい」かのいずれかを判断するように設定されます

     ![speech-params-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/9cbe382e-d153-9fe2-a357-486d027ad577.png)


4. 条件を設定する
     Switch Caseに "いちご", "ばなな", "おしまい" (ダブルクォーテーションで囲む)を設定します。

     ![speech-switch-candidates-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/3206ff08-0d56-31a7-8df4-ca5b9c21b826.png)

     すると、Switch Caseボックスのグレー(Dynamic)出力が2つから3つに増えます。Speech Reco.から渡された文字列が「いちご」であれば output_1 出力に、「ばなな」であれば output_2 出力に、「おしまい」であれば output_3 出力にシグナルを送るようにSwitch Caseボックスが設定された状態になります。

5. Switch Caseボックスの3つの出力をそれぞれ以下のように3つのSayボックスへと接続します

     ![speech-switch-connection.png](https://qiita-image-store.s3.amazonaws.com/0/28770/026e4f22-ed9f-3fc2-716f-5435c09b86ba.png)

6. Sayの内容を変更する
     * Switch Caseの output_1 につないだSayは、Localized TextにJapaneseを設定したうえで あかい とし、output_2 に接続されたSayは きいろい とし、output_3 に接続されたSayは ばいばい とします

     ![say-red.png](https://qiita-image-store.s3.amazonaws.com/0/28770/b3775579-850c-10c6-1912-934f780a5a4a.png)
     ![say-yellow.png](https://qiita-image-store.s3.amazonaws.com/0/28770/c5aff506-5f89-cdc4-7612-590296d2e8cb.png)
     ![say-bye.png](https://qiita-image-store.s3.amazonaws.com/0/28770/d60aa3e5-87fc-ab90-7a28-ff6a6abe0173.png)

これで、単純な **音声の認識→条件分岐→音声による応答** を実現することができます。

####バーチャルロボットでの動作確認

バーチャルロボットは音声出力と同様、ダイアログパネルによって文字列ベースで対話することができます。

先のチュートリアルと同様にバーチャルロボットで再生したのち、ダイアログパネルに単語を入力する **[1]** と、フローダイアグラムにしたがった応答が確認できます。 **[2]**
また、「おしまい」と入力すると「ばいばい」と応答し、それ以降は応答しなくなります。これはビヘイビア全体が停止状態になったためです。

![dialog-speech-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/1ed2853c-17ad-101b-f36b-dbc72c3af266.png)


> ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) [参考]エラーの表示とログビューア
> バーチャルロボットでSpeech Reco.ボックスを再生すると、ボックスが赤く表示されます。
> 
> ![speech-reco-error-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/f6b435f2-f64a-1fd5-b448-63fe45174512.png)
> これは、ボックスの処理でエラーが発生したことを示していて、具体的な内容は [表示]メニューの[ログビューア]で確認することができます。
> 
> ![logviewer.png](https://qiita-image-store.s3.amazonaws.com/0/28770/61152462-ec06-aa12-0aea-8f7f28756248.png)
> ここでエラーが発生しても、機能が一部無効化されるだけで、基本機能はバーチャルロボットでも確認することができます。

####Pepperでの動作確認

先のチュートリアルと同様にしてPepperに接続、再生すると、Pepperと音声で対話することができます。

Pepperの場合、バーチャルロボットではエラーで動作しなかった部分、たとえば話を聞いているようなジェスチャーをすることを確認することができます。このように、入出力をおこなうようなボックスには、入出力機能そのもの以外に、その機能と関連づいたジェスチャーなど、細かい振る舞いが設定されているものがあります。

![20140912_184203.jpg](https://qiita-image-store.s3.amazonaws.com/0/28770/4e54d5c3-3e30-e9c3-af5e-cedb1ef960de.jpeg)



#独自ボックスの作成

ここまでで、標準で用意されているボックスを使っていくつかの機能を実現してきましたが、Choregrapheでは自分でボックスを作ることもできます。
よく使う処理をボックスにすることで、コピー＆ペーストで簡単に再利用したり、処理の一部をパラメータに置き換えることで、処理の形だけを固定しておいて、中の値だけを自由に変更したりなどができるようになります。

##複数のボックスを1つにまとめる

ここでは例として、先につくった音声認識と応答処理をひとつのボックスにまとめてみます。

1. マウスドラッグにより、新たにボックスとしてまとめたいボックスをまとめて選択します

    ![select-box-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/67286466-6fd1-6dee-21a1-7d7fcf3209a4.png)


2. 右クリックし、 **[ボックスに変換]** をクリックします

    ![convert-box-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/07e21354-3125-fc2b-9259-7165b70c69d1.png)

3. 新たに作るボックスの情報を問い合わせるダイアログが表示されるので、好きな名前や説明を設定します

    ![new-box-props.png](https://qiita-image-store.s3.amazonaws.com/0/28770/cf4a83f1-40a4-c040-90a1-db4faa40273f.png)

4. 新たなボックスとして1つにまとめられます

    ![new-box-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/73a7edf4-3a7d-e60b-ec0d-740cebcbd75f.png)

    このボックスをダブルクリックすると、選択したボックス群がこのボックスの中に入っていることがわかります。つまり、新たなフローダイアグラムボックスを定義できたわけです。

    ![inside-new-box-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/516a43cd-2300-65df-3a72-6b09001d7740.png)


##フローダイアグラムボックスのパラメータ化

新たに作ったボックスには独自にパラメータを追加することもできます。ここでは、簡単な例として、いちご、ばななに対する応答(あかい、きいろい)を、それぞれ変数 ichigo と banana のパラメータとして変更できるようにします。

1. 独自ボックスにパラメータ定義を追加する
    1. 先に作ったSpeech Reco+Sayボックスで右クリックし、 **[ボックスを編集]** をクリックします
    2. ボックスの編集ダイアログが表示されるので、変数の **追加(+)** ボタンをクリックします

         ![edit-box-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/7f85448b-7fa3-be8c-a991-768ea8b9e619.png)

    3. 変数の編集ダイアログがあらわれるので、変数 ichigo に関する説明 **[A]** 、変数の型 **[B]**、デフォルト値 **[C]** を設定し、[OK]ボタンをクリックします

         ![edit-parameter.png](https://qiita-image-store.s3.amazonaws.com/0/28770/84b17a99-d789-8b42-e7f5-5e253cd6d951.png)


    4. 同じ要領で、変数 banana を追加します

         ![edit-parameter-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/a93f6376-83d3-9504-f67e-0fe1c9726ab8.png)

    5. ボックスの編集ダイアログで [OK]ボタンをクリックしボックスの編集を完了します

    これで、このボックスSpeech Reco+Sayに変数が2つ定義できました。ボックスのパラメータボタンを押すことで、変数が設定されていることが確認できます。

    ![original-params-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/1627d165-6545-7871-125f-2cb0e5299b1a.png)



2. ボックス内部を、ボックスに設定された変数を参照するような形に修正します
    1. パラメータの取得には、 **Flow Control > Flow Diagram > Get Parameter** ボックスを利用します。Sayボックスで構成されていた箇所を、以下のように Get ParameterボックスとSay Textボックスで置き換えます

        ![get-parameter-say-2.png](https://qiita-image-store.s3.amazonaws.com/0/28770/2510bf77-ab2c-f1b0-dfcf-7ce13cd71d52.png)

    2. Get Parameterボックスのパラメータを以下のように設定します。これにより、いちごに対する応答として変数ichigoの値を、ばななに対する応答として変数bananaの値がSay Textボックスに入力されるようになります

        ![get-parameter-parameter.png](https://qiita-image-store.s3.amazonaws.com/0/28770/42472343-c6a4-8837-1829-a67675eb3c5f.png)


これで、いちご、ばななに対する応答を独自の変数ichigo, bananaで定義できるようになります。実際にそれぞれの変数の値を変えてみて、挙動に反映されることを確認してみてください。

このようにして、Choregrapheではボックスの組み合わせで様々な振る舞いを表現することができ、ボックスを独自に定義していくことでより複雑な振る舞いも定義できるようになっています。ぜひ、いろいろなボックスを使って(作って)、Pepperにいろいろなことをやらせてあげてください。

次のページ
[Pepperチュートリアル (3)：ポーズを作る](http://qiita.com/Atelier-Akihabara/items/7847aa3fb10069e0f2aa)