http://portal.azure.comにアクセスし、左上の新規ボタンを押します。
Web+モバイルからWeb Appを選択します。
アプリ名はWebAppsのURLとなります。好きなIDを入力してください。
リソースグループはAzureのリソースをグループ化するものです。適当な名前をつけてください。
App Servivceプラン/場所をクリックします。
新規作成を押し、AppServiceプランに適当な名前を入れます。場所はJapanであればどこでも大丈夫です。価格レベルはF1 Freeです。
ここまでできたら下にあるOKを押します。
ダッシュボードにピン留めするにチェックを入れ、作成ボタンを押します。
Web Appsができました。ポータルの左のリストにあるすべてのリソースから作成したWebAppsの管理画面を表示することができます。
管理画面に書いてあるURLをメモ帳にコピーしておきます。このURLはかなり後で使うことになります。
デプロイ資格情報を押し、好きな名前とパスワードを設定し、保存を押します。
続いてデプロイオプションを押します。
ソースの選択からローカルGitリポジトリを押します。
OKを押します。
再び概要に戻り、GitクローンURLに書いてあるURLをコピーします。
シェルを立ち上げます。Macの方はターミナルアプリを、Windowsの方はPowerShellを立ち上げます。
好きなディレクトリで先ほどコピーしたWebAppsのGitクローンURLをクローンします。
Windowsの方は右クリックでクリップボードの内容を貼り付けることができます。
git clone {WebAppsに表示されているGitクローンURL}途中で認証情報を聞かれるのでデプロイ資格情報で設定したユーザー名とパスワードを入れます。
Windowsのエクスプローラーでフォルダを見ると、cloneした場所に新しくWebAppsと同じ名前のフォルダができています。
このcloneしたフォルダの中に、ダウンロードしたサンプルコードのline/code/の中に入っているpackage.jsonとserver.jsファイルをコピーします。
シェルに戻り、cdコマンドでcloneしたフォルダに移動します。
cd {cloneしたフォルダ}
lsコマンドを使うと以下のように、package.jsonとserver.jsが表示されればOKです。
カレントディレクトリをcloneしたフォルダに移せたら以下のコマンドを入力します。
WindowsのPowerShellの人
echo "node_modules/"|Out-File .gitignore -Encoding utf8Macのターミナルアプリの人
echo "node_modules/">.gitignore最後に、npm installコマンドを入力します。
npm installエラーがおこらなければOKです。
この記事ではすでにLINEアカウントを持っているものとして進めます。 もしLINEアカウントを持っていない人はスタッフに声をかけてください。
https://business.line.me/ja/にアクセスします。
右上のログインを押します。
メールアドレスをパスワードを入力してログインを押します。
認証が入った場合は認証を通すために表示されたパスワードをLINEアプリを開いて入力します。
ログインできたら、右上にある会社/事業者未選択というところを押します。
緑色の会社/事業者を追加するを押します。
各種項目を入力し、確認するボタンを押します。その後、情報を確認できたら完了するボタンを押します。
右上に事業者名と名前が表示されたらOKです。
次に少し下にスクロールし、一番右のMessaging APIを押します。
左下のMessaging APIを始めるを押します。
適当な名前を入れます。アイコンはつけても付けなくても大丈夫です。
業種も適当なものを選択し、確認するボタンを押します。
申し込むボタンを押します。
LINE@MANAGERへボタンを押します。
Bot設定の画面にいくと思いますが、Bot設定画面に行かなかった場合、左のリストからアカウント設定>Bot設定を押してください。
Bot設定の画面からAPIを利用するボタンを押します。
確認ボタンを押します。
リクエスト設定からWebhook送信を利用するにします。
詳細設定からBotのグループトーク参加を利用するにします。
できたら保存ボタンを押します。
続いて左のリストからメッセージ>自動応答メッセージを選択します。
deleteを押して現在有効になっている自動応答メッセージを削除します。
アカウント設定>Bot設定画面で、ステータスの下にあるLINE Developersで設定するを押します。
下の方にスクロールするとWebhook URLとChannel Access Tokenと書いてある項目があります。
EDITボタンを押します。
Webhook URLの項目に自分のAzure WebAppsのURLをhttpsにしたものを入れます(メモ帳にコピーしておいたものです)
http://{自分のWebAppsのID}.azurewebsites.net
となっているURLを
https://{自分のWebAppsのID}.azurewebsites.net
にするということです。
入力できたらSAVEボタンを押します。
再び画面が戻ったら、次はChannel Access Tokenの横にあるISSUEボタンを押します。
Channel Access Tokenを発行できたら、メモ帳にコピーしておきます
プログラムを編集するためにVisualStudio Codeを立ち上げます。
VisualStudio Codeからファイル>フォルダーを開くを押します。
クローンしておいたWebAppsの名前と同じ名前の、package.jsonとserver.jsを置いたフォルダを選択します。
左のリストにserver.jsが表示されるのでクリックして開き、**{yout channel access token here}**と書いてある部分に先ほどメモ帳にコピーしておいた channel access tokenを貼り付けます。
今回作成したWebAppsでは、Git PushをするとWebApps上にプログラムを配置することができます。
先ほどのnpm installをしたシェルをもう一度表示し、以下のコマンドを入力します。
{commit message}のところは好きなメッセージにしてください。
git add .
git commit -m "{commit message}"
git pushDeployment successfulと表示されればOKです。
スマートフォンのLINEアプリを起動します。
友達追加>QRコードを押し、開いていたLINE Developersのサイトに表示されているQRコードを読み込みます。
読み込んだら追加を押し、同意するを押します。
Botと話してみましょう。Botから応答が帰ってきたらOKです。
プログラムを修正するたびにサーバーへ配置してLINEアプリで試していてはとても大変です。
そこで今回、LINE botのシミュレータを作成しましたのでこれを使うとWebAppsに配置しなくてもローカルでLINEのメッセージをシミュレートすることができます。
シミュレータはここにありますのでご自身の環境にあったファイルをダウンロードしてください。
ダウンロードしたzipを解凍すると実行ファイルがあるので、ダブルクリックで実行します。
server.jsのコードを編集します。localDebugという変数にtrueを設定してください。
var localDebug = false; //Azure WebAppsで実行する場合
var localDebug = true; //ローカルで実行する場合
続いてVisualStudioCodeを用いてNode.jsのデバッグを行います。
VisualStudio Codeでserver.jsのあるフォルダを開き、左のリストから虫のようなアイコンをクリックします。
その後、左上にでてきた歯車のようなアイコンをクリックします。
すると、いくつかのリストが上に表示されるのでNode.jsを選択します。
その後、左上の緑色の三角形のマークを押します。
このようなボタンが上に表示されればnode.jsのサーバーが実行しています。
この状態でシミュレータのEnter textに文を打ってEnterを押すとローカルに立ち上げたサーバーから応答が返ってきます。
変数の中身を見たい、プログラムの動きを確認したいなどある場合はブレークポイントというものを貼ります。
ブレークポイントはVSCodeの行数の左側のスペースをクリックすることで赤いマークがつき、その行にプログラムがきたらプログラムを止めることができます。
止まった状態で、変数の中身を見ることができます。
ブレークポイントを解除するには、再び赤いボタンをクリックすることで解除することができます。
Azure WebAppsで再び実行する場合はlocalDebugをfalseにしてください。