--- title: "BlynkアプリでSPRESENSEをリモートコントロールする" url: "https://maker.wiznet.io/scarlet/projects/blynk%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7spresense%E3%82%92%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/" markdown_url: "https://maker.wiznet.io/scarlet/projects/blynk%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7spresense%E3%82%92%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/md" type: "UCC: User Created Content" author: "baggio" author_url: "https://qiita.com/baggio/items/e583778a7c20a5182538" editor: "WIZnet" editor_url: "https://maker.wiznet.io/" original_author: "baggio" original_url: "https://qiita.com/baggio/items/e583778a7c20a5182538" published: "2023-01-03" language: "ja" tags: ["AIoT"] hardware: ["WIZnet W5500"] likes: 7 views: 884 comments: 1 source: "WIZnet Makers (https://maker.wiznet.io/)" --- # BlynkアプリでSPRESENSEをリモートコントロールする > Blynkアプリを使ってデバイスコントロールに挑戦しました。スマホからボードを制御したりボードの情報をスマホに送ったりと簡単に自作IoTを実現することができます Original author: baggio (source: https://qiita.com/baggio/items/e583778a7c20a5182538) ## Components - **WIZnet W5500** x 1 ([docs](https://docs.wiznet.io/Product/Chip/Ethernet/W5500)) WIZnet parts: W5500 ([Datasheet](https://docs.wiznet.io/Product/Chip/Ethernet/W5500/datasheet?utm_source=maker&utm_medium=project&utm_campaign=w5500), [product hub](https://maker.wiznet.io/products/w5500/)) ## Article ## **BlynkアプリでSPRESENSEをリモートコントロールする** sell [Arduino](https://qiita.com/tags/arduino),[IoT](https://qiita.com/tags/iot),[Blynk](https://qiita.com/tags/blynk),[Spresense](https://qiita.com/tags/spresense) Blynkアプリを使ってデバイスコントロールに挑戦しました。スマホからボードを制御したりボードの情報をスマホに送ったりと簡単に自作IoTを実現することができます。そんなに凝ったことをしなければ無料で遊べます。 ## **Blynk アプリの導入** Blynk をご存知ない方のために本家サイトはこちらです。 AndroidやiOS用のスマホアプリが用意されていて、デバイスもArduino、ESP、RaspberryPiなど各種ボード(400以上)に対応しています。デバイスとの接続方法も、WiFi, Ethernet, Cellular(GSM, LTE), Serial, USB, Bluetoothと多種多様です。 [BlynkのCommunitiyサイト](https://community.blynk.cc/t/sony-spresense/31174)にこんなやり取りを見つけました。 [![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fefb5ae59-2a5e-dd17-de00-4c40fc8407c8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a0f20c12017c1672228450078b000148)](https://camo.qiitausercontent.com/d90a52470eafc5128edb2ad7aa7a882e2e796ff5/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f65666235616535392d326135652d646431372d646530302d3463343066633834303763382e706e67) Spresenseボードはまだサポートされていないけど、オープンソースだからコントリビューションはウェルカムだよとのこと。前回、[SPRESENSEでArduino Ethernetライブラリを動かしてみた](https://qiita.com/baggio/items/650eeb2a80875afed07e)ので、SpresenseボードをEthernetで接続してBlynkアプリでコントロールしてみたいと思います。用意されたまま使うよりも、移植してみたりハマったりした方が理解が深まると思うので（持論）、敢えて茨の道を進んでいきます。 ## **Blynk アプリのインストール手順** iOSを使った手順ですが、Androidでも特に変わらないと思います。 | **手順** | | | --- | --- | | "blynk"を検索してアプリをインストールします。 | [![install.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Ffbb43197-fe43-7fec-26c4-d7fe55971a3d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7594f4ee0f1a321d3524ab1b120ed995)](https://camo.qiitausercontent.com/749d520e85f0a8079cd378434574232516aab1a6/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f66626234333139372d666534332d376665632d323663342d6437666535353937316133642e706e67) | | 初めて使用する場合は、"Create New Account"でアカウントを作成します。 | [![login.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fb0797ee1-7e01-d07d-7abe-9610ac4faf3d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=684dbc7be7f9ad4b8d2c2f5b506d0970)](https://camo.qiitausercontent.com/17549f52de6ab511c20a37d76b100f8a7b86ec78/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f62303739376565312d376530312d643037642d376162652d3936313061633466616633642e706e67) | | "Email"と"Password"を入力します。 登録したEmail宛に"Auth Token"が送られてきます。このトークンは後でプログラムに入れて使います。 | [![new_account.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F31beb738-e600-fac3-9232-4e1be6796b34.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=419333901db6a17c5f9a7323f21c96ba)](https://camo.qiitausercontent.com/116e6a2c6e49c78c4771fa22c19c40e4da430225/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f33316265623733382d653630302d666163332d393233322d3465316265363739366233342e706e67) | ## **Blynk アプリの使い方** | **手順** | | | --- | --- | | "New Project"を作成します。 ここでは"test"という名前で デバイスは"Arduino UNO"、 CONNECTION TYPEは"Ethernet" を選択します。 | [![new_project.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fc236be39-43b7-9c41-31e5-9aef56029b6a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ac2ecd111e14c17e039e9d9453046bc4)](https://camo.qiitausercontent.com/24b421b9dc63b0259684e8279a3e76c73a91bc4e/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f63323336626533392d343362372d396334312d333165352d3961656635363032396236612e706e67) | | キャンバスが現れます。 ここのキャンバスをクリックすると"Widget Box"が現れます。 | [![test.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F5fdfe484-fcca-adca-ad13-17f20322994d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eea035146879f9a87811e7458e3f096b)](https://camo.qiitausercontent.com/f8c56f65fa362256cea52f1affa88d5cd425bac5/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f35666466653438342d666363612d616463612d616431332d3137663230333232393934642e706e67) | | 色々なWidgetが用意されています。 "YOUR ENERGY BALANCE"として初期状態で2000ポイントが与えられています。つまり2000ポイント以内であれば無料でWidgetを組み合わせて使うことができます。 | [![widget_box.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fa65981ff-6aa5-9da8-564b-edec2b0b9f91.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3aa81d4a5587dfb6faeb300f83047783)](https://camo.qiitausercontent.com/ca88ddf633665b350ece2ea90e45fb332dc7efcf/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f61363539383166662d366161352d396461382d353634622d6564656332623062396639312e706e67) | | 例えば、"Button" Widgetの場合、 "PIN"をクリックして使用するピンを選びます。"Digital", "Analog"など物理的なピン番号の他に、"Virtual" という仮想的なピン番号を選ぶこともできます。仮想的なピン番号はこの後で出てくるプログラミングと合わせて使用します。 | [![button_settings.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fca6dd0a7-a4ba-6269-b620-c8b996d21a97.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8d94b56aaf3ba5ff8e1cf076fdee4998)](https://camo.qiitausercontent.com/77591db59ccb072f5f28b026a46e17ab58097d58/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f63613664643061372d613462612d363236392d623632302d6338623939366432316139372e706e67) | | 例えば、"LED" Widgetの場合、 "PIN"をクリックして使用するピンを選びます。ここでは"Virtual"ピンのみを選ぶことができます。 なんとなく"Button"と"LED"のOUTPUT/INPUTの表示が逆になっているように思うかもしれませんが、"Button"の場合はBlynkアプリでボタンを押したという信号をデバイス側に出力するのでOUTPUT、"LED"の場合はデバイスからの信号を入力してスマホ上のLEDを光らせるので"INPUT"になります。 | [![led_settings.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F3a935c92-ca9c-16c9-3779-6919d6a56326.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=11f020f4c859db1184bfd13f20b1315b)](https://camo.qiitausercontent.com/686e8e185e95197885431287d9a0bc1e754e82a9/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f33613933356339322d636139632d313663392d333737392d3639313964366135363332362e706e67) | | 2000ポイントで足りなくなったら"Energy Pack"を追加購入することもできます。 | [![energy_store.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F1df6758f-3b7b-b158-f1cd-228994cac86a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=815c64b22c51b47ce76e328a9a414c26)](https://camo.qiitausercontent.com/4a5a68d53e19769d8a403ef2f51b84771d389633/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f31646636373538662d336237622d623135382d663163642d3232383939346361633836612e706e67) | ## **デバイス側のプログラミング** Blynkライブラリはこちらにあります。 Arduinoライブラリマネージャからインストールすることもできますが、 [![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F0550cc7e-8435-c96b-a3d1-b8794ebc2948.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=80216de31f042ce7e0d61c380bd75384)](https://camo.qiitausercontent.com/5279cca895067f01a8e0c2d16d75a39819e9d3e0/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f30353530636337652d383433352d633936622d613364312d6238373934656263323934382e706e67) 私はソースコードを編集して使いたいので（構成管理したい）ので、Arduino の libraries フォルダ以下に git clone します(以下はLinuxでの例です)。 ```plaintext $ cd ~/Arduino/libraries $ git clone https://github.com/blynkkk/blynk-library ``` blynk-libraryですが、とにかく設計/ソースコードが綺麗です。 色々なサンプルコードが用意されているのですが、ここを眺めてみるのが一番理解が深まると思います。 ## **Arduino_Ethernet スケッチサンプル** `Blynk`->`Boards_Ethernet`->`Arduino_Ethernet`のスケッチを開きます。 ~/Arduino/libraries/blynk-library/examples/Boards_Ethernet/Arduino_Ethernet/Arduino_Ethernet.ino プログラム中の"YourAuthToken"のところをメールで送られてきたTokenに置き換えます。 Arduino_Ethernet.ino ```plaintext // You should get Auth Token in the Blynk App. // Go to the Project Settings (nut icon). char auth[] = "YourAuthToken"; // <=== 置き換える ``` ビルドするにはEthernetライブラリが必要です。こちらを参考にしてください。 [SPRESENSEでArduino Ethernetライブラリを動かしてみた](https://qiita.com/baggio/items/650eeb2a80875afed07e) analogRead()のピン番号がArduino UNOベースになっているので、Spresense用に次のように変更します。 ```plaintext diff --git a/src/BlynkApiArduino.h b/src/BlynkApiArduino.h index f0b2f8d..8e1231b 100644 --- a/src/BlynkApiArduino.h +++ b/src/BlynkApiArduino.h @@ -156,7 +156,7 @@ void BlynkApi::processCmd(const void* buff, size_t len) BlynkParam rsp(mem, 0, sizeof(mem)); rsp.add("aw"); rsp.add(pin); - rsp.add(analogRead(pin)); + rsp.add(analogRead(A0 + pin - 14)); static_cast(this)->sendCmd(BLYNK_CMD_HARDWARE, 0, rsp.getBuffer(), rsp.getLength()-1); } break; ``` ビルドして動かしてみます。ネットワークへの接続に成功すると以下のようなログが表示されます。 [![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F89bd5dc7-73b8-7d86-57df-c217c0e4a490.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e7089e65afd2e4b114f243c2efed4ff1)](https://camo.qiitausercontent.com/d7fdba445b56c7c306f9b7136af4363bb63cb1cb/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f38396264356463372d373362382d376438362d353764662d6332313763306534613439302e706e67) ## **Blinkyアプリ** 動作確認用にシンプルなBlynkアプリとして、次のようなWidgetを使いました。 "GAUGE" Widgetを二つ用意して、A0 と A1 をモニタします。 - PIN: Analog A0 - PIN: Analog A1 "BUTTON" Widgetを二つ用意して、D2, D3 に接続します。 - PIN: Digital D2 - PIN: Digital D3 [![test1.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fd9c32027-4a12-1f4f-3a18-945704f1c14b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0282050edc36faaf24aadaf52c40c4fa)](https://camo.qiitausercontent.com/8bc13954482cc92ca57cd01e0e67cab39481d921/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f64396333323032372d346131322d316634662d336131382d3934353730346631633134622e706e67) アプリの右上の ▷ 再生ボタンを押すとデバイスに接続します。 [![test-exec.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2F1261af21-a15d-ad98-1331-f240c6e63fc6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=213901fa5dac01d544b45578f8e61788)](https://camo.qiitausercontent.com/e5d55ee26be2f4470f9600f0b156e8f604c2c59c/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f31323631616632312d613135642d616439382d313333312d6632343063366536336663362e706e67) [![connect.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F432852%2Fda526b08-1b4a-805f-d609-01abe6c9c3a9.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6b42643df36d14b46aeade6240e66ae6)](https://camo.qiitausercontent.com/21ab8fa02c352bb85278f5263350034943187220/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3433323835322f64613532366230382d316234612d383035662d643630392d3031616265366339633361392e6a706567) "GAUGE"にA0, A1 から読み取ったアナログ値が表示されており、リアルタイムに更新されます。 D2<->D3 間に LED をつないで、(D2,D3)=(OFF,ON) にすることで LED が点灯、(D2,D3)=(OFF,OFF) にして LED が消灯します。 ## **さいごに** Widgetは他にもたくさんあります。 "Music Player" Widgetを使って Spresense の Audio Playder につなげる、とか、"Map" Widget を使って Spresense の GPS 情報をスマホで見る、といったことが可能です（たぶん）。このあたりは後日チャレンジして機会があれば作品をアップしようと思います。 --- Source: https://maker.wiznet.io/scarlet/projects/blynk%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7spresense%E3%82%92%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/