はじめに

昔懐かしミニ四駆です。小学生の頃「ラジコンみたいに操縦出来たら」と思ったことがあります。最近「改造ミニ四駆製作キット [MKZ4]」という素晴らしいものを発見。これを使うと、ミニ四駆がスマホ（ブラウザ）から操作できるようになります。さらにMilkCocoaのようなバックエンドサービスと連携させるとインターネット経由でリアルタイムの操作が可能になります。

使ったもの

ワイルドミニ四駆

タミヤワイルドミニ四駆シリーズ No.07 キングキャブ Jr. 17007

出版社/メーカー: タミヤ(TAMIYA)
発売日: 2012/05/05
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

改造ミニ四駆製作キット [MKZ4] http://cerevo.shop-pro.jp/?pid=104131889

MKZ4用プログラム書き込みキット「MKZ4WK」 http://cerevo.shop-pro.jp/?pid=104131917

【Cerevo公式】徹底解説！MKZ4ガイドブック Kindle版 (とても詳しく書かれているので超おすすめです。)

【Cerevo公式】徹底解説！MKZ4ガイドブック

作者: 株式会社Cerevo
出版社/メーカー: 株式会社Cerevo
発売日: 2016/07/27
メディア: Kindle版
この商品を含むブログを見る

はんだごてセット

Zacro ダイヤル式電子はんだごてセットハンダゴテ温度調節可能(200?450℃) 5個交換コテ先付き 60W 110V

出版社/メーカー: Zacro
メディア: その他
この商品を含むブログを見る

マルチメーター

Crenova デジタルマルチメーター電圧・電流・周波数・抵抗・導通測定テスター

出版社/メーカー: Crenova
メディア: Automotive
この商品を含むブログを見る

全体イメージ

インターネット経由で MilkCocoa にデータを送信すると、ミニ四駆に搭載した無線LANモジュールに書き込んだプログラムが、それを検知してミニ四駆を動作させます。

f:id:kodamap:20161007000713p:plain

この仕組みの面白いところは操作デバイス(スマホ)とミニ四駆が互いにインターネットに接続して BaaS (MilkCocoa) を通して動作する部分です。スマホはミニ四駆と直接接続する必要はありません。インターネットに接続してさえいれば遠距離からでも操作が可能です。

ミニ四駆の組み立て

「【Cerevo公式】徹底解説！MKZ4ガイドブック」を参考に準備していきます。

難関

無線LANモジュール(ESP8266)のはんだ付けはとっても難しい・・。心が折れかける。 f:id:kodamap:20170222230413j:plain

チップ抵抗。すごく小さい。 f:id:kodamap:20170222230547j:plain

バックエンドサービスの準備（Milkcocoaでアプリ作成）

インターネット経由で操作するために、MilkCocoaでアプリを作成します。また、API Keyを生成して操作クライアント（デバイス）を限定します。

MilkCocoa(https://mlkcca.com/)

アプリ作成
データストア
APIKeyの作成
認証済みクライアント以外を接続不可にする

操作される側（ミニ四駆 + ESP2660) の準備

プログラムの書き込み Milkcocoa（バックエンドサービス）と連携するプログラムをESP2660に書き込みます。プログラムは、株式会社Cerevoの github リポジトリからダウンロードします。

git clone https://github.com/cerevo/MKZ4

milkcocoa_esp8266.ino

WLANの設定、MILKCOCOAの設定、API Keyなど設定します。

/************************* WiFi Access Point *********************************/
#define WLAN_SSID       "xxxxxxxxxxxx"        //SSID名
#define WLAN_PASS       "xxxxxxxxxxxx"    //SSID パスワード
/************************* Your Milkcocoa Setup *********************************/
#define MILKCOCOA_APP_ID      "xxxxxx"   //milkcocoa idを記載
#define MILKCOCOA_DATASTORE   "xxxx"     //milkcocoa data store 名を記載
//Milkcocoaで取得したAPI Key
Milkcocoa *milkcocoa = Milkcocoa::createWithApiKey(&client, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID, "API_Key", "API_Secret");

操作する側（スマホ、ブラウザ）の準備

Milkcocoaにデータを送信（push)するUIを準備します。

アプリ設定

js_func.js

Application 名 (xxxxxx部分）、API_Key、API_Secret　を設定します。

var milkcocoa = MilkCocoa.connectWithApiKey('xxxxxx.mlkcca.com', "API_Key", "API_Secret");

ボタンの準備

操作したボタンがわかるように、オリジナルの画像を少々加工します。

スマホでの画面（タッチすると色が変わるようにする。） f:id:kodamap:20170222231934j:plain

js_func.jsの変更

var command = {"f_left":1, "forward":2, "f_right": 3, "stop":0 , "b_left":7 , "back":8, "b_right":9};
var target = "none"
function send_data(n) {
  var searchvalue = n ;
  for (var key in command) {
    if (searchvalue == command[key]){
      send(n);
      document.getElementById(key).src = "./image/" + key + "2.png"; // ボタンを押したときの画像
    } else {
      document.getElementById(key).src = "./image/" + key + ".png"; // 元の画像
    }
  }
}

test1.htmlの変更

<!DOCTYPE html>
<html lang="ja">
    <head>
</script>
     <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
     <script type="text/javascript" src="./js_func.js"></script>
     <style>
      body {
      background: #319BE4;
      }
      </style>
   </head>
    <body>
        <form>
        <table border=0>
        <tr><td><img onclick="send_data(1)" src="./image/f_left.png" width="160" height="160" id="f_left" alt="f_left" /></td>
            <td><img onclick="send_data(2)" src="./image/forward.png" width="160" height="160" id="forward" alt="forward" /></td>
            <td><img onclick="send_data(3)" src="./image/f_right.png" width="160" height="160" id="f_right" alt="f_right" /></td>
        </tr>
        <tr><td></td>
            <td><img onclick="send_data(0)" src="./image/stop.png" width="160" height="160" id="stop" alt="stop" /></td>
            <td></td>
        </tr>
        <tr><td><img onclick="send_data(7)" src="./image/b_left.png" width="160" height="160" id="b_left" alt="b_left" /></td>
            <td><img onclick="send_data(8)" src="./image/back.png" width="160" height="160" id="back" alt="back" /></td>
            <td><img onclick="send_data(9)" src="./image/b_right.png" width="160" height="160" id="b_right" alt="b_right" /></td>
        </tr>
        </table>
        </form>
    </body>
</html>

完成

f:id:kodamap:20170222232504j:plain

kodamapのブログ

スマホでミニ四駆を動かす