konashi.jsはjsdo.itと連動して使うことで、コミュニティが共有しているコードをForkして動作を確認しながら学習することができます。前回はまずはLチカ(LEDチカチカ)をForkして動かしました。次にLEDをコントロールしちゃおう☆をForkします。コードを編集して理解しながらタクトスイッチのON/OFFの状態を画面に表示するプログラムを書いてみます。
はじめての開発
jsdo.itのkonashiタグなどから参考にしたいリポジトリをさがしてForkします。今回はLEDをコントロールしちゃおう☆使わせていただきます。jsdo.itのエディタを使い、今回使わないコードの削除や編集していきます。
JavaScript
オリジナルのLEDをコントロールするコードを削除して、タクトスイッチだけ動作するコードにします。Zepto.js(jQuery互換)を使ったコードなので、だいたい何をしているか理解できると思います。イベントハンドラはJavaScrptによくある非同期処理で書いていきます。
今回は以下の4つのAPIにイベントハンドラを登録して処理を実装します。
iPhone周辺のkonashiを検索する
このイベントハンドラからkonashiと通信が可能になる
PIOの入力の状態が変化したら実行される
PIOの特定のピンの入力状態を取得する
(事前にpinModeやpinModeAllでピンのモードを入力にしておく)
// forked from monakaz's "LEDをコントロールしちゃおう☆" http://jsdo.it/monakaz/w1gz |
またk.showDebugLog();
をアンコメントするとkonashi.jsの左上にデバッグ用の領域が表示されます。k.log(value);
のようにしてデバッグしたい値を出力することができます。
HTML
HTMLファイルも今回利用しないLEDをコントロールするli
要素は削除します。
|
CSS
オリジナルではdisplay: none
の非表示にして、konashiに接続後に要素を表示しています。今回は最初からul
要素は表示します。id属性のスタイルも削除します。
.hello { |
テスト
コード検索
iPhoneからkonashi.jsアプリを起動します。アプリ内のブラウザからjsdo.itに作成したリポジトリを検索して表示します。「タクトスイッチを押してみる」をタップします。
コードのページ
コードのページの左側プレビューをタップします。
konashiの検索
「Find konashi」からkohashiを検索します。「Select Module」に表示されるkonashiタップします。
タクトスイッチを押す
konashiの本体にあるタクトスイッチを押すと、konashi.jsアプリのブラウザに表示されたテキストが「S1:OFF」から「S1:ON」に変更されます。