オンラインで自分だけのマンガ本棚を公開できるサービスをつくりました

Ikkimiという、オンラインで自分のマンガ本棚を公開できるサービスを個人開発した話です。

https://ikki-mi.com

内容

飲食業界から転職活動中の24歳です。
モダンなフロントエンド技術の習得を目的に、今回React・TypeScriptで初めて作った成果物です。
制作期間は1ヶ月弱ほどです。
もしよければ、使ってもらえるとうれしいです！

• TypeScript
• React
• Supabase
• Algolia
• Figma

つくったもの

自分の好きなマンガをオンラインで記録し、アカウントに保存・共有できるサービスです。SNSでつながっている友達と、簡単にお気に入りのマンガをシェアできます。マンガ自体は読み込めませんが、Amazonリンクから試し読みや購入が可能です。

https://ikki-mi.com

リポジトリ

https://github.com/okazuki58/ikkimi-with-next

技術スタック

フロントエンド

• Next.js
• React
• Tailwind CSS
• TypeScript

バックエンド

• Supabase
  • 認証
  • データベース
  • ストレージ

サードパーティAPI

• Algolia

インフラとデプロイ

• Vercel

ツールとライブラリ

• React Context API
• Sonner

その他

• GitHub

機能紹介

マンガの本棚管理

自分の好きなマンガをオンラインで記録・管理できます。アカウントを作成して、自分のマンガ本棚を簡単に整理できます。

共有機能

SNSでつながっているユーザーと簡単にマンガを共有できます。友達や他のユーザーが読んでいる作品をチェックして、新たなマンガを発見しましょう。

ブックマーク機能

気になるマンガをブックマークして、プロフィールページに追加できます。気に入った作品を簡単に保存し、後で確認できます。

検索機能

豊富なマンガデータベースから、タイトルや著者名で検索できます。Algoliaを活用し、スピーディーで正確な検索が可能です。

作品リンク

マンガを読むことはできませんが、Amazonリンクから試し読みや購入が可能です。

作ろうと思った理由

• マンガが好きで、人がどんなマンガを読んでいるのか気になった
• 好みが似ているユーザー同士で未読の面白い作品を見つけたいと思った

他の人がどんな作品を楽しんでいるのかって、マンガに限らず映画、小説、アニメでも気になりますよね。人の視聴・読書傾向への単純な好奇心から、このデータを集めてコンテンツベース・フィルタリングを活用すれば、まだ知らないけど自分の好みに合う作品がもっと簡単に見つかるのでは、という思いでサービスを開発しました。

実際作ってみてどうだった？

かなり大変でした(笑）
実務未経験ということもあり、右も左も分からない状態で作り始めたので、かなりしんどかったです。
簡単な静的Webページくらいなら作ったことがありましたが、世界にリリースする本格的なWebアプリを作ったことはなかったので、いろんな壁にぶち当たりました。

つまずいたこと

つまずいたのは主に、

• ブックマークの状態管理
• 検索機能の追加
• 認証管理

の3つでした。順番に解説してみます。

ブックマークの状態管理

これは、サービスの核機能である「ブックマーク」についてです。

本サービスでは、すべてのマンガ作品にブックマークボタンがついており、それをクリックすることでプロフィールページに作品を追加できます。一見するとそこまで難しい機能ではないように見えますが、注意すべき点が2つありました。

1. ページ内で同じ作品が複数表示される場合（ランキングとおすすめに表示されるなど）、一方のブックマークを変更したら、他の表示でもブックマーク情報を反映させる必要がある。
2. モーダルで作品詳細を表示する際、元の画面でのブックマーク情報の変更を同期させる必要がある。

1については、画面内の状態を同期するという、よくあるSPAの挙動に関する問題です。

2に関しては、別ページに作品詳細を設けずモーダルで表示する実装にしていたために発生した問題です。

これらはいずれもクライアントサイドの挙動の問題です。

結論として、今回は「グローバルコンテクスト」というReactの機能を使って解決することにしました。Bookmark Contextというコンテクストを作成し、ユーザー情報に紐づいたブックマーク情報を保持し、useEffectで変更を検知して反映させることで、1と2の両方の問題を一挙に解決できました。
参考: React useContext

ただし、コンテクストの多用は、階層が深くなり管理が複雑化するというデメリットがあるため、注意して使用する必要があります。

検索機能の追加

これも大変でした（笑）

本サービスで扱うマンガの作品数は15万点ほどあるため、高速な検索機能を実装する必要がありました。
まず、簡単に導入できそうという理由から、JavaScriptの軽量ライブラリであるFuse.jsを使ってみました。しかし、テスト時に数百から1万件くらいまでのデータでは問題なく動作したものの、それ以上になると取得に時間がかかり、バグも発生するようになったため、お蔵入りとなりました。

次に、Algoliaというサービスがあることを知り、実装を試みましたが、依存関係の問題でバグが続き、実装が困難だったため一度断念しました。

気を取り直して、Supabaseの全文検索機能を試してみることにしました。もともとデータベースにはSupabaseを採用していたので、標準で検索機能があるなら使ってみようと思い実装してみました。しかし、日本語検索の拡張機能を有効化し、インデックスも作成して試したものの、15万件というデータ量では快適な検索ができませんでした。

何度も絶望し、他の機能の実装に移ったり検索機能を再挑戦したりする日々が数日続きました。そこで発想を転換することにしました。

「うまくいっている人のやり方を真似してみよう！」（普通は最初に思いつくべきですが…）

そう考え、ネットで同じNext.jsのバージョンを使いAlgoliaの実装に成功している事例を探しました。そこで、同様の実装を行っているGitリポジトリを発見し、それを参考にAlgoliaのバージョンを1つ下げることで、問題なく実装できたのです。

こうしてようやく検索機能が実装できました。

何度も心が折れそうになりましたが、諦めずに実装したことで、困ったら同じような実装がネット上にないか探すという教訓を得ることができました。

認証機能

認証にはSupabaseの認証機能を使っています。認証というとNextAuthを採用することが多いのかもしれませんが、今回はSupabaseを使うことが確定していたため、ユーザーデータをSupabaseで管理するなら認証まで一元管理したほうがラクだろうと思い、Supabaseの認証を採用しました。

メール認証でカスタムSMTPを設定しなくてはいけない

メール認証を実装する際、ユーザーのメールサーバーに認証メールを送信するためのメールサーバーが必要になります。これまで、Supabaseがそのメールサーバーを提供してくれていましたが、最近仕様が変更され、開発者自身がメールサーバーを用意する必要が出てきました。

そこで、Google Workspaceのメールアドレスを取得し、SMTPの設定に挑戦しましたが、設定がうまくいかず、結局Google認証のみでリリースする形となりました。

リリースしてからClerkという認証のSaaSがあることを知り、徐々に移行を進めています。（最初から知っておきたかった!笑）

ユーザー情報とマンガ情報、フォロー情報の管理が難しい

マンガのブックマーク情報やユーザーのフォロー情報は、ユーザーのログイン状態によって管理する必要があります。ログインしていなければブックマーク情報を反映させず、ログインしていれば反映させる、といった制御が求められます。また、プロフィールページでも、自分のページと他人のページでは表示するブックマーク情報が異なるため、それぞれどのように取得・表示するかを考えなければなりません。

これについても、ブックマークの問題と同様に、グローバルコンテクストを利用して解決しました。

さらに、ブックマークボタンのアニメーションやトーストの表示といった細かい部分での詰まりはありましたが、最終的には思い通りの実装ができました。

勉強になったこと

このサービスを作ってよかったと思うのは、開発を企画からリリースまで一通り経験できたことです。エンジニアというと開発だけのイメージが強いですが、企画、要件定義、デザイン、実装、リリースと全ての工程を通して、開発以外にも幅広い知識が必要だと実感しました。

自分は開発だけでなく、企画やデザインにも興味がありますし、もっと根本的には、身の回りの課題や社会問題の解決にも関心があります。今後は、開発にとどまらず、ビジネスやデザインなど幅広い分野の知識も身につけていきたいと思います。

ここまで来るのも実は結構大変だった

このサービス自体の開発期間は約1ヶ月半ですが、開発の勉強を始めてからは1年以上が経ちます。仕事の合間を縫っての勉強は正直かなり大変でした（笑）。振り返ると、作っては捨て、また作っては捨て、という試行錯誤を繰り返してきたように思います。

半年以上前に構想していたもの

うわぁ...（笑）こんなのも作ったな（笑）

だんだん、今の原型に近づいている

まとめ

今後の課題

• 認証機能の拡充
  現在はGoogle認証のみの対応ですが、メール認証や他の認証プロバイダーの導入を目指しています。特にカスタムSMTPの設定をスムーズに行える方法を模索中です。

• コードのリファクタリング
  完成まで急いだため冗長で複雑になっているコード部分があり、今後はこれらをリファクタリングして、よりシンプルで保守しやすい構造に整えていきたいと考えています。

• コスト面の見直し
  VercelやSupabase、Algoliaといったサービスを利用するにあたり、今後はコスト面も意識して実装していく必要があります。特にユーザー数が増えた場合、使用量に応じて料金が発生するため、運用コストを抑えるための工夫も取り入れながら、効率的な設計を目指していきたいと思っています。

• デザインやレイアウトの見直し
  現状のデザインがシンプルすぎると感じているため、より見やすく改善する予定です。具体的には、お知らせ機能やフィード、カルーセルの追加、ランキング表示の見直しなどを検討しています。

• リコメンド機能の追加
  将来的にユーザーが増えた際には、コンテンツベースのフィルタリングを活用したリコメンド機能の追加を目指しています。これにより、ユーザーの好みに合った作品を自動でおすすめできるようになり、よりパーソナライズされた体験を提供できると考えています。

長くなってしまいましたが、最後までお読みいただきありがとうございます。もしよろしければ、ぜひIkkimiをお試しいただけると嬉しいです✨ フィードバックやご意見もお待ちしております！
https://ikki-mi.com