Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

obnizAdvent Calendar 2019

Day 14
@MonoShobel

obnizをC#を使って動かすための第1歩(Blazor編)

Last updated at Posted at 2019-12-14

今年のテーマ

元々去年せっかくAzureを使ったし今年はCognitive Serviceを使ってobnizで何かをしようとしてました。 そして最終的にCognitive Serviceの前にBlazorを使ってJSを慣れべく使わないでロジックをC#でなんとか書きたいと足掻いた結果になります。

問題点と考えたこと

１.そもそもCognitive Serviceを使ってなにをするかのアイディアが全く浮かばなかった。

２.自分がWed系の人ではないのでNode.jsとJavascriptまたはそのフレームワークをスラスラ使えない。

まず１点目について。obnizのネットにつながっていて、センサー・アクチュエータの操作がJSで出来てブラウザからの操作・可視化が簡単にできるという利点をうまく活かしたアイディアに苦戦しました。色々浮かんではそれobnizじゃなくてraspberry piでいいじゃんという状況になり中々いいアイデアが最後まで・・・。

2点目についてはやっぱり本職ではないのでそんなにガリガリかけないよなという思いが強く、何とか自分が得意なフィールドに落としてこられないだろうかと考え始めました。
そんな中全然関係ないところで知ったBlazorというフレームワーク？を使うとJS的な部分をC#に置き換えられるらしく、これ使えるんじゃないと思ったのが投稿1週間前だったのでもうこれで行こうと思い今回のテーマとしました。

でもそもそもobnizってweb系の人がマイコンを触りやすいようにJSとかWeb系の技術を使えるのが売りの一つって昔見たような気がするのでやることは逆行している気も・・・。

ここから本題です。

Blazorのプロジェクト作成

まず環境は OS:Windows10 開発環境:Visual Studio2019 です。

Visual Studioの画面を開くとまずこの画面になると思います。
この中から右下の新しいプロジェクトの作成をクリックします。
1_LI.jpg

次の画面ではBlazorアプリを探しだして選択してください。
右上のフィルターでWebにするとすぐ見つかります。
2.png

次の画面ではプロジェクトの作成になります。適当なプロジェクトの名にして右下の作成ボタンを押下します。
3.png

次の画面でも作成をそのまま押下します。
4.png

プロジェクトが作成されました。
5.png

obnizのnpmの取り込み

初めここで時間がかかりました。Blazorのプロジェクトにどうやってnpmを取り込むのか。

まずソリューションエクスプローラー(右側のやつ)からプロジェクト(自分が名付けた名前になっていると思います)を右クリックで選択し「追加」→「新しい項目を選択します」6.png

次の画面でnpm構成ファイル(下にスクロールすると出てくる)を選択してデフォルトの名前のままで右下の追加を押下してください。
9.png

最初の画面に戻って右のソリューションエクスプローラーに先程の名前のファイル(package.json)があるのでクリックして開きます。下記のコードをdevDependencies内に張り付けてください。(スクショの通りになるはず)

"obniz": "^3.0.0-beta.0"
10.png

これで準備OKです。

Obzinを操作するためのページ作成

ソリューションエクスプローラー(右側のやつ)からPageフォルダーを右クリックし、「追加」→「新しい項目」を選択します
11.png

次の画面でRazorコンポーネントを選択し、名前を「Obniz_Component.razor」にして右下の追加をクリックします。
7.png

プロジェクトにファイルが追加されます。
8.png

Obzinを操作するためのコードを書いていく

Obniz_Component.razor内のコードを全部消してから下記のコードをコピペします。
このコードは実際にobnizを操作するページのコードになります。

頭の「@page」にページ名的なものを書きます。
@inject IJSRuntime JsRuntime;はJSのコードを読み込むためのメソッドを呼ぶための宣言みたいなものです。
あとは単純なHTMLのコードです。少し異なるのは@obniz_funcの部分ですね。これは「@code」の中のC#のメソッドを呼び出しています。
「@code」の中はC#のコードが書かれてます。中のメソッドはJSの関数を呼ぶものです。

@page "/obniz_component"

@inject IJSRuntime JsRuntime;
<head>
    <style>
        #on {
            padding: 35px;
        }

        #off {
            padding: 35px;
        }
    </style>
</head>
<body>
    <div id="obniz-debug"></div>
    <h1>LED Switch</h1>
    <button id="on">ON</button>
    <button id="off">OFF</button><br />
    <button @onclick="@obniz_func">接続</button><br />
</body>

@code{
    private void obniz_func()
    {
        JsRuntime.InvokeVoidAsync("obniz_led");
    }
}
12.png

次は「_Host.cshtml」を右のソリューションエクスプローラーから選択してファイルを開きます。
17行目に下記のコードをコピペします。「ここにobnizの番号を入力」のところに番号を入れておくとスムーズにobnizにアクセスできます。
そのままでもあとで入力することになるので大丈夫です。
下記のコードは単純にobnizでLチカするときのコードそのままですね。

    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@latest/obniz.js"></script>

    <script>
        function obniz_led() {
            var obniz = new Obniz("ここにobnizの番号を入力");
            obniz.onconnect = async function () {
                var led = obniz.wired("LED", { anode: 0, cathode: 1 });
                $("#on").on("click", function () {
                    led.on();
                });
                $("#off").on("click", function () {
                    led.off();
                });
            };
        }
    </script>
13.png

次はSharedフォルダの中から「NavMenu.razor」のファイルを開いて27行目に下記のコードをコピペします。
このコードはobnizのページにアクセスするタブを追加するコードです。

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="obniz_component">
                <span class="oi oi-list-rich" aria-hidden="true"></span> obniz_component
            </NavLink>
        </li>
14.png

これで動かせるはずなので画面中央上の付近の「IIS Express」を押下して実行します。
ブラウザーが立ち上がったら右のタブからobniz_componentを選択すると下のスクショの画面が出てくるはずです。
接続を押すとobnizにつながります。
15.png

あとはLEDの0番ピンにLEDのアノード、1番ピンにLEDのカソードを接続し、ブラウザーのONを押下するとLEDが付きます。
P_20191213_005807.jpg

あとがき

結局javascriptでobnizの制御コード書いてC#のコードでそれを呼び出してるだけじゃんと自分でも思ってますが、工夫すればちゃんとC#で書けるはずなのでこの記事を書いてる奴の問題です。(俺はここまでだ・・・。先に行け。) 少なくともフロント側をもうちょっとC#で書きたかったんですが、テーマ変更に伴う時間の関係でここまででした。 むしろ今回みたいにLチカするわけでなくobnizで大きなシステムを作ってみたいというときに使えると思います。Visual StudioなのでAzreuに簡単にデプロイできるし、C#で書いていたCognitive Service等既存のC#資産も利用できます。javascritpはよくわかららないけどC#なら書けるという がobnizをもっと触ってくれることを願います。個人的にはそのうちLチカ以外のこともしてみたいと思います。

雑な文章ですが最後まで読んでいただきありがとうございました。

10
0
0

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
Sign upLogin
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?