輝く僕らの学費

外の空気が大好き、そこそこ忙しい理系の男子大学生のぶちおです。

未分類

「あとでLINEでみる」っていうWebアプリ・LINE BOT

投稿日:

さくっとスマホにリンクを送るためのWebアプリ。LINE BOTでそのリンクを受け取り。Reactに触れてみたかったので作ってみた、簡単なWebアプリです。

開発の背景

  • 大学の演習室PCなど、使うたびにGoogleなどのクラウドサービスにログインするのが面倒くさい
  • Googleドライブの共有リンクをLINEをインストールしていないPCで手軽にLINEに送りたい
  • Googleドライブアプリをスマホでも開いて、リンクコピーしてLINE開いて送信って流れは面倒。
  • Keepに貼っておくなども同様。

Xperia Z使ってた頃に、Chrome to Phoneって拡張機能があって、PCからワンクリックでスマホのChromeで、現在のページを立ち上げられるやつがあって、すごく便利だったのが忘れられない。

> めっちゃシンプルにリンクを転送したい。

使用技術

  • PHP(Codeigniter3)
  • MySQL
  • React
  • Heroku

まずは、頭の整理

基本的な方向性の確定。あと、かなり雑なデザイン。

データベースのテーブル設計やBOTの応答、関数名考えたり

usersがデータベースのテーブル設計。カラム名ぐらいでも考えておく。

Friend Addが友だち追加された時の、フォローイベント。こんなBOTだよ、ID設定して!、登録できたよ、実際に使ってみよう!ってLINEメッセージのやり取りを想定した。

受け取り状態/ID変更

この部分は、メニューのイメージでしたが、実装してません。受け取り状態というのも、IDがわかれば送れてしまうので黙らせたりしようって案があります。

ID変更は、実はLINE BOTに「ID変更」と送れば、案内してくれますよ!

React

まだ経験不足をすごく感じる。がんばる。

Material UIがすごくGoogle感あって、完成度の高いアプリっぽくなる。

右下に通知出すのがすごいGoogleっぽいから、ぜひ触ってみてほしい。

エラーメッセージも同じように出るようにしてあるから。

ページ遷移も実装してないので、特に書けることもないです。

npm run buildでビルドして、CodeigniterのViewに合わせて載せ直すの、もっと楽に更新できるようにならないかな。

APIサーバが別だったらビルドしてアップしてでやりやすそう。

はじめてのHeroku

これ以上、レンタルサーバを散らかすのもアレだったので、Herokuの無料枠を活用して動かすことにしました。

LINE BOTもしっかり動くHTTPS、すばらしい。

HerokuでのPHP Webアプリの動作環境構築も記事にしました。

形になった

Web側

動作

フロントエンドは、textとuserをfetchでPOSTする。返ってくるレスポンスコードに応じてSnackbarでメッセージを表示。

サーバサイドは、POSTを受ける部分で、必須項目のチェック、userの存在チェック、DBに保存してあるuserのLINEの識別IDとtextで、push(LINEに届ける)。

あとは、Webhook。LINE BOTの友だち追加やメッセージの受け取りを行う。

友だち追加された時点(follow)で、LINEの識別IDをDBに控える。actionカラムをID待ちにしておいて、設定したいIDを要求する。存在チェックをしてDBレコードを更新する。

ID変更も、応答メッセージを分岐して変えるだけで同様。

ブロックされたとき(unfollow)、ユーザ情報はすべて削除する。

LINE BOT

知らなきゃ使えないID変更機能

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

TOEIC300点から450点を目指して対策してみます!

「TOEICでスコア300点」という思っていた以上に低い点数をとってショックを受けたので、勉強して450点を目指すチャレンジを始めます!

no image

情報通信応用数学 想定問題集の解答

情報通信応用数学 想定問題集の解答のまとめ

no image

いま使っている松井証券と楽天証券の各手数料のまとめ

楽天証券が2017年末あたりに手数料の改定があり、使う機会も出てきそうなので、いま使っている松井証券の手数料等と一緒にまとめておく。

no image

ACM-ICPC 2018 国内予選に参加しました

まず、インターンの状況 Wantedlyのプロフィール落ちで面談すらしてもらえなかったところを合わせると、4社目です。 今回、これまでのITベンチャーの面談は、品川の方だったり新宿の方だったりに行くこ …

no image

mixiのBug Shooting Challenge#2で総合MVP獲ってきた

久しぶりのエントリーです。下書きにエイチームのインターンとかあるのに… 「帰ってブログを書くまでがBSC」っていうミクシィのchallenge系イベントの恒例のやつですが、寝ました。翌日に書いてます。 …