Zenn
😀

LLMを使った多言語ブログサービスを個人開発しました

2025/03/27に公開
Next.js
React
TypeScript
個人開発
Neon
idea

はじめに：開発の背景と目的

こういった文章を書くとき、多くの人に読んでもらいたいと思います。おそらく多くの書き手も同じ気持ちでしょう。
しかし、日本語で書いた文章は、ほとんどの場合日本語圏の人にしか届きません。
これは他の言語でも同様で、情報共有において言語の壁は常に存在します。
技術記事だけでなく、日常のエッセイや考え方、文化的な視点なども言語の違いによって孤立してしまいます。もし言語を超えて互いの考えや日常に触れる機会が増えれば、人類はより相互理解を深め、国際的な友好関係を築きやすくなるのではないでしょうか。
しかし､多言語で文章を書き、記事を公開することは非常に手間がかかり、現実的ではありません。
そこで、LLMを使った自動翻訳で、記事及びコメントを自動的に多言語翻訳するブログサービス「Evame」を開発することにしました。

サービスのデモと概要

https://evame.tech/en/user/tomolld/page/wdMjcpgw


主な特徴:

  • 記事・コメントの自動多言語翻訳
  • ブロック単位の翻訳管理と対訳表示
  • 投票システムによる最適翻訳の選出
  • ユーザーによる翻訳改善の提案機能
  • 直感的に使えるWYSIWYGエディタ

技術スタック

  • アプリケーション: Next.js 15 (App Router)

    • 当初Remixで開発していたのですが､Next.jsに移行しました｡理由はこちらに書いてあります｡

  • LLM: Google Gemini

    • 色々試したのですが､コンテキスト長という点でGeminiが圧倒的に優れていました｡Vertex AIの使いにくさや､ドキュメントの少なさ､TS対応の遅さをなんとかしてほしいです｡

  • データベース: Prisma + Neon

    • Neonのブランチ機能はほんとうに便利で､DBマイグレーションに伴う不便さを大きく解消してくれました｡

  • 認証: Auth.js

    • 非常に簡単にセットアップできるものの､セッション管理やクライアントサイドでの認証に難があり､Better Authに乗り換えようかと思っています｡

  • ホスティング: Vercel

  • エディタ: Tiptap

    • WYSIWYGエディタを作成する上で非常に便利です｡しかし､アラビア語等右から左に書く言語の対応に不安があるので､Lexicalを試しています｡

工夫した点・苦労した点

  1. ブロック単位の翻訳と投票システム
    このサービス、Evameの最大の特徴は、段落や見出しなどの「ブロック」単位で翻訳を管理する点です。これにより、部分的な翻訳修正が簡単にできるほか、専門用語が多い段落だけを人間が翻訳するといった柔軟な対応も可能になります。また、訳文をクリックすると出てくるUIで、ブロックごとに最適な翻訳をコミュニティが投票で選べる仕組みを採用しているため、時間とともに翻訳品質が向上します。これは従来の翻訳ツールと一線を画す特徴です。
    上記の機能を実現するため､マークダウンを適切にブロックに分割する処理が必要になります。単純な段落単位では、リストやコードブロックが正しく扱えませんでした。そこでunified.jsのエコシステムを活用し、マークダウンのAST（抽象構文木）を解析して適切な粒度で分割する仕組みを構築しました。

  2. 対訳UI
    原文と翻訳を並べて表示することで､翻訳の正確さを自分で確認できます。言語学習者にも役立つ設計です。また、クリックすると出てくるUIで､誰が翻訳したのかや､投票数も表示することで､信頼性の判断をサポートしています。
    このデザインには結構苦労していて､以下画像のようにコンテナ内に表示してみたり、

    下線を引いてみたりといろいろ試しました。

    結果としてデザイナの大西さんにアドバイスを頂き､現在のコントラストをつける形式に落ち着きました。
    自分の開発したUIにデザイナの方からフィードバックを頂くのは大変勉強になりました｡

  3. PCでもスマホでも快適に使えるエディタ
    Tiptapをベースにエディタを開発し、スマホでもPCでも快適に記事を作成できるようにしました。特にiPhoneのSafariにおけるオンスクリーンキーボード対応については苦労しました｡
    このcatnoseさんの記事に詳しく書かれていますが、iPhoneのsafariでバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動に対応するのはほんとうに辛いです。
    mechairoiさんの記事を読んでなんとか頑張りましたが、safari側でなんとかしてほしいです。

今後の展望・ロードマップ

Evameの今後の計画は以下の通りです｡

短期目標
有料会員向けの新機能 - 対応言語の増加､プロフィールヘッダや国別アクセス解析など
クリエイター収益化機能 - サブスクリプションなど

中長期ビジョン
言語の壁を超えたインターナショナルなコミュニケーションプラットフォームへ発展
知識や物語の世界的な共有を促進

まとめと協力のお願い

Evameはサービスの継続性と透明性を担保するため、オープンソースで開発しています。
このサービスが世界中の人々の相互理解に役立つことを願い、多くの方々の協力をお願いしたいと思います。
特に以下の点に協力いただけると大変ありがたいです。

Evame上での執筆
SNSでの拡散
バグの報告

長くなりましたが､ぜひ使ってみて､感想を聞かせてください!

Discussion