Alexaに話しかけるとPCモニターを消すスキル

超初心者向けのプログラミングがちょっとできる人による説明となっております。ご注意ください。
(きっと勘違いとかもあるかと)

モニターを消す作業すら自動化したい怠惰な友達への誕生日プレゼント。

#はじめに
今回のシステム概要
`human(Voice"Good night") ---> Alexa ---> Node-RED ---> Python ---> Display off`
Windows10での実行を想定

#Alexaにスクリプトをデバイスとして認識させるための設定

###Node-RED Alexa Home Skill Bridgeでの設定
1. [ここ](https://alexa-node-red.bm.hardill.me.uk/)にアクセスし、上部の「Register」からアカウント作成
2. 「Device」タブをクリックし、「Add Device」をクリック。
3. Name(Alexaに表示する名前)・Description(説明)を記入し(必須)、Actionsは「On・Off」のみチェックし、「OK」![芹澤優は可愛いぞ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/7ddb46b6-b209-f47c-09a7-2b082c491a32.png)

###Alexaアプリでの設定
1. Alexaアプリで「Node-RED」スキルをインストール
2. インストール後にNode-REDにログインを求められるので、さっき作ったアカウントでログイン
3. 「デバイスの検出」でその他扱いで設定した名前のデバイスが登録されたのを確認する。

（登録されないときはデバイスの検出をやってみる）

>ここの設定で迷った場合は[@okomeshino](https://qiita.com/okomeshino/items/0c3f73436c833af6c0fb)さんのところへ。

#Node-Redの導入
手順
1. Node.jsのインストール
2. Node-REDをインストール
3. Node-REDを起動

###Node.jsのインストール
1. [ここ](https://nodejs.org/ja/)にアクセスし、左側の「推奨版」をクリックし、ダウンロード。
2. 「Next」
3. 「I accept ～」にチェックで「Next」
4. インストール先を変更したければ設定し「Next」
5. Custiom Setupはそのまま「Next」
6. 「Install」でインストールが終わるまで待機
7. 最後に「Finish」

####インストールが成功したかチェック
1. 「Windowsキー」+「R」でファイル名を指定して実行を表示
2. 「cmd」と打ってコマンドプロンプトを起動
3. `node --version && npm --version`と打ってコマンドを実行
4. `v14.15.1`と`6.14.8`が返ってくれば成功（もちろんバージョンが違えば異なる出力となる）

>Node.jsのインストールで迷った場合は[IT Learning](https://obenkyolab.com/?p=856)さんのところへ。

###Node-REDのインストール
1. 「Windowsキー」+「R」でファイル名を指定して実行を表示
2. 「cmd」と打ってコマンドプロンプトを起動
3. `npm install -g --unsafe-perm node-red`と打って実行しインストール

###Node-REDの起動
1. 「Windowsキー」+「R」でファイル名を指定して実行を表示
2. 「cmd」と打ってコマンドプロンプトを起動
3. `node-red`と打って実行し起動するか確認できたら終わり

>Node-REDのインストール・起動で迷った場合は[Node-RED User Group Japan](https://nodered.jp/docs/getting-started/windows)さんのところへ。


#Pythonのインストール
###Pythonのインストーラをダウンロードしよう
1. [ここ](https://www.python.org/)にアクセスし、「Downloads」タブの中の「Windows」をクリック。
2. 「Latest Python 3 Release - Python 3.9.0」をクリック(2020/12/01現在は3.9.0が最新)
3. 下の方のFilesの項目の「Windows x86-64 executable installer」をクリックし、ダウンロード。

###Pythonのインストールをしよう
1. ダウンロードしたインストーラーをクリックして起動。
2. このようなウィンドウが表示されたら、「Add Python 3.9 to PATH」にチェック入れて「Customize installation」へ。
![伊藤美来も可愛いぞ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/e43e1067-5ff0-96ee-aeef-67b3614c6a7e.png)
3. 全てにチェックが入っていることを確認したら「Next」
4. そして、「Install」をクリックして成功すればインストールは終了。

※4.で「install for all users」にチェックを入れるかどうかは好み。

>Pythonのインストールで迷った場合は[Let'sプログラミング](https://www.javadrive.jp/python/install/index1.html)さんのところへ。

#ディスプレイをOFFにするスクリプト
PythonでディスプレイをOffにするためのスクリプトを組む。

`C:\Users\<ユーザーネーム>\AppData\Roaming\npm\`内にテキストファイルを作成し、コードをコピペして保存。

```Python:displayoff.py
from ctypes import *

user32 = WinDLL('User32')
DISPLAY_ON = -1
DISPLAY_OFF = 2
HWND_BROADCAST = 0xffff
WM_SYSCOMMAND = 0x0112
SC_MONITORPOWER = 0xf170
post_message = cast(user32.PostMessageA,
                    CFUNCTYPE(c_uint32, c_uint32, c_uint32, c_uint32, c_uint32))
lock_workstation = cast(user32.LockWorkStation, CFUNCTYPE(c_uint32))

post_message(HWND_BROADCAST,
             WM_SYSCOMMAND,
             SC_MONITORPOWER,
             DISPLAY_OFF)
```
>最後の`DISPLAY_OFF`を`DISPLAY_ON`にするとディスプレイをOnにすることもできる。
>しかし、すぐにディスプレイが切れてしまう。。。なんとかしたい。。。

保存後、**拡張子を`.txt`から`.py`に変えて終わり。**

※PowerShellでも実現可能だが、今回はNode-REDに連携するためにPythonで記述

>ここのスクリプトで迷った場合は[@sharow](https://qiita.com/sharow/items/ef78f2f5a8053f6a7a41)さんのところへ。

#Node-REDでの編集
やっとここまで来ましたね。
あとちょっとです。頑張りましょう。

###Node-REDエディタの起動
1. 「Windowsキー」+「R」でファイル名を指定して実行を表示
2. 「cmd」と打ってコマンドプロンプトを起動
3. `node-red`と打って実行しNode-REDを起動（コマンドプロンプトはとじないこと）
4. 画像のように出力されたら赤で囲まれたURLをブラウザに打ってNode-REDを起動!![萩原雪歩は至高の美少女](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/34572157-521e-4b55-ff3a-084d551f657e.png)

###エディットタイム
まずは完成図から
![i☆Risはいいぞぉ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/99845ada-3760-7f81-b549-18f4f370eb7f.png)
これが作れれば完成。
>ディスプレイOnも一応入っているが、現時点ではOn側はうまく動作していない。

やるべきこと
1. Alexaと連携するためのノード(画像のタグみたいなやつ)を追加する
2. Pythonを実行するためのノードを追加する
3. それぞれのノードを設定し、結ぶ。
4. デプロイしてテスト

####ノードの追加
画面右上のハンバーガーメーニュー(3本線のやつ)をクリックし、「パレットの管理」をクリック
![夏川椎菜も可愛いぞ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/32b67259-8bd3-349a-1538-d4d192b56141.png)

「ノードを追加」タブで`node-red-contrib-alexa-home-skill`と`node-red-contrib-pythonshell`を検索して追加

![長門有希だなやっぱ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/7d7506b2-d5a2-ba1d-6d22-fcb5a9b8cf3d.png)
![キョン妹も捨てがたい](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/ca2e0965-cb62-469a-9b92-eace289ee8c9.png)

この2つが左のパレットに追加される。

####Alexaノードの設定
「alexa home」のノードをドラッグ・アンド・ドロップし、ノードをダブルクリックして設定をしていく。
![真壁瑞希つよい](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/e2c0c020-5724-06e6-eea7-435c60a14479.png)
「Account」の鉛筆マークをクリックし、`Node-RED Alexa Home Skill Bridge`で作ったアカウントへログイン
「Device」横のリフレッシュマークをクリックし、`Node-RED Alexa Home Skill Bridge`で作ったデバイスを選択

####Pythonノードの設定
「pythonshell in」のノードをドラッグ・アンド・ドロップし、ノードをダブルクリックして設定をしていく。
![あべりか強い](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/9e8031d5-bcdb-8215-65ae-f6344cce5372.png)
「Name」に表示する名前、「Py file」に`C:\Users\<ユーザーネーム>\AppData\Roaming\npm\`内に作ったディスプレイをOffにするPythonファイルを設定。
>同様にしてディスプレイをOnにする方もやる。（やらなくてもおｋ）

####分岐ノード(switch)の設定
「switch」のノードをドラッグ・アンド・ドロップし、ノードをダブルクリックして設定をしていく。
![上田麗奈かわいい](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/61d3c9cc-77e1-355c-d012-050e519bdccf.png)
「プロパティ」を`msg.command`に変更し、`TurnOnRequest`、`TurnOffRequest`とそれぞれする。
>左下の追加を押せば項目を増やすことができる。
>ノード右側のつなぐところに対応するのは上から1.2.3...となっている
>ディスプレイをOnにする方を設定しない場合はswithノードは不要

AlexaからOn/Off以外の入力をするときは、[Node-RED Alexa Home Skill Bridge](https://alexa-node-red.bm.hardill.me.uk/docs)を参考にすれば良い。
![菊池風磨はかっこいい](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/6e0ab6d5-c466-8f28-a7d1-0fe4246b2a54.png)

####ノードをそれぞれ結ぶ
マウスでそれぞれ対応するところに線を結んで完成
![妄キャリは復活してくれ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/556953bc-0b7e-81f3-1330-7ab5bfa1c3e8.png)
>ディスプレイをOnにする方を設定しない場合は「モニター」から「OFF」直結

####デプロイをする
画面右上の赤い「デプロイ」をクリックする。
![岡田あやめはいいぞぉ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/5c3cd642-afe0-fec3-d0d7-e60368245891.png)

#テスト
やるべきことは全てやったので、テストをしましょう。
スマホアプリから「Off」ボタンを押して画面が消えるか確認しましょう。

うまく実行できていたら、Alexaアプリで提携アクションを組んで自由に実行しましょう！








#PC起動時にNode-Redが自動起動するように設定
最後におまけとして、PC起動時にNode-Redが自動起動するように設定しましょう。
WindowsでPC起動時にNode-REDを自動起動させるには、「Windowsタスクスケジューラー」を使うのがベストです。
####なぜ自動起動が必要か
今まで組んだ流れを実行するには**Node-REDを実行しているときのみ**です。
コマンドプロンプトを閉じてしまうとこのスキルは使えなくなってしまいます。
そのため、PCを起動したときにNode-REDを起動する必要があるが、手動起動だとめんどくさい。
だから、自動起動できるように設定するともっと便利になる！

####自動起動だけでは問題がある
自動起動するだけだと**コマンドプロンプトが常に表示**されてしまう。
間違ってコマンドプロンプトを閉じてしまうかもしれないし、なによりも邪魔。
解決策：VBSを使い非表示で実行する。

###VBSファイルの作成
1. `/c/Users/<ユーザーネーム>/AppData/Roaming/npm/`内にテキストファイルを作成
2. 同じフォルダ内に `node-red.cmd` があるかチェック
2. 下記コードをコピペして保存

```VBS:Node-RED-boot.vbs
Set ws = CreateObject("Wscript.Shell")
ws.run "cmd /c/Users/<ユーザーネーム>/AppData/Roaming/npm/node-red.cmd", vbhide
```
4.ファイルの拡張子を「vbs」に変更する

>VBSファイルの作成で迷った場合は[amaoto-log](https://amaotolog.com/pc-benri/33)さんのところへ。

###タスクスケジュールの設定
1. タスクバーの検索から「タスクスケジューラ」と入力し起動
2. 右側のメニューから「タスクの作成」をクリック![あの夏の谷川柑菜の良さにみんな気付いて](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923003/de5821e4-add7-189d-4275-c3e4db144eac.png)
3. 名前を自由に決定し、「トリガー」タブへ。「新規」をクリックし、タスク開始を「ログオン時」にし、「OK」
4. 「操作」タブへ。「新規」をクリックし、プログラム/スクリプトを `C:\Users\<ユーザーネーム>\AppData\Roaming\npm\node-red-boot.vbs` （さっき作ったVBSファイル）にし、「OK」
5. 最後に再起動し、Node-REDが機能しているかチェック（ディスプレイがOffになるかなどで確認）

>スケジュールで迷った場合は[Node-RED User Group Japan](https://nodered.jp/docs/getting-started/windows)さんのところへ。（下の方に書いてある）

#参考文献
1. [AmazonEcho (Alexa) と RaspberryPi を連携して声だけでPS4を操作する](https://qiita.com/okomeshino/items/0c3f73436c833af6c0fb),@okomeshinoさん
2. [WindowsへNode-RED導入](https://obenkyolab.com/?p=856),IT Learningさん
3. [Windowsで実行する](https://nodered.jp/docs/getting-started/windows),Node-RED User Group Japanさん
4. [Pythonのダウンロードとインストール](https://www.javadrive.jp/python/install/index1.html),Let'sプログラミングさん
5. [ディスプレイを強制的にスリープにする](https://qiita.com/sharow/items/ef78f2f5a8053f6a7a41),@sharowさん
6. [バッチファイルを実行する時に黒いコマンドプロンプト画面を表示しない方法](https://amaotolog.com/pc-benri/33),amaoto-logさん