【個人開発】無料のマインドマップ作成アプリを公開しました
はじめに
初めての個人開発アプリを作成・公開しました。
気合を入れて作ったので、使えるレベルのものができたと思える一方で、失敗したなぁと感じることもありました。
この記事では
- アプリの宣伝
- 実装で手こずったトコロ
- 失敗談
について書いています。
どうして作ったのか
自分用のマインドマップアプリが欲しかったからです。
皆さんはマインドマップをご存知でしょうか？
ノート術の１つのようなもので、概要の把握や記憶に効果があるとされています。
ある研究によるとマインドマップを活用した学習では最大32%も記憶の定着力が上がったという報告があります。
そんなマインドマップですが、いざ使おうとすると一部の機能は無料で使えるけど、満足に使うためには課金が必要な場合がしばしばです。
無料で使える物があったらいいなぁと思っていたので、機能制限なしで使えるマインドマップ作成ツールを作成しました。
そこそこ高いクオリティの物が作れたと思うのでよかったら見てみてください。
どんなアプリを作ったのか
実際に作ったアプリの特徴を簡単に並べます。
- 無料で無制限
- インストール不要でブラウザで利用可能
- Googleアカウントで簡単登録
- 学習や勉強に特化したツール
- 作成したマップの販売や寄付を受けられる
無料で無制限
前述したように、課金するのが嫌だなぁと思って作ったアプリなので、ずっと無料で使えるようにしました。
とはいえ、サーバーレンタル代とかかかるので、後述するマインドマップの販売や寄付の方でマネタイズして資金を回収できたらいいなぁと思っています（理想）。
インストール不要でブラウザで利用可能
どうってことない機能です。単にWebアプリというだけですね。
Googleアカウントで簡単登録
これも大した機能では無いです。ソーシャルログイン機能を実装したので、メールアドレスの入力とかパスワードを決めるとかの煩わしさがないのが嬉しいところ。
学習や勉強に特化したツール
学習に特化したという主張の理由は以下の２つです。
詳細情報を書き込める
マインドマップは基本的には複雑な文章を簡潔な単語の繋がりに分解して、ビジュアル化するという手法です。そのため、キーワードだけが取り出されて、他の飾りの部分はマインドマップには収められません。
逆に飾りの部分もマインドマップに書いてしまうと、煩雑になり、概要が分かりづらく記憶もし辛いものになります。
ですが、勉強した内容などをキーワードだけにまとめきれないことも多々あると思います。書いた時には良くても、見返したらなぜこのように書いたのか思い出せないという場合もあるかもしれません。
そのような場合に、詳細情報を書き込めるように吹き出しの機能をつけました。（こんな感じ↓）
こうすることで、概要を掴みやすいし、細かい情報なども捉えられるのでデメリットをなくしたマインドマップを作れるようになったのではないかと思います。
フィードバックが受けれる
他のユーザーが作成したマインドマップを閲覧し、リアクションをスタンプ形式で示すことができるようにしました。
記憶を定着させるためには、できるだけ多くの「とっかかり」となる部分が必要になって来ると思いますが、このリアクションを受けることによってその「とっかかり」になってくれると考えています。
作成したマップの販売や寄付を受けられる
これは無料無制限で公開するためのマネタイズのために付けた機能です。
自分で公開したマップが売れた時や、寄付を受けられた時にモチベーションが上がりますし、質の高いマインドマップと出会える場にもなると思うので、これでアプリが回ることを祈っています😇
実装で大変だったこと
このアプリは
- フロントエンド： Javascript, vue
- バックエンド: Kotlin, SpringBoot
- インフラ： AWS（Fargate, RDS, S3 Elasticache, CodePipeline ...etc）
で作っているのですが、これらを使った実装で大変だった以下の３点についてお話しさせてください。
- マインドマップ機能のフロントエンド実装
- Undo/Redo機能の実装
- OGP設定
マインドマップ機能のフロントエンド実装
これは一番面倒くさかったです...
他のマインドマップアプリを使った経験がある方はわかるかもしれませんが、マインドマップでは要素を追加する度に、他の要素と被らないように整形が必要になります。
簡単な例だとこんな感じです。
ツリーの大きさが大きくなるほど、既存のツリーをどこにどのように動かすか？
などの制御が面倒くさかったです。
要素を編集して文章の長さが変わった時や、改行した時、画像を挿入した時などを考えると多くのパターンがあったので、応えました。
Undo/Redo
これまでの動作を記憶しておき、復元できるようにデータを作っておくことが大変でした。
Undo/Redo機能は始めて実装したのですが、その大変さが身に染みました。
普段何気なく使っているFigmaなどに感謝したいと思いました 笑
OGP設定
OGPについて簡単に述べておくと、
「SNSとかでシェアされた時にカード上に表示する」
ための仕組みです。
TwitterとかLineとかでURLを貼り付けると、画像やタイトル説明文が表示されるアレです。
サーバーサイドでレンダリングしていると、これを実装するのは簡単なのですが、今回SPAで作っていたので、OGPのためにアクセスしてきたBot達に対してはレンダリングしたファイルを返すという仕組みが必要でした。
実装自体はそれほど大変なものでは無いのですが、それまで静的ファイルを返していただけのサーバーにレンダリングするためのスペックを搭載する必要が増えたため、「お金がかかるなぁー」という心理的ダメージを食らいました。（それほど大金ではない）
失敗したこと
アプリを実装していく上で「やっちまったぜ」と思ったことを書いておきます。
これから個人でアプリ作る人は二の舞にならないように参考にしてもらえるといいかもしれません。
（僕がポンコツなだけで皆さんはすでに意識していることかもです）
- インフラは小さく作る
- 作り込みすぎない
インフラは小さく作る
これは失敗しました。
このアプリはECS（Fargate）で運営しています。アクセスが増えた時にもスケールできるように、セッションの保存先をElasticacheにしています。
でもそんなことする必要なかったです（泣）
スケールすることなどはユーザーが増えてから心配するべきでした。
ただただお金がかかります。
最初は無料枠で組める範囲で十分な気がします（アプリの内容にもよる）
僕はちょっと張り切りすぎちゃいました☆
作り込みすぎない
これも痛い失敗です。
頑張っても必ず使われる保証はないので、もっと機能を絞って公開し、反応に応じて拡張させるべきでした。
もったいないことしちゃいました。
最後に
ここまで読んでくださってありがとうございますー！
個人開発で色々失敗したと思ったことはありましたが、毎日自分の好きな技術に触れて楽しい生活を送っています。最後にもう一度リンクを貼っておくので、よかったら覗いてみて下さい！
Discussion