【個人開発】React で本、映画、アニメを記録するウェブサービス作りました。

【 React / Firebase 】LINE Bot を使用した写真・動画共有アプリ

プログラミング
スポンサーリンク
スポンサーリンク

作ったもの

LINE Bot に写真、動画を送信するとサイトでそれらの写真を閲覧できるサービスを作りました。

 

 

このように、LINE Bot に送信した写真、動画をサイトで見ることができます。

 

アプリ概要

結婚式などで使えるLINE Bot を使用した写真共有アプリを作りました。

作成期間は3日。

 

式場のテーブルやウェルカムスペースに LINE アカウントのQRコードを置き、そこでのトークに送信された写真を新郎新婦含めゲストの方々で共有するウェブサービスです。

 

アカウントを友達追加すると簡単な使い方の説明と一緒にWebサイトのURLが送られてきます。

そのサイトにてゲストの方々がトークに投稿した写真、動画を閲覧することができます。

 

投稿された写真で盛れてない自分が写っているのを見つけてしまった場合、こっそりその写真を非表示にすることも可能です。

 

誰がどの写真を投稿したかは分からない仕組みになっています。

 

コードも公開しています。

 

LINE Bot を作りデプロイさえすればこのサービスを使うことができます。

その際、”taro-hanako-wedding.com” などのオリジナルのドメインを取得したりしたら、新郎新婦へのちょっとしたプレゼントになるかもしれません。

 

紹介動画:https://youtu.be/l3wX-vEb-OI

 

結婚式で使う用に作ったアプリですが、普段仲いいライングループにこの Bot アカウントを入れておくと、写真の保存期間を気にすることなくデータの保存、閲覧をすることができます。
その場合はログイン機能を付けたりした方がいいかもしれません。

GitHub

ソースコードはこちらの GitLab で公開しています。

技術スタック

こちらがインフラ構成です。

Front-end

フロントエンドは React.js 。

動画再生には react-player というライブラリを使用しています。

Back-end

バックエンド・インフラ周りは すべて Firebase で完結しています。デプロイも Firebase で。

  • Storage: データ保存
  • Firestore: データ管理
  • Functions: 設定したトリガーでバックエンド処理を自動的に実行
  • Hosting: デプロイ

 

無料プランではなく、従量制の Blaze プランを使用。

機能の紹介

  • 写真のサイズに関係なくインスタみたいに正方形でデータを表示
  • 動画投稿時に、サムネイルの自動作成。
  • カルーセル機能
  • 写真、動画の非表示

注意点・つまづいた点

動画もシェアすることが可能です。

大人数での結婚式で使用する場合は容量を気にして使う必要があります。

 

Webhook URL はデプロイしたサイトの URL ではなく firebase deploy —only functions  の Function URL を使います。

例えば、https://us-central1-○○.cloudfunctions.net/○○/webhook みたいなやつを Line Developers ページで Webhook URL として設定します。

アプリの改善点

ログイン機能追加。

結婚式のテーブルにQRコードと一緒に12月24日、新婦の誕生日の1224がパスワードですってメッセージカード置いたり?

参考資料

レイアウトは Traversy Media という YouTube チャンネルの動画で紹介されているものを少しだけアレンジしたものになります。

Build a Photo Gallery With React & Firebase

 

というより、デザインはそのまんまこれです。

この動画で紹介されているものに、ライン機能、写真・動画の非表示機能、動画再生部分を追加しただけのものになります。

ご質問・ご感想は

ツイッターお問い合わせからいただけるとうれしいです。

 

最後まで読んでくれてありがとうございます。

 

プログラミング
スポンサーリンク
この記事をSNSでシェアする
フォローする
スポンサーリンク

コメント