ビジュアルプログラミングで始める！AppleTVの再生・停止コントローラーを作ろう

近年「Scratch (スクラッチ) 」などの人気に伴い、ビジュアルプログラミングでプログラム学習を始める方が増えてきています。
テキストでのプログラム作成よりも、視覚的な表現でプログラムが作成できるため、始めやすいかと思います。

そこで、今回はビジュアルプログラミングソフトRobip（ロビップ）とESP-WROOM-02開発ボードという、Wi-Fiモジュールが内蔵されたボードを使って、赤外線リモコンを作成したいと思います。

用具さえ用意してしまえば、プログラミング部分は数個のブロックで作れてしまいます。
是非、試してみてくださいね。

## ビジュアルプログラミングアプリRobipとは？
ニャンパス株式会社が開発した、ビジュアルプログラミングアプリです。同じくニャンパス株式会社が開発したHaLake Kitは勿論の事、ESP-WROOM-02 Wi-Fiモジュール等に、プログラムを書き込む事ができる開発環境の事です。
Wi-Fi経由で書き込む事が可能な為、PCを使わず開発が行なえます。
[プログラミングソフトRobip](https://robip.halake.com/)

## ESP-WROOM-02開発ボードとは？
![7a35a360-fbf7-ec7e-6eaf-ef08df0058cc.png](https://qiita-image-store.s3.amazonaws.com/0/46262/5a7c45b2-3aae-1fdd-4a5e-c78670feba04.png)

ESP-WROOM-02開発ボードはスイッチサイエンスで製造販売をしているESP8266EXを搭載したWiFiモジュール及びマイクロUSBが内蔵されている基板です。
現在は、スイッチサイエンスのサイトから購入が可能です。
販売価格2,160円です。※2016年5月22日現在
[ESP-WROOM-02開発ボードの購入](https://www.switch-science.com/catalog/2500/)
※6/9より「ESPr Developer」という名称になって販売されております。

## 初期設定
まずは、こちらの記事を参考に、プログラミングソフトRobipの登録と、ESPr Developer（ESP-WROOM-02開発ボード）に書き込みを行なってください。
http://qiita.com/cw-hirama/items/c6593dc4d6020cbafefb

## プログラムの作成
早速プログラムを作りましょう。プログラミングソフトRobipは、現在Webブラウザからアクセスして作成できるWebサイト版と、Androidアプリ（タブレットのみ）版をリリースしております。
どちらでもお好きな方をご利用ください。

【Webサイト版】
https://robip.halake.com/editor.html

【Androidアプリ版】
https://play.google.com/store/apps/details?id=com.nyampass.robip
※Androidアプリ版はPCやケーブル等を使用せず気軽に使える事をコンセプトに作成したアプリです。

### 【1】キャンバスを表示する。
プログラミングソフトRobipを開くと、下記の様なキャンバスが表示されます。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/46262/dc0febf2-0bb1-f056-3a6a-b1795c02d848.png)

上記の様に「entry point」というブロックが表示されていない場合は、[ファイル]をクリックして、[新規ファイル]をクリックします。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/46262/e8f34220-4343-52f7-2158-6a4a28889608.png)

ファイル名を聞かれますので、自分の分かるファイル名を付けてください。
※半角、全角両方つかえますので、日本語名で付けられた方がわかりやすいです。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/46262/deec3a06-bf46-0be1-1015-77a7df3530e0.png)

### 【2】ブロックを置いて、プログラムを作成する
「entry point」というブロックが表示されたら、早速プログラムを作っていきます。[入力・出力]エリアをクリックします。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/46262/2c80c8ca-ce5e-c440-dc95-a971119dab97.png)

[入力・出力]から[pin mode PIN# ■ MODE ■ ]を2つ選び、「entry point」の下に設置します。
![05.png](https://qiita-image-store.s3.amazonaws.com/0/46262/c52f0849-99a3-f5af-bbc5-08710278dc0c.png)

下記の様に[pin mode PIN# ■ MODE ■ ]の■部分をそれぞれ入れてあげます。
まずは、0番のボタンをクリックしたら、16番ピンに接続されているLEDを光らせたいので、0はINPUT、16はOUTPUTにします。
![06.png](https://qiita-image-store.s3.amazonaws.com/0/46262/c7bf826c-58a3-4e59-3081-5251614ab8e2.png)

次は[コントロール]から[if do]ブロックを選びキャンバスの[pin mode〜]の下に配置します。
![07.png](https://qiita-image-store.s3.amazonaws.com/0/46262/69bbaf80-2eb2-d34a-0cd5-90ca25f6c943.png)

続けて、[計算]から[not]を選択して、配置します。
![08.png](https://qiita-image-store.s3.amazonaws.com/0/46262/d4d9989d-f66f-337a-e0e1-3edd902b7abd.png)

[入力・出力]から[DigitalRead# ■ ]を選択して先に配置した[not]と繋ぎます。
![09.png](https://qiita-image-store.s3.amazonaws.com/0/46262/7393b405-ac05-8768-cc76-a5465547b97c.png)
ここまでのブロックはこんな感じに配置されていればOK
![10.png](https://qiita-image-store.s3.amazonaws.com/0/46262/98f90aae-aebb-7b2f-88a6-d66b35e1256b.png)

次にifの下に配置する[infrared send]を[入力・出力]から選び、配置します。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/46262/fccf1f73-41f7-fadc-8c23-00566a4694a5.png)

[計算]から[“　”]というブロックを選び、先ほど設置した[infrared send]の後ろに配置します。
[“　”]の中には数値が入るのですが、説明したいので、先に配置だけしてください。
![12.png](https://qiita-image-store.s3.amazonaws.com/0/46262/f218b0cb-8b84-c116-52a4-1a0ab359667a.png)

最後に[コントロール]から[delay]を選び、[do]の隣に配置します。
![13.png](https://qiita-image-store.s3.amazonaws.com/0/46262/439091f1-55f7-5644-4603-ec4e87fc7b57.png)

[計算]から[0]を選び、[delay]隣に配置してあげてください。
数値は[1000]位が良いと思います。ここで1000は1秒です。
![14.png](https://qiita-image-store.s3.amazonaws.com/0/46262/fededf8c-ef0e-ed3c-392c-22024463cc60.png)

ここまで、ブロックを配置すると、下部の写真の様になるかと思います。
ならない場合は、途中ブロックを配置していなかったり、違うブロックを配置している可能性があるので、もう一度見直ししてみてください。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/46262/f785c8e8-443e-2b14-92f5-de0d7620c0c7.png)

最後に送信する赤外線のコードを入れます。
今回はこちらのサイトに記載されているコードを流用したいと思います。
[Arduinoでリモコン作成](http://eikatou.net/blog/2012/07/1796/)
ページ中間程に「Apple TV再生ボタン」と記載の有る箇所905,445,57,57,54,........をまるっとコピーして[infrared send]隣の[“　”]に流し込んで頂ければ完成です。
![16.png](https://qiita-image-store.s3.amazonaws.com/0/46262/517f529c-22fa-eb65-d437-5761ce9ac93d.png)

右上のビルドをクリックすれば、サーバにプログラムが保存されます。

### 【3】ESPr Developer（ESP-WROOM-02開発ボード）にLEDを設置する
ESPr Developerの16番ピンとGNDに赤外線送信用LEDを取り付けます。
足の長い方を16番ピン短い方をGNDに接続します。

### 【4】プログラム更新
ESPr Developer（ESP-WROOM-02開発ボード）を再度通電しなおせば、プログラムは自動更新されます。
※ESPr Developerの接続Wi-Fiに接続されているかご確認ください。

実際の操作は、下記動画を参考にしてください。
[https://www.youtube.com/embed/86RL0lQLPfA?rel=0](https://www.youtube.com/embed/86RL0lQLPfA?rel=0)