前説

Arduino Yunとは

https://www.switch-science.com/catalog/2210/
wifiが付いてるArduino
IoTのプロトタイプ作成時に活躍していくと思います
BLEはGenuinoなどがあります
（https://www.switch-science.com/catalog/2670/）
Genuinoに関しては，後日投稿予定

Arduino Yunの設定方法は以下も参考にしていただければ
http://qiita.com/tkyko13/items/495b4b1bdc2d4eb00d0a

Ajaxとは

ページごと読み込まずに通信できる（簡単すぎる．．．）
HTMLは静的なので通信するってことはページをもう一回全部読み込むってことをしなきゃだが，javascriptを利用してページ遷移せずとも，なんかのユーザーアクションに合わせてなどで，通信して情報を表示できるようにするもの（長すぎる．．．）
今回はjavascriptのjqueryを利用して書いています〜

JSONPとは

フォーマットを見ればjsonになんか余計なもんがくっついてて，ルールが増えてるやつ
でもなんかクロスドメインと連携するときはなんかできるらしい
なので，これを今回は使ってます
今回詰まったところはこのクロスドメインとjsでのjsonpの扱い方でした

Arduino側コード

ArduinoのサンプルにあるBrigeをちょっと書き換えます
（書き換えるところだけ書きます）
最初あたりの行に書いてある"callback"は共通のキーワードなので覚えておきましょう

BrigeJson.ino


// (省略)

// Send feedback to client
  client.println(F("callback(")); //jsonp用
  client.print(F("{\"pin\":\""));
  client.print(pin);
  client.print(F("\", "));
  client.print(F("\"value\":\""));
  client.print(value);
  client.print(F("\"})"));

html,javascript側コード

jsonpCallbackの値は先程の共通キーワードです

index.html


<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        console.log("ready");

        var url = "http://arduino.local/arduino/";
        var ledReadUrl = url + "digital/13/";
        var ledOnUrl = url + "digital/13/1/";
        var ledOffUrl = url + "digital/13/0/";

        $.ajax({
            url: ledReadUrl,
            //username: "root", //yun側でパスワード解除したのでいらない
            //password: "arduino",
            dataType : 'jsonp',
            jsonpCallback : 'callback', //jsonp用
            success: function(json){
                console.log(json);
            }
        });

    });
</script>
</head>
<body>
    <input type="number" name="led">

</body>
</html>

Arduino YunにAjaxで通信できたぁ〜

前説

Arduino Yunとは

Ajaxとは

JSONPとは

Arduino側コード

html,javascript側コード