輝く僕らの学費

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

未分類

「あとで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

DigiAna-EX-BMP

100 100  200  500  800  900  1000  1100  再100 再200

no image

アルゴリズム過去問解いてみたやつ

#( 1)アルゴリズムの時間計算量について最も適切な記述を選べ. (3) 一般に入力サイズを引数とする関数を用いて表される. #( 2)問題 P の入力サイズが n であるとき,この問題 P に対する …

no image

SSHで認証用鍵使ってGitやAWSを使う

GitのプライベートリポジトリからCloneするときなどに使う公開鍵の生成、設定。また、AWSに秘密鍵を使ってSSH接続する手順。

no image

ドコモのiPhone補償サービスで交換したリフレッシュ品の故障

ドコモの補償サービスで交換したリフレッシュ品のiPhoneが、およそ2ヶ月で自然故障してしまいました。使い始めてしばらく経っていたので対応が不安でしたが、初期不良として無料で交換してもらうことができた …

no image

Yeti(イエティ)の費用比較

直行バス 新宿駅 参考:何年か前の価格 レンタカー 車代 車12H 7290円 4WD料金 1,620円(税込) スタッドレス 1,620円 スキーキャリア 756円 ガソリン代 片道距離160km …