A note of a person who is learning programming, SakaTaQ

ロック好きのプログラミング学習

LINE botの作成 (準備)

最近はご時世的なものもあって余り使わなくなってしまいましたが、仲間との飲み会などで連絡ツールとしてよく使っていたLINE。
このLINEのbotを作ってみて、これから便利な機能をつけたいなって思った時の自分の中の参入障壁みたいなものを少し取り除きたいなーと思って少しだけ調べてみました。
いつもどーり調べたことや行ってったことをツラツラと書いていきます。

bot作成にあたって必要なもの

  • Googleアカウント
  • LINE Developersアカウント
  • JavaScript, Node.jsの学習(自分はあまり長く付き合ってませんが...)

ちな、自分はMacBook OS(Catalina)を使用しています。

LINE Developersのアカウント作成

これまでは開発者としてLINEを使用することはなかったので、アカウントを持ってません。ので作成から。
LINE Developersにアクセスして右上のログインボタンをクリック。
公式のマニュアルに一通り流れが書いてあります。
正直、現状使っているLINEアカウントの情報と分けるメリットが今は感じられないので、LINEアカウントを使用してログインしていきます。
開発者の名前、メアドを入力するとコンソールホームページが開かれます。
f:id:saka20taku43:20200614135132p:plain
このコンソールページへは自身のアカウントアイコンをクリックしてサイドバーにある「コンソールホーム」を押すと飛ぶことができます。

次にプロバイダー(提供者)を作成する必要があります。クリックすると提供者名を入力するフォームが出てくるので、そこにプロバイダー名を入力。自分はLINE Develpersのアカウント名をそのまま入れました。

その次に Channelを作成します。
6/14/'20現在では、LINEログイン、Messaging API、Clova skill、β版ブロックチェーンサービスの4種類のチャンネルタイプが存在します。
f:id:saka20taku43:20200614141814p:plain
bot作成においてはMessaging APIを選択します。選択してページ変遷後はいくつかの必要事項を入力します。

  • チャンネルタイプ(事前選択済み)
  • プロバイダー名(事前選択済み)
  • チャンネルアイコン(オプション、なしでもOK):画像の拡張子はpng, jpg, gif, bmpなど決まっています。また、3MB以内限定。
  • チャンネル名:アプリの名前
  • チャンネルの説明:どういったアプリかの説明文、空欄はダメですが内容は任意。
  • カテゴリー:セレクトボックスから「飲食」「ゲーム」などのカテゴリーを選択。
  • サブカテゴリー:上記カテゴリー選択後にセレクトボックスから細分化されたサブカテゴリーの選択。
  • メールアドレス:自身のメールアドレスを入力
  • プライバシーポリシーURL(オプション、なしでもOK):HTTPS URLであれば登録可能。
  • サービス利用規約などのURL:HTTPS URLであれば登録可能。

設定自体にはアプリの動作には関係ないが、とりあえずはなるべく分かりやすくしたり、関連性を持たせたりした方がいざ使う時に困らない。
今回は仕組みを知るためなので余り凝ったことは考えてません。入力したものに対してオウム返ししつつ褒めてるようで煽ってくるbotを作成します。

色々と調べていくとLINE DevelopersではSSLを利用する必要があり、HerokuでデプロイしてSSLを利用するには $7/月 の支払いが必要とのこと。
GASでは無料でSSLサーバにてbot処理が利用できるみたいなので、今回はそちらを利用します。

GAS(Google Apps Script)って何?

GASとは、Googleが提供するJavaScript互換のサーバーサイド•スクリプト環境。
通常はブラウザにJavascriptの実行環境があるけど、GASの場合はGoogleのサーバー上に実行環境がある。そのため、よく使われていた「window」「document」といったオブジェクトの指定などはできないようです。その代わりにGoogleの便利機能を利用できるオブジェクトが存在するようです。
また、Node.jsなどのようなサーバーサイド言語であれば開発環境などは自分で揃えなければならないけれど、GASではこの環境自体がサーバー上にあるため、JavaScriptについて少し知っていればとっつきやすいというのがメリットの一つのようです。

使用可能オブジェクト、バージョンについてはこちらこちらを参考にしました。
割と最近になって、ES6で利用できる機能がサポートされたようです。
これまではlet, const, アロー関数や他の便利な構文も使用できなかったみたいですね。

利用するにはまず当たり前ですが、Googleアカウントが必要です。とりあえず自分は作成済み。
ログインしたらブックマークバーにある「Googleアプリ」から「Google ドライブ」を選択し、変遷先で「新規」ボタンをクリックした後「その他」に合わせる。
GASがインストールされていればプルダウンリストの中に表示されているようです。
ない場合はメニューの「アプリを追加」からGoogle Apps Scriptを検索し、インストールを行う。

メニューに追加されていたらインストールに成功しています。クリックするとエディタが立ち上がるので、そちらにコードを書いていく。
もしくは、新規のスプレッドシートを作成して、メニューバーの「ツール」→「スクリプト エディタ」でも起動できるようです。これによりスプレッドシートに付随してGASファイルが管理されるようです。
スプレッドシートをデータベースのように使用するため、こちらの方法を採るという記事も見かけました。

今回はスプレッドシートからエディタを立ち上げています。
エディタが立ち上がったら左上の「プロジェクト名」を入力。 「公開」→「ウェブアプリケーションとして導入」をクリック。マニュアルはこちら ※ リンク先も英語です
(こちらはコードを書いた後でも問題ないですが、今回は先に行います)

モーダルが出現
f:id:saka20taku43:20200616001954p:plain

  • Project version: New(新規作成)
  • Execute the app as(次のユーザーとしてアプリケーションを実行): Me(自分)
    • URLを配布する前にスクリプトを承認する必要がある、と注意書きがあります
  • Who has access to the app(アプリにアクセスできるユーザー): Anyone, even anonymous(誰でも、匿名でも)
    • 2つ目の選択肢にある全ユーザーはドメインメンバー(Googleアカウントを使用)とあるのである程度限定された範囲のようです。

...なんか見辛くなっちゃった😅
これでWebAPIとしてGASプログラムを公開することができます。
f:id:saka20taku43:20200616002648p:plain
ここで発行されたURLをLINE DevelopersでWebhook URLに登録する。
URLを取得できたらLINE Developersで先ほど作ったチャンネル(bot)のMessaging APIタブの中にWebhookURLを設定できる項があるのでそちらに入力し、Webhookを使用するようにしておく。
LINEではアプリでBOTへメッセージが送られたタイミングなどで、その内容をこのURLに送信する。
また、同タブ内にてチャンネルアクセストークンの発行を行う。
bot本体の開発にはこのアクセストークンと基本設定タブのChannel Secret(チャンネルの秘密)が必要になるので控えておく。

さらに、LINE BOTには固定のメッセージ自動で返信(応答、友達追加時)する機能があるみたいなので、そちらをOFFにしておく。
f:id:saka20taku43:20200616011346p:plain

「編集する」をクリックすると別ウィンドウが開くのでそちらで該当項目をOFFにしていく。

f:id:saka20taku43:20200616011407p:plain

一通り設定が終わったらMessaging APIタブにあるQRコードで友達登録をしておく。公式アカウントの方に追加されている。

GASにアクセスするための関数の作成

これまでの設定では外部にGASを公開する設定してきましたが、これだけではGASにはアクセスできないようです。HTTP通信のmethod: GETに対して反応する関数が必要とのこと。

// 既存のコードに上書き
function doGet() {
  return ContentService.createTextOutput("success");
}

このdoGetというのはGAS側で設定されており、この名前で関数を作成した場合、自動的にGETに対してこの関数が実行されるようです。

動作を確認する為、入力したらメニューバーのファイルから保存するか、⌘ + Sで保存。
「公開」→「ウェブアプリケーションとして導入」でプロジェクトバージョンは前回同様「New」。
コードを更新するたびに前述のように設定しないとbotの動作内容は更新されないようです。
更新したら「表示されたURL」に「ブラウザのシークレットモードでアクセス」してみると、「success」の文字が表示されている。
(Chromeの場合は、デスクトップのメニューバーのファイルか、ブラウザのその他ボタンの新しいシークレットウィンドウで開くことができる。)

GETでのレスポンスの確認ができたら、LINE Developersの管理画面でWebhookURLへの接続確認を行ってみる。成功と出れば、LINE APIからのGASが確認できたことになる。


参考にさせていただいた記事
LINEのBot開発 超入門(前編) ゼロから応答ができるまで
映画と旅行とエンジニア
Google Apps ScriptでLINE BOTつくったら30分で動かせた件
Line BotをGoogle App Scriptで無料で手軽に試してみる。


今回はここまで。

GASで利用できるメソッドなどは別途記事にしたいと思います。
したらな❗️ 👋