CodeZine(コードジン)

特集ページ一覧

iPhoneからBLEで簡単制御! konashi 2.0とJavaScriptで始める電子工作

IoT Starter Studio 第15回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

試してみる

 実際に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から実行する流れです。

 手順は以下の流れで説明します。

  1. jsdo.itにコードを書く
  2. konashi.jsをインストールする
  3. 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」をクリックしてコードの作成は完了です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:IoT Starter Studio

もっと読む

著者プロフィール

  • ちゃんとく(dotstudio株式会社)(チャントク)

     大学までは文系で法学を学んでいたが「モノを作れる人」に憧れて知識ゼロからエンジニアに転身。本業ではPHPでWebサーバサイド開発を担う傍ら、テクニカルライターとしてdotstudioに参加している。  Node.jsユーザグループ内の女性コミュニティ「Node Girls」を主催。趣味の電子工作...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5