2017年3月10日金曜日

konashi を JavaScript で制御してみた

概要

konashi を自分で書いた JavaScript で制御してみました

環境

  • konashi rev 1.0.3
  • iPhone 6 ( iOS 9.2.1 )
  • konashi.js (2.2.0)
  • jsdo.it (2016/02/10 時点)

事前準備

前回 の記事を参考に konashi を iPhone から制御できるようにしてください
PC に接続して iPhone アプリをインストールするだけなので簡単です
今回はこの環境を使って独自の JavaScript ファイルをデバッグして開発を進める方法を紹介します

jsdo.it の登録

konashi を制御する JavaScript は jsdo.it を使うので、まず登録しましょう
登録は各種 SNS or OpenID を使います
自分は Github のアカウントを使いました
もちろん自分のサーバでホスティングすることも可能ですが、konashi.js のアプリが jsdo.it に特化したアプリになっているので jsdo.it を使うのが無難かと思います

code の作成

jsdo.it でコーディングするためにまず code を作成します

jsdo.it にログインしたら左上の「Start coding」をクリックします
するとブラウザ上のエディタが起動するので、ここで konashi を制御するスクリプトを作成していきます
jsdoit_start_code.png

code を作成すると Hello World のコードが書いてあります
jsdo.it では既にいろいろなサンプルコードが公開されています
これらを fork して code を作成しても問題ありません
自分の場合は前回 使用した LED を点滅させるサンプルコードを fork して始めました
jsdoit_editor_console.png

サンプルの JavaScript ファイルの作成

code が作成できたら konashi を制御するための JavaScript ファイルを作成していきましょう
まず今回自分が作成した JavaScript ファイルの全容です
UI の部分もコーティングしたので HTML と CSS も紹介します

  • HTML
<div class="bar-title">
</div>
<div class="bar-header-secondary">
    <div class="my-title">
        konashi Sample List
    </div>
</div>
<div class="content">
    <a id="find" class="button-positive button-block">Search konashi</a>
    <a id="startBlinkLed2" class="button-negative button-block">Start Blink Led2</a>
</div>
<div class="my-bar-footer">
    <div id="message">Here is debug message</div>
</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>
  • JavaScript
// konashi と接続します
$(function(){
    $("#find").on("tap", function(){
        k.find();
    });
});
k.ready(function(){ 
    setUp();
    $("#message").html("<b>Success Connected konashi</b>");
});
function setUp() {
    k.pinMode(k.LED2, k.OUTPUT);
}

// LED2 を点滅させます
$(function(){
    $("#startBlinkLed2").on("tap", function(){
        startBlinkLed2();
    });
});
function startBlinkLed2(){
    var toggle = false;
    setInterval(function(){
        if(toggle){
            // LEDをON
            k.digitalWrite(k.LED2, k.HIGH);
        } else {
            // LEDをOFF
            k.digitalWrite(k.LED2, k.LOW);
        }
        // 次の状態をセット
        toggle = !toggle;
    }, 500);
    $("#message").html("<b>Maybe turning on LED No.2</b>");
}
  • CSS
.my-title {
    padding: 7px;
    text-align: center;
}

.my-bar-footer {
    bottom: 40px;
}

これを jsdo.it のブラウザ上のエディタにそれぞれに貼り付ければ OK です
貼り付けたあとはそれぞれのコードを Save してください

コーディングはすべて jsdo.it 上で行いました
エディタがブラウザだといつものキーバインド操作ができないという方もいると思うのでそういう方は一旦自分のエディタに貼り付けてからコーディングを始めるといいと思います

説明

全体的なコーディングの流れは

  1. HTML と CSS でボタン等のコンポーネントを設置
  2. それらコンポーネントに対するイベントの登録を JavaScript で行う
  3. イベントが発生した際の処理を JavaScript で実装する

という感じかなと思います
一般的な WebUI を開発する方法となんら変わりません
以下でそれぞれのファイルで何をしているか詳細に説明します

HTML と CSS

まず、HTML ファイル内で konashi を扱うためのライブラリを読み込みます

<script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script>

今回自分がコーディングした konashi 用の JavaScript ファイルは jQuery ベース (正確には zepto.js ベース) で作成しました
なので、それらのライブラリも読み込んでいます

<script src="http://jsrun.it/assets/1/M/0/f/1M0fl"></script>
<script src="http://jsrun.it/assets/g/s/1/M/gs1MI"></script>

あとはデザインですが、ratchet がデフォルトで使われていたのでそのまま使用しました
他に使用したいモバイル用のデザインテンプレート的なのがあればそれに差し替えても問題ないです

今回は ratchet で定義されている class たちを使って UI を作成しました
足りない部分やカスタマイズしたい部分は独自の CSS を定義すれば OK です

JavaScript

JavaScript で konashi に対する処理やボタンが押された際のイベントの登録処理をします
今回紹介しているコードで実装している機能は大きく以下の 2 つです

  • アドバタイズしている konashi を見つけて接続する
  • LED の 2 番を点滅させる

両者とも実装な大きな流れは同じなので接続を例にして簡単に説明します
まず HTML で作成したボタン ( 正確には a タグ ) の id="find" が押されたときのイベントを登録します

$(function(){
    $("#find").on("tap", function(){
        k.find();
    });
});

id="find" のボタンがタップされると上記 function がコールされて中で k.find() メソッドをコールしています
k.find() メソッドが konashi を探している本体の部分でアドバタイズしている konashi を見つけると表示してくれます

そして、見つけた konashi に接続すると以下のイベントが発生します

k.ready(function(){ 
    setUp();
    $("#message").html("<b>Success Connected konashi</b>");
});

k.ready()は iPhone が 無事 konashi に接続できたときに呼ばれるメソッドで実装しておくと接続時に勝手にコールされます
今回は setUp() メソッドをコールして HTML の id="message" というデバッグ文を表示するための div タグにメッセージを表示する処理を書いています
setUp() はその直後に実装しており、k.pinMode(k.LED2, k.OUTPUT); をコールして LED を使う準備だけをしています ( 実際にはまだ点滅させません )

という感じの実装の流れになります
もうひとつのボタンは準備できた LED No2 を光らせるためのボタンですが、同じようにボタンのイベントを登録してイベントが発生したら k.digitalWrite(k.LED2, k.HIGH); で LED を点滅させる処理を実装しています

動作確認

各種コードを jsdo.it に貼り付けたら作成した自分のコードの動作確認をしてみましょう
動作確認はブラウザではなく iPhone を使って行います
konashi.js を起動しましょう

起動したら User タグから自分のアカウントを検索してみましょう
見つかったらアカウントをタップすると登録している codes の一覧が表示されるので作成したコードをタップします
jsdoit_run_mycode.png

そして左の三角ボタンを押すと自分が作成したコードを実行することができます
jsdoit_show_mycode.png

今回は起動すると konashi に接続するためのボタンと LED No2 を光らせる 2 つのボタンが出てくると思います
まず、接続してから LED を光らせてください
たぶん問題なく動作すると思います

最後に

jsdo.it を使って konashi を制御できる JavaScript ファイルを開発する一連の流れを紹介しました
ボタンを押してから konashi を制御するまでの実装方法がわかったかと思います

LED を制御する系のサンプルはごろごろ転がっているので次は PIO を制御して他のデバイスとの連携を試してみたいと思っています
その場合は konashi を制御する API もいろいろ知らないとダメなので興味ある方は参考サイトにある API リファレンスを眺めるといいと思います

参考サイト

時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)