1.概要

「写真マップ (PictMap)」は、写真をインタラクティブな地図上に配置して共有できるWebアプリケーションです。PHPが動作するWebサーバーさえあれば、データベースを必要とせず、手軽に導入できます。

主な特徴

• 地図上での写真共有 ── 撮影した写真を地図上のピンとして配置し、誰でも閲覧できます。
• GPS情報の自動取得 ── スマートフォンやデジタルカメラで撮影した写真に含まれるGPS情報（EXIF）を自動的に読み取り、撮影場所に自動でピンを配置します。
• HEIC/HEIF形式に対応 ── iPhoneで撮影されたHEIC形式の写真も、アップロード時に自動でJPEG形式に変換されます。
• データベース不要 ── すべてのデータをJSONファイルとして保存するため、データベースの構築や管理が不要です。
• Webブラウザだけで完結 ── 初期設定からすべての管理操作まで、Webブラウザのみで行えます。
• モダンな操作性 ── Vue.js 3 と Leaflet.js を採用したSPA（シングルページアプリケーション）で、ページ遷移のないスムーズな操作を実現しています。
• 2種類の地図に対応 ── OpenStreetMap（無料）と Google Maps（APIキー必要）を切り替えて利用できます。
• セキュリティ対策 ── bcryptによるパスワード暗号化、ログイン試行回数制限、セッション管理など、基本的なセキュリティ対策を実装しています。
• 自動バックアップ ── データの自動バックアップ機能を搭載しています。

活用例

用途	説明
旅行写真の共有	旅行先で撮影した写真を地図上に配置し、旅の記録として公開・共有できます。
グルメマップ	お気に入りのレストランやカフェの写真を地図上にまとめ、オリジナルのグルメマップを作成できます。
建設現場管理	工事現場の写真を位置情報付きで記録し、進捗管理や報告に活用できます。
不動産物件管理	物件の外観・内観写真を地図上に配置し、所在地と合わせて管理できます。
地域情報の記録	地域のイベントや名所の写真を地図にまとめ、地域紹介として活用できます。

2.利用規約

写真マップ (PictMap) は、以下のオープンソースライブラリおよびサービスを利用しています。ご利用の際は、各ライブラリ・サービスのライセンスおよび利用規約もあわせてご確認ください。

ライブラリ / サービス	用途	ライセンス / 備考
OpenStreetMap	地図タイルの表示	Open Data Commons Open Database License (ODbL)。無料で利用可能。
Leaflet	地図の操作・表示ライブラリ	BSD 2-Clause License。無料で利用可能。
Leaflet.markercluster	マーカーのクラスタリング表示	MIT License。無料で利用可能。
Google Maps API	Google Maps の表示（オプション）	Google の利用規約に準拠。APIキーが必要。使用量に応じて課金が発生する場合があります。
Vue.js 3	フロントエンドフレームワーク	MIT License。無料で利用可能。
heic2any	HEIC/HEIF画像のJPEG変換	MIT License。無料で利用可能。
exifr	写真のEXIF情報（GPS等）読み取り	MIT License。無料で利用可能。

3.動作環境

サーバー要件

項目	要件
Webサーバー	Apache または Nginx（PHPが動作すること）
PHP バージョン	PHP 7.4 以上（PHP 8.x 推奨）
PHP 拡張モジュール	GD ライブラリ（画像処理用）、EXIF 拡張（写真情報読み取り用）
ディスク容量	写真の枚数に応じて必要（目安：写真1枚あたり約200KB〜1MB）

対応ブラウザ

ブラウザ	対応状況
Google Chrome	2026/2 動作確認済み
Microsoft Edge	2026/2 動作確認済み
Safari（iOS / macOS	2026/2 動作確認済み
Mozilla Firefox	2026/2 動作確認済み

対応画像形式

形式	説明
JPEG (.jpg, .jpeg)	標準的な写真形式。そのままアップロード可能。
HEIC / HEIF (.heic, .heif)	iPhoneの標準撮影形式。アップロード時にJPEG形式に自動変換されます。
PNG (.png)	そのままアップロード可能。位置情報の修正が必要。
GIF (.gif)	そのままアップロード可能。位置情報の修正が必要。

4.環境構築

4.1 レンタルサーバーへの設置

写真マップをレンタルサーバーに設置する手順を説明します。

1. FTPソフトの準備
   FTPソフト（FFFTP、FileZilla、WinSCP など）を用意し、レンタルサーバーに接続します。FTPの接続情報（ホスト名、ユーザー名、パスワード）はレンタルサーバーの管理画面で確認してください。
2. ファイルのアップロード
   pictmap フォルダをサーバーの公開ディレクトリ（通常は /public_html/ や /htdocs/ の下）にアップロードします。
   例：/public_html/pictmap/
3. ディレクトリのパーミッション設定
   data/ ディレクトリに書き込み権限が必要です。FTPソフトでパーミッションを 755 に設定してください。
   多くのレンタルサーバーでは、アップロード時に自動的に適切なパーミッションが設定されるため、変更が不要な場合もあります。初期セットアップ時にエラーが出た場合にのみ、パーミッションを確認してください。
4. ブラウザでアクセス
   Webブラウザで設置先のURLにアクセスします。
   例：https://example.com/pictmap/
   初回アクセス時には自動的に初期セットアップウィザードが表示されます（第5章 を参照）。

4.2 ディレクトリ構成

アップロード後のディレクトリ構成は以下のとおりです。

pictmap/
├── index.php          ... メインファイル
├── api/               ... PHP API ファイル群
├── assets/            ... CSS・JavaScript ファイル群
└── data/              ... データ保存ディレクトリ（自動生成）
    ├── .htaccess      ... アクセス制御（自動生成）
    ├── settings.json  ... サイト設定ファイル
    ├── users.json     ... ユーザー情報ファイル
    ├── photos.json    ... 写真情報ファイル
    └── photos/        ... アップロード写真・サムネイルの保存先

5.初期セットアップウィザード

写真マップに初めてアクセスすると、3ステップの初期セットアップウィザードが自動的に表示されます。このウィザードで基本的な設定を行います。

5.1 ステップ1：管理者アカウントの作成

最初に、管理者アカウントを作成します。管理者は写真マップのすべての機能と設定にアクセスできます。

入力項目	必須	説明
ユーザーID	必須	ログインに使用するIDです。半角英数字で入力してください。
ユーザー表示名	必須	画面上に表示される名前です。日本語も使用できます。
メールアドレス	任意	管理者の連絡先メールアドレスです。省略可能です。登録しておくとパスワードを忘れた際にリセットできます。
パスワード	必須	ログインに使用するパスワードです。4文字以上で設定してください。

入力が完了したら 次へ ボタンをクリックします。

5.2 ステップ2：サイト設定

写真マップの基本設定を行います。

入力項目	説明
サイト名	写真マップのタイトルです。画面上部に表示されます。 例：「旅の写真マップ」「グルメマップ」
地図の種類	使用する地図を選択します。 OpenStreetMap ── 無料で利用可能。APIキー不要。 Google Maps ── Google Maps API キーが必要。使用量に応じて課金の可能性あり。
Google API キー	Google Maps を選択した場合のみ入力が必要です。取得方法は付録9.1を参照してください。
初期表示位置	地図の初期表示位置です。地図上のマーカーをドラッグして設定できます。 デフォルト：東京（35.6762, 139.7674）

入力が完了したら 次へ ボタンをクリックします。

5.3 ステップ3：セットアップ完了

設定内容の確認画面が表示されます。問題なければ 利用開始 ボタンをクリックしてください。写真マップのメイン画面が表示され、すぐにご利用いただけます。

セットアップ完了後、サイト名や権限などの詳細設定は、メニューの「設定」から変更できます。

6.設定の変更

管理者としてログイン後、画面左上のハンバーガーメニュー（三本線のアイコン）から 設定 を選択することで、各種設定を変更できます。設定項目はカテゴリごとに分かれています。

6.1 サイト設定

項目	説明
サイト名	写真マップのタイトル。画面上部のヘッダーに表示されます。
サイト説明	サイトの説明文です。サイドメニューの「このサイトについて」に表示されます。

6.2 地図設定

項目	説明	初期値
地図の種類	OpenStreetMap または Google Maps を選択します。	OpenStreetMap
Google API キー	Google Maps を使用する場合に入力します。検証 ボタンでキーの有効性を確認できます。	（なし）
デフォルト位置（緯度）	地図の初期表示位置の緯度。	35.6812
デフォルト位置（経度）	地図の初期表示位置の経度。	139.7671
デフォルトズーム	地図の初期拡大レベル。1（世界全体）〜 20（最大拡大）の範囲で指定します。	13

6.3 表示設定

項目	説明	設定範囲	初期値
サムネイルサイズ	画面下部のサムネイルバーに表示される写真の大きさ（ピクセル）。	50〜300px	120px
最大表示件数	地図上とサムネイルバーに一度に表示する写真の最大件数。	10〜50000件	50件
ポップアップ表示	マーカークリック時のポップアップの表示方法を選択します。	―	―

6.4 権限設定

項目	選択肢	説明
投稿権限	誰でも ログインユーザーのみ 管理者のみ	写真をアップロードできるユーザーの範囲を設定します。
閲覧権限	公開（誰でも閲覧可能） ログインユーザーのみ	写真マップを閲覧できるユーザーの範囲を設定します。
ユーザー自身による新規登録	許可する 許可しない	ログイン画面に「新規登録」リンクを表示し、ユーザー自身がアカウントを作成できるようにします。登録されたユーザーは一般ユーザー権限になります。

6.5 ストレージ設定

項目	説明	設定範囲	初期値
最大画像サイズ	アップロードされた画像の長辺を、指定したピクセル数以下にリサイズして保存します。サーバーの容量節約に有効です。	400〜4000px	1200px

6.6 全データ初期化

設定画面の最下部に、折りたたまれた状態で「全データ初期化」セクションがあります。クリックして展開すると、全データの初期化を実行できます。

1. 設定画面の最下部にある 全データ初期化 をクリックして展開します。
2. 管理者パスワードを入力します。
3. 全データを削除して初期化 ボタンをクリックします。
4. 確認ダイアログが2回表示されます。すべて OK をクリックすると、初期化が実行されます。

7.使用方法

7.1 画面構成

写真マップの画面は、大きく分けて以下の要素で構成されています。

ヘッダー（画面上部）

位置	要素	説明
左端	ハンバーガーメニュー（三本線アイコン）	サイドメニューを開きます。ログイン、設定変更、管理機能などにアクセスできます。
中央	サイトタイトル	設定したサイト名が表示されます。
右端	地図切替ボタン	OpenStreetMap と Google Maps を切り替えます（Google API キー設定時のみ表示）。
右端	+（追加）ボタン	写真の新規登録モーダルを開きます。

サイドメニュー

ハンバーガーメニューをクリックすると、画面左側からスライドして表示されます。

• ログイン / ログアウト ── ログイン状態の切り替え
• 設定 ── 管理者のみ。各種設定の変更（第6章 参照）
• 写真管理 ── 管理者のみ。写真の一括管理（第8.1節 参照）
• ユーザー管理 ── 管理者のみ。ユーザーの追加・削除（第8.2節 参照）
• デバッグ ── 管理者のみ。デバッグ情報の確認（第8.3節 参照）
• このサイトについて ── サイト説明を表示

地図エリア（画面中央）

画面の大部分を占めるインタラクティブな地図です。登録された写真の位置にマーカー（ピン）が表示されます。マーカーをクリックすると写真のポップアップが表示されます。

地図の左下には、現在の表示範囲内に表示されているマーカーの件数が半透明のバッジで表示されます。

サムネイルバー（画面下部）

登録済みの写真がサムネイル画像として横一列に並んで表示されます。左右にスクロールして閲覧できます。サムネイルをクリックすると、その写真の詳細表示と地図の移動が行われます。

7.2 地図操作

拡大・縮小（ズーム）

• マウスホイール ── ホイールを前に回すと拡大、後ろに回すと縮小します。
• +/- ボタン ── 地図左上の + - ボタンでも拡大・縮小できます。
• ダブルクリック ── 地図上をダブルクリックすると、その場所を中心に拡大します。
• ピンチ操作（スマートフォン・タブレット） ── 2本の指で広げると拡大、縮めると縮小します。

移動（パン）

• ドラッグ ── 地図上をクリックしたまま動かすと、地図が移動します。
• スワイプ（スマートフォン・タブレット） ── 1本の指でスワイプすると地図が移動します。

写真の検索

地図上の 虫眼鏡アイコン（検索ボタン）をクリックすると、写真検索モーダルが表示されます。投稿者、撮影日、コメント、タグ、住所で写真を絞り込むことができます。詳しくは 7.10 写真検索 を参照してください。

現在地の表示

1. 地図上の 照準アイコン（現在地ボタン）をクリックします。
2. ブラウザから位置情報の使用許可を求められたら 許可 を選択します。
3. GPS情報に基づいて、地図が現在地に移動します。

地図の種類の切り替え

ヘッダー右側の地図切替ボタンで、OpenStreetMap と Google Maps を切り替えることができます。このボタンは、Google API キーが設定されている場合のみ表示されます。

7.3 写真の登録

地図上に写真を登録する方法は2通りあります。

方法1：+ボタンから登録

1. ヘッダー右端の + ボタンをクリックします。
2. 登録モーダルが開きます。撮影地点は現在の地図の中心に設定されます。

方法2：地図上をクリックして登録

1. 地図上の任意の場所をクリックします。
2. 登録モーダルが開きます。撮影地点はクリックした場所に設定されます。

写真ファイルの選択

登録モーダルでは、以下のいずれかの方法で写真を選択します。

• ドラッグ＆ドロップ ── 写真ファイルをモーダル内のエリアにドラッグ＆ドロップします。
• クリックして選択 ── モーダル内のエリアをクリックし、ファイル選択ダイアログから写真を選びます。

対応形式：JPEG、PNG、GIF、HEIC/HEIF

GPS情報の自動取得

写真にGPS情報（EXIF）が含まれている場合、以下の処理が自動的に行われます。

• GPS座標が読み取られ、地図がその場所に移動します。
• マーカー（ピン）が撮影場所に自動配置されます。

GPS情報が含まれていない場合は、手動でマーカーの位置を調整してください。

ミニ地図による位置調整

写真登録モーダルには、位置調整用のミニ地図が表示されます。ミニ地図上のマーカーをドラッグすることで、写真の撮影場所を正確に指定できます。GPS情報から自動設定された位置を微調整したい場合にも便利です。

コメント・タグの入力（任意）

項目	説明	制限
コメント	写真に関するコメントや説明文を入力できます。	最大1000文字
タグ	写真の分類に使えるタグを追加できます。テキストを入力して Enter キーで確定します。	最大20個 / 1タグ最大50文字

登録の実行

登録する ボタンをクリックすると、写真がサーバーにアップロードされます。

サーバー側では以下の処理が自動的に行われます。

• 画像を設定された最大サイズ（デフォルト：長辺1200ピクセル）にリサイズ
• サムネイル画像の自動生成
• 写真データ（位置情報、コメント、タグなど）の保存

7.4 写真の表示

登録された写真を詳しく見るには、以下のいずれかの操作を行います。

• サムネイルをクリック ── 画面下部のサムネイルバーから写真をクリックします。
• マーカーをクリック ── 地図上のマーカー（ピン）をクリックし、ポップアップから写真を選択します。

写真の詳細モーダルが表示され、以下の情報を確認できます。

表示項目	説明
写真（拡大表示）	登録された写真が大きく表示されます。
コメント	登録時に入力したコメントが表示されます。
タグ	登録時に設定したタグが表示されます。
投稿者	写真を投稿したユーザーの表示名が表示されます（ゲストユーザーの投稿には表示されません）。
撮影日時	写真のEXIF情報から取得した撮影日時が表示されます。
座標	写真の緯度・経度が表示されます。
住所	座標から逆ジオコーディングにより取得された住所が表示されます。一度取得された住所はキャッシュされ、次回以降は高速に表示されます。
リンク作成	写真詳細画面のフッターにある リンク作成 ボタンで、この写真へのリンクURLをクリップボードにコピーできます。リンクを開くと、地図上にその写真のマーカーとポップアップが表示されます。

詳細表示中、地図は自動的に写真の撮影場所に移動します。

7.5 写真の編集

登録済みの写真のコメントやタグを編集できます。

編集が可能なユーザー

• 管理者 ── すべての写真を編集できます。
• 写真の投稿者 ── 自分が投稿した写真のみ編集できます。

編集手順

1. 編集したい写真の詳細モーダルを開きます。
2. 編集 ボタンをクリックします（編集権限がある場合のみ表示されます）。
3. 編集モーダルが表示されます。コメントやタグを変更してください。
4. 保存 ボタンをクリックして変更を保存します。

ミニ地図による位置変更

写真編集モーダルにはミニ地図が表示され、現在の写真の位置がマーカーで示されます。マーカーをドラッグすることで、写真の撮影場所を変更できます。

7.6 写真の削除

削除が可能なユーザー

• 管理者 ── すべての写真を削除できます。
• 写真の投稿者 ── 自分が投稿した写真のみ削除できます。

削除手順

1. 削除したい写真の詳細モーダルを開きます。
2. 削除 ボタンをクリックします（削除権限がある場合のみ表示されます）。
3. 確認ダイアログが表示されます。OK をクリックすると、写真データと画像ファイルが完全に削除されます。

7.7 ログイン・ログアウト

ログイン

1. 画面左上のハンバーガーメニューをクリックして、サイドメニューを開きます。
2. ログイン をクリックします。
3. ログインモーダルが表示されます。ユーザーID と パスワード を入力します。
4. ログイン ボタンをクリックします。

ログアウト

1. 画面左上のハンバーガーメニューをクリックして、サイドメニューを開きます。
2. ログアウト をクリックします。
3. 即座にログアウトされ、ゲスト状態に戻ります。

7.8 パスワードリセット

パスワードを忘れた場合、メールアドレスが登録されていれば、メールによるパスワードリセットが可能です。

パスワードリセット手順

1. ログインモーダルの下部にある 「パスワードを忘れた方」 リンクをクリックします。
2. パスワードリセットモーダルが表示されます。登録済みのメールアドレスを入力し、送信 ボタンをクリックします。
3. 入力されたメールアドレスが登録されている場合、パスワードリセット用のリンクが記載されたメールが送信されます。
4. メールに記載されたリンクをクリックすると、新しいパスワードの設定画面が表示されます。
5. 新しいパスワード（4文字以上）を入力し、確認用にもう一度入力して パスワードを変更 ボタンをクリックします。
6. パスワードが変更されたら、新しいパスワードでログインしてください。

管理者によるパスワードリセット

管理者は、ユーザー管理画面から任意のユーザーのパスワードを直接変更できます。詳しくは 8.2 ユーザー管理 を参照してください。

7.9 新規ユーザー登録

管理者が設定画面で「ユーザー自身による新規登録」を許可している場合、ログイン画面から新規ユーザー登録を行えます。

登録手順

1. ログインモーダルの下部にある 「新規登録」 リンクをクリックします。
2. 新規登録モーダルが表示されます。以下の情報を入力します。

   項目	必須	説明
   ユーザーID	必須	半角英数字とアンダースコアで入力します。
   ユーザー表示名	必須	画面上に表示される名前です。
   メールアドレス	任意	パスワードリセット時に使用します。登録しておくとパスワードを忘れた際にリセットできます。
   パスワード	必須	4文字以上で設定してください。
   パスワード（確認）	必須	確認のためもう一度入力します。

3. 登録 ボタンをクリックすると、アカウントが作成され自動的にログインされます。

7.10 写真検索

地図右下の 虫眼鏡アイコン（検索ボタン）をクリックすると、写真検索モーダルが表示されます。以下の条件で写真を絞り込むことができます（モーダル上の表示順）。

検索条件	説明
投稿者	投稿者のユーザーIDまたは表示名で部分一致検索します。
撮影日	開始日と終了日を指定して、撮影日の範囲で絞り込みます。
コメント	コメントのキーワードで部分一致検索します。
タグ	タグ名で部分一致検索します。
住所	写真の住所情報で部分一致検索します。

各検索条件に値を入力して 検索 ボタンをクリックすると、条件に一致する写真のみが地図上とサムネイルバーに表示されます。複数の条件を入力した場合は、すべての条件を満たす写真（AND検索）が表示されます。

検索中は、虫眼鏡アイコンにフィルター件数のバッジが表示され、サムネイルバーの左端に「件数/全件数」が表示されます。クリア ボタンまたはサムネイルバーの × ボタンで検索を解除できます。

検索リンクの作成

検索が実行されている状態で、検索モーダル下部に表示される リンク作成 ボタンをクリックすると、現在の検索条件を含むURLが生成されます。このURLを共有すると、同じ検索条件で写真を表示できます。

7.11 写真のリンク共有

個別の写真を直接共有するためのリンクを作成できます。

1. 共有したい写真の詳細モーダルを開きます。
2. フッターにある リンク作成 ボタンをクリックします。
3. 写真のリンクURLがクリップボードにコピーされます（ボタンが「コピー済」に変わります）。

共有されたリンクを開くと、地図が写真の撮影場所に移動し、マーカーのポップアップ（サムネイル付き）が自動的に表示されます。

8.管理機能

管理者としてログインすると、サイドメニューから以下の管理機能にアクセスできます。これらの機能は管理者のみが使用できます。

8.1 写真管理

サイドメニューから 写真管理 を選択すると、登録されたすべての写真を一覧表示で管理できます。

一覧表示の内容

列	説明
チェックボックス	一括削除する写真を選択します。
サムネイル	写真のサムネイル画像。クリックすると詳細表示されます。
ID	写真の識別番号。
投稿者	写真をアップロードしたユーザー名。
登録日時	写真が登録された日時。
操作	個別の削除ボタン。

操作方法

• 個別削除 ── 各写真の行にある削除ボタンで、1枚ずつ削除できます。
• 一括削除 ── チェックボックスで複数の写真を選択し、一括削除ボタンで選択した写真をまとめて削除できます。
• 詳細表示 ── サムネイルをクリックすると写真の詳細を確認できます。

8.2 ユーザー管理

サイドメニューから ユーザー管理 を選択すると、ユーザーの管理画面が表示されます。

ユーザー一覧

列	説明
ユーザーID	ログインに使用するID。
表示名	画面上に表示される名前。
メールアドレス	登録されたメールアドレス。
役割	「管理者」または「一般ユーザー」。
作成日	アカウントが作成された日時。
最終ログイン	ユーザーが最後にログインした日時。未ログインの場合は「未ログイン」と表示されます。

新規ユーザーの追加

1. ユーザー追加 ボタンをクリックします。
2. 以下の情報を入力します。

   項目	必須	説明
   ユーザーID	必須	半角英数字のログインID。
   ユーザー表示名	必須	画面上に表示される名前。
   メールアドレス	任意	連絡先メールアドレス。
   パスワード	必須	4文字以上のパスワード。
   役割	必須	「管理者」または「一般ユーザー」を選択。

3. 追加 ボタンをクリックして、ユーザーを登録します。

ユーザーのパスワード変更

各ユーザーの行にある PW変更 ボタンで、ユーザーのパスワードを直接変更できます。

1. 対象ユーザーの行にある PW変更 ボタンをクリックします。
2. 新しいパスワードを入力するダイアログが表示されます。4文字以上のパスワードを入力して OK をクリックします。
3. パスワードが即座に変更されます。

ユーザーの削除

各ユーザーの行にある 削除 ボタンで、ユーザーを削除できます。

8.3 デバッグ

サイドメニューから デバッグ を選択すると、システムの診断・デバッグ画面が表示されます。通常のご利用では操作する必要はありません。問題が発生した場合のトラブルシューティングに使用します。

機能一覧

機能	説明
デバッグモード	デバッグモードの有効・無効を切り替えます。チェックONするとエラーの詳細が記録されます。
ログの表示	記録されたエラーログを表示します。
ログのクリア	記録されたエラーログをすべて消去します。
システム情報	サーバーの動作環境に関する情報を表示します。 PHPバージョン GDライブラリの有無 EXIF拡張の有無 データ保存パス 登録写真数

9.付録

9.1 Google API キーの取得方法

Google Maps を使用するには、Google Maps API キーが必要です。以下の手順で取得してください。

1. Google Cloud Console にアクセス
   Webブラウザで以下のURLにアクセスします。
   https://console.cloud.google.com/
   Googleアカウントでログインしてください。
2. プロジェクトの作成
   画面上部の「プロジェクトを選択」をクリックし、新しいプロジェクト を選択します。プロジェクト名（例：「PictMap」）を入力して 作成 をクリックします。
3. Maps JavaScript API の有効化
   左側メニューの「APIとサービス」→「ライブラリ」を選択します。検索欄に「Maps JavaScript API」と入力して検索し、表示された結果をクリックして 有効にする をクリックします。
4. APIキーの作成
   左側メニューの「APIとサービス」→「認証情報」を選択します。画面上部の 認証情報を作成 → APIキー を選択します。APIキーが生成されて表示されます。
5. APIキーの制限（推奨）
   セキュリティのため、APIキーに制限をかけることを推奨します。
   • 「キーを制限」をクリックします。
   • 「アプリケーションの制限」で「HTTPリファラー（ウェブサイト）」を選択します。
   • 「ウェブサイトの制限」に、写真マップのURL（例：https://example.com/pictmap/*）を追加します。
   • 「APIの制限」で「キーを制限」を選択し、「Maps JavaScript API」のみを許可します。
   • 保存 をクリックします。
6. 請求先アカウントの設定
   Google Maps API を利用するには、請求先アカウント（クレジットカード）の登録が必要です。「お支払い」メニューから設定してください。
   
   Google Maps Platform には毎月 $200 分の無料枠が用意されています（2026年2月現在）。個人利用や小規模なサイトであれば、通常は無料枠内で収まります。詳しくは Google Maps Platform の料金ページをご確認ください。
7. 写真マップへの設定
   取得した API キーを、写真マップの設定画面（6.2 地図設定）の「Google API キー」欄に入力してください。検証 ボタンでキーが正しく動作するか確認できます。

9.2 XAMPPでの動作確認

ローカルPC上で写真マップの動作確認を行いたい場合は、XAMPP を使用するのが最も簡単です。

XAMPPとは

XAMPP は、Apache（Webサーバー）、PHP、MySQL などをまとめてインストールできる無料のソフトウェアパッケージです。写真マップはデータベースを使用しないため、Apache と PHP のみで動作します。

導入手順

1. XAMPPのダウンロードとインストール
   以下のURLから XAMPP をダウンロードしてインストールします。
   https://www.apachefriends.org/
   PHP 8.x 版を選択してください。インストール先はデフォルトの C:\xampp で構いません。
2. Apache の起動
   XAMPPコントロールパネルを起動し、「Apache」の Start ボタンをクリックします。「Apache」の横に緑色で「Running」と表示されれば起動成功です。
3. 写真マップのコピー
   pictmap フォルダを以下の場所にコピーします。
   

   C:\xampp\htdocs\pictmap\

4. ブラウザでアクセス
   Webブラウザで以下のURLにアクセスします。
   

   http://localhost/pictmap/

   初期セットアップウィザードが表示されれば、正常に動作しています。

9.3 旧バージョンからのデータ移行

旧バージョンの写真マップ（～2025年）から新バージョン（2026年～）へデータを移行するための移行スクリプト migrate.php が用意されています。

移行される内容

• 写真データ ── XML形式からJSON形式に変換されます。
• ユーザーデータ ── パスワードが bcrypt 方式で再暗号化されます。
• サイト設定 ── 旧設定が新しい形式に変換されます。
• 画像ファイル ── ファイル名が新しい命名規則にリネームされてコピーされます。

移行手順

1. ファイルの配置
   migrate.php は新サイト（pictmap）フォルダ内に配置されています。旧サイトのフォルダを同じ親ディレクトリに配置してください。

   public_html/
   ├── pictmap/          ... 新バージョンのフォルダ
   │   ├── migrate.php   ... 移行スクリプト
   │   └── ...
   └── pictmap_old/      ... 旧バージョンのフォルダ

2. フォルダ名の確認・編集
   旧サイトのフォルダ名がデフォルト（pictmap_old）と異なる場合は、migrate.php をテキストエディタで開き、ファイル先頭にあるフォルダ名の設定を修正してください。
3. 移行の実行
   以下のいずれかの方法で移行を実行します。
   方法A：ブラウザからアクセス
   https://example.com/pictmap/migrate.php にアクセスします。
   方法B：コマンドラインから実行
   

   php migrate.php

4. 結果の確認
   移行結果が画面に表示されます。「移行完了」と表示されれば成功です。移行前のデータのバックアップは自動的に作成されます。
5. 移行スクリプトの削除
   移行が完了したら、セキュリティのため migrate.php を必ず削除してください。

10.よくある質問 (FAQ)

Q. Google Maps が表示されず、エラーが出ます

A. Google API キーの設定を確認してください。以下の点を順に確認します。

• API キーが正しく入力されているか（余分なスペースが含まれていないか）
• Google Cloud Console で Maps JavaScript API が有効になっているか
• API キーの制限設定で、写真マップのURLが許可されているか
• 請求先アカウントが正しく設定されているか

写真マップの設定画面にある 検証 ボタンで、キーの有効性を確認することもできます。

---

Q. 写真が地図に表示されません

A. 以下の点を確認してください。

• 権限設定 ── 閲覧権限が「ログインユーザーのみ」に設定されていて、ログインしていない場合は写真が表示されません。
• data ディレクトリ ── data/ ディレクトリの書き込み権限（パーミッション）が正しく設定されているか確認してください。
• ブラウザのキャッシュ ── ブラウザのキャッシュをクリアしてから再度アクセスしてみてください。

---

Q. ログインできなくなりました

A. ログインに5回連続で失敗すると、セキュリティのため15分間ロックされます。15分間お待ちいただいてから、再度ログインを試みてください。

パスワードを忘れた場合は、以下のいずれかの方法でリセットできます。

• メールによるリセット ── ログイン画面の「パスワードを忘れた方」リンクから、登録済みメールアドレスを使ってリセットできます（7.8 パスワードリセット 参照）。
• 管理者によるリセット ── 管理者に連絡して、ユーザー管理画面からパスワードをリセットしてもらってください（8.2 ユーザー管理 参照）。

---

Q. iPhoneで撮影したHEIC形式の写真は使えますか？

A. はい、使用できます。HEIC/HEIF 形式の写真をアップロードすると、ブラウザ上で自動的にJPEG形式に変換されてからサーバーに送信されます。変換には数秒かかる場合がありますが、特別な操作は必要ありません。

もし変換に問題が生じる場合は、iPhone の設定で撮影形式を「互換性優先」（JPEG）に変更することもできます。

• iPhone の「設定」→「カメラ」→「フォーマット」→「互換性優先」を選択

---

Q. データのバックアップはどうすればよいですか？

A. data/ ディレクトリ全体をコピーしてください。このディレクトリにすべてのデータ（設定、ユーザー情報、写真データ、画像ファイル）が保存されています。

FTPソフトで data/ フォルダごとダウンロードするか、レンタルサーバーのファイルマネージャーを使用してダウンロードしてください。

---

Q. バックアップからデータを復元するには？

A. バックアップした data/ ディレクトリを、サーバー上の既存の data/ ディレクトリと差し替えてください。FTPソフトで既存の data/ フォルダを削除し、バックアップの data/ フォルダをアップロードすれば復元完了です。

---

Q. 写真の表示が遅いです

A. 以下の対策を検討してください。

• 最大画像サイズを小さくする ── 設定画面の「ストレージ設定」で最大画像サイズを 800〜1000px 程度に変更すると、ファイルサイズが小さくなり表示が速くなります（新しくアップロードする写真に適用されます）。
• 最大表示件数を減らす ── 設定画面の「表示設定」で最大表示件数を少なくすると、一度に読み込むデータ量が減り、動作が軽くなります。

---

Q. 複数人で管理したいのですが

A. 管理者アカウントを複数作成できます。ユーザー管理画面（8.2 ユーザー管理）で、新しいユーザーを追加する際に役割を「管理者」に設定してください。

---

Q. 新しいバージョンにアップデートするには？

A. バージョンアップ版は再度ご購入いただく必要があります。その分、各バージョンの価格を低く抑えています。なお、アップデート後も data/ ディレクトリ内のデータ（写真・設定・ユーザー情報）はそのまま引き継がれます。2025年以前の旧バージョンからの移行については、9.3 旧バージョンからのデータ移行を参照してください。

11.セキュリティについて

写真マップでは、以下のセキュリティ対策を実施しています。

パスワードの保護

ユーザーのパスワードは、bcrypt方式により暗号化（ハッシュ化）して保存されます。bcryptは現在最も安全とされるパスワードハッシュ方式の一つです。万が一データファイルが漏洩しても、元のパスワードを復元することは極めて困難です。

ログイン試行回数の制限（レートリミティング）

不正なログイン試行を防止するため、ログインの失敗回数を制限しています。

項目	設定値
最大失敗回数	5回
ロック時間	15分

5回連続でログインに失敗すると、15分間そのアカウントへのログインがロックされます。これにより、パスワードを総当たりで推測する攻撃（ブルートフォース攻撃）を防止します。

セッション管理

• セッションIDの再生成 ── ログイン時にセッションIDが再生成され、セッション固定攻撃を防止します。
• セキュアCookie ── HTTPS環境ではSecure属性付きのCookieが使用されます。

入力値の検証

• サーバーサイド検証 ── すべてのユーザー入力はサーバー側で検証・サニタイズされます。不正なデータの保存を防止します。

XSS（クロスサイトスクリプティング）対策

• HTMLエスケープ ── ユーザーが入力した文字列は、表示時にHTMLエスケープ処理が行われます。これにより、悪意のあるスクリプトが実行されることを防ぎます。

セキュリティに関する推奨事項