JavaScriptによるハードウェアハッキング

公開: 2022-03-10
簡単な要約↬モノインターネット(IoT)により、インターネットはブラウザーを超えて到達できるようになりました。 電子的にネットワーク化されたデバイスで構成されたこれらの「モノ」は、キャプチャしたデータをエコシステムにフィードバックするセンサーを介して、物理的な世界と相互作用することができます。 現在、これらのデバイスは主に特定の目的を念頭に置いて設計された製品であり、典型的な例は活動を追跡するフィットネスバンドです。 収集された情報をアプリに報告します。アプリはデータを分析し、ユーザーをさらにプッシュするための提案と動機付けを提供できます。

モノのインターネット(IoT)により、インターネットはブラウザーを超えて到達できるようになりました。 電子的にネットワーク化されたデバイスで構成されたこれらの「モノ」は、キャプチャしたデータをエコシステムにフィードバックするセンサーを介して、物理的な世界と相互作用することができます。

現在、これらのデバイスは主に特定の目的を念頭に置いて設計された製品であり、典型的な例は活動を追跡するフィットネスバンドです。 収集された情報をアプリに報告します。アプリはデータを分析し、ユーザーをさらにプッシュするための提案と動機付けを提供できます。

SmashingMagの詳細

  • 適切なプロトタイピングツールの選択
  • IoTエクスペリエンスのプロトタイプを作成する方法:ハードウェアの構築
  • プロトタイプIoTエクスペリエンス:ソフトウェアの構成
  • TAPとAdobeFireworksを使用したiOSプロトタイピング

IoTデバイスを構築する場合、タスクは通常2つの役割に分けられます。ハードウェアエンジニアが物理デバイスを作成し、開発者がエコシステムを作成します。 ただし、これは必ずしも必要ではありません。 JavaScriptの場合、その同形性により、ハードウェアを含む複数のプラットフォームで1つの言語を使用できます。

ジャンプした後もっと! 以下を読み続けてください↓

これは、モノのインターネットへの(かなり不機嫌な)追加である、話す植物であるジョージです。 彼のセンサーは、土壌の水分レベル、周囲温度、光強度など、周囲のデータを収集します。 彼の8×8LEDの顔で、彼は自分の不快感を視覚化し、HTML5のWeb Speech APIを使用して、あなたのありふれた質問に皮肉を込めて答えることができます。 ジョージは、ハードウェアと融合したWebテクノロジーを使用して、新しく魅力的なエクスペリエンスを提供する方法の優れた例です。

この記事では、 JavaScriptを使用して独自のIoTデバイスの構築を開始する方法の基本について説明します。

入門

ハードウェアのプロトタイプとインターネットに接続されたデバイスの構築は、従来、電気技師だけが試みたものでした。 これは、Arduino UNO、Particle(以前のSpark Core)、RaspberryPiなどの開発ボードの登場によって変わりました。

開発ボードは、コンピューター上のマザーボードを模倣します。 USBや電源などの入力ソケットと出力ソケット、および外部コンポーネントを追加できるピンボードがあります。 マイクロコントローラチップはプロセッサとして機能し、アプリケーションのコードを実行し、入力と出力と通信します。 このチップは比較的低速で、センサーデータの読み取りなどの単純なタスクを実行するように特別に設計されています。 ただし、切り替え機能も備えているため、ライト、モーター、その他多くのコンポーネントの電源を変更できます。

Prototype development boards
すべての異なる形状とサイズの開発ボードの小さな選択。 (拡大版を表示)

メイカー運動はここ数年で勢いを増しており、IoTデバイスの構築は大きなビジネスになっています。 これにより開発ボードの市場が拡大し、それぞれ独自の機能を備えた幅広い製品が提供されるようになりました。 競争により、多くの人がワイヤレス通信(Wi-FiおよびBluetoothチップを使用)、サイズ、バッテリー寿命などの独自のセールスポイントに注目するようになりました。 独自のデバイスを設計するときは、必要な物理属性を考慮する必要があります。 同様に、ボード上で実行できるプログラミング言語など、ソフトウェアも決定に影響します。 徹底的に調査し、ニーズに最適なボードを選択してください。

ここで紹介する例では、ArduinoUNOを使用しています。 この特定の開発ボードは、非常に使いやすいため、おそらく市場で最も人気があります。 始めたばかりの場合は、Arduinoが提供するものに沿ったスターターキットを購入することをお勧めします。 選択した開発ボードと互換性のあるコンポーネントと、通常は開始に役立つ多くのドキュメントが付属しています。

電気と回路の基礎

名前が示すように、電子回路は円形です。 電子は、回路の周りの電源(たとえば、バッテリー)の正の端から同じ電源の負の端に流れます。

電気回路の内部で起こっていることの物理学を理解する最も簡単な方法は、それを水タンクシステムと比較することです。 パイプ内の水は、ワイヤー内の電子と同じように流れます。 これらの電子は、回路のコンポーネントに電力を供給する電流を形成するものです。

Water tank system.
水タンクシステムは、電気回路と同じ特性を持っています。 (拡大版を表示)

タンクに蓄えられた水の量が蛇口の圧力に影響を与えるのと同じように、電源に存在する電子が多いほど、充電されます。 これが電圧です。 電圧が高いほど、負極と正極の間に存在する電気圧力が高くなり、回路の周りの電子の速度を制御します。

パイプを流れる水の量と同じように、回路の電流はワイヤーを流れる電子の数を指します。 各コンポーネントがそのタスクを実行するのに十分な量を受信して​​いることを確認する必要があるため、これは回路を構築するときに重要です。 電流はアンペアまたはアンペア(A)で測定され、使用された電子の量に関する情報を提供します。 たとえば、モーターが100ミリアンペア(mA)を消費し、バッテリーの容量が1時間あたり1000ミリアンペア(mAh)の場合、1回の充電でモーターを10時間稼働させることができます。

LED alight.
電子がLEDを流れると、LEDが点灯します。 (拡大版を表示)

回路内のコンポーネントが回路内にあるよりも実行に必要な電流が少ない場合、それらは過剰な電力を受け取り、破損する可能性があります。 この状況では、これを防ぐために抵抗を導入する必要があります。 私たちの水のアナロジーを使用すると、抵抗が電子の流れを制限するのと同じように、パイプの直径はパイプを流れることができる水の量を制限します。

抵抗器は、電流を減らすために使用されるコンポーネントです。 それらは、抵抗器の外側の色付きの帯で示されているように、適用する抵抗器の量が異なります。 異なる色は異なる数を表し、これらのバンドを足し合わせると、その特定の抵抗器の抵抗が明らかになります。 (計算機が利用可能です!)値が高いほど、回路に適用される抵抗が大きくなり、コンポーネントに損傷を与える可能性が低くなります。 オームの法則(抵抗は電圧を電流で割った値(またはR = V / I )に等しい)を使用すると、回路に必要な正確な抵抗を計算できます。

こんにちは世界

基本をカバーしたので、簡単な例を見て、すべてがどのように組み合わされているかを視覚化できます。 LEDを点滅させるというハードウェア開発の「HelloWorld」に取り組みます。

前述のように、複数の開発ボードのいずれかを使用できます。 この例では、ArduinoUNOを使用します。 Mac OS Xを実行しているMacも使用しますが、すべての例はWindowsでも実行する必要があります。

ハードウェア

必要になるだろう:

  • 1×ArduinoUNO
  • 1×無はんだブレッドボード
  • 1×標準LED
  • 1×220オーム抵抗
  • 2×ジャンパーケーブル
Hello World components
このプロジェクトを構築するために必要なすべてのコンポーネント。 (拡大版を表示)

これには、まだ言及されていないいくつかのコンポーネントが含まれます。

  • ジャンパーケーブルは、回路でワイヤーが使用されるのと同じように、電子の流れを方向付けるために使用されます。
  • LEDは、本質的に小さな電球である発光ダイオードの略です。 長い脚と短い脚が1つずつあります。 長い方のレッグは回路の正の流れが入る場所を示し、短い方のレッグは負の出力を示します。 これらを間違えると、LEDは点灯しません。
  • はんだ不要のブレッドボード(穴の開いた白いブロック)は、はんだ付けを必要とせずに回路を作成できるプロトタイピングツールであり、回路の簡単な変更と修正、およびコンポーネントの再利用を可能にします。 これらにはさまざまな形やサイズがありますが、すべて同じ役割を果たします。

下の画像は電流の流れを示しています。 次の例のLEDと抵抗のように、コンポーネントを使用してセクションをリンクできます。 大きなブレッドボードでは、外側の垂直線は通常、正と負のジャンパーケーブルを接続して、設計している回路を分離するために使用されます。

Solderless breadboard
電流の流れを示す無はんだブレッドボード。 (拡大版を表示)

以下の回路図に詳細が示されているように、コンポーネントを挿入します—ピンをピンに一致させます。 これにより、次のセクションに進むときに作業が簡単になります。

Blinking LED schematic
「HelloWorld」演習の概略図。 (拡大版を表示)

回路を開始するには、Arduinoのピン10からジャンパー線を接続します。 これは、Arduinoが回路と話し始めるポイントです。 Arduinoの右側から任意の番号のピンを使用できます—コードが正しいピンを参照していることを確認してください。

LEDに理想的な量の電流が流れるようにするには、抵抗が必要です。 LEDとは異なり、回路にどのように挿入するかは問題ではありません。

ピン10が電流を許可しているかどうか(コードによって制御されているかどうか)によって、LEDがオンかオフかが決まります。

次に、別のジャンパー線がLEDのマイナス側に接続し、アースに戻って回路を完成させます。 単純!

完了すると、回路は次の画像のようになります。 これをUSB経由でコンピュータに接続します。 次のタスクは、JavaScriptで動作するようにArduinoを設定することです。

Hello World circuit in real life
これは、構築時に回路がどのように見えるかを示しています。 (拡大版を表示)

ソフトウェアを作成する前に、JavaScriptで動作するようにArduinoに正しいファームウェアがあることを確認する必要があります。 ファームウェアは基本的にコンピューターのAPIを公開しているため、コードはUSBポートを介してボードと対話できます。

Arduino Webサイトから統合開発環境(IDE)をダウンロードしてインストールします。 次にIDEを開き、ArduinoがUSB経由で接続されていることを確認します。

何かを実行する前に、正しいUSBポートがあることも確認する必要があります。 「ツール」→「ポート」に移動します。 名前は異なる場合があるため、Mac OS Xでは名前に「tty」と「usb」が含まれ、Windowsでは「COM」が含まれるポートを選択することをお勧めします。

完了したら、ファームウェアをアップロードできます。 「ファイル」→「例」→「Firmata」→「StandardFirmata」を選択します。 完了したら、「ファイル」→「Macにアップロード」(または「スケッチ」→「Windowsにアップロード」)を選択します。

Arduino IDE screenshot
適切なファームウェアを見つけるのは難しい場合があります。 これはあなたがそれを見つける場所です。 (拡大版を表示)

それでは、JavaScriptを作成しましょう。

ソフトウェア

JavaScriptでLEDを制御するには、Node.js用に構築されたJohnny-Fiveというライブラリを使用する必要があります。 基本的に、これはBocoupのチームによって構築されたライブラリであり、構築ハードウェアをWebコミュニティにとってよりアクセスしやすくします。 Node.jsとは何か、またはその使用方法がわからない場合は、ElliotBonnevilleがこのWebサイトですばらしい紹介をしています。

この例のコアはArduinoを使用しているため、このライブラリを使用すると、マシンをUSBポート経由でハードウェアに接続できます。

開始するには、Node.jsをインストールする必要があります。 そうでない場合は、Node.jsWebサイトからダウンロードできます。 これにより、Node Package Manager(npm)もインストールされます。これを使用して、アプリケーションのすべての依存関係をインストールします。 この例は、ターミナルをコマンドラインツールとして使用してMacで実行されます。 ただし、Node.jsはマルチプラットフォームであるため、これはどのマシンでも機能します。

この記事で取り上げられているすべてのコードは、GitHubで入手できます。

このプロジェクトに必要なすべての依存関係をインストールするには、以下のコードから取得できるpackage.jsonファイルを作成する必要があります。 これは、例を実行するために必要なライブラリのショッピングリストですinstallコマンドが初期化されると、npmが停止し、すべてを実行するために必要なすべての要素を取得します。 このファイルはルートフォルダにある必要があります。

 { "name": "Hardware-Hacking-with-JavaScript", "description": "Smashing Magazine - Hardware Hacking with JavaScript", "version": "0.0.1", "homepage": "https://www.james-miller.co.uk/", "keywords": ["arduino","tutorial","hardware"], "author": { "name":"James Miller & Mate Marschalko" }, "repository": { "type": "git", "url": "git://github.com/jimhunty/Hardware-Hacking-with-JavaScript.git" }, "bugs": "https://github.com/jimhunty/Hardware-Hacking-with-JavaScript/issues", "license": "MIT", "dependencies": { "johnny-five": "^0.9.13" } }

コマンドラインツールで、 package.jsonファイルを使用してこの例で作成したのと同じフォルダーにいることを確認します。 次に、 npm installを実行します。 これらのパッケージをインストールする権限がない場合は、代わりにsudo npm installを使用してください。

次に、例を実行するためのアプリケーションコードを作成する必要があります。 このファイルblink-led.jsという名前を付けました。 コメントは何が起こっているかを詳しく説明しています。

 // Johnny-Five is our JavaScript framework for accessing Arduino. var jfive = require("johnny-five"); var board, led; board = new jfive.Board(); // Similar to jQuery, we wait for the board to be ready. board.on("ready", function() { // 10 represents the pin number that the LED is plugged into. led = new jfive.Led(10) // The LED blinks (ie turns on and off) every 1000 milliseconds. led.blink(1000); });

最初にライブラリがロードされ、次に変数が初期化されます。 コンストラクターを使用して新しいBoardインスタンスが作成され、 on ready関数によってボードがウォームアップされ、命令を受け取る準備が整います。 LEDに接続するジャンパーケーブルをピン10に接続したため、LED変数で定義する必要ledあります。 次に、 blink方式を使用して、1秒のフェーズでライトのオンとオフを切り替えます。

これで、このライトショーを開始するために必要なものがすべて揃ったので、音楽を盛り上げましょう。 Arduinoが接続され、回路がすべてセットアップされていることを確認してください。 コマンドラインで、 node blink-led.jsを実行し、ファイル名をコードと呼んでいるものに置き換えます。 これで、ライトが点滅するはずです。

コードを変更して、ライトの点滅を速くしたり遅くしたりしてみてください。 毎回、ターミナルでコードを再起動する必要があります。 led.pulse()を試してみてください; これにより、トランジションなしで切り替えるのではなく、LEDがフェードインおよびフェードアウトします。

ホームモニタリング

すでにたくさんのことを学びました! これで、この知識を活用して、NestやHiveなどの市販製品と同様の簡単な住宅監視システムを構築できます。

今回は、Node.jsサーバーからArduinoに接続された温度センサーを使用します。 温度はセンサーによって読み取られ、単純なWebページにデータを表示するブラウザーに送られます。

How the interface will look
ページの背景色は温度を反映しています。 (拡大版を表示)

ハードウェア

必要になるだろう:

  • 1×ArduinoUNO
  • 1×無はんだブレッドボード
  • 1×TMP36温度センサー
  • 3×ジャンパーケーブル

この例で選択された温度センサーは、ほとんどのスターターキットで利用可能であり、個別に購入すると非常に安価です。

Home-monitoring project components
ホームモニタリングプロジェクトを構築するために必要なコンポーネント。 (拡大版を表示)

前のLED点滅の例では、コンピューターで実行されているNode.jsサーバーとArduinoの間の接続を設定しました。 この接続は、Arduinoに接続されたセンサーからデータを読み取るためにも使用できます。

Home-monitoring circuit schematic
家庭用監視回路の概略図。 (拡大版を表示)

上は完成した回路です。 このピンをピンに合わせてみてください。

温度センサーの取り扱いには注意してください。脚が混同しやすいためです。 コンポーネントの平らな面が前面にあり、センサーを配線するときに手前を向く必要があります。 3本の脚はそれぞれ目的が異なるため、配線を間違えると回路が機能しなくなります。

アナログ入力ピンは、ボードの左側に沿って並んだ5本のピンです。 Arduinoには、入力と出力の両方のアナログピンとデジタルピンの両方があります。 デジタルとは、オンとオフ(または電気信号と電気信号なし)の2つの状態しかないことを意味し、2つの状態のみを解釈するボタンやその他のバイナリスイッチに最適です。 一方、アナログ入力は値の範囲を表すことができ、Arduinoのアナログ入力ピンは0〜5ボルトの任意の電圧を測定できます(そしてその読み取り値の10ビット値を生成します)。 センサーからの温度測定値は、気温に比例する可変抵抗測定値で返されます。

センサー中央の信号ピンをアナログ入力A0に接続します。 左のピンを5Vピン(正)に接続し、右のピンをアース(負)に接続して回路を完成させます。

Home-monitoring circuit in real life
完成したホームモニタリング回路。 (拡大版を表示)

これで、回路は上の図のようになります。 次に、温度センサーを読み取るための新しいファイルを作成する必要があります。 このファイルは、前の例と同じ方法で開始され、Johnny-Fiveライブラリをロードし、新しいボードインスタンスを初期化してon readyイベントリスナーを追加します。

 var jfive = require("johnny-five"); board = new jfive.Board(); board.on("ready", function() { // We create a new sensor instance and define the sensor type and the pin it's connected to. var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); // We add an event listener to the sensor and handle the incoming data. tempSensor.on("data", function() { // The data object also has a fahrenheit property, if that's what we are after. console.log(this.celsius + "°C"); }); });

このコードをtemperature.jsとして保存し、 node temperature.jsと入力してコンソールから実行します。

コードではconsole.logが使用されているため、読み取り値はデバッグのためにターミナルに出力されます。

Terminal showing temperature data
温度データは非常に速く印刷され始めるはずです。 (拡大版を表示)

サーバーとソケット

これで、Node.jsで動作する温度計ができました。 この単純な例だけでも、このデータの処理と使用に使用できるさまざまなNode.jsモジュールをすべて考慮すると、さまざまな可能性が広がります。 これをGoogleスプレッドシートに保存したり、ツイートしたり、書き込んだり、WebSocketを使用してこのデータをブラウザにリアルタイムでストリーミングしたりすることもできます。これが次に行うことです。

Flow diagram showing data movement
各デバイスからのデータの流れ。 (拡大版を表示)

ブラウザとの接続を確立し、センサーデータをストリーミングするには、Node.js HTTPサーバーを起動してHTMLドキュメントを提供してから、それらの間のWebSocket接続を開く必要があります。 Node.jsでのWebサーバーの起動は、Expressライブラリを使用すると比較的簡単です。 まず、ターミナルからインストールします。

 npm install --save express

インストールされると、次のコード行でサーバーがインスタンス化されます。

 // Load libraries and then initialize the server. var app = require('express')(); var http = require('http').Server(app); // When the user requests the root of the page (/), we respond with index.html. app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); // We listen for connections on port 3000. http.listen(3000, function(){ console.log('listening on *:3000'); });

これをserver.jsファイルとして保存します。

このサーバーコードでは、最初の2行で必要なライブラリが読み込まれ、HTTPサーバーインスタンスが作成されます。 次に、単純なルーティングロジックは、ユーザーがルート( / )を要求すると、プロジェクトのフォルダーからindex.htmlファイルを提供します。 最後に、ポート3000は接続をリッスンします。

これをテストするには、プロジェクトのフォルダーのルートに標準のindex.htmlファイルを作成します。 コマンドラインで、プロジェクトのフォルダーに移動し、 node server.jsと入力します。 次に、ブラウザでhttps://localhost:3000またはマシンのIPアドレスとポート(たとえば、 https://190.140.0.00:3000 ://190.140.0.00:3000)を入力すると、標準のindex.htmlページが表示されます。 これは、サーバーがすべてセットアップされていることを意味します。

これは、Apacheサーバーを構成するよりも間違いなく簡単でした。

このコードをtemperature.jsファイルとマージする前に、WebSocket接続をセットアップします。

WebSocketを使用すると、ブラウザーとサーバー間の通信セッションを開くことができます。 このAPIを使用すると、応答をポーリングすることなく、双方向のリアルタイムメッセージを送信し、イベント駆動型の応答を受信できます。 Socket.IOは、この接続を確立して処理するために使用するNode.jsモジュールです。 ExpressとJohnny-Fiveをインストールしたのと同じようにSocket.IOをインストールします。

 npm install --save socket.io

package.jsonファイルが依存関係の下でExpressとSocket.IOでどのように更新されているかに注目してください。 つまり、自分のマシンからアプリケーションを実行したい人は誰でもnpm installを実行するだけで、ロードしたすべてのモジュール依存関係が一度にインストールされます。 良い! これで、WebSocket機能を動作中のserver.jsコードに追加できます。 以下は完全な例です。

 var app = require('express')(); var http = require('http').Server(app); // Load the Socket.IO library. var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); // Establish the WebSocket connection with the browser. io.on('connection', function(socket){ console.log('a user connected'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

まず、Socket.IOがロードされ、次にon connection時イベントリスナーが作成されます。 これは、ユーザーがindex.htmlファイルをロードしたときにトリガーされます。

index.htmlページで、サーバーと通信するためにSocket.IOクライアント側ライブラリを初期化する必要があります。 このためのHTMLファイルを準備するには、下のbodyタグの直前に次のコードを追加します。

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); </script>

これで接続が設定され、ローカルホストリンクを介してインデックスページをロードすると、コマンドラインに「ユーザーが接続しました」というメッセージが表示されます。

これで、 socket.emit()関数を使用して、サーバーからブラウザーにメッセージを送信できます。 これを行うには、 server.jsの前の関数を置き換えます。

 io.on('connection', function(socket){ console.log('a user connected'); socket.emit('Server message', “Hello from the server!”); });

メッセージを受信するには、 index.htmlを変更する必要があります。

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); socket.on('Server message', function (message) { console.log(message); }); </script>

すべてを正しく実行すると、「サーバーからこんにちは」と表示されます。 ブラウザのコンソールにメッセージが表示されます。 おめでとう! これは、Node.jsHTTPサーバーとブラウザーの間にリアルタイムのWebSocket接続をセットアップしたことを意味します。

これは、このプロジェクトだけでなく、非常に便利です。 WebSocket接続を使用して、複数のブラウザー間で通信し、チャットアプリケーション、マルチプレーヤーゲームなどを作成できます。

WebSockets enabled screenshot
WebSocketが有効になりました! これで接続されました。 (拡大版を表示)

次に、Arduinoとの通信を処理するtemperature.jsファイルを、ブラウザーへの接続を担当する新しいWebSocketサーバーコードとマージします。

これにはserver.jsを拡張する必要があります:

 var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var jfive = require("johnny-five"); var board = new jfive.Board(); var board, socket, connected = false; app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(s){ console.log('A user has connected'); // Tracking connection connected = true; // Saving this for the board on ready callback function socket = s; }); board.on("ready", function() { console.log('board has connected'); var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); tempSensor.on("data", function() { // We send the temperature when the browser is connected. if(connected) socket.emit('Temperature reading', this.celsius); }); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

ここでは、 temperature.jsから、Johnny-Fiveをロードしてボードを初期化する行と、ボード全体board on ready機能でコピーしただけです。

また、2つの新しい変数を追加しました。1つはWebSocket接続を追跡するためのもので、もう1つは他の関数にアクセスできるようにソケットインスタンスを格納するためのものです。この場合、 board on ready関数はそれを使用してメッセージを送受信します。

ここで、 index.htmlファイルを更新して、ソケット接続のTemperature readingを介して送信されるデータを処理する必要があります。 以下のコードは、 Server messageハンドラーが以前に存在していたスクリプト要素内のHTMLドキュメントに追加する必要があります。

 socket.on('Temperature reading', function (message) { console.log(message); });

インターフェース

最後に行うことは、HTMLとCSSの数行をindex.htmlに追加して、ユーザーフレンドリーな方法で温度の読み取り値を表示することです。 また、背景色を更新して、温度に応じて青(コールド)とオレンジ(ホット)の間で変化させます。 HTMLは非常に単純です。数値を保持するためのh1要素は1つだけです。

以下をbodyに追加する必要があります。

 <h1 class="temperature">0C</h1>

大きくて薄い書体は、数字で非常にうまく機能するはずです。 GoogleFontsライブラリのフリーフォントであるLatoをお試しください。 ドキュメントのheadセクションにこれをロードします。

 <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

この例では、スタイリングは最小限です。 唯一注意が必要なのは、 temperatureラベルの読み込み方法です。 content CSSプロパティでクラス名を取得し、それを:before疑似要素に追加します。

 body { background-color: hsl(0, 60%, 65%); transition: background-color 1s; } h1 { font-family: 'Lato', sans-serif; font-size: 120px; font-weight: 100; color: white; text-align: center; margin: 60px; } h1:before{ content: attr(class) ":"; font-size: 22px; position: relative; top: -69px; left: 0; text-transform: uppercase; }
Browser showing temperature data
これで、温度データをリアルタイムでインターフェースに送信しています。 プロジェクトが完了しました! (拡大版を表示)

これはもうかなり見えます!

最後に、JavaScriptを数行追加して、WebSocketメッセージを受信したときに値を更新し、背景色を変更します。

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(), temperature = document.querySelector(".temperature"); socket.on('Temperature reading', function(message) { // Rounding down the decimal values and adding C temperature.innerHTML = parseInt(message) + "C"; // Calculating the hue for the background color and changing it var hue = 200 - (parseInt(message) * 5); document.body.style.backgroundColor = "hsl(" + hue + ", 60%, 65%)"; }); </script>

完了です。 Arduinoの温度測定値がブラウザにリアルタイムで表示されるようになりました。

結論

独自のハードウェアを構築する可能性は気が遠くなるかもしれませんが、うまくいけば、これら2つの例を実行した後、すでに可能性について考え、次のプロジェクトを計画しています。 多くのコンポーネントはJohnny-Fiveライブラリと互換性があります。つまり、唯一の制限はあなたの想像力です。

資力

  • 「JavaScriptを使用したハードウェアハッキング」、GitHubのJamesMillerとMateMarschalko
    このプロジェクトに必要なすべてのコード
  • Johnny-Five、Rick Waldron、GitHub
    「JavaScriptロボティクスプログラミングフレームワーク」
  • Web on Devices、Mate Marschalko
    JavaScriptやその他のWebテクノロジーを使用した電子機器のハッキングに関するWebサイト
  • 作る
    メーカー向けのMakerMediaのオンラインマガジンで、新しいプロジェクトやヒントを提供しています
  • Node.js用Arduino実験者ガイド
    Johnny-Fiveを使用したその他のJavaScriptおよびArduinoプロジェクト