paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

JavaScriptでIoT開発!ブラウザ上の無料開発環境で「micro:bit」を使ったガジェットを自作してみよう

f:id:paiza:20170830115749j:plain
どうも、まさとらん(@0310lan)です!

今回は、「micro:bit」を使ってJavaScriptによるIoT開発に挑戦してみたいと思います!

ブラウザさえあれば、無料の開発エディタからプログラミングすることが可能なうえ、エミュレータも搭載されているので「micro:bit」を持っていない人でも楽しめるようになっています。

記事後半で4つのサンプル作りを解説しているので、ぜひみなさんも自作ガジェット作りを楽しんでみましょう!

mciro:bit

f:id:paiza:20170830115854j:plain

■「micro:bit」とは?

もともとはイギリスの学校教育向けとして誕生した「micro:bit」ですが、その扱いの簡単さから現在ではさまざまな国の授業で活用されているマイコンボードです。

クレジットカードよりも小さい「5cm × 4cm」の極小ボードに、多彩な機能がいっぱい詰まっているのが特徴です!
f:id:paiza:20170830115911j:plain


電子パーツを買い揃えなくても、これだけの部品が最初から搭載されています!
f:id:paiza:20170830115921j:plain
「LED」は「5 × 5」のマトリックス状になっており、ディスプレイの代わりとしてデジタルの文字情報をココに表示できます。

「電子コンパス」や「加速度センサー」も搭載されているので、「方角」を取得したり「傾き」を検知することも可能です。

また、「BLE (Bluetooth® Low Energy)」も使えるので、例えばスマホや他の対応機器とワイヤレスで連携するような使い方も考えられるでしょう。


2017年8月現在、「スイッチサイエンス」から2160円で購入できるようになっています。
(売り切れの場合は「入荷通知」を受け取るようにしておきましょう…)

■開発エディタの使い方

「micro:bit」の大きな特徴として、ブラウザさえあれば必要な開発環境がすべて無料で揃う点が挙げられます。

「micro:bit」を持っていない人も含めて、以下のリンクから誰でも利用可能です!

micro:bit エディタ

f:id:paiza:20170830120233j:plain
面倒なユーザー登録なども一切不要なので、思いついたらすぐ開発に取りかかれます!


開発言語はJavaScriptと、Scratchのようなブロックを組み立てるタイプの2種類を1クリックで切替可能です!
f:id:paiza:20170830120249j:plain
ブロックで組み立てたあとに、JavaScriptに切り替えればコードに変換されて表示されるので便利です。

そのため、最初は分かりやすいブロックを使ってロジックを組み立てながら、JavaScriptに切り替えてどのようなコードになっているかを確認するといいでしょう。


あらかじめ必要なブロックがたくさん用意されているので、大抵の場合は困ることがないと思います。
f:id:paiza:20170830120306j:plain
画面左にある「micro:bit」のエミュレータが優秀なので、コードが上手く書けているかをセンサー系も含めて事前にチェックが可能なのはうれしいところ…。


プログラムが完成したら、画面下の「ダウンロード」ボタンをクリックしてファイルを取得しましょう。
f:id:paiza:20170830120320j:plain


「micro:bit」とPCをUSBで接続すると、USBドライブのような感じで認識されます。

そのため、ダウンロードしたファイルを「MICROBIT」ドライブにドラッグ&ドロップするだけでOK!
f:id:paiza:20170830120347j:plain
あとは、自動的に「micro:bit」へ転送されてすぐに利用できるようになります。

このように、プログラムの作成から転送までをブラウザ上のエディタで完結でき、誰でも簡単に扱えるのが大きな魅力といえるでしょう!

■「LED」を使ったサンプル例

ここからは、「micro:bit」を使った初心者向けの簡単なサンプルを作ってみましょう!

まずは、最も簡単なLEDを使った文字情報を表示する例です。

JavaScriptから「micro:bit」の基本的な機能にアクセスするには「basic」オブジェクトを使うのですが、文字を表示するには「showString()」を使います。

basic.showString( "hello microbit" )


上記の例だと、「hello microbit」という文字列がLED部に横スクロールしながら次のように表示されます。

「console.log()」と同じような感覚で使えるので非常に簡単ですね。


ちなみに、「5 × 5」のLEDは自分でON / OFFの位置を操作することも可能です!
f:id:paiza:20170830130609j:plain
そのため、英数字以外にも記号や図形・グラフなど、さまざまな表示に活用できるのでとても便利です。

■「ボタン」を使ったサンプル例

次に、「ボタン」を使って簡単なストップウォッチを作ってみましょう!

「micro:bit」には2つのボタンが搭載されているので、「ボタンA」を押すとスタートして「ボタンB」を押したらストップして秒数が表示されるようにしたいと思います。
f:id:paiza:20170830130639j:plain


「micro:bit」では、ボタンやセンサーなど入力系の取得には「input」オブジェクトを使います。

「ボタンA / B」が押された時の処理は次のようになります!

input.onButtonPressed(Button.A, () => {


    //ボタンAが押された時の処理


})


input.onButtonPressed(Button.B, () => {


    //ボタンBが押された時の処理


})

「onButtonPressed()」の引数に「Button.A」「Button.B」のどちらかを指定するだけなので直感的ですね。


さらに、「micro:bit」では「runningTime()」を使うことで稼働時間を取得できるので、これをストップウォッチのカウントアップに利用してみましょう!

let start = 0;


input.onButtonPressed(Button.A, () => {


    start = input.runningTime();  //稼働時間を取得


});

「input.runningTime()」で稼働時間を取得できるので、これを変数「start」に代入しておきます。


あとは、「ボタンB」を押した時の稼働時間から変数「start」を引き算するだけで良いですよね。

let sec = 0;


input.onButtonPressed(Button.B, () => {


    sec = input.runningTime() - start;
    basic.showNumber( sec / 1000 );  //


});

引き算した稼働時間を変数「sec」に代入しているのですが、これはミリ秒になっているので1000で割ってあげれば「秒」が表示できます。


実際に試してみると次のようになります!

ちなみに、「ボタンB」だけを押していけばラップタイムも見れます!

■「加速度センサー」を使ったサンプル例

今度は、「加速度センサー」を使ったサンプルを作ってみましょう!

「micro:bit」では、加速度センサーの値を求めるのはとても簡単で、「acceleration()」を使うと「X, Y, Z」方向をそれぞれ取得できます。

let acc =  input.acceleration( Dimension.X );

上記のように「Dimension.X」とすればX軸の加速度を取得できます。


そして、簡単にグラフを表示できる「plotBarGraph()」が用意されているので、これを組み合わせるだけで可視化することができるわけです!

let acc = 0;


basic.forever(() => {


    acc = input.acceleration( Dimension.X );
    led.plotBarGraph( acc, 1023 );


})


「basic.forever()」は処理をループさせるという意味なので、上記のように記述すれば次のように加速度センサーの値をずっと取得してくれるようになります。

先ほどの「ボタン」と組み合わせて、別方向の加速度も同時に取得すると面白いでしょう。

■「電子コンパス」を使ったサンプル例

最後に、「電子コンパス」を使って簡単な方位磁石を作ってみましょう!

「micro:bit」には地球の磁場を検出できるセンサーが搭載されているので、方角を0〜360°の角度で認識できるようになっています。


この角度に合わせて「東西南北」が分かるわけです!
f:id:paiza:20170830130832j:plain


電子コンパスを使った角度(方角)の値を取得するには「compassHeading()」を使えばOKです!

let deg = input.compassHeading();


あとは、この値を使って「東西南北」を次のように条件分岐させれば良いわけです!

let deg = 0;


input.onButtonPressed(Button.A, () => {
    deg = input.compassHeading();


    if (deg > 315 || deg <= 45) {


        basic.showString("N");  // 北


    }
    if (deg > 45 && deg <= 135) {


        basic.showString("E");  // 東


    }
    if (deg > 135 && deg <= 225) {


        basic.showString("S");  // 南


    }
    if (deg > 225 && deg <= 315) {


        basic.showString("W");  // 西


    }
});


実際に使ってみたのがコチラ!

山登りやハイキングなどで実際に使ってみたくなりますね。

■JavaScript講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また、現在paizaラーニングではRubyとRailsの有料講座を期間限定で無料公開しているので、興味のある方はぜひごらんください。
無料公開の期間など、詳しくはこちら↓
paiza.hatenablog.com

■まとめ

今回は、「micro:bit」の基本的な部分を駆け足でご紹介しましたが、これだけでもアイデア次第でさまざまなプロダクトが作れると思います。

また、別売りですが「乾電池」や「ボタン電池」などで動作させることも可能なので、自分で開発したプログラムを外出先で簡単に活用できるのも魅力的でしょう。

IoT開発に興味ある人や、プログラミング初心者の方にもオススメなので、ぜひ自分だけのオリジナルガジェットを開発してみてはいかがでしょうか!

<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.