見出し画像

素人が2020年までの1ヶ月でLINE BOTに挑戦する毎日note. 【Day 31:開発7日目_日程調整依頼の作成_】

こんにちは。くろです。

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

大晦日、チャレンジ最終日です!

1ヶ月でどこまでできたのか?は最後に書いています。

もし結果だけ知りたい方がいれば、目次から飛べますので、読んでいって下さい!

また、最後に色々感想とかも書いているので、ぜひ読んでみて下さい。

本題です。

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

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

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

を開発してきました。

改めてBOTの概要

開発アプリ:Googleカレンダーと連動してスケジュールを調整してくれるLINEBOT

BOTの概要:Day 2の記事に書いています。

BOTの仕様:機能一覧やフローチャート Day 10の記事に書いています。

BOTの開発環境:Day25の記事でアプリケーションの骨格を作りました。

今日は「3,日程調整依頼の作成」の開発を続けていきます。

Agenda

(done) 3-1,LIFFアプリを追加

(done) 3-2,データベーステーブルの作成

ココカラ⇛ 3-3,日程調整依頼作成ページ(条件設定ページ)の作成

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

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

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



3-3,日程調整依頼作成ページ(条件設定ページ)の作成

LIFFでメッセージが送れないと意味がないので、ここは一旦ボタンを設置するだけにして、先に3-4をやります。

create.ejs

<button type="button" onclick="sending();">クリックして下さい</button>

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

まずは、先程作ったボタンを押すと定形文のhello worldを送信させるようにします。

そもそも私が勘違いをしていて、liffは名前の通りあくまでフロントエンドのものなので、node側でいじったりするものではないようです。

なので、フロントエンド用のjavascriptを書いてejsから呼び出して使おうと思ったのですが、呼び出しがちょっとうまくいかない、、、

一旦諦めて直接htmlのヘッダーに書くことにしました、、

 

 <script>
   
   function sending() {
   liff
       .init({
           liffId: "XXXXXXXXXXXXxx" // use own liffId
       })
       .then(() => {
           console.log("init pass");
           // Start to use liff's api
           liff.sendMessages([
               {
               type:'text',
               text:'Hello, World!'
               }
           ])
           .then(() => {
               console.log('message sent');
           })
           .catch((err) => {
               console.log('error', err);
           });
       })
       .catch((err) => {
           // Error happens during initialization
           console.log(err.code, err.message);
       });
   }
 </script>

こんな感じでheaderに書いてみて実行したのですが、

画像1

ボタンを押せども押せどもなにも起こらない、、、

そして、それよりも大問題が、、

LIFFで起動した時はnode側ではなく(サーバ側)フロントの処理なので、herokuのログにコンソールログが上がってこない。しかも、フロントのコンソールログもLINEアプリの中なのでChromeみたいにdeveloperツールが使えないので、見れないという八方塞がり、、、

ログが出せないとどこでなにが止まっているのかとかエラーの内容とかが全然わからなくて直しようがない、、、

ということで、ログを見る手段を探していたのですが、下記の記事で書いているvConsoleというものでできそうなので、導入してみたのですが、上手く起動しない、、、

苦肉の策で画面上にconsole.logの内容を表示する方法が書いてあったので、そちらを採用してみることにしました。

header.ejs

<script>
   var log1, log2;
   console.log = function (log1, log2) {
   document.getElementById('console_log').innerHTML += log1 + "<br>" + log2 + "<br>";
   }
</script>
nav.ejs

<body>
   <div id="console_log"></div>
</body>

こちらのコードを共通で利用したいので、header.ejsとnav.ejsに記載しました。

実行結果

画像2

一回CLICKすると一瞬上記の画面がでて、元の何もログが出てない画面にもどりました。

もう一回押してみると

画像3

ちょっと違うエラーがでました。

1回目はinit自体はエラーで、その後はユーザーの代わりにメッセージを送る権限が無いって言われてますね、、、

むむ。これをずっと解明していたのですが、ちょっと解決まで持っていけなかったので、明日に持ち越させて頂きます。

ちなみにトップページに同じコードを入れるとメッセージを送ってくれたので、ログイン状態とかそのへんを引き継いでいければ、大丈夫そうです。

皆様ここまで読んで頂きありがとうございます。

完成していない所大変心苦しいのですが、毎日投稿は本日が最後になります。

ただ、完成するまでの過程は同じくnoteにまとめていくので今後もよろしくお願いします。

結果をまとめておきます。

【チャレンジ結果】

チャレンジ結果:
BOTを年内に完成することは出来ませんでした。LIFF上でLINEログインして、ユーザー情報をデータベースに保存して、データベースからユーザー名を取ってきてWEBページに表示し、その後LIFFが少し動く所までが限界でした。

原因と振り返り:

DAY29にも書きましたが、

・やはり基本的なコードとかお作法がざっとインプットできていないと何がだめなのかの見当がつかない&どうやったらできるかの見当がつかない。

・わからなかった時に検索するけど、なかなか答えが見つからない。
herokuの標準DBぽかったからpostgresqlを選んだけど、mysqlの記事の方が多かったり。。というかpostgresqlの記事はあるんですが、今回の環境における記述の仕方が書いているものとかがなかったりするので、そこが難しかったです。

・LINEBOTの場合、デバック(試行錯誤)がいちいちデプロイして確かめないといけないから、ちょっとコード変えて試して結果見て、っていうのに2分くらいかかってしまう。単なるWEBだとローカルで一瞬で見れたりするので。

特にデバックが時間かかるのとざっとインプットできてないので、時間がすごいかかってしまった感じはあります。

インプットの所は例えばExpressの記事をもっと早くに読んでいれば、どうやってアプリケーションが動くのかわかっただろうし、postgresqlやDBについては今でもあんまりわかってないので、結構辛いものがありますね。。

あとは、当たり前ですが、本業の合間に普通にいろんな予定を入れながらだと時間がそんなに取れなかったというのは実感したことです。

期間については、今回のチャレンジとしては1ヶ月は結構無謀でしたが、なにかを毎日続けるという意味では1ヶ月はちょうどいいくらいかなと。2週間とかだと短すぎるし、1ヶ月もやるともはや習慣になります。ただ3ヶ月とかだとちょっと間延びもしますし、本業もある中だと1ヶ月くらいが影響も少なくて良いかなと思います。なにより飽きちゃうし。

※ローカルのデバックはWEBページの部分はローカルで検証する方法を実践できたので、そこもおいおい書いていきます。簡単に言うと.envファイルの中にherokuに設定している環境変数を直接書き込んでおくと、ローカルで実行する時にアクセストークンなどをそこから読んでくれるようにできました。BOTの応答やLIFF固有のものはここでは検証できないですが。

【感想】

本当に完成させられなかったのは残念ですが、この1ヶ月で設計からデータベース、サーバー、heroku、node、JavaScript、html、css、Bot、LIFFなどこれまで全くの未知だったことを理解できるようになって、アウトプットもできて、この1ヶ月頑張ってよかったなと思っています。

また、読んで頂いている皆様がいるということは毎日続ける原動力になりました。皆様の温かいお言葉やスキ、シェアなどは本当に嬉しく、こういうレスポンスのありがたみを感じました。こういったレスポンスはアウトプットありきだと思うので、改めてアウトプットって大事だなと思わせて頂きました。この経験は自分の中でとても大きかったです。

昨日までの30個の記事で1614回の視聴、84個のスキを頂きました。本当にありがとうございました。

加えて、12月中プライベートや仕事など、リアルで交流のあった方にはご迷惑をおかけした部分も多く、本当に周りの方々には感謝感謝です。

2019年も本当にいろんな方々からいろんな刺激をもらって楽しい一年でした。

実は2019年のはじめに書き初めをしていて、「一簣之功」という言葉を書いていました。意味は「仕事を遂行するために積み重ねる一つ一つの努力」という意味で、目が出る前の下積み的な意味もある言葉です。

2019年はこの言葉通り、目立った成果は決して多くはなかったかもしれないですが、少しずつ色々なものを吸収させて頂け、これから飛躍するための下準備をしてきた年になったかなと思います。

もっとアウトプットを多くしたかったとかももちろんありますが、それでもこの一年走ってきて良かったなと思える2019年でした。

あと1時間で迎える2020年ですが、2019年の学びを最大限に活かして、少しでも多くの価値を皆様に返していきたいと思います。

2019年もありがとうございました!

よろしければサポートお願いします! 頂いたサポートはクリエイター活動に活用させて頂きます。