Pepperチュートリアル (1)：SDKインストールとアプリケーションの作成/実行

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

このチュートリアルでは、以下のような構成でSDKのインストールからはじめ、バーチャルロボットにしゃべらせ、最終的に実際にPepperにしゃべらせるまでを説明します。

![overview.png](https://qiita-image-store.s3.amazonaws.com/0/54394/0562d365-4882-4e64-378d-62b53bd5158c.png)

1. SDKのインストール
    * SDKの各部説明
2. アプリケーションの作成と実行
    1. バーチャルロボットでの実行
    2. Pepperでの実行




# SDKのインストール

まず、ロボットのアプリケーションを開発するためのツール群(SDK)のインストールをおこないます。

## 動作環境

* ハードウェア
    * 1.5 GHz CPU
    * 512 MB RAM
    * OpenGL対応グラフィックカード
* OS
    * Linux
        * Ubuntu 12.04 LTS (Precise)以降
    * Windows
        * Microsoft Windows 7
    * Mac OS X
        * 10.7.1 Lion, 10.8.3 Mountain Lion

このチュートリアルでは、Windowsを例に説明していきます。

## インストーラの実行

1. インストーラの実行ファイルを起動します

    Windowsの場合は、 `choregraphe-suite-2.0.3.56-win32-setup.exe` などとなります。

2. **[次へ]** をクリックして先に進めます

    ![setup-1.png](https://qiita-image-store.s3.amazonaws.com/0/54394/1f999f66-9941-0642-22fd-a9cc03101c59.png)

3. 使用許諾契約書を確認の上、同意する場合は **[同意します][A]** をチェックし **[次へ][B]** をクリックします

    ![setup-2.png](https://qiita-image-store.s3.amazonaws.com/0/54394/9a193968-430c-3aa4-5625-94db40d43037.png)


4. ライセンスキーを入力 **[A]** し、 **[次へ][B]** をクリックします

    ![setup-3.png](https://qiita-image-store.s3.amazonaws.com/0/54394/47605be3-5f50-2a6a-0156-110be0960197.png)

5. インストールモードは **[Quick][A]** を選択し、 **[次へ][B]** をクリックします

    ![setup-4.png](https://qiita-image-store.s3.amazonaws.com/0/54394/5a600093-3c69-2c76-2dc9-9f20a812bb1b.png)

    > ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) (参考)SDKとしてインストールされるソフトウェア
    >  * Choregraphe(コレグラフ)
    >    * アプリケーションの開発環境
    >  * Monitor
    >     * Pepperの状況をモニタリングするツール
    >  * NAO ドキュメント
    >     * ツールやAPIに関するドキュメント


6. エラーなどが発生しなければ、インストール終了を示すダイアログが表示されます

    ![setup-5.png](https://qiita-image-store.s3.amazonaws.com/0/54394/0d12c5ee-0ea1-0d07-7745-a18946fb56ed.png)


これでSDKのインストールは完了です。 **Choregrapheの起動[A]** をチェックして **[終了][B]** すると、インストーラ終了後自動的にSDK(Choregraphe)が起動します。

##Choregrapheの実行

SDKをインストールすると、Choregrapheのアイコンがスタートメニューなどに登録されますので、ここからChoregrapheを起動してください。

![choregraphe-welcome.png](https://qiita-image-store.s3.amazonaws.com/0/54394/147c8573-799c-7f24-f263-464cbb08d200.png)


[ようこそ]ダイアログが表示されたら、まずは **[新規プロジェクト…]** をクリックしてください。Choregrapheの画面が起動します。

![sdk-initial-nao.png](https://qiita-image-store.s3.amazonaws.com/0/54394/d6d89695-e94a-bb6b-2c51-45ed2adda8ad.png)

Choregrapheでは、Pepperの実機がなくても、バーチャルロボットを用いて動作確認をおこなうことができますが、デフォルトではバーチャルロボットは **NAO** になっています。これを、以下の手順でPepperに変更します。

1. [編集]メニューの **[設定]** を選択します

    ![settings-menu.png](https://qiita-image-store.s3.amazonaws.com/0/54394/455eec2c-6d34-5466-7888-3e800233fe32.png)

2. **[バーチャルロボット]タブを選択[A]** し、 **[ロボットモデル]リストを選択[B]** します

    ![settings-virtual-robot.png](https://qiita-image-store.s3.amazonaws.com/0/54394/26ade1f0-13ac-8ac4-0958-de5b6582253e.png)


3. ロボットモデルとして **JULIETTEY20MP.xml を選択 [A]** し、 **[OK]ボタンをクリック [B]** します

    ![settings-virtual-robot-juliette.png](https://qiita-image-store.s3.amazonaws.com/0/54394/180a5a4a-9e05-6d93-35c1-8d25e4eb456a.png)


4. バーチャルロボットを再起動してよいか問い合わせるダイアログが表示されますので、 **[はい]をクリック** します

    ![restart-virtual-robot.png](https://qiita-image-store.s3.amazonaws.com/0/54394/d1b4be91-a683-faff-2927-bdb1b430b2dc.png)


これで、バーチャルロボットが **Pepper** になりました。それでは、例を通して実際にプロジェクトを作成していきましょう。

![sdk-pepper.png](https://qiita-image-store.s3.amazonaws.com/0/54394/3a52fc8d-84ac-2bd4-7393-3c5d5651921d.png)


> ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) (参考)SDKの各部説明
>
> Choregrapheは複数のパネルから構成されます。よく使うパネルは以下の5つです。
> ![main-panels.png](https://qiita-image-store.s3.amazonaws.com/0/54394/c4cdac44-bd95-6845-956e-b08e00aa6679.png)
> 
> 1. プロジェクトの内容
> 2. ボックスライブラリ
> 3. フローダイアグラム
> 4. ポーズライブラリ
> 5. ロボットビュー
> 
> また、メニューには以下の項目があります。
> 
> * ファイル
> * 編集
> * 接続
> * 表示
> * ヘルプ
> 
> ツールバーとして、以下のようなボタンがあります。
> ![toolbar.png](https://qiita-image-store.s3.amazonaws.com/0/54394/8ec9cb86-acfb-fb47-4088-a081b0190720.png)
> 
> 他にも、 [表示] メニューから以下のようなパネルを選択することができます。
> 
> * ビデオモニター
> * ダイアログ
> * スクリプトエディタ
> * ロボットアプリケーション
> * ロボット動作
> * リソースビューアー
> * メモリウォッチャー
> * ログビューアー
> * スタックのやり直し
> 
> それぞれの使い方については別のチュートリアルで説明していきます。

# アプリケーションの作成と実行

## プロジェクトの作成

1. 新たに プロジェクト `(アプリケーションの生成に必要なファイルの集まり)` を作成します
   * **Choregraphe起動直後** →[ようこそ！]ダイアログから **[新規プロジェクト… ]** を選択
   * **それ以外** →[ファイル]メニューから **[新規プロジェクト…]** を選択

2. フローダイアグラムに 空のフローが表示されることを確認します

    ![empty-flow.png](https://qiita-image-store.s3.amazonaws.com/0/54394/53fd60da-60c3-c9fd-3071-7ea9791ad64b.png)

    > ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) プロジェクト/ビヘイビア/ボックス
    > 
    > * 新規プロジェクトには1つだけビヘイビア `(振る舞いを定義する単位)` が用意されます
    > * ビヘイビアは複数のボックス `(ビヘイビアの機能単位: “Say”など)` によって構成されます
    >      * これらのボックスは順序実行/同時実行されます
    > * プロジェクトに含まれるビヘイビアは [プロジェクトの内容] パネルで確認できます
    > 
    > ![project-content.png](https://qiita-image-store.s3.amazonaws.com/0/54394/14c9de32-44e1-6546-ae37-f153e51818a6.png)

## ボックスの配置

1. [ボックスライブラリ]パネルの **"Say" ボックス** を **[フローダイアグラム]パネル** へとドラッグ＆ドロップします

     ![dnd-say.png](https://qiita-image-store.s3.amazonaws.com/0/54394/e8889a16-9a79-7a5d-cc3b-cd5d93a5690e.png)


2. [ボックスライブラリ]パネルの **"Set Language" ボックス** を **[フローダイアグラム]パネル** へとドラッグ＆ドロップします

    ![dnd-set-language.png](https://qiita-image-store.s3.amazonaws.com/0/54394/c7e1095e-6edc-3414-67b1-1d7b4b242a30.png)


3. **フローダイアグラム左端の[onStart入力][A]** から **Set Languageボックスの[onStart入力][B]** をマウスドラッグでつなぎます

    ![connect-say.png](https://qiita-image-store.s3.amazonaws.com/0/54394/244893eb-9cfe-e4d6-dfbb-3891da287841.png)


4. **Set Languageボックスの[onReady出力][A]** から **Sayボックスの[onStart入力][B]** をマウスドラッグでつなぎます

    ![connect-say-2.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ce22e37f-06b8-ddab-4204-5092acb55588.png)

5. **Sayボックスの[onStopped出力][A]** から **フローダイアグラム右端の[onStopped出力][B]** をマウスドラッグでつなぎます
    基本的には、フローダイアグラム右端のonStopped出力をフローの最後に実行されるボックスとつなぐようにしてください。このようにすることで、このボックスの停止とともにアプリケーションが停止することを明示することができます。

    ![connect-say-onstopped-to-behavior-onstopped.png](https://qiita-image-store.s3.amazonaws.com/0/54394/83eb12c9-09f9-b709-cafa-4aa0e353b004.png)


6. **Set Languageボックスのパラメータボタン** をクリックします

    ![set-lang-param.png](https://qiita-image-store.s3.amazonaws.com/0/54394/b883a649-ec30-053d-c42c-d91f29e8a435.png)


7. Language変数にJapaneseを設定 **[A]** し、**[OK]ボタン[B]** をクリックします

    ![set-lang-param-dialog.png](https://qiita-image-store.s3.amazonaws.com/0/54394/81b90028-ec26-9b16-5d50-1ebaf92a4b9a.png)

8. [ファイル]メニューの **[プロジェクトを名前をつけて保存...]** を選択します
    * 現在編集しているビヘイビアなどの情報を保存することができます
     
これで、アプリケーションの準備は完了です。次に、ロボットでアプリケーションを実行してみましょう。

## バーチャルロボットでの実行

まずは、SDKにあるバーチャルロボットを利用して動作確認をしてみます。

1. [接続]メニューの **[バーチャルロボットに接続]** をクリックします
    * [ロボットビュー]パネルにバーチャルロボットが表示されます

        ![robot-view.png](https://qiita-image-store.s3.amazonaws.com/0/54394/72ea57e4-adec-5fc5-96bd-d4be2bd48f54.png)

2. [表示]メニューの **[ダイアログ]** をクリックします
    * Choregrapheの画面に [ダイアログ]パネル が表示されます

        ![dialog-panel.png](https://qiita-image-store.s3.amazonaws.com/0/54394/c9ac15da-2bd5-91c7-e36b-af8d71f467c7.png)


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

    ![robot-play.png](https://qiita-image-store.s3.amazonaws.com/0/54394/5c33d6f5-3d98-5d9e-d00d-cc09f04f5ef9.png)


4. [ダイアログ]パネルに  **ロボット: こんにちは**  と表示されれば成功です

    ![dialog-hello.png](https://qiita-image-store.s3.amazonaws.com/0/54394/19e7a2a4-443d-a9c9-9f41-1f94e716eb9b.png)

##Pepperでの実行

次に、実際にPepperにしゃべらせてみましょう。

1. ツールバーの **[接続…]** をクリックします

    ![toolbar-connect.png](https://qiita-image-store.s3.amazonaws.com/0/54394/a3790053-a41f-d365-14e8-ae6edb13e8a7.png)

2. 接続可能なPepperの一覧が表示されます
    * 自分のPepperをクリック **[A]** し、**[選択][B]** ボタンをクリックしてください

    ![connect-dialog.png](https://qiita-image-store.s3.amazonaws.com/0/54394/488ab051-1822-e098-ac88-203e85a1e76f.png)

    > ####![info.png](https://qiita-image-store.s3.amazonaws.com/0/54394/ed7863bd-4c2e-7710-58db-0e38a4f26959.png) (Tips)PepperのIPアドレスを知る方法
    > 
    > Pepperのチェストボタンを押すと、自分の情報をしゃべります
    > 
    >  ![pepper-say-myself.png](https://qiita-image-store.s3.amazonaws.com/0/54394/5a864dec-65e0-ceb6-a027-b56d2a8fcbee.png)
    > 
    > ブラウザでこのIPアドレスを開くと、より詳細な情報を得たり、停止、再起動などを行うことができます
    > 
    > ![webview.png](https://qiita-image-store.s3.amazonaws.com/0/54394/47d9eb7e-8d19-72a3-7040-6dcf3df4740e.png)


3. **[ロボットにアップロードして再生]** をクリックします

    ![robot-play.png](https://qiita-image-store.s3.amazonaws.com/0/54394/5c33d6f5-3d98-5d9e-d00d-cc09f04f5ef9.png)


4. Pepperが  **こんにちは**  としゃべれば成功です

    ![pepper-hello.png](https://qiita-image-store.s3.amazonaws.com/0/54394/d68ce89b-d171-f024-e29d-b6c8a8eb0045.png)


簡単なアプリケーションですが、この、ボックスを置く、ボックスをつなぐ、がPepperアプリケーション開発の基本になります。