Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

IMG_0694.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

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

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

Tools > Script editor...

を選択する。
スクリーンショット 2017-07-20 21.11.26.png

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

スクリーンショット 2017-07-20 21.12.27.png

次のプログラムを書く。

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

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

Run > myFunction

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

スクリーンショット 2017-07-20 21.15.59.png

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

スクリーンショット 2017-07-20 21.16.42.png

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

スクリーンショット 2017-07-20 21.18.12.png

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

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

スクリーンショット 2017-07-20 21.20.08.png

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

View > Logs

を選択する。

スクリーンショット 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

マイページへ移動する。

スクリーンショット 2017-07-20 23.26.11.png

トークンを発行する。

スクリーンショット 2017-07-20 23.28.21.png

トークン名を記入し、通知先を選択し、「発行する」ボタンを押す。
スクリーンショット 2017-07-20 23.31.14.png

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

スクリーンショット 2017-07-20 23.33.04.png

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

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

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

スクリーンショット 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

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

    'payload' : {
      'message': message,
      'stickerId': '200',     // 追加
      'stickerPackageId': '3' // 追加
    }
}

のように追加する。

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

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

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

スクリーンショット 2017-07-22 8.40.48.png

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

スクリーンショット 2017-07-22 8.41.00.png

参考

おまけ

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

Properties Service  |  Apps Script  |  Google Developers

Script editor のメニューから

File > Project properties

を選択する。

menu.png

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

script.png

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

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

allow.png

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

takatama
東京で働くソフトウェアエンジニアです。
https://twitter.com/takatama_jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away