> For the complete documentation index, see [llms.txt](https://livlog-llc.gitbook.io/engineering-handbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://livlog-llc.gitbook.io/engineering-handbook/riburoguno/3-technology-and-architecture.md). # 3. 技術とアーキテクチャ リブログのシステムは、一つの巨大なサービスではなく、目的の異なる複数のWebサービス、静的サイト、API、Bot、モバイルアプリによって構成されています。 各プロダクトは独立して開発・公開できる一方、Javaを中心とするサーバーサイド技術、軽量なWebフロントエンド、位置情報、写真、オープンデータ、生成AIなどを目的に応じて組み合わせています。 このページでは、[プロダクト一覧](/engineering-handbook/riburoguno/2-products.md)に掲載しているプロダクトを中心に、リブログで利用している技術と全体アーキテクチャを概観します。 ## アーキテクチャの考え方 リブログのアーキテクチャは、次の考え方を基本にしています。 1. プロダクトの目的に合わせて小さく作る 2. Webサービス、静的サイト、Botなどを独立して公開できるようにする 3. API、画面、データ、バッチ処理の責務を分ける 4. データを別の画面やプロダクトで再利用しやすくする 5. 地図、写真、テキスト、会話を適切に組み合わせる 6. 既存資産を活用し、必要以上に複雑な構成にしない 7. 生成AIの出力を人間やアプリケーションの処理で制御する 全プロダクトを同じフレームワークへ統一するのではなく、サービスの規模、公開方法、利用者との接点、既存コードとの整合性に応じて構成を選択しています。 ## 全体構成 リブログのプロダクトは、おおまかに次のレイヤーで構成されています。 ``` 利用者 | +-- Webブラウザ | +-- サーバーサイドレンダリング | | +-- Thymeleaf / Pebble | | +-- HTMX / JavaScript | | | +-- 静的サイト / PWA | +-- HTML / CSS / JavaScript | +-- Tailwind CSS / Flowbite | +-- Riot.js / Vite | +-- Leaflet / A-Frame / AR.js | +-- LINE Bot | +-- LINE Messaging API | +-- Java Servlet | +-- ハイブリッドモバイルアプリ +-- Monaca / Apache Cordova +-- Web技術と端末API アプリケーション / API +-- Java / Kotlin +-- Spring Boot +-- Micronaut +-- Javalin +-- Jakarta Servlet / Restlet +-- REST API / WebSocket / バッチ処理 データ +-- MariaDB / MySQL +-- MongoDB +-- ActiveObjects / SQL2o / Doma / Morphia +-- CSV / JSON / GeoJSON / YAML / Markdown 外部サービス +-- OpenAIなどの生成AI API +-- LINE Messaging API +-- Google Maps関連API / OpenStreetMap +-- Flickr / PhotoPrism +-- S3 公開・実行環境 +-- TomcatなどのServletコンテナ +-- Netlify / GitHub Pagesなどの静的ホスティング +-- Monaca / Cordovaのモバイル実行環境 ``` すべてのプロダクトが全レイヤーを持つわけではありません。静的ファイルだけで完結するサイト、Servletコンテナで動くWebアプリケーション、LINEを入口とするBot、複数の実行単位を持つサービスが併存しています。 ## プロダクト別の技術構成 各プロダクトでは、目的や提供形態に応じて異なる技術を組み合わせています。表にある技術は全体の標準を意味せず、プロダクト固有の選択を含みます。 | プロダクト | 主な技術 | | -------- | -------------------------------------------------------------------------------------------------------- | | CotoGoto | Java、Kotlin、Spring Boot、Thymeleaf、WebSocket、MySQL、Doma、MongoDB、Morphia、LINE Messaging API、Monaca、Cordova | | CHROCO | Java、Spring Boot、Pebble、MariaDB、ActiveObjects、S3、OpenAI API、Playwright、RSS | | 旅旅 | Java、Javalin、Thymeleaf、MariaDB、SQL2o、Markdown、Flickr API、JSON | | 巡る街角 | Java、Spring Boot、Thymeleaf、MariaDB、SQL2o、Google Maps関連API、Flickr API、OpenAI API、Sentry | | ロジねこ | HTML、CSS、JavaScript、Monaca、Cordova、3D表示用JavaScript | | 水のみち散策 | 静的HTML、JavaScript、Tailwind CSS、Leaflet、MarkerCluster、PhotoSwipe、GeoJSON、CSV、Netlify | | 朝夕日和 | 静的Web/PWA、Tailwind CSS、Leaflet、Java、Restlet、MariaDB、SQL2o、日出没計算、Flickr API | | 言の場 | Java、Micronaut、Pebble、HTMX、MariaDB、ActiveObjects、HikariCP、Leaflet | | 樹辞苑 | Java、Javalin、Thymeleaf、MariaDB、ActiveObjects、OpenAI API、画像生成 | | 季語彩集 | Riot.js、Vite、Tailwind CSS、Flowbite、Axios、静的Webアプリ | | 星をみるひと | Webサイト、iPhone / Androidアプリ、星をみるひとAPI、位置情報、天文情報 | | 夢占いBot | Java、Jakarta Servlet、LINE Messaging API、会話処理 | | 山みっけAR | 静的Web/PWA、Leaflet、A-Frame、AR.js、位置情報、GeoJSON | | 即時探訪 | Java、Jakarta Servlet、LINE Messaging API、Google Maps関連API、和座標API、OpenAI API | | MATATAVI | Java、Servlet API、MariaDB、SQL2o、MongoDB、交通・位置情報API | | 崩壊地名 | Java、Jakarta Servlet、Restlet、LINE Messaging API、YAML、会話処理 | ## バックエンド バックエンドの中心言語はJavaです。CotoGotoの一部ではKotlinも使われています。 ### Webアプリケーションフレームワーク 複数の世代と用途に対応するため、次の構成が併存しています。 * **Spring Boot**: CotoGoto、CHROCO、巡る街角 * **Micronaut**: 言の場 * **Javalin**: 旅旅、樹辞苑 * **Jakarta Servlet / Restlet**: 朝夕日和API、夢占いBot、即時探訪、崩壊地名、MATATAVI Spring BootはWeb、WebSocket、テンプレート、DB連携を含む比較的大きなサービスで利用されています。MicronautとJavalinは、機能を絞ったWebアプリケーションや既存のTomcat環境に合わせた構成で使われています。ServletやRestletは、Webhook、API、既存資産を活用する実行単位に残っています。 ### APIとバッチ処理 プロダクトには、画面表示だけでなく次の処理が含まれます。 * REST形式のAPI * LINE Webhook * WebSocketによる更新 * 記事、写真、地図データの取得と整形 * 生成AIを利用した文章・画像生成 * 定期実行または管理者実行のバッチ APIとバッチは、同一リポジトリ内の別モジュールまたは別パッケージとして管理される場合があります。 ## フロントエンド フロントエンドは、一つの方式へ統一されていません。プロダクトの規模と操作性に応じて、次の方式を使い分けています。 ### サーバーサイドレンダリング JavaのWebアプリケーションでは、ThymeleafまたはPebbleでHTMLを生成します。 * Thymeleaf: CotoGoto、旅旅、巡る街角、樹辞苑 * Pebble: CHROCO、言の場 * HTMX: 言の場を中心に、画面の一部分を更新 ### 静的サイトとJavaScriptアプリ 水のみち散策、朝夕日和、山みっけARなどは、静的HTML、CSS、JavaScriptを中心に構成されています。季語彩集ではRiot.js、Vite、Tailwind CSSを利用しています。 この方式は、地図やデータ可視化を小さく公開する場合や、APIから取得したデータをブラウザで表示する場合に適しています。 ### モバイルとPWA CotoGotoのモバイルクライアントとロジねこでは、MonacaとApache Cordovaを利用したハイブリッドアプリを採用しています。 朝夕日和と山みっけARではWeb App ManifestやService Workerを用いたPWA構成があり、ブラウザの位置情報やカメラなどの機能を利用します。 ## 地図・位置情報・AR 地図と位置情報は、多くのプロダクトを横断する技術領域です。 ### 主な技術とデータ * Leaflet * OpenStreetMap * MarkerCluster * Google Maps関連API * GeoJSON * KML * CSVと緯度経度データ * ブラウザのGeolocation API * A-Frame * AR.js * 国土数値情報や自治体オープンデータ LeafletとGeoJSONは、朝夕日和、水のみち散策、言の場、山みっけARなどで利用されています。巡る街角や即時探訪ではGoogle Maps関連API、山みっけARではA-FrameとAR.jsを組み合わせています。 位置情報は画面表示だけでなく、地点検索、近隣スポットの提案、写真の配置、日出没計算、AR表示にも利用されます。 ## データベースとデータ形式 ### RDB MariaDBまたはMySQLが、検索、集計、ユーザー状態、記事、地点、木材、旅程などの構造化データに使われています。 DBアクセスには、プロダクトごとに次の技術が使われています。 * ActiveObjects * SQL2o * Doma * JDBC * HikariCP * Commons DBCP 特定のORMやアクセスライブラリへ統一されているわけではありません。既存のデータモデルとアプリケーション構成に合わせて選択されています。 ### ドキュメントDB CotoGotoとMATATAVIではMongoDBを利用し、CotoGotoではMorphiaも使われています。 ### ファイル形式 静的サイト、データ交換、バッチ入力、設定には次の形式を利用しています。 * JSON * GeoJSON * CSV * YAML * Markdown * 画像ファイルとWebP RDBだけを前提にせず、公開・再利用しやすいファイル形式もデータ基盤の一部として扱います。 ## 写真・メディア 写真は、旅、街歩き、地図、木材、風景を扱うプロダクトの主要なコンテンツです。 ### 主な技術 * Flickr API * PhotoPrism連携 * Amazon S3 * Lightbox / PhotoSwipe * WebP * サムネイルと画像メタデータ * Playwrightによるページ取得 写真を扱う場合は、保存先だけでなく、表示速度、利用条件、著作権、位置情報、代替テキスト、外部サービス停止時の挙動を考慮します。 ## AIと会話インターフェース 生成AIは開発支援だけでなく、実際のプロダクト機能にも使われています。 ### プロダクトでの利用 * 巡る街角: 収集した情報をもとにした記事生成 * 樹辞苑: 木材情報の生成・要約と画像生成 * 即時探訪: 位置情報に基づく文章生成 * CHROCO: OpenAIクライアントを利用する機能 * CotoGoto: WebSocket、LINE連携、既存の会話処理を組み合わせた会話基盤 * 夢占いBot、崩壊地名: LINEを入口とする会話処理 生成AIや会話エンジンの出力は、そのまま正しい情報として扱わず、入力制約、構造化、保存前の検証、表示上の注意、秘密情報の分離を行います。 ### 開発での利用 CodexなどのAIは、要件整理、コード生成、テスト観点、Markdown文書、データ整形の補助に利用します。最終的な判断とレビューは人間が行います。 ## 外部サービス連携 プロダクトの目的に応じて、次の外部サービスやAPIを利用しています。 * LINE Messaging API * OpenAIなどの生成AI API * Google Maps関連API * OpenStreetMap * Flickr API * PhotoPrism API * Amazon S3 * 交通、駅、位置情報、座標変換に関するAPI * 国や自治体が公開するオープンデータ 外部サービスとの連携は、APIキーや接続先をソースコードへ固定せず、環境変数や実行環境の設定として分離することを原則とします。 ## インフラ・公開環境 公開方法は、プロダクトの実行形態によって異なります。 ### サーバーサイドアプリケーション Spring Boot、Micronaut、Javalin、Servlet/Restletのアプリケーションは、Tomcatを含むJavaの実行環境を前提とする構成が中心です。WARとして外部Servletコンテナへ配置するものと、フレームワークの実行形式を利用するものがあります。 ### 静的ホスティング 静的HTML、JavaScript、GeoJSONなどで構成できるプロダクトは、NetlifyやGitHub Pagesなどの静的ホスティングと相性がよい構成です。水のみち散策ではNetlifyを利用しています。 ### モバイル MonacaとCordovaを利用するプロダクトでは、Web資産をモバイルアプリとして実行し、位置情報、音声、カメラなどの端末機能へプラグイン経由でアクセスします。 本番のホスト名、クラウド構成、デプロイ先などの詳細は、各プロダクトの運用文書で管理します。 ## 技術選定の基準 リブログでは、技術選定において次の点を重視します。 1. 長く保守できるか 2. 小さく始められるか 3. 既存コードとデータを活用できるか 4. 地図、写真、会話など必要な体験を実現できるか 5. 静的公開、Webアプリ、Botなど実行形態に合っているか 6. 外部サービスへの依存と運用コストを管理できるか 7. AIと協調して開発・レビューしやすいか 8. 過剰に複雑にならないか 新しい技術を使うこと自体を目的にせず、プロダクトの目的と既存資産に合う技術を選択します。具体的な判断手順は、[技術選定の基準](/engineering-handbook/riburoguno/3-technology-and-architecture/technology-selection.md)で整理します。 ## 情報の更新方針 技術構成は、プロダクトの追加、移行、公開方法の変更に合わせて更新します。 プロダクト固有の依存関係、バージョン、設定、デプロイ手順は各プロダクトの文書で管理し、このページには全体像を理解するための主要技術と役割を掲載します。 技術構成を更新する際の手順は、[技術スタック調査プロンプト](/engineering-handbook/fu-lu/32-technology-stack-audit-prompt.md)で整理しています。 ## 今後の技術課題 * プロダクトごとの技術スタック文書の整備 * APIとWebhook仕様の整理 * DBアクセス方式とデータモデルの可視化 * 地図データとGeoJSON運用の標準化 * 画像管理と外部写真サービス連携の整理 * LINE Botと会話処理の共通化検討 * 生成AIの品質、安全性、コスト管理 * 秘密情報をソースコードから分離する運用の徹底 * テストとCI/CDの導入範囲整理 * 静的サイト、PWA、モバイルアプリの保守方針整理 * プロダクト横断のデータ活用 リブログのアーキテクチャは完成形ではありません。プロダクトの成長と保守状況に合わせて、少しずつ改善します。 ## 技術領域への導線 詳細は、次の技術領域ページで整理します。 | 領域 | 内容 | 詳細ページ | | --------- | ---------------------------------------- | ------------------------------------------------------------------------------- | | アプリケーション | Webサイト、Webアプリ、Bot、モバイル、地図、AR | [アプリケーション](/engineering-handbook/di-er-bu-ji-shu-ling-yu/10-applications.md) | | システム | Java/Kotlinアプリケーション、API、Webhook、バッチ、DB連携 | [システム](/engineering-handbook/di-er-bu-ji-shu-ling-yu/11-system.md) | | インフラ・公開環境 | Servletコンテナ、静的ホスティング、モバイル実行環境 | [インフラ・公開環境](/engineering-handbook/di-er-bu-ji-shu-ling-yu/12-infrastructure.md) | | データ | RDB、MongoDB、オープンデータ、GeoJSON、CSV、JSON | [データ](/engineering-handbook/di-er-bu-ji-shu-ling-yu/13-data.md) | | 開発ツール | GitHub、Codex、Maven、npm、Vite、Markdown | [開発ツール](/engineering-handbook/di-er-bu-ji-shu-ling-yu/14-development-tools.md) | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://livlog-llc.gitbook.io/engineering-handbook/riburoguno/3-technology-and-architecture.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.