★【 My Biz Blog 】★

興味のあるビジネス情報を伝えていきます♪
(IoT,Azure,Windows 10, etc...)

Azure(Web Apps)でNode-RED(再チャレンジ)

2016-10-27 00:58:13 | Azure
去年の記事で、AzureのApp Service(Web Apps)でNode-REDをデプロイする(そして失敗する)話を書きましたが、
ローカル(Windows PC)にNodeの環境を作ったこともあり、再度デプロイにチャレンジ。

今回はAzure App Service での Node.js Web アプリの使用を参考に、
ローカルに作ったNode-REDをAzureのWeb Appsにデプロイする方法でチャレンジ。
※Azure CLIのインストールが必要です。


1. Node-RED日本ユーザ会の記事を参考に、まずはNode-RED最新版のZIPファイルを取得し、ローカルフォルダに展開
2. コマンドプロンプトを起動し、カレントディレクトリを展開先にする。
3. 以下のコマンドを実行
  npm install --production
4. Azure App Service での Node.js Web アプリの使用
  「単純な Node.js Web アプリの作成とデプロイ」8項以降に従って、コマンド実行
  git add .
  git commit -m "{your commit message}"
  git push azure master

Azureへのログイン処理やデプロイ先のリージョンの選択、デプロイの際の認証処理など行いますが、
途中でエラーが・・・。
デプロイ自体は完了するので、以下のコマンドを実行しサイトを確認すると、Node-REDが起動していることがわかります。
  azure site browse

ただ、以前の記事「AzureでNode-RED」と同じ現象が出ているので、
HTTPSの対応がいるのかな・・・。


エラー内容の解析とか課題は山盛りあるけど、
Azureの仮想マシンじゃなくてPaaSで動かせそうなことが分かったのはいいことかな。
⇒PaaSの方がやれることは制限されるけど、管理が楽だし。





Azure IoT Hubと接続するアプリを作ってみる(6)

2016-10-23 22:50:15 | IoT,M2M
前回の記事では、Androidエミュレータの設定まで行いました。
今回は、ビルドしたアプリをエミュレータ上で実行させます。

VSCodeの左側にあるデバッグアイコンをクリックします。
上部に表示されたリストボックスで、「Run Android on emulator」を選択します。


続いて、上部にあるデバッグ実行のアイコンをクリックします。
そうすると、デバッグコンソールにメッセージが表示され始めます。


こんな画面やコンソールが起動します。



しばらく待つと、Androidエミュレータが起動してきます。



さらにしばらく待つと、エミュレータにアプリがデプロイされ、起動します。
⇒何も改造していないので、テンプレートのアプリのままですが・・・。



※Androidエミュレータが起動してこない場合。
 VSCodeが管理者権限で起動しているか確認してください。


VSCode側のデバッグ出力には、以下のように表示されていると思います。




Azure IoT Hubと接続するアプリを作ってみる(5)

2016-10-21 23:22:23 | IoT,M2M
前回の記事では、プロジェクトの生成とビルドまで行いました。
今回は、Androidエミュレータの設定を行います。

スタートメニューの「Android SDK Tools」にある「SDK Manager」を管理者権限で立ち上げます。
⇒アイコンを右クリックして、メニューの「その他」⇒「管理者として実行」をクリックします。


様々なバージョン向けのツールが表示されているかと思いますが、
まずはターゲットとするバージョンのSystem Imageを選択し、「Install ...」ボタンをクリックします。
ここでは、Android 6.0用の「Intel x86 Atom_64 System Image」を選択しました(起動速度等の関係で)。



以下のような画面が表示されるので、「Accept License」を選択したのち、「Install」ボタンをクリックしてください。
自動的にインストールが実行されます。



次に、ハードウェアアクセラレータをインストールします(x86系のSystem Imageの実行に必要な模様)。
SDK Managerのツリーの下のほうに、「Intel x86 Emulator Accelerator(HAXM installer)」を選択し、「Install ...」ボタンをクリックします。
上記のように、また画面が表示されるので、「Accept License」を選択して「Install」ボタンをクリックしてください。


上記の手順でInstallerはインストールされますが、実際のツールはインストールされないようなので、
以下のフォルダを開いてインストーラー(intelhaxm-android.exe)を実行します。




インストールが完了したら、次にAVDを作成します。
スタートメニューの「Android SDK Tools」にある「AVD Manager」を管理者権限で立ち上げます。
まだ一つもVirtual Deviceが生成されていないはずです。「Create」ボタンをクリックして、Virtual Deviceを生成します。
以下のようなダイアログが表示されるので、適宜入力してOKをクリックしてください。



以上でAndroid Emulatorの設定は完了です。

Azure IoT Hubと接続するアプリを作ってみる(4)

2016-10-19 01:21:22 | IoT,M2M
前回の記事では、環境変数の設定等まで行いました。
今回からは、Cordovaアプリのプロジェクトを作成し、ビルドまで行います。

まず、適当な作業用フォルダを作成します。
(例えば、C:\work\CordovaApps)


そして、コマンドプロンプト(またはターミナル)を起動してください。
以下のようなコマンドを実行し、カレントディレクトリを上記のフォルダにします。

>cd C:\work\CordovaApps


続いて、以下のようなコマンドを実行し、プロジェクトを作成します。
>cordova create (プロジェクトフォルダ名) (パッケージ名) (プロジェクト名)

cordova createはCordovaアプリの新規プロジェクトを作成するコマンドです。
パッケージ名はAndroid版アプリに必要です(Javaのパッケージ命名規則に従う必要があります)。
プロジェクト用のフォルダ名をapp_001、パッケージ名をcom.yossihard.TestApp001、プロジェクト名をTestApp001とすると、
コマンドは以下のようになります。
>cordova create app_001 com.yossi.TestApp001 TestApp001


上記のコマンドが終わったら、試しにdirコマンドを実行し、
指定したフォルダ(app_001)が作成されていることを確認してください。
そして、カレントフォルダをこのフォルダに設定します。
>cd app_001


続いて、各種ターゲットデバイス用のファイルをプロジェクトに追加します。
■Android用ファイルの追加
>cordova platform add android

■iPhone/iPad(iOS)用ファイルの追加
>cordova platform add iOS

■Windows用ファイルの追加
>cordova platform add windows

プロジェクトの作成は以上で終わりです。
続いて、アプリをビルドします。
エクスプローラで上記のプロジェクト用フォルダを選択し、
右クリックメニューから「Open with Code」を選択してください。
VSCodeが起動し、下図のような画面が表示されます。


この状態で、キーボードの「F6」を押すと、ビルドが開始されます。
以下のような表示が出れば、ビルド完了です。




Azure IoT Hubと接続するアプリを作ってみる(3)

2016-10-18 21:53:50 | IoT,M2M
前回の記事では、Visual Studio Codeのインストールを行いました。
今回は、Visual Studio Codeの設定、環境変数の設定まで行います。

まず、Cordova Tools Extension のインストールを行います。
Visual Studio Codeを起動し、左側の四角いアイコンをクリックします。
検索枠を一旦クリアし、cordovaと入力すると、下に「Cordova Tools」が表示されるので、
「インストール」をクリックします。


インストールが完了すると、下記のような表示に変わるので、「有効」をクリックします。


以下のようなダイアログが表示されるので、OKをクリックして下さい。



これでCordova Tools Extensionのインストールは完了です。
続いて、環境変数の設定を行います。
システムのプロパティを開きます。
以下は、システムのプロパティの開き方の一例。

スタートボタン(画面左下端にあるWindowsボタン)を右クリック。
以下のようなメニューが表示されるので、「システム」を選択してください。


以下のような画面が表示されるので、左側にある「システムの詳細設定」をクリック。


以下のようなダイアログが表示されるので、ダイアログ下部にある「環境変数」をクリック


上部の各ユーザの環境変数設定グループに新規追加します。
「新規」ボタンをクリックしてください。


新しいユーザー変数として、ANDROID_HOMEを追加します。
変数値にAndroid用SDKのインストールフォルダを指定し、「OK」ボタンをクリックして下さい。


次にPATH変数に、値(Android SDKのツールのディレクトリパス)を追加します
上部の各ユーザの環境変数設定グループのリストで「Path」を選択し、「編集」をクリックしてください。


下記のような画面が表示されるので、「新規」をクリックしてください。
リストに以下の二つのパスを登録します。
 ・C:\Program Files (x86)\Android\android-sdk\platform-tools
 ・C:\Program Files (x86)\Android\android-sdk\tools


OKボタンをクリックし、ダイアログを閉じてください。
VSCodeやコマンドプロンプトを立ち上げていたら、一旦閉じてください。


Azure IoT Hubと接続するアプリを作ってみる(2)

2016-10-16 10:40:52 | IoT,M2M
前回の記事では、Cordovaのビルド環境構築のため、VS2015をインストールしました。
今回はVisual Studio Codeの環境構築。


まずは、以下のページから、Visual Studio Codeのインストーラーをダウンロードして実行
Download Visual Studio Code

あとはウィザードに従って選択するだけ。
特に設定を変更する必要もないと思います。

















起動するとこんな感じ。



Azure IoT Hubと接続するアプリを作ってみる(1)

2016-10-16 10:39:18 | IoT,M2M

今回は開発環境を構築します。
Windows 10マシンで、Visual Studio Codeでの開発とします。

Visual Studio Codeを使ってCordovaアプリを開発するには、
ビルド環境を別途準備する必要があります。
Windows上での開発の場合、Visual Studio 2015を利用すると、
簡単にCordovaビルド環境が構築できます。

VS2015とVSCodeの二つを入れなくても、VS2015だけでCordovaアプリ開発はできます。
ただ、VSCodeはMacやLinuxでも利用できるため、VSCodeで開発するようにしておけば、いろんな環境でコーディングできるようになるというわけですか。


開発環境構築の流れは、
MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発
を参考にしました。



まず、以下のページから、Visual Studio 2015 Communityのインストーラーをダウンロードして実行
Visual Studio のダウンロード
Visual Studio 2015のインストール、何回目だろう・・・(;^_^A

インストーラ―が起動すると以下のような画面が表示されるので、「Custom」を選んで「Next」をクリック


「Universal Windows App Development Tools」と「HTML/JavaScript(Apache Cordova)Update 10」を追加でチェックして、「Next」をクリック
Cordovaの項目はCross Platform Mobile Developmentツリー内にあります。


ここから先は、ウィザードに沿ってクリックするだけ。
「Setup requires up 37 GB・・・」だそうで、ストレージは結構食いますね・・・。




インストールが完了したら、PCを再起動してください。





再起動後、必要なツールが入っているのか確認してみます。
コマンドプロンプトを立ち上げて、以下のコマンドを実行。
node –v
npm -v
cordova -v


ツールがインストールされていれば、それぞれのツールのバージョン情報が表示されるはずです。
自分の環境だと、なぜかcordovaのコマンドが通らなかったので、
npm install cordova –g
を実行して手動でインストールしました。
なんでだろ?



Azure IoT Hubと接続するアプリを作ってみる(0)

2016-10-14 20:31:21 | IoT,M2M
自分のやりたいと思ったことを調べてみたら、
思った以上に日本語の情報が無かったので、
折角なので一から書いていこうかと。

やりたいことは2つ。
Visual Studio CodeでCordovaスマホアプリを作って、
・IoT Hub経由でデータをAzureにあげる
・Cognitive Service(Face API)と連携する
ということ。

パーツの情報はいろいろとあるから、それもまとめておこうかな。




■Azure IoT Hub SDK(Node.js用)
https://github.com/Azure/azure-iot-sdks/blob/master/node/device/core/readme.md


■CordovaアプリでREST APIをたたく
Calling a REST service from a Cordova application using jQuery
⇒情報古い?


■Visual Studio CodeでCordova開発環境構築
Apache CordovaをVisual Studio Codeで開発するための道のり
MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発
WindowsでVisual Studio Codeを使ってCordova開発する場合、
別途Visual Studio環境がいるのね。
⇒VS Codeはエディタだから、そりゃそうだ・・・。


■Cognitive Service設定
Cognitive ServicesのFace APIを登録してみる。


■Face APIリファレンス
Face API - V1.0
⇒APIのテストコンソールもある。