GoogleAppsScriptとLINEを組み合わせてアプリ開発!!【ポモドーロタイマー】

GoogleAppsScript_LINE_Application
GoogleAppsScriptは、初心者にも優しい言語で、他の言語に比べて簡単です。しかも、多くのサービスと組み合わせて便利なツールを高速に作ることが出来ます。本記事では、LINEと組み合わせてポモドーロタイマーを作成します。
GoogleAppsScriptxLINE

アプリ作りたい人

アプリ作って大儲けできるみたいだし僕も作ってみようかな〜
でもちょっと調べた感じだと難しそうだな〜
なんか簡単にイケイケなアプリ作る方法ないかな〜
こんな悩みにお答えします。

どーも、新卒エンジニアのえびじゅん(@ebijun1007)です!!

今回は、初心者向けのプログラミング言語GoogleAppsScriptと、皆さん大好きLINEを組み合わせて
イケイケなアプリケーションを簡単に作っちゃいたいと思います!!




そもそもポモドーロタイマーって何?

ポモドーロタイマーとは、生産性を高めるためのテクニックでして
25分間作業して、5分休憩して、また25分間作業して、5分休憩して…と短いスパンで作業と休憩を繰り返すことです。
1セット4回(2時間)で1つの作業を終えて、次のセットでは違う作業をすると集中力が途切れないと言われています。

学校の課題が色々積み重なって、同時にやらないとヤバいときによく使っています。

本記事では、GoogleAppsScriptとLINEを組み合わせて、LINEでタイマーを管理できるアプリの作り方を紹介します!

GoogleAppsScriptとLINEを組み合わせるとどうなる?

まずはじめに、組み合わせるってどういうこと?

という疑問を解消したいと思います。

GoogleAppsScriptはサーバサイドの言語でして、数字の処理は得意だけど、UI(ユーザが触るボタンとか)は苦手です。
なので、自分でUI部分(フロントエンドと言います)を作った方が良いですが
初心者には学習コストが高すぎるので、フロントエンドはLINEを使っちゃおう!ということです。

ちなみに、このように複数のサービスを組み合わせて、簡単にイケてるアプリを作ることを
マッシュアップ
と言います。

覚えておくとカッコいいです

先に完成品をお見せするとこんな感じです↓
GoogleAppsScriptpomodolo

友達にメッセージを送るとの同じように、自作したLINEbotにメッセージを送るとタイマーが作動します。
自作と言っても、LINEのホームページにちょっと情報を入力する程度で
botを作るためにプログラミングをする必要はないです

GoogleAppsScriptでプログラムを作ろう

ではでは、早速GoogleAppsScriptを使って、タイマー機能を作っていきたいと思います。

今回は、スプレッドシートと連携する前提なので、作り方がいつもとは若干違います。

GoogleAppsScriptxLINE

まず、Googleドライブ上で、適当なスプレッドシートを作成します。
その後、「ツール」→「スクリプトエディタ」を選択すると、いつもの画面になります。
これで、すでにスプレッドシートとGoogleAppsScriptが連携している状態になります

では、早速GoogleAppsScriptを書いていきますが

ここからプログラミングチックになっていきます

なるべく簡単なワードを選んでいますが、「関数」、「変数」など最低限の知識がないと厳しいです。
もしそのレベルまでの知識がない方は、この記事を読む前にこちら↓を読むことをオススメします。
【Skill Hacks 】プログラミングやデザインを0から学ぶ最強コンテンツ!!

まずは作業をブレークダウン(細分化)していきましょう
GoogleAppsScript側でやることとしては、

  1. 必要な変数の宣言
  2. LINEからメッセージを受け取る
  3. 受け取ったメッセージが”start”か”stop”か判断する
  4. “start”/”stop”に対応した関数を実行する
  5. LINEにメッセージを送り、LINE画面に表示する

こんな感じです。

では順番に作っていきましょ〜〜〜

必要な変数の宣言

  • LINEとのメッセージをやりとりする変数
  • 作業時間(分)
  • 休憩時間(分)
  • スプレッドシートのアクセス先を入れる変数
  • スプレッドシートのセルを管理する変数
  • LINEのアクセス先を入れる変数

だいたい、これらの変数を使います。
コードにするとこんな感じです。

var message; //メッセージを入れる変数
var working = 25; //作業時間 今回は25分に設定
var resting = 5; //休憩時間 今回は5分に設定
var ss = SpreadsheetApp.getActiveSpreadsheet(); //省略
var sheet = ss.getRange("A1"); //スプレッドシートの"A1"セルを変数にしています。
var notify_access_token = "各自のTOKENを入れてね"; //省略

省略した部分に関しては、後々説明しますのでご安心ください

LINEからメッセージを受け取る

まだLINE側を設定していないので、受け取った”テイ”で進めます。
LINEからは、POSTメソッドと呼ばれる方式でデータが送られてきますが、ここでは深く扱いません
とりあえずデータを受け取って、その中からメッセージだけを取り出すおまじないだと思ってください

//LINEからPOSTメソッドでメッセージが送られてくるので、受け取ってmyFunctionを呼び出すおまじない
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events; //JSONという形式のデータを受け取る
  events.forEach(function(event) { //受け取ったJSONデータを1つずつチェックする
    if(event.type == ”message”){ //メッセージ型の変数が見つかったら
      if(event.message.type==”text”){ //文字の部分だけを抽出して
        myFunction(event.message.text); //myFunctionに引数としてメッセージを渡して実行する。
      }
    }
 });
}

 

HTTP通信やら、JSON形式やら、初心者向けではない部分があります。
今は理解できなくても大丈夫ですが、後々重要になってきます

受け取ったメッセージが”start”か”stop”か判断する

先ほど、myFunction関数でメッセージを受け取りました。
myFunction関数では、メッセージが”start”か”stop”かを判断して、対応する関数を実行します。

function myFunction(message){
  if(message == "start"){
    sheet.setValue(1); //指定したスプレッドシートのセル("A1")に値(1)をセットする
    work(); //work関数を呼び出す(後述)
  }
  if(message == "stop"){
    delTrigger(); //セットしているトリガーを全て削除する関数を呼び出す
  }
}

分岐自体は簡単なif文なので解説しませんが
if文の中で実行されているwork関数とdelTrigger関数は次の節で解説します。

“start”/”stop”に対応した関数を実行する

“start”に対応する関数はwork関数
“stop”に対応する関数はdelTrigger関数になります。

それぞれの中身は以下の通りです。
(インデントが崩れてしまいます 記事の最後にソース貼ってるのでそちらをご覧ください)


//作業時間をセットする関数
function work(){
  message = "Work." + sheet.getValue(); //LINEに送信するメッセージを設定 Work+何回目のタイマーか表す数字
  var counter = sheet.getValue(); //スプレッドシートから値を取得して
  range.setValue(counter + 1); //+1してスプレッドシートに記入する
  delTrigger(); //セット中の関数を削除して
  ScriptApp.newTrigger("rest").timeBased().after(working * 60 * 1000).create(); //指定した作業時間(25分)後にrest関数を実行するトリガーをセット
  sendHttpPost(working); //LINEにメッセージを送信する
}

//休憩時間をセットする関数
function rest(){
  message = ”Rest.” + sheet.getValue(); //LINEに送信するメッセージを設定 Rest+何回目のタイマーか表す数字
  delTrigger(); //セット中の関数を削除して
  ScriptApp.newTrigger(“work”).timeBased().after(resting * 60 * 1000).create(); //指定した休憩時間(5分)後にrest関数を実行するトリガーをセット
  sendHttpPost(resting); //LINEにメッセージを送信する
}

//セット中のトリガーを全て削除する関数
function delTrigger() {
  var triggers = ScriptApp.getProjectTriggers();  //セット中のトリガーを読み込んで
  for(var i=0; i < triggers.length; i++) {  //for文で全部削除する
    ScriptApp.deleteTrigger(triggers[i]);
  }
}

まず”start”で実行されるwork関数ですが、
work関数とrest関数が交互に実行されるように、プログラムしてあります。

ScriptApp.newTrigger()という関数が、指定時間後に指定した関数を実行するトリガーを設定するためのものでして
ミリ秒で値を指定する必要があるため、時間(分)*60*1000という計算をしています。

delTrigger関数は、セット中のトリガーを全て削除する関数でして、
ScriptApp.getProjectTriggers()でセット中の関数を全て取得し、
for文で1つずつ削除しています。

LINEにメッセージを送り、LINE画面に表示する

最後に、LINEにメッセージを送り返しますが
これまたHTTP通信のPOSTメソッドでして、おまじないだと思ってください

//LINEにPOSTメソッドでメッセージを送るおまじない
function sendHttpPost(time){
var next_time = new Date();
next_time.setMinutes(next_time.getMinutes() + time);
var token = notify_access_token;
var triggers = ScriptApp.getProjectTriggers();
var options =
{
"method" : "post",
"payload" : "message=" + "\n" + message + "\n" + "next is [" + triggers[0].getHandlerFunction() + "] " + next_time.getHours() +":" + next_time.getMinutes(),
"headers" : {"Authorization" : "Bearer "+ token}
};

UrlFetchApp.fetch(“https://notify-api.line.me/api/notify”,options);
}

トリガーやHTTP通信、JSONについては近々記事を書こうと思っておりますので
少々お待ちください

以上で、GoogleAppsScript側のタイマー作成が完了しました。

最後に、Webアプリケーションとして公開します。

画面上部「公開」→「Webアプリケーションとして導入」
GoogleAppsScriptxLINE

適当に情報を入力して導入します。
GoogleAppsScriptxLINE

アプリの承認が必要になります。
基本そのまま進めば大丈夫ですが
もしこのように警告が出たら左下「詳細」→「○○(安全ではないページに移動)」→「許可」と進んでください。
GoogleAppsScriptxLINE

この画面まで進んだら完了です
GoogleAppsScriptxLINE

「現在のウェブアプリケーションのURL」は後ほど使いますので、コピーしておいてください

LINEと組み合わせよう

次に、作ったタイマーとLINEを繋げる作業になります。

ここが少し複雑でして
LINEからGoogleAppsScriptにメッセージを送るサービスと
GoogleAppsScriptからLINEへのメッセージを受け取るサービスが別々になります

有料プランだと1つで済むんですが
無料プランだと2つ組み合わせないと無理なんですよね

まあ、経験値が2倍になると思って頑張りましょう

LINEからGoogleAppsScriptにメッセージを送る

まず、LINEからGoogleAppsScriptにメッセージを送るために
LINE Developerという、見慣れないものを使います。

アカウント作成が必要ですが、僕はもう作成済みでスクショを撮れないので
恐縮ですが、各自お願いします。。。
たしかLINEアカウント(メールアドレスとパスワード)でそのままログインできたと思うんですが
不確かです

LINE Developerにログインできましたら
右上アイコン「新規プロバイダーを作成」を選択します。

GoogleAppsScriptLINEDeveloper
こんな画面が表示されるので、適当な名前(例えばタイマー)を入力して、プロバイダーを作成してください。

プロバイダーができたら、チャネルを作成します。
GoogleAppsScriptLINEDeveloperChanel

中央のMessesing APIを選択しまして、情報を登録していきます
アプリ名:タイマー
説明:タイマー
プラン;フリー
大業種:個人
小業種:適宜
メールアドレス:適宜

個人用なので、適当で大丈夫ですが、プランだけ気をつけてくださいね

チャネルが作成できたら、いよいよGoogleAppsScriptと接続します

作成したチャネルのホーム画面を開いて
画面中部「メッセージ送受信設定」→「Webhook通信」を「利用する」に更新し
その下の「WebhookURL」に前節でコピーしたおいた、GoogleAppsScriptの「現在のウェブアプリケーションのURL」を
貼り付けます。
GoogleAppsScriptxLINE

*URLの頭の「https://」はすでに入力されているので、重複しないように削除してください

さらに、その下の「Botのグループトーク参加」を「利用する」に更新してください。

ここまで完了しましたら、チャネルと自分とのトークルームを作成します。

先ほどのチャネルページの「メッセージ送受信設定」より更に下にQRコードがあるので
チャネルを友達登録してください。

あとは、いつも通りトークルームを作成し、チャネル(おそらくタイマーという名前)がいるはずなので、招待してください。
適当にメッセージを送って、既読がついたらOKです!

以上で、「LINEからGoogleAppsScriptにメッセージを送信する」までが終わりました

あともう少し。。。

GoogleAppsScriptからLINEへのメッセージを受け取る

GoogleAppsScriptからLINEへのメッセージを受け取るためには
LINE Notifyを使います

共通のLINEIDでログインできるはずです。

ログインできましたら
右上の名前をクリックし、プルダウンメニューから「マイページ」を選択します。

その後、画面下部「トークンを発行する」を選択し、トークン名(例タイマー)を付け、先ほど作成したトークルームを選択してトークンを発行します。

GoogleAppsScriptxLINE

こんな感じでトークンが発行されるので
GoogleAppsScriptの「notify_access_token」という変数(上から6行目)に代入します。

これで! ついに! 完成です!!!

ソースコード全体

僕のGithubで公開しています
多分コピペで動くはずです。。。




https://github.com/ebijun1007/pomodoro-timer/blob/master/pomodoro.gas

プログラミングの独学、大変じゃないですか?

プログラミングを独学しているそこのあなた

  • 思い通りにプログラムが動かなくてイライラする
  • エラーをググってもなかなか解決策が見つからない
  • そもそも何から手をつけて良いかわからない

こんな悩みを抱えていませんか?

そんなあなたにおすすめなのが、メンターを雇えるサービス MENTA です

メンターとのマッチングがめちゃくちゃ簡単

MENTAを利用すれば、自分のやりたいことを丁寧に教えてくれるメンターと簡単に出会うことができます!

自分が覚えたいスキルセットを持ったメンターを探す

もしくは

自分が覚えたいスキルと予算を提示して、メンターからの連絡を待つ

たったこれだけです!

プログラミングスクールより格安の料金設定

料金はメンター次第ですが、月々1000〜5000円程度(中には0円でサポートしてくれるメンターも!!)

ebi
えび

プログラミングスクールの月額は平均3万円とされている中で、5000円程度でメンターを雇えるのはかなり格安です!!

ぜひMENTAを活用してスキルアップを目指しましょう!!

 

4 件のコメント

  • えびさん、

    この度は知識を共有して頂いて、ありがとうございます。
    是非、楽しんで試させて頂きました。
    全ての工程を終えた上で、startとトークルーム で打つと
    メッセージありがとうございます(blush)

    申し訳ございませんが、このアカウントでは個別のご返信ができないのです(hm)

    次の配信をお楽しみに(shiny)

    としか返ってこないです。(blushなどは絵文字になってます。)
    お忙しいところ恐れ入りますが、アドバイスなど頂けませんでしょうか。
    どうぞ宜しくお願い申し上げます。

    • 小松さん
      コメントありがとうございます。

      まず、自動返信のメッセージですがLINE Developersの画面から「自動応答メッセージ」を「利用しない」にすると消すことができます。
      次に、応答が無いことに関してですが、僕も作成してすぐは応答がなく困っていましたが、時間を置いたら直っていたのでトークンの有効化に時間がかかっているのかなと思います。
      もし時間を置いてもダメなようでしたら、①GASにメッセージ(start,stop)が送信されているか、②LINEにメッセージが送信されているかを確認する必要があります。
      ①の確認方法は、start/stopメッセージを送った後、GASのトリガーが作成されているか確認してみてください。
      ②についてはWebhook URLやアクセストークンの設定が間違っているかもしれません。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください