KaTeXとMarkdownが使えるノート共有アプリを個人開発した話
CAMPHOR- Advent Calendar 2022の19日目の記事です。
こんにちは、ぼの（@bono_social）です。「Notest」というKaTeXとMarkdownが使えるノート共有アプリを個人開発してみたので、
- Notestはどんなアプリか
- なぜ作ったのか
- どのような技術を使用したか
などについて共有したいと思います。
Notestとは
Notestは、「みんなで作る、最高のノート共有アプリ。」です。（Appleのwebサイトっぽいキャッチコピーですね）具体的には以下のような特徴があります。
-
ユーザーは数式や画像、YouTubeの動画などを含んだページを作成して公開できる
-
みんなが作ったページを好きなように「ノート」としてまとめることができる
-
検索機能が充実している（いいね順、関連度順、新しい順でページ・ノートを探すことができる）
今月にリリースしたばかりのアプリです。もし良ければ試しに使ってみてください！
iOS版
以下の画像はストアへ掲載するために作ったものです。（「最高のノート共有アプリ」を自称するのはおこがましい気もしますが、自分なりに頑張って作りました。）
なぜ作ったか
ここまでの説明を読んで、みなさんは以下のようなことを思ったかもしれません。
- 既にMathpediaやMathlogがあるのに、なんで作ったの？（数式を含んだページを共有するサイトなんて既にあるじゃん！）
- 数学や物理学のページなんてGoogleで検索したら色々出てくるよね。なんで作ったの？（既存の検索システムで十分じゃん！）
きっとこういった疑問があると思います。もちろん、Mathpediaには素晴らしい記事が投稿されていて、Mathlogを使えばTeXやMarkdownを使った執筆ができ、Googleに聞けば色々な記事を見つけられると思います。それでも、私はNotestを作りました。それは以下のようなニーズをすべて満たすサービスがまだないと思ったからです。
- モバイルアプリとWebブラウザの両方で綺麗に表示したい。
- 他の人のページに間違いや不足があったら気軽に修正・加筆したい。
- 色々な人が書いたページを上手くまとめる機能が欲しい。
ひとつひとつの要求に関しては満たしているサービスはあると思いますが、すべてを満たしたサービスは果たして存在するでしょうか。ちなみにNotestはどうかというと、上に挙げたニーズにすべて応えています。
使った技術
今回は様々なニーズを満たすアプリを一人で作る必要がありました。そのため、使用した技術は工数が足りない分をカバーできる以下のような構成になっています。
- Firebase（Auth・Storage・Firestore・Hostingなどでサーバレスに）
- Elastic Search（Firestoreとの同期は拡張機能があるので簡単）
- Flutter（iOS・Android・webをひとつのコードで同時に開発できる）
もちろん、デメリットも多々あるかと思います。人数が十分確保できているチーム開発であれば、サーバーサイド・iOSアプリ・Androidアプリ・webフロントエンドに分けて開発したほうが良いかもしれません。細かなパフォーマンスのチューニングをしようとしたときに上の組み合わせでは厳しい部分もありそうですね。SEO対策の面でも良くなさそうです。しかし、個人開発というリソースが非常に限られた状況では、FlutterとFirebaseの組み合わせはとても良かったと考えています。
また、数式のレンダリングする方法としてはFlutter内でKaTeXを走らせるという方法を取りました。この影響でFlutterを使っているのにDartだけで完結せずhtmlやcssを触る必要があり、そのあたりは苦労しました。作っている途中で「自分はDartを書いていたはずなのに、どうしてhtml・cssと格闘しているんだろう・・・？」と思ったりすることがありました。
最後に
ちなみに、Notestをリリースするうえでまずは自分からページを作成しようと思いまして、高校数学の公式や重要事項に関して200ページほどページを作りました。もちろんこれらのページも自由に複製して編集できます。是非みなさんもページを投稿したりノートとしてまとめたりしてみてください！まだリリースしたばかりのサービスなので不具合などもあるかとは思いますが、随時アップデートしていくつもりですのでよろしくお願いいたします。不便や不具合に遭遇したら、それはアプリを改善するチャンスなのでお気軽にご連絡ください。それでは、ここまで読んでいただいてありがとうございました。
