【GoogleAppsScript】『GAS未経験→3ヶ月でURL短縮LineBotリリース』までのロードマップ(初心者向け)

# はじめに

筆者は[大学生限定プログラミングコミュニティ『GeekSalon』](https://geek-salon.com/)の
Gameアプリ開発コースで Unity を用いたゲームアプリ開発を教えている者です。

ので、普段は Unity を触っている時間がメインなのですが
「GASがあまりにも便利だ」という話を聞いて
「じゃあやるか」と思い、独学で勝手に勉強を始めました。

そして**3ヶ月後には GAS を用いたURL短縮LineBot『URL短縮水産🐟』をリリース**することができました。
(現在は進化し『URL短縮水産NEO🐟』になっています)
▶︎▶︎▶︎[友達登録はこちらから](https://lin.ee/s4SjkKl)◀︎◀︎◀︎
[<img width="288" alt="スクリーンショット_2019_11_23_3_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210717/f1af0a60-c08b-327d-16e2-0555fe2549b4.png">](https://line.me/R/ti/p/%40474ybxu)


当時の筆者のプログラミングのレベル感は以下です。
・Unity(C#)を2年間
・個人開発でゲームアプリ リリース経験あり
・Swift を半年間
・エンジニアインターンでiOSアプリ チーム開発経験あり
・Ruby(Rails)を1ヶ月間

↑こんな僕が、GAS 未経験の状態から3ヶ月後にURL短縮LineBotをリリースするまでの軌跡を
備忘録も兼ねて書いていきます。

# ① GAS の基礎勉強

### 参照したサイト
▶︎ [ノンプログラマー向けGASレクチャー](https://docs.google.com/presentation/d/1B4av1gPS9xW4XVRqcih6R4Oe5nQabsm3AYO54Y9HDQ0/edit)

### コメント
**ひとこと、神です。**

ノンプログラマー向けに作られたものなので非常に分かりやすいです。
プログラミング経験者であれば5-10時間で全体勉強できると思います。
未経験者でも10-20時間あればいけると思います。

この資料を一通り学習すると
・Google スプレッドシート自動化
・Slack 連携
・Google フォーム自動通知
・GAS から Gmail 操作
等、色々な事例に触れることができ
『 GAS を使うとどんなことが実現できるのか』を手を動かしつつ感じられます。

とにかく神です。(2回目)
作って下さった[@sakaimo](https://twitter.com/sakaimo)さん、ありがとうございます！🙏

# ② SlackBot 作成

### 参照したサイト
▶︎ [ノンプログラマー向けGASレクチャー『Slack連携』](https://docs.google.com/presentation/d/1B4av1gPS9xW4XVRqcih6R4Oe5nQabsm3AYO54Y9HDQ0/edit#slide=id.p354)
▶︎ [SlackとGoogleAppsScript(GAS)を連携する手順・事例](https://tech.tabilabo.co.jp/598/)
▶︎ [初心者がGASでSlack Botをつくってみた](https://tech.camph.net/slack-bot-with-gas/#sub3)

### コメント
この辺を見ながら、
『こちらの発信に対して Google スプレッドシートを参照しつつ、レスポンスを返してくれる』
簡単な SlackBot を作成。

わからないこと多々出て来ますが、
『GAS スプレッドシート 取得』『GAS スプレッドシート 値取得』
等調べればスプレッドシートとの連携については全て出て来ます。

そもそものコードの書き方が分からないときは
『javascript 変数 宣言』『javascript 関数 宣言』『javascript 配列 扱い方』
等調べれば全て出て来ます。
GAS は JavaScript ベースのプログラミング言語なので、参考にできるドキュメントの量は豊富です。

このあたりから GAS を使った Bot 作りに味を占めます。
楽しくなってしまいます。

# ③ 簡単な LineBot 作成

### 参照したサイト
▶︎ [Google Apps ScriptでLINE BOTつくったら30分で動かせた件](https://qiita.com/hakshu/items/55c2584cf82718f47464)
▶︎ [Google Apps ScriptでPushメッセージのLINE Botを作る。](https://qiita.com/tetrapod117/items/0e3a9caf846ea11b688a)
▶︎ [Google Apps Scriptの日毎のトリガーで時間をもっと細かく設定する](https://qiita.com/sumi-engraphia/items/465dd027e17f44da4d6a)

### コメント
SlackBot の次は LineBot です。

自分がその日にやったことを送っておくと、
それをスプレッドシートに記録しておいてくれて、
1日の最後(23:59)にその日に何をしたかの一覧を表示、

「今日もたくさんがんばったね！」と褒めてくれる
LineBot『Doneちゃん』を作りました。
(データベースが自分専用の為こちらは公開していません。。)

ToDo管理はみんなするけど、
『その日に自分が何をしたのか、成し遂げたのか』
をきちんと記録し管理することをしていないと思った為です。

その日に自分が何をしたのかを1日の最後に一覧にし見返すことで
1日の満足度、自己肯定感が上がる気がします。
(たしか科学的根拠もあったはず。忘れました。)

<img width="334" alt="Doneちゃん.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210717/0b3969e7-f477-a588-9084-a2ecdcaf0e6b.png">
↑こんな感じ。

<img width="313" alt="Doneちゃん.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210717/3e5a4fe0-7be0-25b3-e5b1-c70ed5a19ce2.png">
↑1日何もしていなくても褒めてくれる甘やかし仕様です。

実はやることは SlackBot の場合と大きく変わりません。
LineBot を作るときのお作法だけ、手を動かしながら吸収していくイメージ。

「こんなに簡単に LineBot を作ることができるのか…！」と感動した僕は、
外部のAPIも使ったより高度な LineBot を作ってみたくなりました。
もうすっかり楽しくなっています。

# ④URL短縮LineBot『URL短縮水産🐟』を作成

### 参照したサイト
▶︎ [【覚書】GASからbit.lyのAPIを叩いてみた話](https://company.sugumogu.com/archives/2461)
▶︎ [Google Apps Scriptで外部のREST APIを呼び出す](https://journal.lampetty.net/entry/call-external-api-in-gas)
▶︎ [LineBotで複数メッセージで返事](https://devpixiv.hatenablog.com/entry/2016/11/14/150000)

### コメント
僕はURLを共有する時に URL 短縮サービスを使って短くしたものを送ります。
長いとダサいし、視認性を損なうと考える為です。

僕は『Google URL Shortener(サービス終了済み)』や『[Bitly](https://bitly.com/)』を使っていました。
が、スマホを使って Line で友達に URL を送る時に

Safariで送りたいURLコピー
→ 新しくタブ開く
→ Bitly にアクセス
→ 短縮URL取得
→ Line に戻る
→ 友達とのトーク画面開いて送る...

というのが面倒すぎたので
「だったらLineBotにその機能を持たせれば良いのでは？」
と思い開発に着手しました。

幸いにも『 GAS で Bitly の API を叩いてみた』
というドンピシャの記事があったのでそれを参考にするだけでいけました。

API 叩いて色々できるようになると、夢が広がります。
なんでもできる気がしてきます。
この頃には身も心もGASの虜。

『URL短縮水産🐟』を"NEO"にする以外の選択肢を、僕は持っていませんでした。

# ⑤ QRコード生成機能や QuickReply 機能を搭載し『NEO🐟』へ
### 参照したサイト
▶︎[QR Code Generator](http://goqr.me/api/)
▶︎[GAS入門 - DriveAppクラスリファレンス](https://qiita.com/YutaNakamizo/items/b32be642d05269e4b28f)
▶︎[LINE Developers クイックリプライを使う](https://developers.line.biz/ja/docs/messaging-api/using-quick-reply/)

### コメント
細かくは説明しませんが↑の諸々を参考にしたりして
・QRコード生成機能
・GoogleDrive に生成されたQRコードを保存
・QuickReply 機能
を実装しました。

この頃には GAS について調べることは減り、
『 API をどのように使えば良いのかだけを調べれば実装できる』状態になっていました。

QuickReply 機能は LINE Messaging API の比較的新しく追加された機能です。
<img width="320" alt="IMG_91786C76CB15-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210717/3688b5de-c757-0e0d-d2c8-5a2b0fcb106a.jpeg">
↑このボタンが QuickReply のそれです。
"QR取得"のボタンを押すとQRコードが取得できます。

LINE さんが用意してくれている[公式リファレンス](https://developers.line.biz/ja/docs/messaging-api/)は神です。
とても丁寧に分かりやすく書いてくれているので LineBot の開発は基本的に困りません。

# ⑥『URL短縮水産NEO🐟』完成
▶︎▶︎▶︎[友達登録はこちらから](https://lin.ee/s4SjkKl)◀︎◀︎◀︎
[<img width="288" alt="スクリーンショット_2019_11_23_3_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210717/f1af0a60-c08b-327d-16e2-0555fe2549b4.png">](https://line.me/R/ti/p/%40474ybxu)

# さいごに
**GAS はほんとうに無限の可能性に溢れています。**
**とても楽しいです。**

簡単に LineBot, SlackBot 作れるの、アツくないですか？
業務自動化、したくないですか？

↑に少しでもうなずいてもらえたら。
是非 『[ノンプログラマー向けGASレクチャー](https://docs.google.com/presentation/d/1nHxLlNwNg23j_bp0JBgRhjUQpnm0E_S5OK4VAXiS2y8/edit#slide=id.g54702a7210_0_0)』から勉強をはじめてみて下さい。

気づいた時にはもう、GAS 沼に足を踏み入れていることでしょう。
(僕はもう鎖骨あたりまで沼にうもれています😇)

# Appendix
実は他にも
・IFTTT を使って GoogleHome と連携
・GAS を使ってサーバレスで Web ページ作成
・GAS でスクレイピング→パース
・GAS を使って業務自動化・効率化
などなど、色々やってきています。

その際に参照したサイト
▶︎[【IFTTT】Google homeでスプレッドシートに家計簿をつけて合計をLINEで通知する方法](http://www.otwo.jp/blog/ifttt_household_account/)
▶︎[【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル](https://tonari-it.com/google-apps-script-manual/)
▶︎[Google Apps Scriptで最も簡単なWebページを作成して公開する](https://tonari-it.com/gas-html-web-page/)
▶︎[Google Apps Script試行錯誤Blog](http://www.pre-practice.net/2017/10/line-bot_84.html)
▶︎[GASで簡単WEBスクレイピング！HTMLを簡単にパースできるライブラリParserを使ってみた](https://www.kotanin0.work/entry/2019/01/06/200000)
▶︎[GASからSpreadsheetを難しいことを考えないで使う](https://5hyn3.github.io/posts/use-spreadsheets-from-gas-without-thinking-about-difficulties/)