Webブラウザーで作ったプログラムからLINEに好きなメッセージを送信

GoogleAppsScript (GAS) なら Web ブラウザーだけでプログラミングできる。GASで作ったプログラムから LINE に好きなメッセージを送信してみよう（1時間に1000回まで送信できる）。

![IMG_0694.PNG](https://qiita-image-store.s3.amazonaws.com/0/6760/8a8c64e8-143f-8f87-4e76-3a00fde3318a.png "IMG_0694.PNG")

スタンプも送れる。

![IMG_0696.PNG](https://qiita-image-store.s3.amazonaws.com/0/6760/10a9f049-bc82-e3a9-b48e-f7434fa8b437.png "IMG_0696.PNG")


# 前提
- Googleアカウントを持っている。
- LINEアカウントを持っている。

# GoogleAppsScript を使ってみる

まずは、Webブラウザーでのプログラミングを試してみる。おなじみの、Hello World という文字をログに出力してみる。

## 空の Google Spread Sheet を作る
https://drive.google.com にアクセスして、左上にある New ボタンから、

```
New > Google Sheets > Blank spreadsheet
```

を選択する。
![スクリーンショット 2017-07-20 21.10.15.png](https://qiita-image-store.s3.amazonaws.com/0/6760/3a069715-3c43-55c5-c176-8415ba0e290f.png "スクリーンショット 2017-07-20 21.10.15.png")

## Script editor でプログラミングする

作成した　Spread Sheet のメニューで、

```
Tools > Script editor...
```

を選択する。
![スクリーンショット 2017-07-20 21.11.26.png](https://qiita-image-store.s3.amazonaws.com/0/6760/b335dc45-a98c-fd24-d4fc-d717187ace09.png "スクリーンショット 2017-07-20 21.11.26.png")

好きな文字列をログに出力してみる。
Script editor の myFunction に、

![スクリーンショット 2017-07-20 21.12.27.png](https://qiita-image-store.s3.amazonaws.com/0/6760/c69a0190-6849-2ad3-d791-86d90b3518e1.png "スクリーンショット 2017-07-20 21.12.27.png")

次のプログラムを書く。

```js
function myFunction() {
  Logger.log('Hello World');
}
```

書いたプログラムを実行する。具体的には、黒い右向き三角ボタンを押すか、メニューから

```
Run > myFunction
```

を選択する。すると、先にソースコードを保存するよう警告が表示される。Yes ボタンを押す。

![スクリーンショット 2017-07-20 21.15.59.png](https://qiita-image-store.s3.amazonaws.com/0/6760/e4762dc9-accf-4da4-37f8-6d08d3a2ec2a.png "スクリーンショット 2017-07-20 21.15.59.png")

さらに、プロジェクト名を入力するよう警告が表示される。適当なプロジェクト名を入力して OK ボタンを押す。

![スクリーンショット 2017-07-20 21.16.42.png](https://qiita-image-store.s3.amazonaws.com/0/6760/82e5bab4-02a2-dcde-0464-3612b9b1605a.png "スクリーンショット 2017-07-20 21.16.42.png")

ここではプロジェクト名を LINE にする。すると、Script editor の名前が変わる。

![スクリーンショット 2017-07-20 21.18.12.png](https://qiita-image-store.s3.amazonaws.com/0/6760/d3ec474d-774a-63f9-a027-1a35ec1e6b7f.png "スクリーンショット 2017-07-20 21.18.12.png")

気を取り直して、プログラムを実行する（黒い右向き三角ボタンを押す）。

プログラムが間違っていなければ、何も表示されずに静かに終わる。
もし、プログラムが間違っていると、エラーが表示される。

![スクリーンショット 2017-07-20 21.20.08.png](https://qiita-image-store.s3.amazonaws.com/0/6760/dfa90c3d-77c3-b14d-4f7f-9a4951769acd.png "スクリーンショット 2017-07-20 21.20.08.png")

プログラムが間違っていない場合、ログに文字列 Hello world が出力される。ログを確認するには、Script editor のメニューから

```
View > Logs
```

を選択する。

![スクリーンショット 2017-07-20 21.22.48.png](https://qiita-image-store.s3.amazonaws.com/0/6760/0e4a6d3c-52a3-9fb9-23d4-20cd0b987635.png "スクリーンショット 2017-07-20 21.22.48.png")

# LINE Notify を使ってみる

ログに Hello World と表示できることを確認できたので、LINE から Hello World と送信してみる。

## 事前準備：アクセストークンを取得する

プログラムからLINEに送信するのに必要な「アクセストークン」を取得する。このトークンが人に知られると、悪用されてしまうので、絶対に秘密にする。

https://notify-bot.line.me にログインして、LINE アカウントでログインする。

![スクリーンショット 2017-07-20 23.25.09.png](https://qiita-image-store.s3.amazonaws.com/0/6760/1bd0d49c-71c5-d2ca-fcb5-8470fe7e8feb.png "スクリーンショット 2017-07-20 23.25.09.png")

マイページへ移動する。

![スクリーンショット 2017-07-20 23.26.11.png](https://qiita-image-store.s3.amazonaws.com/0/6760/b5fe2b57-52ef-a857-37a9-d49bd1c8e961.png "スクリーンショット 2017-07-20 23.26.11.png")

トークンを発行する。

![スクリーンショット 2017-07-20 23.28.21.png](https://qiita-image-store.s3.amazonaws.com/0/6760/2b50d050-c7a7-030e-debc-ecc74acc56cb.png "スクリーンショット 2017-07-20 23.28.21.png")

トークン名を記入し、通知先を選択し、「発行する」ボタンを押す。
![スクリーンショット 2017-07-20 23.31.14.png](https://qiita-image-store.s3.amazonaws.com/0/6760/1bb57b65-89f3-c4ad-5dc4-9816cd8a61a2.png "スクリーンショット 2017-07-20 23.31.14.png")

アクセストークンが表示されるので、メモしておく。他の人に知られないように注意する。

![スクリーンショット 2017-07-20 23.33.04.png](https://qiita-image-store.s3.amazonaws.com/0/6760/1f927861-312c-561d-8a01-302e541cb802.png "スクリーンショット 2017-07-20 23.33.04.png")

## Script editor を使って LINE にメッセージを送信する

Script editor に戻り、myFunction の中身を次のように書き換える。アクセストークンは先ほどメモしたものを使う。

```js
function myFunction() {
  var accessToken = 'ここにアクセストークンを書く';
  var message = 'Hello world';
  var options = {
    'method' : 'post',
    'headers': {
      'Authorization': 'Bearer ' + accessToken
    },
    'payload' : {
      'message': message
    }
  };
  var response = UrlFetchApp.fetch('https://notify-api.line.me/api/notify', options);
  Logger.log(response);
}
```

（黒い三角か、メニューから）プログラムを実行すると、このプログラマからネットワークにアクセスしても良いか尋ねられる。一度だけ許可すれば、今後は尋ねられなくなる。

![スクリーンショット 2017-07-20 23.39.34.png](https://qiita-image-store.s3.amazonaws.com/0/6760/d80fc0ef-311e-32bd-d948-d9614a253219.png "スクリーンショット 2017-07-20 23.39.34.png")

![スクリーンショット 2017-07-20 23.40.43.png](https://qiita-image-store.s3.amazonaws.com/0/6760/bed4ffc5-75d9-a3da-f649-74236b42a2d1.png "スクリーンショット 2017-07-20 23.40.43.png")

ネットワークへのアクセスを許可すると、LINEから Hello World と通知される。

## スタンプを送るには

https://devdocs.line.me/files/sticker_list.pdf にあるスタンプを送ることができる。

message に加えて、stickerPackageId と stickerId を指定すれば良い。

![スクリーンショット 2017-07-22 8.34.55.png](https://qiita-image-store.s3.amazonaws.com/0/6760/daf33074-8bd6-384a-0e2a-7d22793ef3bc.png "スクリーンショット 2017-07-22 8.34.55.png")

STKID (200) が stickerId,
STKPKGID (3) が stickerPackageId にそれぞれ相当するので、

```js
    'payload' : {
      'message': message,
      'stickerId': '200',     // 追加
      'stickerPackageId': '3' //　追加
    }
}
```
のように追加する。

ここで注意が必要なのが、stickerId と stickerPackageId は（数字ではなく）文字列として指定すること。

もし、以下のように数字として指定すると、エラーになる。

```js
    //間違った例
    'payload' : {
      'message': message,
      'stickerId': 200,     // 間違い
      'stickerPackageId': 3 // 間違い
    }
}
```

![スクリーンショット 2017-07-22 8.40.48.png](https://qiita-image-store.s3.amazonaws.com/0/6760/28522edc-fde8-2964-277e-21e3eb78f2f5.png "スクリーンショット 2017-07-22 8.40.48.png")

Details を押すと、理由が表示される。

![スクリーンショット 2017-07-22 8.41.00.png](https://qiita-image-store.s3.amazonaws.com/0/6760/38253a3c-9177-cac2-6e71-09f9476c6aba.png "スクリーンショット 2017-07-22 8.41.00.png")

# 参考
- [Class UrlFetchApp  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app)
- [LINE Notify](https://notify-bot.line.me/doc/ja/)

# おまけ

Script property を使うと、アクセストークンを直接書かずに済むので、画面をのぞき見されてもちょっと安心。

[Properties Service  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/guides/properties)

Script editor のメニューから

```
File > Project properties
```

を選択する。

![menu.png](https://qiita-image-store.s3.amazonaws.com/0/6760/1512a4a5-2d7d-7ef1-13b1-17f411c674e2.png)

Script proerties タブを選択して、+ Add row リンクを押し、Property に accessToken、Value にメモしたアクセストークンを記入して、Save ボタンを押す。

![script.png](https://qiita-image-store.s3.amazonaws.com/0/6760/334ece27-664d-be8d-a375-fa5f6138a9ad.png)

プログラムの var accessToken = ... のところを以下のように書き換える。

```js
function myFunction() {
  var accessToken = PropertiesService.getScriptProperties().getProperty('accessToken');
  var message = 'Hello world';
  var options = {
    'method' : 'post',
    'headers': {
      'Authorization': 'Bearer ' + accessToken
    },
    'payload' : {
      'message': message
    }
  };
  var response = UrlFetchApp.fetch('https://notify-api.line.me/api/notify', options);
  Logger.log(response);
}
```

プログラムを実行すると、保存したデータにアクセスしてよいか尋ねられるので、許可する。

![prop.png](https://qiita-image-store.s3.amazonaws.com/0/6760/8f7e203f-2460-3561-0f74-901f3f5b25f3.png)

![allow.png](https://qiita-image-store.s3.amazonaws.com/0/6760/1c50ce31-74a2-b39f-b059-310a4ba69fe8.png)

これでソースコードに直接アクセストークンが表示されることはなくなる。