パッケージ・自社開発2026年

撮影写真を地図とアルバムで管理するパッケージ

自社パッケージ

現場で撮影した写真を位置情報とともに地図上にマッピングし、現場ごとのアルバムで整理・共有するためのパッケージです。地図からもアルバムからも写真にたどり着け、撮影者・撮影日時・座標を確認できます。

撮影写真を地図とアルバムで管理するパッケージ

実績情報

OVERVIEW
クライアント
自社パッケージ現場写真を扱う建設・点検分野などの企業向けに、四葉システムが自社で開発しているパッケージ製品。
業界
建設・工事 / コンサルティング・調査
対応時期
2026年
担当範囲
企画/制作
対応環境
Web / スマートフォン・タブレット（ブラウザ）

課題・解決・効果

CASE STUDY

  1. 課題

    CHALLENGE
    • 大量の現場写真がフォルダに溜まり、どこで撮った写真かを探すのに時間がかかっていた
    • 現場ごとの写真の整理方法が担当者によって異なり、チームで共有しにくかった
    • 撮影者や撮影日時、位置などの情報を写真と一緒に確認する手段がなかった

  2. 解決

    SOLUTION
    • LeafletとNext.jsで、アルバムと写真を地図上にピン表示する画面を構築
    • 現場ごとのアルバム一覧・詳細画面と、ライトボックスでの写真閲覧を実装
    • 地図をタップして位置を指定し、写真をアルバムに登録するフォームを用意

  3. 効果

    RESULT
    • 写真を地図から探せるようになり、現場の位置関係をひと目で把握できるようになった
    • 現場ごとのアルバムで写真を整理し、チームで同じ情報を確認できるようになった
    • 撮影者・日時・座標を写真とあわせて確認でき、報告や記録に活用しやすくなった

主な機能

FEATURES
  • アルバム・写真のマーカーを表示する地図画面
  • 写真サムネイルのポップアッププレビュー
  • 地図タップで位置を指定する写真登録
  • 現場数・写真数・メンバー数のサマリー表示
  • 現場名・エリア名でのアルバム検索
  • 写真グリッドとライトボックスでの拡大表示
  • 撮影者・撮影日時・GPS座標の表示

技術スタック

TECHNOLOGY
対応環境
  • Web
  • スマートフォン・タブレット（ブラウザ）
開発言語
  • TypeScript
フロントエンド
  • Next.js 16
  • React 19
  • Tailwind CSS 4
  • React Leaflet 5
インフラ・実行環境
  • Cloudflare Workers (OpenNext)
主なライブラリ
  • Leaflet
  • React Leaflet

技術的なポイント

ENGINEERING

システム構成Next.js（App Router）とReact LeafletのフロントエンドをOpenNextでCloudflare Workersに配置。写真・アルバムはサンプルデータで表示し、登録操作はUIのみ。

  1. 1アルバム単位と写真単位の2種類のマーカーを地図上に描き分け、全体把握と個別確認を一つの画面で行えるようにした。
  2. 2写真グリッドは画面幅に応じて列数を変えるレスポンシブ設計とし、スマートフォンやタブレットでも閲覧しやすくしている。
  3. 3OpenNextでCloudflare Workersに配置し、サーバ管理なしでデモ環境を公開できるようにしている。

同様のシステム開発をご検討の方へ

要件が固まっていない段階でも構いません。課題やご予算に合わせて最適な進め方をご提案します。

お問い合わせ・ご相談

関連する実績

RELATED WORKS
ブラウザで使える在庫・棚卸管理アプリ
パッケージ・自社開発2026年

ブラウザで使える在庫・棚卸管理アプリ

自社開発（デモ）

小規模な事業者や部署が、在庫の確認、入庫・出庫の記録、棚卸をブラウザだけで行える在庫管理アプリのデモ。サーバーを用意せずに試せる構成で、在庫管理の導入イメージを確かめられるようにしています。

  • TypeScript
  • Next.js
  • React
  • Cloudflare
詳しく見る
学校向け匿名アンケート・リスク検知システム
パッケージ・自社開発2026年

学校向け匿名アンケート・リスク検知システム

自社サービス

教育委員会や学校が、いじめ・生活実態調査を生徒への匿名アンケートとして配信・集計できるWebシステムです。自由記述などからリスクを自動検知し、緊急時のみ監査記録付きで回答者を特定できる「準匿名」の仕組みを備えます。

  • TypeScript
  • Next.js
  • React
  • Cloudflare
詳しく見る
QR・メール配信対応のWebアンケート集計基盤
パッケージ・自社開発2026年

QR・メール配信対応のWebアンケート集計基盤

Webサービス企画会社

アンケートの作成から配布（QRコード・メール）、回答、集計・可視化までを一つで行えるWebアンケートサービスの試作。回答者はスマートフォンから回答でき、管理者はグラフで結果を確認できる。

  • TypeScript
  • Next.js
  • React
詳しく見る
開発実績の一覧へ戻る