土地家屋調査士Instagram投稿サポートアプリ

土地家屋調査士Instagram投稿サポートアプリ

コンセプト：現場のプロフェッショナルのための、完全オフライン対応SNS投稿支援ツール

このアプリケーションは、多忙な土地家屋調査士の方々が、スマートフォン一つで迅速かつ手軽に質の高いInstagram投稿を作成できるよう設計したプログレッシブウェブアプリ（PWA）です。煩雑な定型文の入力やハッシュタグ選定の手間をなくし、本来の業務に集中できる環境を提供することを目的としています。

最大の特徴は、サーバーを一切介さない完全クライアントサイド完結型のアーキテクチャです。ユーザーのプライバシーを最優先に考え、入力された情報や写真はすべてユーザー自身のデバイス内にのみ保存されます。これにより、インターネット接続のない現場でも全機能が利用可能なオフラインファーストを実現し、情報漏洩のリスクを根本から排除しました。

技術アーキテクチャと主な採用理由

• フロントエンド: React 18 / TypeScript

  • コンポーネントベースの宣言的なUI構築により、メンテナンス性と拡張性の高いコードベースを実現。TypeScriptによる静的型付けは、開発段階でのエラー検知とコード品質の向上に大きく貢献しました。

• UI/UX: Tailwind CSS / レスポンシブデザイン

  • ユーティリティファーストのアプローチで、迅速かつ一貫性のあるUIデザインを構築。「モバイルファースト」思想に基づき、スマートフォンの縦画面での操作性を最優先に設計しつつ、タブレットやデスクトップにも対応する柔軟なレイアウトを実装しました。

• クライアントサイドデータベース: IndexedDB (with idb wrapper)

  • 投稿履歴やユーザー設定など、構造化されたデータを安全かつ永続的に保存するため、localStorageよりも高機能なIndexedDBを選択。非同期処理に優れたidbライブラリを介して利用することで、複雑なデータベース操作をシンプルに実装し、UIのブロッキングを回避しています。

• セキュリティ: Web Crypto API (PBKDF2)

  • アプリケーションロック機能のパスコードは、平文で保存することなくPBKDF2アルゴリズムを用いてクライアントサイドで安全にハッシュ化。ソルトを付与することで、辞書攻撃やレインボーテーブルへの耐性を高め、ユーザーのデータを強力に保護します。

実装した主な機能と技術的ハイライト

1. プライバシーを最優先したセキュアな認証

   • 初回起動時にパスコード設定を要求し、以降はローカルでの認証を経なければアクセスできないロック機能を実装。すべての認証処理はデバイス内で完結するため、外部に認証情報が送信されることは一切ありません。

2. 動的なコンテンツ生成とプライバシー保護

   • ユーザーが入力した情報を基に、訴求力の高いキャプションと最適なハッシュタグをリアルタイムで自動生成。特に、住所に含まれる番地などの個人情報に繋がりかねない数字列は、正規表現を用いて「◯◯」といった形に自動でマスキングする処理を組み込み、安心して利用できる設計としました。

3. モダンな画像形式へのシームレスな対応

   • iPhoneで撮影された写真に多いHEIC/HEIF形式は、クライアントサイドでJPEG形式に自動変換する機能を実装。heic2anyライブラリを活用し、ユーザーがファイル形式を意識することなく、あらゆる画像をアップロードできるスムーズなUXを実現しました。

4. ネイティブアプリに迫る共有体験

   • Web Share APIを活用し、生成したテキストと選択した画像を、OSの共有機能を介して直接InstagramなどのSNSアプリに引き渡す機能を実装。これにより、「テキストをコピーして、アプリを切り替えて…」という煩雑な手順を劇的に削減しました。

5. オフラインでも安心のデータ管理

   • 設定データは、JSON形式でのエクスポート・インポートに対応。機種変更時や複数デバイスでの設定同期を容易にし、ユーザーが作成した資産を守ります。

AI Co-Pilot（副操縦士）による開発プロセスの革新

本プロジェクトは、企画から実装、ドキュメンテーションに至るまで、生成AIを開発パートナーとして積極的に活用したAI駆動開発（AI-Driven Development）の実践例です。

• 高速なプロトタイピング: UIコンポーネントの雛形や定型的なロジックをAIに生成させることで、開発の初期段階を大幅に短縮しました。

• 技術的課題の解決: IndexedDBの非同期処理やWeb Crypto APIといった複雑なWeb APIの実装において、AIは最適なコードパターンを提案し、デバッグを支援する強力な相談相手となりました。

• 品質向上とリファクタリング: コードの可読性やパフォーマンスを向上させるためのリファクタリング案をAIにレビューさせ、より堅牢なコードベースを構築しました。

AIを単なるツールとしてではなく「Co-Pilot（副操縦士）」として活用することで、開発者はより創造的で本質的な課題解決に集中でき、開発速度と最終的なプロダクトの質を飛躍的に向上させられることを実証しました。

まとめ

本プロジェクトでは、特定のユーザー層が抱える課題を深く理解し、それを解決するために最適な技術を選定・組み合わせることで、実用性の高いツールを開発しました。Reactを中心としたモダンなWeb技術とAI駆動開発のアプローチを統合することで、プライバシー、パフォーマンス、UXのすべてにおいて妥協しないアプリケーションを、驚異的なスピードで実現しました。