Azure Functions と LINE Notify の組み合わせ（Node.js を利用、ポータルで開発）

この記事は、[Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/) に HTTPリクエストを送ると、LINEアプリに通知が来る（[LINE Notify](https://notify-bot.line.me/ja/) を利用）という仕組みを軽く試したものです。

Azure Functions周りの開発や設定は、[Azure のポータル上](https://portal.azure.com/)で行いました。

## 手順の概要
今回の手順は、おおまかには以下のとおりです。

- LINE Notify のトークンを取得
- Azure のポータル上で Azure Functions を使えるようにする
- Azure Functions でのコーディング前の準備
  - [axios](https://www.npmjs.com/package/axios) をインストール
  - 環境変数を設定
- Azure Functions でのコーディング

## 実際に進めていく
### LINE Notify のトークンを取得
LINEアプリへの通知を簡単化するため、[LINE Notify](https://notify-bot.line.me/ja/) を利用します。

ググったりすると情報が出てくると思いますので、手順の詳細は割愛しますが、おおまかには以下のような流れです。

まず、LINE Notify のページにログインをして、画面右上のメニューから「マイページ」へ移動します。

そこで、「アクセストークンの発行(開発者向け)」という部分があるので、「トークンを発行する」と書かれたボタンを押します。
![右上のマイページを選んだ後の画面の下部.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9ed92e90-54cd-566c-ae15-1395237e8e99.jpeg)

その後のトークンの発行画面では、トークンの名前（何か自分が分かりやすいもの）と、LINEアプリ上で通知を送る先となるトークルームを指定します。
![トークンの発行画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d01ec032-1d89-ef5e-8e2f-089bdcd25f9c.jpeg)
上記の設定を行って、「発行する」ボタンを押すと、以下のトークンが表示される画面が出てきます。

以下の画面で表示されるトークンは、再表示ができないため、ここで必ずコピーしてメモなどしておいてください。
![トークンの表示画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/77d65485-e648-7920-0aa2-3c84ee7f0e52.jpeg)

### Azure Functions 関連
#### サンプルを動かす
まずは、以下の公式ドキュメントの手順の「[関数をテストする](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-function-app-portal#test-the-function)」の部分まで進めてください。

●Azure Portal で初めての関数を作成する | Microsoft Docs
　https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-function-app-portal

サンプルは、以下のような内容になるかと思います。

```javascript
module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };
}
```

プログラムを書いた後、ブラウザなどから HTTPリクエストを送り、意図した通りのレスポンスが返ってくれば OK です。

#### axios を使えるようにする
この後、LINE Notify を使った通知の処理で、axios　を利用していきます。
Azure Functions　で axios　を使えるようにするために、パッケージのインストールを行います。

今回は、ポータル上でそれを進めます。
ポータルのメニューで「開発ツール」 > 「コンソール」と進み、以下のような画面を開きます。
![コンソール.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b0a43e3-dc5a-e76e-0c2e-017047d4b122.jpeg)

あとは以下の記事にもあるように、上記の画像の右側の部分で `npm init` や `npm install` を行っていき、axios をインストールします。

●Azure Functions に npm install で Node モジュールを追加する｜まくろぐ
　https://maku.blog/p/9t7hs4e/

#### 環境変数を追加する
上の手順で発行した LINE Notify のトークンを、プログラムの中に直書きするのではなく、環境変数として設定して利用する形にしていきます。

そのために、ポータル上で環境変数の追加を行います。
ポータルのメニューで「設定」 > 「構成」と進み、「アプリケーション設定」の中の「新しいアプリケーション設定」を押します。
![環境変数の追加.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1514f314-a81b-ed2f-f15c-ec4c84654f81.jpeg)

そうすると、以下の画面が出てくるので、名前と値をそれぞれ設定しましょう。
![環境変数の追加2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/88474dd1-cb3b-7075-1a66-e05d8dfdc994.jpeg)
自分は、以下のようにしました。

名前： LINE_NOTIFY_TOKEN
値： 【LINE Notify のトークン】

#### プログラムに手を加える
あとは、LINE Notify と連携する処理を加えたプログラムを作成します。

上で試したサンプルを元に、axios で POST する処理を加えたりしました。
LINE Notify のトークンは、上で環境変数に追加していたので、そこから読み込みます。

```javascript
module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
    context.res = {
        body: responseMessage
    };

    const axios = require('axios');
    const querystring = require('querystring');

    const messageLineNotify = name 
        ?`Hello! ${name} from Azure`
        :`Hello! from Azure`;
        
    const res = await axios({
        method: 'post',
        url: 'https://notify-api.line.me/api/notify',
        headers: {
            'Authorization': 'Bearer ' + process.env["LINE_NOTIFY_TOKEN"],
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: querystring.stringify({
            message: messageLineNotify,
        }),
    });
    context.log(res.data)
}
```

あとは、動作確認を行うだけです。

#### 動作確認
以下のように、HTTPリクエストをトリガーにして、LINE Notify を使った LINEアプリへの通知ができました。

![LINE Notifyによる通知.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/61f6048d-9b0a-7dc0-5f4d-8a4b59ab0907.jpeg)

元の仕組みの中で、URL の末尾に「クエリ文字列の値 ?name=【文字列】 」があった場合、その文字列がレスポンスに使われるという部分がありました。
LINEアプリへの通知の処理でも、この文字列の有無によって、通知の文章を少し変えるようなことをやっています。

## おわりに
環境変数を設定したり、axios による POST の処理を使うような形で、Azure Functions と LINE Notify の組み合わせを試すことができました。

今回、シンプルな内容で試しましたが、さらに別のアプリやサービスとの連携なども加えたりできればと思います。