> 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/di-er-bu-ji-shu-ling-yu/10-applications.md). # 10. アプリケーション リブログのアプリケーションは、Webブラウザ、LINE、モバイル端末を通じて、情報の検索、記録、閲覧、会話、地図・写真の体験を提供します。 すべてを同じフロントエンド構成へ統一せず、プロダクトの規模、操作性、公開方法、既存コードに応じて提供形態を選びます。 ## 主な提供形態 * サーバーサイドレンダリングによるWebサービス * 静的サイトとJavaScriptアプリ * PWA * LINE Bot * Monaca / Apache Cordovaによるハイブリッドモバイルアプリ * 地図・位置情報アプリ * ARアプリ ## サーバーサイドレンダリング JavaのWebアプリケーションでは、ThymeleafまたはPebbleでHTMLを生成します。 * Thymeleaf: CotoGoto、旅旅、巡る街角、樹辞苑 * Pebble: CHROCO、言の場 * HTMX: 言の場を中心とした部分更新 サーバーサイドレンダリングは、検索結果、一覧、詳細、記事、管理画面など、データをもとに安定したHTMLを返す画面で利用します。JavaScriptは、地図、検索補助、動的更新など必要な範囲に限定します。 ## 静的サイトとJavaScriptアプリ 水のみち散策、朝夕日和、山みっけARなどは、静的HTML、CSS、JavaScriptを中心に構成されています。季語彩集では、Riot.js、Vite、Tailwind CSS、Flowbite、Axiosを利用しています。 静的構成は、次の用途に適しています。 * GeoJSONやCSVをブラウザで表示する * 地図やデータ可視化を小さく公開する * サーバー側で秘密情報を扱わない * 静的ホスティングから独立して配信する APIキーや非公開データが必要な処理は、ブラウザへ埋め込まず、サーバーサイドのAPIへ分離します。 ## 地図・位置情報・AR 地図と位置情報を扱う画面では、次の技術やデータを組み合わせます。 * Leaflet / OpenStreetMap * MarkerCluster * Google Maps関連API * GeoJSON / KML / CSV * Geolocation API * A-Frame / AR.js 地点、ルート、写真、記事、検索条件、現在地などを、目的に合う形で関連付けます。山みっけARでは、位置情報とA-Frame、AR.jsを組み合わせた表示を行います。 ## 写真・メディア 写真を扱う画面では、Flickr、PhotoPrism、Amazon S3などの保存・取得元と、PhotoSwipeなどの表示技術を利用します。 実装時は、表示速度、サムネイル、WebP、代替テキスト、著作権、位置情報、外部サービス停止時の挙動を確認します。 ## Bot・会話インターフェース CotoGoto、夢占いBot、即時探訪、崩壊地名などでは、LINE Messaging APIを利用して会話や情報提供を行います。 Botの画面はLINE側にありますが、アプリケーションとしては次を設計します。 * 利用者から受け取るメッセージと位置情報 * Webhookへの応答 * 会話状態の保持 * 外部APIや生成AIの結果の整形 * エラー時や回答不能時の案内 ## モバイルとPWA CotoGotoのモバイルクライアントとロジねこでは、MonacaとApache Cordovaを利用します。Web技術を基盤とし、プラグインを通じて位置情報、音声、カメラなどの端末機能へアクセスします。 星をみるひとでは、WebサイトとiPhone / Androidアプリを通じて、位置や時間に応じた星座・天体情報を提供します。 朝夕日和と山みっけARでは、Web App ManifestやService Workerを利用したPWA構成があります。ブラウザや端末ごとの権限、オフライン時の挙動、キャッシュ更新を考慮します。 ## UIの方針 * 一覧、地図、記事から詳細へ移動しやすくする * 地図、文章、写真の関係を分かりやすくする * スマートフォンでも主要操作を完了できるようにする * 読み込み中、データなし、外部サービス失敗時の状態を示す * キーボード操作、色、代替テキストなどアクセシビリティを確認する * 過剰なアニメーションや複雑な状態管理を避ける ## 今後の課題 * 共通UI部品とアクセシビリティの整理 * 地図UIとGeoJSON表示の標準化 * 写真ギャラリーと画像最適化の整理 * LINE Botの会話体験とエラー応答の共通化検討 * PWAとCordovaアプリの保守方針整理 --- # 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/di-er-bu-ji-shu-ling-yu/10-applications.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.