素人が2020年までの1ヶ月でLINE BOTに挑戦する毎日note. 【Day 30：開発6日目_日程調整依頼の作成_LIFFとテーブル追加】

こんにちは。くろです。

12月1日から2019年残り1ヶ月でスケジュール調整BOTの開発に挑戦しています。今日は30日目です。

ついに2019年も残す所あと1日です！

みなさんは2019年やりきれたでしょうか？

私はいくつかまだやり残したことがあるのですが、ラスト1日もがきます！

ここまでは、フローチャートの【日程調整依頼】の内、

「1，グループ招待時にトップページリンクと挨拶メッセージを送る」

「2，LINEログインしてトップページを表示する」

を開発してきました。

今日からは「3，日程調整依頼の作成」を開発していきます。

概ねこういった流れて作っていけるのかなと思います。

3-1，LIFFアプリを追加

3-2，データベーステーブルの作成

3-3，日程調整依頼作成ページ（条件設定ページ）の作成

3-4，LIFFを使って条件情報をユーザーに送信させる。

3-5，取得した日程調整条件をDBへ保存

3-6, ユーザーへのリプライメッセージとして作成した日程調整URLを返す

3-1，LIFFアプリを追加

LINE Front-end Framework (LIFF)

こちらの記事に従って作成してきたWEBアプリケーションをLIFF化します。

・プロバイダー、チャネルの作成

LINELOGINの記事でチャネルを作成しているので、そこをLIFFで使ってOKみたいなので飛ばします。

・LIFFアプリのコードを入れる

<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>

この一行をindex.ejsとcreate.ejsの一番下に入れました。

・LIFFアプリをチャネルに追加する

1，LINE DevelopersコンソールでLIFFアプリを追加するチャネルを選択し、［LIFF］タブをクリックします。

2，［追加］をクリックします。

3，以下の項目を設定します。

・LIFFアプリ名：LIFFアプリの名前。
　⇛　scheduler_botにしました。

・サイズ：LIFFアプリの画面サイズ。詳しくは、「LIFFアプリの画面サイズ」を参照してください。
　⇛　mediumにしました。

・エンドポイントURL：LIFFアプリを実装したウェブアプリのURL。LINEでLIFFアプリを起動した際に、このURLにリダイレクトされます。たとえば、LIFFスターターアプリをHerokuにデプロイした場合は、https://{Heroku app name}.herokuapp.comを入力します。詳しくは、「LIFFアプリを開く」を参照してください。
　⇛　herokuアプリケーションのトップページURLにしました。

・Scope：LIFFアプリの動作に必要なスコープ。
　├openid：IDトークンを取得するためのスコープ（※）
　├email：メールアドレスを取得するためのスコープ（※）
　├profile：プロファイルを取得するためのスコープ
　├chat_message.write：メッセージを投稿するためのスコープ。アカウントの種類によっては、このオプションが［全て表示］の下に表示されることがあります。
　※LINEログインのチャネルで、OpenID Connectのメール取得権限を申請した場合のみ表示されます。
　⇛　全部○つけておきました。

・ボットリンク機能：ボットリンク機能の設定。
├ON(normal)：LIFFアプリの利用条件の同意画面に、LINE公式アカウントを友だち追加するオプションを追加します。
├ON(aggressive)：LIFFアプリの利用条件の同意画面の後に、LINE公式アカウントを友だち追加するかどうか確認する画面を表示します。
├OFF：LINE公式アカウントを友だち追加するオプションを表示しません。
LINEログインのチャネルでのみ表示されます。
　⇛　OFFにしました。うざいので。

・オプション > BLE通信 LINE ThingsのためにLIFFアプリを追加する場合は、［ON］を選択します。
　⇛　OFF。
・オプション > ScanQR LIFFアプリでQRコードリーダーを利用する場合は、［ON］を選択します。
　⇛　OFF。

4，［作成］をクリックします。

※LIFFアプリをチャネルに追加すると、LIFF URL（例：line://app/1234567890-AbcdEfgh）が作成されます。LIFF URLは、LINEでLIFFアプリを起動するときに使用するURLスキームです。また、LIFF URLから「line://app/」を取り除いたものがLIFFアプリID（例：1234567890-AbcdEfgh）です。

これで作成完了です。

line://app/hogehogeをLINEアプリ内で開いてみましょう！

普通に今までと同じ挙動をすることが確認できたので、おそらくちゃんと入ったと思います。

3-2，データベーステーブルの作成

ここは基本的には単純作業（のはず）です。

db.js上に作成していきましょう。

var create_table = {
   text: ['CREATE TABLE IF NOT EXISTS users (id SERIAL NOT NULL, line_uid VARCHAR(255) NOT NULL UNIQUE, google_id VARCHAR(255), display_name VARCHAR(255), created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))', 
   'CREATE TABLE IF NOT EXISTS schedule (id SERIAL NOT NULL, token VARCHAR(255) UNIQUE, owner_user_id BIGINT, deadline DATE, start_time TIMESTAMP, end_time TIMESTAMP, timeover_push BOOLEAN, validity BOOLEAN, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))',
   'CREATE TABLE IF NOT EXISTS schedule_member (id SERIAL NOT NULL, schedule_id BIGINT, user_id BIGINT, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))',
   'CREATE TABLE IF NOT EXISTS prospective_date (id SERIAL NOT NULL, schedule_id BIGINT, date DATE, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))']
};

exports.create_table = create_table;

こんな感じで作成してみました。

2つのクエリ文をどうやって入れるかわからなかったので、配列に入れてみたり、普通に並べてみたりしましたが、配列はエラー、並べると一番最後だけ実行される感じになったので、それぞれ別々に作ることにしました。

db.js

var create_table_users = {
   text: 'CREATE TABLE IF NOT EXISTS users (id SERIAL NOT NULL, line_uid VARCHAR(255) NOT NULL UNIQUE, google_id VARCHAR(255), display_name VARCHAR(255), created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))', 
};

var create_table_schedule = {
   text: 'CREATE TABLE IF NOT EXISTS schedule (id SERIAL NOT NULL, token VARCHAR(255) UNIQUE, owner_user_id BIGINT, deadline DATE, start_time TIMESTAMP, end_time TIMESTAMP, timeover_push BOOLEAN, validity BOOLEAN, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))',
};

var create_table_schedule_member = {
   text: 'CREATE TABLE IF NOT EXISTS schedule_member (id SERIAL NOT NULL, schedule_id BIGINT, user_id BIGINT, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))',
};

var create_table_prospective_date = {
   text: 'CREATE TABLE IF NOT EXISTS prospective_date (id SERIAL NOT NULL, schedule_id BIGINT, date DATE, created_at TIMESTAMP, updated_at TIMESTAMP, PRIMARY KEY (id))',
};

exports.create_table_users = create_table_users;
exports.create_table_schedule = create_table_schedule;
exports.create_table_schedule_member = create_table_schedule_member;
exports.create_table_prospective_date = create_table_prospective_date;

index.js

connection.query(db.create_table_users)
 .then(res => console.log(res.rows[0]))
 .catch(e => console.error(e.stack))

connection.query(db.create_table_schedule)
 .then(res => console.log(res.rows[0]))
 .catch(e => console.error(e.stack))

connection.query(db.create_table_schedule_member)
 .then(res => console.log(res.rows[0]))
 .catch(e => console.error(e.stack))

connection.query(db.create_table_prospective_date)
 .then(res => console.log(res.rows[0]))
 .catch(e => console.error(e.stack))

実行してみると、しっかりテーブルが作成されていました。

今日はここまでにさせて頂きます。

3-2の検証に結構時間を使ってしまった。。。