LINEのリッチメニューを利用してGASを動かしてみよう！

こんばんは、おおさき（@massa_potato）です。

沖中塾(初心者向け記事)のカレンダー | Advent Calendar 2022 の12日目の記事です。

先日10日目の記事で、GASのメリットや始め方、スプレッドシートを使ったカンタンな打刻プログラムを作るやり方を紹介しました。

ところでこのプログラム、いちいちPCでエディタを立ち上げないでスマホから動せたら便利かも…？ とか思いませんか？

実はこれ、結構いろんなやり方で実現できます。たとえば 「LINE公式アカウント」のリッチメニューを使って、タップするだけでプログラムを実行できるようにするやり方がありますので、本記事ではその方法を紹介してみます。

本記事では、コードを書いたりLINEのAPIを使ったりなどは出てきません。具体的には以下のやり方を解説しています。

• GASで作ったプログラムをWebアプリとして公開する方法
• LINE公式アカウントでリッチメニューを設定する方法

GASで作ったプログラムをWebに公開する

まずは、先日の記事で作ったGASの打刻プログラムを、Webに公開していきたいと思います。

コードを一部書き換える

まずは前回記事で作成したスプレッドシートをGoogleドライブから開き、同じ手順でスクリプトエディタを開いてください。

次に、書いてあるスクリプトの1行目のmyFunction()の部分を、doGet()と書き換えます（冒頭でコードは出てこないと注釈を入れましたが、ここだけですので…）。

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  const name = 'おおさき'; // ※自分の名前を入力！
  const time = new Date();
  sheet.appendRow([name, time]);
}

念のためスクリプトを全文載せていますが、変更するのは先頭の1行目だけですよ！

書き換えたら試しに、このスクリプトを実行して動作確認をしてみましょう。上部ツールバーに今度は「doGet」が表示されているのを確認してから、スクリプトを実行してみます。エラーが出ず無事に実行が完了したらOKです。

このdoGet()はGASの機能で「トリガー」と呼ばれるもののひとつです。のちほど出てくるURLにアクセスすると、doGet()の後の波括弧の中の処理（関数）が動きます。

Webアプリとしてデプロイする

次に、このGASで作ったプログラムをWeb上に公開してURLを発行してみましょう。この操作をデプロイと呼び、これを行うことでいわゆる「Webアプリ」を作成できちゃうことになります！

スクリプトエディタの右上にある青色の「デプロイ」をクリックし、「新しいデプロイ」をクリックします。

すると以下のようなウィンドウが表示されるので、「種類の選択」の横にある歯車アイコンをクリックして「ウェブアプリ」を選択します。

次に以下のように項目を入力・選択して、最後に右下の「デプロイ」をクリックします。

すると「デプロイを更新しました。」という表示とともに、ウェブアプリのURLが発行されます。

このURLはこの後使うので、左下の「コピー」をクリックしてコピーし、メモ帳アプリなどに保存しておきましょう。 できたら右下の「完了」をクリックします。

URLにアクセスしてみる

では試しに、コピーしたURLをブラウザで開いてみましょう。

すると、「スクリプトが完了しましたが、何も返されませんでした」と書かれたページが表示されます。ページのタブには「エラー」と表示されちゃっていますが…。

スプレッドシートのシートを確認してみると、しっかりと新しい行が追加されているのがわかります。

これで、ひとまずWebアプリとして動かすことができるようになりました。本格的なWebアプリとは程遠いですが、単機能のWebアプリが完成です！

なんならこのURLをブックマークに登録しておき、起動したい時に開くだけでも良かったりしますが…それだとちょっと味気ないですよね。

LINE公式アカウントを作成する

ではここからは、LINE公式アカウントを準備していきましょう。

やり方は、アドベントカレンダー1日目の@okinakamasayoshi
さんがとてもわかりやすく解説してくださっていますので、ぜひこちらの記事をご参照ください！。

記事の中の「さぁ公式アカウント作成」のまで行い、自身のスマホでLINE公式アカウントを友だち登録するところまで進めておいてください。公式アカウントの名前やアイコンなどは自由に設定してみてくださいね。

リッチメニューを作る

さて、もうちょっとです。次にこのLINE公式アカウントに「リッチメニュー」を作成していきましょう。

リッチメニューの新規作成と設定を行う

まず、先ほどアカウント作成の時に設定を行った「LINE Official Account Manager」のページを開きます。そして「ホーム」から「リッチメニュー」をクリックし、表示される「リッチメニューを作成」をクリックしてください。

すると、リッチメニューの設定画面が出てきます。まずは以下のように、「基本設定」にメニューのタイトルと表示期間を設定しましょう。タイトルは自由に入力して大丈夫ですが、表示期間は現在時刻から5年後くらいの時刻を入れておくと良いと思います。

テンプレートと画像を設定する

次に、「コンテンツ設定」です。ここではリッチメニュー見た目やタップした時の動作などを設定していきます。

テンプレートを選択していきましょう。いろいろありますが、今回は一番左下の横長の1つだけのボタンがついたメニューを選びました。

次に画像の設定です。手持ちの画像をアップロードするか、このブラウザ上で作成するかを選べます。簡単に試してみたいので、下の「画像を作成」を選んでみましょう。

次の画面でテキストや画像などを自由に入れて「適用」をクリックします。

すると確認のウィンドウが出ますので、必要に応じて「ファイルに保存」か「適用」を選択してください。

アクションを設定する

最後に、アクションのタイプを選択します。実際にLINEでリッチメニューのボタンを押した時に、どのようなアクションをするかをここで設定することになります。今回は「URLをタップすると動くWebアプリ」の仕組みを使いたいので、ここは「リンク」にしましょう。

「URLを入力」の枠内には、先ほどGASスクリプトをデプロイして作成したWebアプリのURLを入力し、「アクションラベル」にはどんな動作をするのかを簡単に書いておきます。

その下の「メニューバーの設定」はそのままでOKですので、最後に一番下の「保存」をクリックしましょう。

以上で、リッチメニューの設定が完了しました！

スマホのLINEで確認する

それでは、スマホで友達になったLINE公式カウントを再び開いて確認してみましょう。このように、下部に作成したリッチメニューが表示されるはずです。待っても表示されない場合は、一度LINEアプリを再起動すると現れます。

「打刻する！」のメニューをタップすると、またなにやらエラー画面が出てきますが、右上の×マークで画面を消しちゃってください（ほんとはここのHTMLを作るとこともできるのですが…）。

スプレッドシートを見てみてください。シート最下行に、新たに時刻が追加されていれば成功です。

これで、LINEのリッチメニューをタップすることで打刻プログラムが動く仕組みを作ることができました！

おわりに

今回はGASのプログラムをスマホから動かす方法のひとつとして、LINE公式アカウントを使う方法を紹介しました。LINEのリッチメニューがスマホのユーザーインターフェースとして使いやすいよ！ということが伝われば良いなと思っています。

そして、もっとちゃんとしたプログラムを作るには、GASでLINE Messaging APIを使ってLINEbotを作成するやり方があります。

このアドベントカレンダーでもGAS×LINEbotについて書いてくださっている方もいらっしゃったり、アイデア次第で色々できる方法です。ぜひ興味があれば挑戦してみてください！