マインドマップ共有アプリを作った

URL

「Mind View」

mindmap-app-d9302.web.app

アプリを製作した理由

マインドマップを書いたところであまり継続できないよなと思います。
毎朝起きて、マインドマップを書くくらいなら、資格の勉強したいですし・・・。

ただ誰かに見てもらえるなら、継続しようという気が起こる。
一人でチマチマ続けるのって難しいですよねぇ。

TwitterとかFaceBookに投稿し始めると、「なんやこいつ」と思われるかも・・・。
そういう意味では、プライベートの友人に見られるのって恥ずかしいと思う人もいるかもしれません。

「誰が投稿すんねん」
→ 投稿者には継続できる需要自分をアピールする需要を満たすことができます。
→ あとTwitterなど有名SNSではないので、SNSと比べて、匿名性が高いと思います。


「そんなん誰が見んねん」
就活の人事の方単に優秀な人の頭の中が見てみたいという層には閲覧の重要があります。
→ 返信機能が存在しないので、誹謗中傷もありません。

登場人物に一定の需要を満たせそうなので、
そこでマインドマップ共有アプリ(プロトタイプ)を作っちゃいました。

こんな感じ

f:id:electric-city:20201216103849p:plain
紹介画面

マインドマップの重要性を説く。

f:id:electric-city:20201216103927p:plain
ホーム画面

タグ検索やユーザー検索もできます。
気になるユーザーを検索して、その人のマインドマップも閲覧可能です。

f:id:electric-city:20201216104105p:plain
マインドマップ

マインドマップは画像投稿です。
気になるマインドマップをタップして、閲覧できます。

f:id:electric-city:20201216104203p:plain
投稿画面

投稿画面はこんな感じ。
タイトルは「一言」で、説明は「マインドマップから得た結論」だけを書くと簡潔だと思います。

f:id:electric-city:20201216104321p:plain
タイムライン

Twitterのようなタイムライン型です。

製作まで・使用技術

元々以前からマインドマップ共有アプリは製作していたのですが、あまりにも酷い動作とコードだったので、一から作りました。

正直、最初はプロトタイプ製作でしたので、
Vue、Firebase FireStore・Authentication・Storage、環境構築はDockerです。
なので大量のアクセスが来るとしんどいです。

投稿削除機能、画像投稿、タイムライン機能、ログイン処理、検索機能、タグ機能などを実装しました。
製作期間は大学の合間を縫い、9日くらい。

Vue-Cli、Vue-router、Vuetify、firebase、Vuexなど様々なモジュールを試せたので良かったです。
ブログもその分書けましたし。async/awaitや非同期処理への理解が向上しました。

反省点・バグ

試しに動かしてみましたが、バグが3つほどあります。

  • 投稿タイトルの文字数次第でレイアウトが崩れる→HTMLを見直す
  • スマホからマインドマップを投稿できない→原因不明
  • 投稿を削除してHOMEに移動する際の挙動が不審→router.pushとrouter.goとかあの辺

Q「直す気はありますか?」→A.「気が向いたら、レイアウトのバグだけはすぐに取り掛かろうかなと思う」

今後

Firebaseのデータベースを使ったが、次回はMySQL・MongoDBなどを使って、
サーバーサイドのフレームワークかまして、アプリを製作したい(アプリの中身にもよるけど)。