はじめに
ある日、衝動にかられて・・・
React × Redux + α で LINEアプリにソックリなWEBチャットBOTを作ってみた！！
Reactで作ったLINEモドキなので名前は RINE (笑)！
こちらのサイトから見れます！
↑自作したオリジナルアイコン
ちなみに、隠し機能も仕込んであります。
トーク画面で「バルス」と投稿すると・・・！！？
主な画面と機能概要
| ホーム画面 | トーク一覧画面 | トーク画面 |
|---|---|---|
 |
 |
 |
|
|
|
- この他にオマケで、フィード画面とノート画面も作ったけど、ここでは省略
- 本物のLINEにあるタイムライン画面やニュース画面などは未実装
主な利用技術／ライブラリ／API
- 言語
- フレームワーク／ライブラリ
- ホスティングサービス／サーバレスファンクション
- チャットボットAPI
- その他
ソースコード
ソースコードはこちらのリポジトリに置いてある。
微妙にサイズの調整とかバグとかもあるので、気が向いたらまた随時更新するかも。
実装におけるポイント
メッセージの投稿
- トークメッセージの履歴はすべてReduxのStateに保存
- Redux PersistでLocalStorageに永続化
- ボットの発言には、以下のAPIを利用
写真の投稿
- 投稿した写真はBase64にエンコードして保存。
- ただし、Base64のような巨大なデータの保存には、LocalStorageには向かない（デスクトップだと大丈夫だが、特にモバイルだと容量の壁にあたりやすい）ため、IndexedDBに保存
メッセージ受信時にバイブレーションさせる
- Vibration APIを利用すれば、ブラウザでもバイブレーションが再現できる。
メッセージを読み上げる
- Web Speech APIを利用すれば、ブラウザでも読み上げが再現できる。
完全な静的サイト
- 完全な静的サイトとして実装し、Netlifyにデプロイ
- オマケ機能として実装したフィード画面は、呼び出し先がCORSで引っかかるので、Netlify FunctionsをCORS Proxyとして利用
PWA対応
- リアルっぽさを追求したかったので、ホームスクリーンにも対応
感想と教訓
全般
- 見た目は簡単に見えるが、コードとしてはそれなりの規模になるし、作るのには予想以上に骨が折れる。
- やはり、Redux Starter Kitは最高に扱いやすい。
- A3RT Talk APIに比べると、Noby APIはちょっとレスポンスが遅い気がする。
コンポーネント設計ってやっぱり重要
- Atomic Designっぽく分類してみたものの、実装中に、コンポーネントとして分けるべきかどうか迷う場面が多々あった。
- クラス設計と同じで、一度大きなコンポーネントを作ってしまうと、分けるのが面倒で苦労する。先にちゃんとコンポーネント設計をしてから実装したほうが後々のリファクタの労力は減る。
デザイン・スタイル設計ってやっぱり重要
- 見た目（主にスタイルシート）をいかに本物に近づけられるか試行錯誤したのが一番苦労した点かもしれない。
- CSSフレームワークは使わず、全部自前でCSS書いた。
- styled-componentsを利用したが、コンポーネント設計と同様、これも共通化設計をちゃんとしないと、カオスになる（なった）
- アイコンは、react-iconsっていうのを利用したけど、本物のLINEで使われているものに近いアイコンがなかなかなかったりもした。
さいごに
自分のスマホにPWAとしてホームスクリーンを追加してみたところ・・・
わぁ！本物のLINEとそっくりだ！！
こちらからは以上です。