こんにちはYuiです。
実はこちらのツイートで書いた通り、迫さん(@yuki_99_s)にブログを添削してもらったんですよ。
#BlogHacks で迫さん@yuki_99_s にブログを添削してもらった!
丁寧すぎた😳
便利なタグの使い方や言い回しやテーマなど細かく教えてもらって想像の遥か上をいく丁寧さやった!
帰宅したらすぐ書く!ちなみに10月半ばスタートで10記事、pv数10月2100、11月2000ぐらい
少しずつ記事を追加します😌
— Yui/ゆい🌖行動力おばけ👻 (@yui_active) November 26, 2018
ものすごくわかりやすかったので、私の記事を実際に見て、添削前と添削後の違いを感じて頂こうと思って今回リライトしてみました。
内容はほとんど同じですが、前回よりももう少しGASの機能について焦点を当てた書き方をしています。
大分わかりやすくなったかと思うのでぜひ!

こんにちは、最近プログラミングの案件をとろうと躍起になっているYuiです。
はい、おしゃべりマンの言う通りですね。これに関しては私が頑張るのみなので、引き続き勉強します。笑
案件取れたら経験ゼロで案件取れたという記事を書きたいので頑張るぞ~~!
まあ、こんな私の決意表明は置いといて、今回はLineBotのコードを参考に、Google Apps Script(以下GAS)の機能について説明したいと思います。
というのも、GASって本当に便利な機能があるのですよ。
最初、私がRailsをherokuにデプロイする形でLineBotを作ろうとしたとき、正直なところ挫折しかけました。(もちろん、良い勉強にはなりました)
そして私は思いました。
そこで、いろいろ調べたらどうやらJavaScriptが書ければGASで超簡単にLineBotが実装できるらしいと。早速作ってみると、本当に10分くらいで作れました!
そこで少しGASについて勉強したのですが、本当に色んな機能が付いててとても便利なのですね。なので、今回はGASの機能についてGASでのLineBotの作り方の記事で使ったコードを参考に紹介していきたいと思います。
GASで繰り返しLineBotを作る時の流れ
まずは前回書いたコードを見ながらGASで繰り返しLineBotを作るときの流れについて簡単に見てみましょう。
下記のようなコードを書きました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var CHANNEL_ACCESS_TOKEN = 'あなたのアクセストークン'; function doPost(e) { // ユーザーのメッセージを取得 var userMessage = JSON.parse(e.postData.contents).events[0].message.text; // 応答用Tokenを取得 var reply_token= JSON.parse(e.postData.contents).events[0].replyToken; //ついでにエラー処理 if (typeof reply_token === 'undefined') { return; } // 応答メッセージ用のAPI URL var line_url = 'https://api.line.me/v2/bot/message/reply'; UrlFetchApp.fetch(line_url, { 'headers': { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN, }, 'method': 'post', 'payload': JSON.stringify({ 'replyToken': reply_token, 'messages': [{ 'type': 'text', 'text': userMessage, }], }), }); return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON); } |
一応ほんの少しだけコードの解説をしておくと、最初の部分はWeb上でアクセスを受け取ったときにコードの中身を表示させてあげる場合ならGETメソッドなので、function doGet()
と書くべきなのですが、LINE Messaging APIは、POSTメソッドでデータを送ってくるのでdoGet
ではなくdoPost
を使います。
その中に実際の動きとなるコードを書いていきます。
LineBotが実際に働くまでの流れをまとめると、下記のようになります。
- ユーザーからのメッセージを取得
- そのメッセージをJSONでパースして変数userMessageを宣言
- 応答用のトークンをJSONでパースして変数reply_tokenを宣言
- LineBotAPIを導入(対応したURLを変数line_urlとして宣言)
- LineBotAPIの動く範囲でコードを書く
- 実装する
今回はJavaScriptで書いてあることもあって、JSONを利用してデータの受け渡しをしています。
流れを図解するとこんな感じです。

なんとなくイメージはわいたでしょうか?
正直、この流れはどの言語を使っても、どの環境で開発しても変わりません。
ただ、GASではAPIの導入とデプロイ作業が圧倒的に楽になるのです!
GASでのAPIの導入方法
さて、APIの導入方法について見てみます。
まずはRailsで開発した場合とGASで開発した場合について比較してみましょう。
GASではAPIの導入のためにgemfileをいじる必要はありません。
各APIに対応したURLを定義して、それをコードの中に組み入れれば簡単に実装できます!
RailsでAPIを導入する場合 | GASでAPIを導入する場合 |
|
|
一気に手順が減りましたね!
APIに対応したURLを定義するとはどういうことかというと、実はコードのこの部分でAPIに対応したURLを定義しています。
var line_url = 'https://api.line.me/v2/bot/message/reply';
そしてどこで使っているのかというと、ここです。
UrlFetchApp.fetch(line_url, {
これがまさにGASの便利なところなのですが、GASでは外部のサイトにアクセスする処理としてUrlFetchApp
というオブジェクトが用意されています。
このオブジェクトはいろいろな使い方があるのですが、今回はfetchというメソッドを呼び出して、LineMessagingAPIにアクセスしています。
まあ、この中にURLを入れたら、簡単に外部からデータを持ってこれるんだな~と思っておいてください。
(もしメソッドとオブジェクトに関してもっと興味がわいた方は「GAS メソッド オブジェクト」とでもググってみるとわかるかと思います!)
これらの機能を使うことで、普通は外部のWebサイト(今回だとAPI)から情報を得る場合、まずはダウンロードをして、そのデータにアクセスする処理を書かなければいけませんが、GASではその必要はありません。
GAS以外の場合 | GASの場合 |
|
|
コードがほぼ不要なんです!
UrlFetchApp.fetch(URL)
この引数に、アクセス先となるURLを指定するだけで、そこにアクセスしてサーバーからデータを取り出すことができる。
実装方法
さて、次にGASでのLineDevelopersへの実装方法を見ていきましょう。
herokuでデプロイする場合 | GASの場合 |
|
|
GASの実装方法についてはこちらの記事に詳しく書いています。
めんどくさくなりがちな実装作業もものすごく簡単ですね。
GASの場合はデプロイ作業でさえもコード不要でクリックだけで勝手にやってくれるんですね!
ちなみに、今回はLineBotなので、発行されたURLをLineDevelopersに入力して利用しますが、Webアプリ開発とかだったらそのURLで誰でもアクセスできます。
GASのオブジェクトについて(応用編)
こちらは結構マニアックな記事になります。
もし「とりあえず簡単なLineBot作るために必要な機能を知りたい♪」という程度なら読む必要はありません。
GASが好きだ!もっと隅々まで知りたいんだ!ドゥフフフという私みたいな変態は読むと楽しいかもしれません。
先ほど、UrlFetchApp.fetch(URL)
でアクセス先を指定するだけで簡単に外部のサイトにアクセスできると書きましたが、実はさらに便利な機能があるのです。
じつは第2引数に必要な情報をオプションとして用意することができるんです。
UrlFetchApp.fetch(URL, ここにオプション)
オプションを指定することで、外部サイトにアクセスする際の動きをより細かく指定することができます。
具体的に見ていきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
UrlFetchApp.fetch(line_url, { 'headers': { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN, }, 'method': 'post', 'payload': JSON.stringify({ 'replyToken': reply_token, 'messages': [{ 'type': 'text', 'text': userMessage, }], }), }); |
まず、今回のように外部のAPIにアクセスする際は、情報をヘッダ情報として送り、サーバーとやり取りをすることが必要です。(これが'headers'
部分)
そのために必要な情報を連想配列としてまとめた上で、'Content-Type'
のところではJSONを使うことを宣言して、文字化けしないようにUTF-8に指定しています。
また、実はまだアクセストークンを認証させていませんでした(最初のvar~~の部分では、変数として定義しただけ)ので、'Authorization'
の部分で認証させてあげています。
そのあとに、'method'
でメソッドの種類を(今回だとPOST型なので’post’)、'payload'
で同時に送信する情報を入力しているのですが、JavaScriptの値を JSONに変換する必要があるので、ここではJSON.stringify
メソッドを使っています。
以下、まとめます。
UrlFetchApp.fetch(URL, ここにオプション)
で簡単に外部のURLにアクセスして、さらにオプションを指定することで、どのようにアクセスしたいかを指定することが出来る。- GASのオプションを使うとより簡単にコードを書ける。
'headers'
でヘッダ情報を詳しく指定'Content-Type'
でコンテンツの種類を指定'Authorization'
でアクセストークンを認定させる'method'
でメソッドの種類を指定'payload'
で同時に送信する情報を指定
いかがでしょうか?
最後は大分マニアックな記事になってしまいましたが、GASの機能は奥が深いですね!
ただ難点として、GAS上だけで開発しようとすると、基本言語がJavaScriptになるので、できることが限られてきそうですね。
それを打破するために、今はPythonでデータをスクレイピングしてGASに持ってきてということをやっております。
また理解が深まれば記事にしたいと思います!

いかがでしょうか、元の記事と比べて大分変わったのではないでしょうか。
- ブログを始めて2日&1記事で収益が出た話
- 【値上げまであと1日!】BlogHacksの3つの魅力※現在は適正価格になっています