eureco開発のこれまでとこれから

"さくらインターネットテックトーク2026春"の資料です。
https://sakura-tokyo.connpass.com/event/383699/

Transcript

1. eureco開発のこれまでとこれから さくらインターネット研究所 田中諒介 さくらインターネット研究所テックトーク2026 春
2. 自己紹介 田中諒介 HN: ry023 Github: https://github.com/ry023 SpeakerDeck: https://speakerdeck.com/ry023 2024 年1 月　さくらインターネット研究所配属 Web 系企業でのホスティングサービスのインフ ラサイドの開発・運用の経験 現在はeureco の新規開発に従事。フロントエン ド、バックエンド、スクラム開発の主導などサ ービス開発全般
3. 本日のお話 eureco の開発全般についてお話します 現在のeureco の仕様デモとアーキテクチャ BlockNote ユーザデータの保存場所の戦略(BYOS) これからのeureco 拡張 ( 未確定の仕様を含みます)
4. 現在のeureco オープンベータテスト(OBT) を実施中 ブロックエディタ テーブル形式データをソースとした集計、チャート表示機能 書いたノートをGoogle ドライブ連携して保存
5. Demo
6. アーキテクチャ シンプルなSPA 表データの集計・計算処理にWASM のDuckDB と連携 Public Client OAuth 連携で、ブラウザからGoogle ドライブに直接連携
7. 主要ライブラリ React React-Router (v7) BlockNote エディタ部分のベース duckdb-wasm データ集計処理 Apache ECharts チャート描画処理に利用
8. Tiptap Editor(ProseMirror ラッパー) をベースにした、エディタライブラリ ブロック構造のエディタを提供 ツールバーやブロックのカスタム実装が柔軟に可能 各ブロックはスキーマで定義された状態を持つ 状態を保存・読込してノートの復元が可能
9. Customize BlockNote CSVブロック/データデーブルブロック CSV アップロードで自動パース データテーブルでは手動入力可能 バックグラウンドでDuckDB に動的イ ンポート
10. Customize BlockNote 集計ブロック 他のブロックを指定し、高度な集計処 理 内部的にはDuckDB に対するSQL クエリ を実行
11. Customize BlockNote チャートブロック ページ内のデータを描画 現在、折れ線・散布図・棒グラフの複 合グラフに対応 Apache ECharts による描画
12. Customize BlockNote Customize Upload/Resolve Handler 画像・動画などのメディアのアップロード・表示時のフック Google ドライブ対応 アップロード処理ではDrive API 経由でアップロードし、 gdrive:// というス キーマでブロックに保存 ファイルのURL 解決時に gdrive:// ならインターセプトし、Drive API 経由で ダウンロード OPFS でキャッシュし高速化
13. ユーザデータのストレージ SPA から連携 OBT 時点ではGoogle ドライブとOAuth 連携。今後、拡張予定
14. ユーザデータをユーザの元に置く BYOS: Bring Your Own Storage eureco はWeb アプリケーションでありつつ、基本的にはサービスのバックエンド にデータを管理・保存されない “ 基本的には” と書いた通り、今後は追加される機能の一部ではユーザに認可を得つ つアクセスする可能性はある
15. BYOS戦略のメリット＆デメリット メリット 元々使っていたストレージサービスをeureco でも利用できる 秘匿性の高い情報を、eureco サービスの運用者からも見えなくする eureco のSPA のソースがあれば基本的には動作する( 万が一サービス終了しても構 造が読める) E2E での暗号化が可能( 現在では未対応) デメリット データの内容に基づいた作業をサービスバックエンドに任せられない 任せる場合、追加の認可が必要 ユーザの元にあるデータ構造が古いバージョンになっていく可能性がある
16. クライアントサイド・マイグレーション ユーザストレージにはJSON 構造で保存されている eureco が新しいブロックや機能を追加するたび、データ構造はアップデートされ ていく可能性がある データはユーザの元にあるため、 「ユーザがeureco で利用するタイミング」で、バ ージョンチェックとマイグレーションが必要
17. 近い概念: Local-First Architecture Ink&Switch 提唱(2019 年) ローカルのファイルをマスターとしての「一次データ」 、クラウドのデータをバッ クアップとしての「二次データ」と見做す考え方 eureco はLocal-First と呼ばれるほど厳密にやるかは別として、要素技術は利用でき る場面がありそう 共同編集(CRDT によるデータ構造化) E2E 暗号化
18. 今後のeurecoサービス拡張に関連する技術 OBT で使える機能はまだ限られているが、今後色々と拡張される 拡張において、現在考慮している技術的なポイントを紹介 ※ ここに書いたものが必ず提供されると確約するものではありません
19. Remote Runner クライアントサイドのみでは難しい計算量の多い処理や、外部サービスとの連携 ができるサーバを提供 バックエンドにデータアクセス権の認可が必要
20. 共同編集 各ユーザのデータを同時編集するため、コンフリクト対策が必要 CRDT(Conflict-free Replicated Data Type) 構造的にコンフリクトしないデータ構造 BlockNote.js がY.js を使ったCRDT を既にサポートしているため、ブロックエディタ 部分はこれで対応可能
21. モバイルアプリ化 Expo+ReactNative でのモバイルアプリ対応を検討中 実はクローズドβ テストではモバイルアプリの検証をしてが、仕様含め仕切り直し 中 クローズドβ テスト時点では、 「実験データの収集」にのみフォーカスし、画 像・テキスト・音声などのアップロードのみに対応していた
22. ネイティブアプリ化 Expo+ReactNative でネイティブアプリ化 ブラウザの制約上できない機能実現ができる ローカルのファイルシステムへのアクセス ローカルAPI
23. MCPサーバ eureco のデータ構造を外部のAI Agent から利用できるようにする ネイティブアプリでローカルMCP / 認可を得てリモートMCP
24. 今後のeurecoサービス拡張に関連する技術 eureco AI eureco アプリケーション上で動作するAI Agent 前述のMCP も利用するか、完全に内部的に別の仕組みで繋げるかは未定( 後者が濃 厚) また、外部のMCP とも連携する機能を想定
25. まとめ eurecoの現在 Google ドライブに連携、ブラウザで完結する高機能エディタ。OBT 実施中！ BlockNote 基本的なエディタ機能、メディアアップロード、CSV 、データテーブル、集 計、チャート ストレージのBYOS戦略 ユーザーデータの主権をユーザーに返すストレージ戦略を採用。プライバシ ーとポータビリティを両立。 これからの技術的な展望 高度な計算処理や外部連携、共同編集、モバイル・ネイティブへのプラット フォーム展開、AI 統合などを予定
26. ご清聴ありがとうございました