資料管理アプリを作った話

参加している朝活グループについて一つだけ、改善せえやと思っていたことがありました。それは、発表資料の管理でした。

発表は発表者が資料を作ったり、議題用の参考WEBページを提供して、ワイワイと議論するのですが、せっかく作ってくれた資料を保管する場所がFacebookのグループページだけでした。

Facebookはタイムラインでどんどん下の方に流されるフロー型。
なので過去の発表を見つけるのがひと苦労。
ひと苦労＝面倒　なので、だれも過去の発表を参考にしたり調べない。
あくまで記憶の中の断片情報。

たまに発表させてもらう身としては、それって結構さみしいんですよね。
資料って徹夜とはいえ8時間くらいかけたりして作ることもあるので。

なので
保管と検索しやすいものを作ったのが経緯です。

画面は　React（Typescript）、Tailwind
バックエンドは　Firebase & CloudFunctionsでガリガリっと作りました。
（githubのURL置いときます）

機能⓪投稿機能

…は当たり前なのでGIFは略
管理として「タイトル」「発表日」「資料」「参考URL」「タグ」「コメント」を付けました。

機能①検索機能

左側のカテゴリでもカードにあるタブでも左のタグでもフィルターできるようにしています。
違いとしては、カテゴリとタブをクリックすると、右側のタグは選択されたカテゴリに関係するものだけに絞り込まれるようになります。
関連するものを見つけるのに使えます。

機能②スライド閲覧機能

サイズや改変防止の目的でPDFを推奨しています。
firebaseの無料枠範囲で運用したいので。。。
べつにパワポでもキーノートでもOKなのですけど、PDFならスライド閲覧もいけるよ、とメリットを持たせました。

当初は、DLして見てくれや、と思っていたら自分で触ってみて「ページ上でで閲覧したいわ。。。」となったので、入れました。
やはり自分が一番のユーザーだと建設的なわがままが見つかりますね。

機能③OGP取得機能

カードに文字情報だけだと味気ないんですよね。
ファイルもそうでしたが、参考ページだけの発表ならそのOGP（ページのサムネ的なもの）を取得したい、ってことでこの機能もついてます。

ただしこれはクライアント側では不可能だったのでCloudFunction経由でデータ取得しています。
参考にさせていただいたのはこちらのページです。ありがとうございます。

外部サイトのOGPを取得する

機能④レスポンシブ対応

そら（やっぱりスマホでも）そう（使いたい）よ
（開発ツールの画面ですまんな）

と、こんな感じで管理アプリをグループ内で使っています。

ちなみにもともとはDiscordでいいんじゃねえのと思っていたのですが、新規にアプリを入れるのも嫌がってる雰囲気だったのでWEB上で使えるようにしたって背景もあります。

スライド機能も追加できたから結果的には、ヨシ！　としましょうｗ