この記事はobniz Advent Calendar 2018 19日目の記事です。
AzureのAppServiceを使ってobnizを動かしてみました！
・初めに
今年のアドベントカレンダーを書くに辺りQiita側に記事1本も上げてないのはどうなんだろうと思い、去年外部サイトに書いた記事をこちらに移植しました。なぜAzureなのかというとobniz公式さんのサイトにはAWSでのやり方は書いてあったのですが、調べてもAzureでやっている人が見つからなかったからなかったのと、VisualStudioという強力なIDEを使って楽々開発したかったからです。
またこの記事は前に自分が書いた記事をまとめて加工したものになります。本来obnizを使って別のことをやりたかったのですが、Azureを使ってやりたいという需要がもしあった時に参考にできるような記事が今のところ見つからないためこのテーマを選びました。
・自分に関しても少しだけ
元々マイコンに関しては遊びでArduinoを触っていただけでWeb系に関しては全く分からず、javascriptはHello world程度しか触ったことがないです。Node.jsが何かもまったくわからない＋またクラウドも全然わからない(笑)のため至らない点も多いで細かい点はご容赦願います。ですがそんな自分でも出来たので、そこまで難しくはないんじゃないかなと思います。
↓以下本文
※OSはWindows10、Visualstudioは2017のcommunityを使用しています。
まずAzureはMicrosoftがやっているクラウドサービスです。登録の仕方などはどこにでも載っていると思うので登録出来ている前提で始めていきます。この先選択を間違えると課金が発生してしまうこともあるのですべて自己責任でお願いします。
https://azure.microsoft.com/ja-jp/
1.まずポータル(トップページみたいなもの)にログインし、リソースの作成を選ぶとこんな画面が出てきます。この中からWebAppを選択してください。
2.次に出るのはこの画面です。
・アプリ名はてきとうな名前を付けましょう。
・サブスクリプションは適当なものを選択しましょう。(サブスクリプションについては絶対に他の人に伝わらないようにしてください。サブスクリプションの公開でググるとミスして公開しちゃった人が恐ろしい額の請求を受けた体験談が見られます。)
・リソースグループもてきとうで大丈夫です。
・OSと公開はデフォルトで。
・プランはfreeのものを選ぶとお金がかからないはずです。※はずです。場所はとりあえず日本のどこかにしておきましょう。
終わったら作成をクリックします。
3.あとはデプロイ?されるのを待つだけです。
この後の作業ではVisualStudioが必要になります。無料のやつをダウンロードしてください。
https://visualstudio.microsoft.com/ja/vs/
4.Visualstudioを開きましょう。初めの画面にある「新しいプロジェクトの作成」か左上のメニューのファイル→新規作成→プロジェクトを選択しましょう。
そうなると下のような画面が出るので左メニューにある「JavaScript」の「Node.js」を選択。
その中から「空のAzure Node.js Webアプリケーション」を選択。名前等はデフォルトでも構いません。出来たらOKを押しましょう。
5.とりあえずこんな感じの画面が出てくるのでデフォルトのままクラウドにあげてみましょう。
(画像のコードはデフォルトではないですが無視してください。)
右のメニューにあるプロジェクトを右クリックして、その中にある発行を選択してください。
(その前にビルドが必要かもしれないです。上のメニューバーのビルドからソリューションのビルドを行ってください。)
6.この画面が出てきます。
Microsoft Azure App Serviceを選択してください。
7.次はこの画面もしかしたらこの画面の前にサインイン画面になるかもしれないので、
その場合はサインインしてください。(Azure登録時にたぶんマイクロソフトを作成するのでそれを使用してください。)
サブスクリプション、表示はコンボボックスから選択できるやつから適当なものを選択しください・
その下の画面に作成したAppServiceの名前が出てくると思うので、選択しOKを押してください。
8.その次の画面。デフォルトでいいと思います。宛先URLが接続する際に必要になるURLです。
次へを選択しましょう。
9.次の画面です。このまま次へを選択(構成がビルド次第で変わるためReleaseでダメな場合はDebugを選択してくさい。)
10.次の画面。プレビューは名前の通りの機能です。試してもいいかもしれません。
ここで発行を押すとクラウドにUPされます。
宛先URLに書いてあったURLにアクセスするとHello Worldと書かれたページが出てくるはずです。
(多分発行したら勝手に出てきます。)
これでNode.jsをクラウド上で動かせたはずです。
長かったですが、ここまでがNode.jsをAzure上で動かすまでになります。ここからいよいよobnizの登場です！
まず作成したデフォルトのプロジェクトにnpmを追加します。
npmは自分もよくわかっていませんがライブラリみたいなものと認識しています。
obniz用のnpmがあるのでそれを取り込んでいきます。
↓実際のやり方
visual studioで前回のプロジェクトからソリューションエクスプローラーのプロジェクト下にnpmがあるので右クリックします。その中に「新しいnpmパッケージをインストールする」があるのでクリックします。
クリック後、検索窓が出てくるので「obniz」と入力します。
入力すると下記のような表示になります。「obniz」を選んで「パッケージのインストール」をクリック。あとはインストールが終わるのを待つだけです。
ここからようやくコードを書いていく作業に入ります。
プロジェクトがデフォルトのままなら右のソリューションエクスプローラーに
server.jsという名前のファイルがあります。
ダブルクリックして開いてください。
そこの元のコードを消して以下のコードをコピペしてください。
server.js
'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
var fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('./Page1.html', 'UTF-8', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
});
}).listen(port);
Node.jsを全く知らないためてきとうに調べて書いたコードですが、何となくいらない部分がある気がします。このコードはhtmlファイルを読み込む処理が書かれてるだけです。「Page1.html」というファイルが読み込むファイルです。次はこのhtmlファイルをプロジェクトに追加します。
下の画像にあるようにプロジェクトを右クリックして「追加」→「新しい項目」を選択します。
下の画像のような画面が表示されるのでHTMLファイルを「Page1.html」のまま追加します。
(下にスクロールしないとHTMLファイルが出ないかも)
右のソリューションエクスプローラーに「Page1.html」が追加されているのでダブルクリックして、
さっきと同じように元のコードを消して下記のコードをコピペしてください。
Page1.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
<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>
<script>
var obniz = new 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>
</body>
</html>
obnizを触ったことがある人なら誰でも見たことあるLチカのコードです。
ほぼチュートリアルのままです。(ボタンサイズだけ少し大きくしています。)
※「ここに番号」のところに自分のobnizの番号を入れてください。
htmlを使わずにNode.jsでLチカも頑張ればできそうだったんですが、めんどくさかったのでNode.jsでHTMLを読み込む方式にしました。(たぶん邪道)
出来たら(左上のコンボボックスがDebugになっている場合はReleseに変更してください)メニューバーのビルドからソリューションのビルドを選択して前と同じように発行からAzure上にデプロイするだけです。
前と同じURLにアクセスすると下の画像のような画面になるはずです。もちろんスマホからでもアクセスできます。(下記の画面はlocalで接続しています。)
ON、OFFを押すとLチカできるはずです。
これでobnizの公式ページ上からではなく、自分で建てたAzure上のApp Serviceを経由してobnizを操作することができるようになりました。
※試し終わったら下記の画像のようにAzureのポータルに入りましょう。
その中で左のメニューのApp Service→自分で作成したApp Serviceを選択！→この画面の上にある停止のところをクリックするとサービスを停止させることができます。この手順で何をしているかよくわからないと思った人はとりあえず手順に従ってサービスを停止させたほうがいいと思います。
obnizを動かすことはAWSや他のクラウドでも出来ると思いますが、自分はvisual studioから簡単にデプロイできるのが気に入りAzureを使いました。
とても長かったですが、VisualStudioが使えると開発が多少楽になると思います。
個人的にobnizは今までのマイコンボードとは違ったベクトルのマイコンボードでとても面白いと思うので盛り上がっていってほしいです！
今回やったことは基本的に下記のページとにらみ合いながらやりました。参考にしてみてください。https://docs.microsoft.com/ja-jp/azure/cloud-services/cloud-services-nodejs-develop-deploy-app