電子工作知識ゼロのWeb系エンジニアがIoTに挑戦。
とりあえず、Espuruino（JavaScriptで動くマイコン）とESP WROOM-02（WiFiモジュール）を繋げて、外出先からセンサの情報を取得するようなことを目指しています。

今回はいよいよマイコンをインターネットに接続します！
これまでのセットアップや実験は、下記にまとめています。

Espruinoに接続してプログラムを実行・・・マイコン「Espruino」のセットアップとプログラミング実験
ESP-WROOM-02からWiFi接続してIoTなHello World・・・WiFiモジュール「ESP-WROOM-02」のインターネット接続テスト
【Espruino】マイコンとセンサを繋げて、人が近付いたら光る装置をJavaScriptプログラミング・・・マイコン「Espruino」をセンサーとLEDに繋げてプログラムで動かす実験

準備するもの

Espruino
- 日本ではELEFINEから通販で入手可能
ESP-WROOM-02ピッチ変換済みモジュール《シンプル版》
- スイッチサイエンスで買える
3.0V〜３．６V供給できる何かしらの電源
- （今回はUSBシリアル変換モジュール(3.3V/5.0V変換)とiPhoneのACアダプタ使用）
10kΩの抵抗（1/2Wでも1/4Wでも）×３
ブレッドボード
ジャンパワイヤ（オス-オス）
ピンヘッダ（オス-オス、オス-メス）
はんだごて
USBケーブル(A-マイクロB)

手順

配線

Espruinoにピンヘッダをはんだ付け
- 手前一列はブレッドボード固定用にオス-オスを下向きに付ける（最低限GNDについていれば良いけど、安定させるために今回はB8までつけました）
- 奥一列は直接ジャンパワイヤを挿せるようにオス-メスを上向きに付ける
  こんな感じー。汚いけど大丈夫。
ESP-WROOM-02にピンヘッダをはんだ付け
- もちろん、すでに付いていれば不要。オス-オスのピンヘッダを全部の穴につけます。
ブレッドボードにEspruinoとESP-WROOM-02を挿す（ピンが縦に並ぶように）
ジャンパワイヤで配線
- ESP-WROOM-02の「3V3」をブレッドボードの「＋」列に
- ESP-WROOM-02の「GND」をブレッドボードの「−」列に
- ESP-WROOM-02の「RST」をブレッドボードの10kΩ抵抗経由で「＋」列に
- ESP-WROOM-02の「EN」をブレッドボードの10kΩ抵抗経由で「＋」列に
- ESP-WROOM-02の「IO0」をブレッドボードの10kΩ抵抗経由で「＋」列に
- ESP-WROOM-02の「TXD」をEspruinoの「C11」列に
- ESP-WROOM-02の「RXD」をEspruinoの「C10」列に
- Espruinoの「GND」をブレッドボードの「−」列に
ブレッドボードに電源を接続
- USBシリアル変換ケーブルのVCCをブレッドボードの「＋」列に
- USBシリアル変換ケーブルのGNNをブレッドボードの「−」列に

全部つなぎました！妙に抵抗が多いのは、10kΩが手に入らなかったために20kΩを並列にしているため。10kΩなら、使うのは３つです。

注意したいのは、TXD、RXDの接続先はEspruio上のどの穴でも良いわけではないところ。
公式の「USART〜」「UART〜」がシリアル通信に対応している穴です（~~今回使っているC10とC11には「UART4」と書いていますがおそらくUSART4の誤り。~~ 訂正。USARTは非同期/同期に対応しており、USARTは非同期のみ対応しているようです）。「TX」と書かれている方にESP-WROOM-02のRXDを、「RX」と書かれている方にESP-WROOM-02のTXDを接続します。

表示用のhtmlを用意

dweet.ioを使用してメッセージを送信してみます。
まずは、表示用のhtmlを用意。
thingNameのところは、ユニークになりそうな適当な値にします。

espruinotest.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Espruino TEST</title>
<script src="http://dweet.io/client/dweet.io.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  $(function(){
    var thingName = "espruinotest_momoham_0820"; // ユニークになりそうなthingName
    dweetio.listen_for(thingName, function(dweet) {
      $('#dweet_val').text(dweet.content.val);
    });
  });
</script>
</head>
<body>
  <div id="dweet_val"></div>
</body>
</html>

htmlはブラウザで開いておきます。
この時点では真っ白。
公式を参考にしながら、コードを実行します。

Serial4.setup(115200, { rx: C11, tx : C10 });
var wifi = require("ESP8266WiFi_0v25").connect(Serial4, function() {
  wifi.reset(function(err) {
    if (err) throw err;
    console.log("Connecting to WiFi");
    wifi.connect("WiFiのSSID","WiFiのパスワード", function(err) {
      if (err) throw err;
      console.log("Connected");

      // dweet.io に文字列を送る
      var queryString = 'val=HelloWorld!';
    });
  });
});

function postData(queryString) {
      var options = {
        host: 'dweet.io', 
        path: '/dweet/for/espruinotest_momoham_0820', // htmlと同じthingName
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Content-Length': queryString.length
        }
      };
      var req = require("http").request(options, function(res) {
        console.log("Response: ",res);
        res.on('data', function(d) {
          console.log("--->"+d);
        });
      });
      req.write(queryString);
      req.end();
}

HelloWorld！が表示されました。
IoTへの第一歩を踏み出した感じです。
次回はいよいよ、センサとインターネットを繋いで本格IoT！

JavaScriptで動くマイコン「Espruino」を使ってIoTなHello World

準備するもの

手順

配線

表示用のhtmlを用意