試してみる
実際にkonashi 2.0を動かしてみましょう。今回は、iPhoneとkonashi 2.0をBLEで通信し、iPhoneからkonashi 2.0のLEDを光らせてみます。
iOSアプリ「konashi.js」では「jsdo.it」というサービス上のコードを動かすことができます。jsdo.itにkonashi 2.0を制御するJavaScriptのコードを作成し、konashi.jsから実行する流れです。
手順は以下の流れで説明します。
- jsdo.itにコードを書く
- konashi.jsをインストールする
- BLEでiPhoneからLチカする
筆者の環境
- MacBook Pro（Retina 13-inch、Early 2015）
- OS X El Capitan（v10.11.6）
- iPhone 6S（iOS10.3.1）
用意するもの
- konashi 2.0
- 付属のコイン型リチウム電池（CR2032型）またはMicro USBケーブル
- jsdo.itアカウント
jsdo.itにコードを書く
jsdo.itは株式会社カヤックがリリースしたJavaScriptやCSSを実行できるWebサービスです。
ログイン後「Start coding」から新しいコードを作成します。アカウントをお持ちでない方はアカウントの作成から始めてください。
まずはHTMLに必要なボタンを作成します。「HTML」のタブを開き、以下のコードを貼り付けてください。
<header class="bar-title">
<h1 class="title">konashでLチカ</h1>
</header>
<div class="content">
<div class="element">
konashiを0.5秒間隔でLチカします
</div>
<a id="find" class="button-main button-block element">
konashiに接続
</a>
<a id="blink" class="button-main button-block element">
Lチカする！
</a>
<a id="stop" class="button-main button-block element">
Lチカをやめる
</a>
</div>
<!-- for konashijs -->
<script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script>
<!-- zepto -->
<script src="http://jsrun.it/assets/1/M/0/f/1M0fl"></script>
<!-- touch.js -->
<script src="http://jsrun.it/assets/g/s/1/M/gs1MI"></script>
<!-- ratchet -->
<link rel="stylesheet" href="http://jsrun.it/assets/h/F/P/P/hFPPa">
<script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script>
書き込んで保存すると右側のプレビューに反映されます。
HTML内でhttp://konashi.ux-xu.com/kjs/konashi-bridge.min.jsを読み込んでいます。このスクリプトでkonashi 2.0を制御する関数を呼び出すことができます。
続いて「JavaScript」のタブを選択し、右側の「JavaScript」となっているセレクトボックスを「ES6」に変更します。ここを指定しないと期待通りの挙動にならないので注意してください。
「ES6」のタブに変更されたことを確認し、以下のコードを貼り付けます。
const INTERVAL = 500;
let main;
let toggle = false;
const blink = () => {
if(toggle){
// LEDをoff->on
k.digitalWrite(k.PIO3, k.HIGH);
} else {
// LEDをon->off
k.digitalWrite(k.PIO3, k.LOW);
}
// 次の状態をセット
toggle = !toggle;
}
// konashiと接続したら
k.ready(function(){
k.pinMode(k.PIO3, k.OUTPUT);
});
//ボタン処理
$(function(){
$("#find").on("click", function(){
k.find();
});
$("#blink").on("click", function(){
main = setInterval(blink, INTERVAL);
});
$("#stop").on("click", function(){
clearInterval(main);
k.digitalWrite(k.PIO3, k.LOW);
});
});
ここではid=findをタップした時にfind()関数でBluetoothを探し、id=blinkをタップしたら0.5秒間隔でLEDがオンオフ、id=stopをタップで定期実行をやめLEDをオフする処理をしています。
最後に、ページが見やすくなるよう「CSS」に以下を追加しましょう。
.element {
margin: 10px;
}
「Finish Editing」をクリックしてコードの作成は完了です。
