こんにちは

w477です

今回は私が個人開発しているメモアプリ、Hoardについて紹介しようと思います。

今年のはじめ頃から作業着手して今に至るまでちまちま開発してきましたが、やっと実用できるかなと言うレベルになったのでこのタイミングで紹介記事を書こうと思いました。

どんなアプリ？

一言でいうと「Google Keepのいらない機能を削って欲しい機能を足したメモアプリ」です。

いらない機能というのはGoogleドキュメントとの連携機能やリマインダー機能、共同編集機能などです。 逆に追加したのはパスワードによるメモのロック機能とテーブル状のメモ（テーブルノートと呼んでいます）、メモデータのエクスポート・インポート機能です。

特にパスワードや人に見られたくないメモを秘匿するためにパスワード機能は強く求めている機能でした。

また、Hoardは不特定多数に公開するようなアプリではなく、セルフホストで一人利用が前提のアプリになります。

なんで作ったの？

理由はいくつかあります。

1. 探した限りでメモ単位でのパスワードロック機能とマルチプラットフォーム（モバイル・デスクトップ問わず）対応しているメモアプリがなかったから
2. Webアプリの学習をしたかったから
3. OSSの個人開発に憧れていたから
4. 自宅の余っているPCを活用したい

１について、アプリ自体には例えばiOSのFace IDなどでロックをかけることはできますが、メモ単位でロックをかけることができるアプリというのはメジャーなメモアプリだと数が多くありません。

「このメモはロックしないけどこのメモはロックしたい」というケースが私にはよくあり、まずこの要件を満たしていることが大前提でした。

Apple純正のiCloudメモはメモ単位でのロックができますが、TouchIDやFaceIDを使用してメモをロックした場合、Appleデバイス以外ではロックされたメモを表示できないという致命的な弱点があります。

私はスマホはiPhoneを使用していますが、パソコンはMacBookとLinuxデスクトップの2台運用ですので、デスクトップを使っているときにメモを表示できませんので選択肢に入りませんでした。

MicrosoftのOneNoteはメモごとのパスワードロックに対応していますが、機能が多すぎて画面がごちゃごちゃしているのがネックでした。

次に2についてですが、現在の仕事ではWeb技術に触れる機会がほとんどなく、近年ではWebアプリが当たり前になっていますのでキャッチアップしておきたいという思いが強くありました。

ReactやVueのチュートリアルやProgateでの講習など学ぶ場所はいくらでもありますが、その学んだ先に何か形に残せるものがないとモチベーションが続かないなーと思い、なかなか手が出せずにいました。

3に関しては、個人開発で作られたMisskey（SNSの一つ）を使っていてオープンソースのアプリ開発に憧れをもっていたのもあり、勉強も兼ねて自分の作品を作りたいという思いで開発に着手しました。

最後の4はおまけですが、世の中のWindowsサポートが切れてしまったPCってまだまだ使えるものが多いと思っていて、普段遣いは厳しいまでもセルフホストアプリのサーバなら余裕で担えるので、資源の有効活用ができるなーと思っています。

Hoardの意味

Hoardというのは英語で「貯蔵」を意味する言葉です。

森の動物が食料を木の洞に溜め込むようなイメージで、自分にとって必要なものを溜め込む場所にしたいという思いを込めてHoardと名付けました。

ロゴも木の洞をモチーフにしています。（かわいいでしょ？）

ちなみにアイコンやロゴはInkscapeというオープンソースのソフトで作成しました。

アプリの構成

Hoardの構成は以下です。

• Docker（サービス基盤）
• PostgreSQL（DB）
• Redis（認証）
• Nginx（Webサーバ）

また、フロントエンド、バックエンドともにTypeScriptで、フロントはNext.js、バックエンドはExpressを使用しています。

機能紹介

基本的にGoogle Keepと画面レイアウトは同じです。

初回ログイン時にユーザ作成後、トップページへ遷移します。

トップページには登録済みメモが並びます。 Hoardでは通常メモはノート、テーブルを持つメモはテーブルノートと呼びます。

テーブルノートは非選択時はテーブルのアイコンが付与されています。

それぞれを選択すると編集や削除、パスワードによるロックやピン留めができます。 ピン留めするとトップページの先頭に固定できます。

Google Keepではメモを選択後すぐに編集できますが、編集を保存せずに破棄するときにいちいち戻るボタンを押すのが面倒なので編集モードと閲覧モードを分けました。

ノートにはラベルをつけることができます。 ラベルをつけるとノートの下部にキャプションが付与されます。 サイドバーの登録済みラベルを選択することで、そのラベルが付与されたノートに絞ることができます。

ゴミ箱画面では削除したノートが完全に削除されるまでの間閲覧できます。 Hoardではトップページで削除したノートはすぐに完全削除されず、ゴミ箱ページへ移動します。 削除されてから7日が経過したあとに完全削除されますが、ゴミ箱ページですぐに完全削除することもできますし、復元することもできます。

設定画面では言語の切り替え（日本語または米国英語）、ユーザ情報の変更、ノートパスワードの設定、データのエクスポート・インポートができます。 データのエクスポートは登録されているノート、テーブルノート、ラベルの情報をダウンロードしてバックアップできます。 インポートはバックアップをもとにデータの復元ができます。

その他、ダークモード・ライトモードの切り替えやフリーワード検索もできます。

また、HoardはPWAに対応しているのでスマホではブラウザではなくPWAで開くとより便利に使用できます。

作ってみての感想

まず、楽しいですね。 自分の好きな機能を実装できるし、誰にも気を使わず、時間に追われることもなく、自由に開発できるというのは仕事とは違って責任もないので完全に「趣味」だなと思います。

作った理由の項で書いたように学習も一つの目的でしたが、仕事でもTypeScriptやNode.jsを使うことはほとんどなく、このブログ以外で使うのは初めてだったので生成AIに頼り切りでした。 最近は、だんだん構文がなんとなくわかるようになってきて生成AIに聞かなくても修正ができるときが増えてきたので嬉しいですね。

ただ、フルタイムで働きながらだと開発する時間の確保が難しいです。 平日は帰宅後の時間と、昼休みにノートPCを持ち込んで開発を進めていますが、筆がノッてきた（？）ところで次のことをしなくてはならない時間になったりと集中して作業できる時間は限られています。 まあ逆に考えればじっくり長期間開発を続けられるとも言えますね。（ポジティブ）

あとは、本当はiOSやAndroidアプリ版もつくりたかったんですが、iOSだとApp Storeに公開する場合年間で1万円ほど払わなければならなかったり、App Storeに公開せずに自分のMacからiPhoneにダウンロードして使う場合でも7日間しか使えずに都度ダウンロードし直す必要があったりするので現状は着手できていません。 個人開発者には不便な仕様ですね。

Androidは普段使用していないので作るモチベーションがあまりありませんが、今後iPhoneからAndroidに乗り換えることがあれば前向きに検討するかもしれません。 もしくはHoardを使っていただけるユーザが増えてきて要望が上がったら着手すると思います。

余談ですが、私はHoardを実家で余っていたWindows11にアップグレードできないノートPC（2コア4スレッドでメモリ8GB）を持ってきてUbuntuを入れて動かしています。 外出先でのスマホからの接続にはTailscaleを使用して、HTTPS化してPWAとしてダウンロードしています。

同じノートPCでGoogle Photoの代替サービスとして知られるImmichも動かしていますが、快適に動作しています。

今後実装したい機能

フロントのデザインにこだわりたいです。

今だとGoogleのMUIというライブラリを採用しているのもあって、まんまGoogle Keepっぽいのでもうちょっとオリジナリティを出したいです。

せっかくHoardという名前をつけたのでもう少し世界観を森とか動物に寄せたものにしたいなーとぼんやり思っています。

おわりに

まだとりきれていないバグがたくさんあると思うので、今後も改修を続けていくつもりです。

興味をもっていただけたらぜひ使っていただけると嬉しいです。（Githubからソースをダウンロードできます）

ここまで読んでいただきありがとうございました！