LoginSignup
2

More than 3 years have passed since last update.

Nefry Cloud Appつくってみた

Last updated at Posted at 2019-12-08

こんにちは、わみです。

2年前につくったNefryクラウド(仮)のアップデートをしてみたので、記事をまとめてみようと思います。

なにを作ったか

こんな感じのコードでNefryを動かせるようにしました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nefry Cloud App</title>
    <script src="NefryCloudApp.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css" />
</head>
<body>
    <H1>Nefry Cloud App</H1>

    <button class="uk-button uk-button-default" id="red">LED Red</button>
    <button class="uk-button uk-button-default" id="blue">LED Blue</button>

    <script>
        let nefry = new NefryCloudApp("NefryCloud user","NefryCloud Key","Device ID");

        $("#red").on("click", function(){
            nefry.setLed(255,0,0);
        });

        $("#blue").on("click", function(){
            nefry.setLed(0,0,255);
        });
    </script>
</body>
</html>

どうしてつくったのか

Nefryを専門学校の授業で使用するにあたって授業の難易度的にC言語から始めるのは難しくそのつなぎとして始めるのがJavaScriptでできると非常に導入しやすい。

開発環境を整えなくても使えるのは非常に便利。

技術構成

Nefry <--> Nefry Cloud <--> JavaScript

基本的な構成はNefry Cloudの拡張になります。

Nefry Cloudの仕組みを拡張して、データにそれぞれのLEDの制御だったりを入れてやり取りするようにしています。

ハードウエア側はディスプレイにDeviceIDを表示するようにして、一意に扱えるようにしています。

まとめ

簡単にNefryCloudAppの紹介をしてみました。

もし使ってみたい方がいたら、私のTwitterにでもメッセージを送ってもらえれば、コードの本体を渡そうかと思いますので、ぜひ!

簡単にIoTの環境を作れるようになったのはいい世の中だなあと思います

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2