ここまでの要素を全部組み合わせて、「月別アルバムページ」＋「タグフィルタ」＋「地図表示」 を統合したギャラリーの仕組みを整理してみましょう。
1. 処理の流れ
- 画像を読み込み
- Pillowでサムネイル生成
- EXIFから撮影日とGPS座標を取得
- ファイル名やルールからタグを付与
- 分類
- 撮影日から
YYYY-MMをキーにして月別にまとめる - 各月ごとにHTMLアルバムページを生成
- 撮影日から
- HTML生成
- サムネイルグリッド
- 上部にタグフィルタボタン
- Leaflet.jsで地図を表示し、位置情報付き画像をマーカー表示
2. HTMLの構造イメージ
<header>2025-01 アルバム</header>
<!-- タグフィルタ -->
<div id="filters">
<button data-filter="all">すべて</button>
<button data-filter="旅行">旅行</button>
<button data-filter="家族">家族</button>
<button data-filter="食べ物">食べ物</button>
</div>
<!-- 地図 -->
<div id="map" style="height:400px;"></div>
<!-- サムネイルグリッド -->
<main class="grid">
<div class="card" data-tags="旅行 家族" data-lat="35.68" data-lon="139.76">
<a href="images/2025-01/photo1.jpg" target="_blank">
<img class="thumb" src="thumbs/photo1_thumb.jpg" alt="旅行1">
<div class="meta">旅行1<br>2025-01-03<br>タグ: 旅行, 家族</div>
</a>
</div>
<div class="card" data-tags="食べ物" data-lat="34.70" data-lon="135.50">
<a href="images/2025-01/photo2.jpg" target="_blank">
<img class="thumb" src="thumbs/photo2_thumb.jpg" alt="食べ物1">
<div class="meta">食べ物1<br>2025-01-05<br>タグ: 食べ物</div>
</a>
</div>
</main>
3. JavaScriptでタグフィルタ＋地図マーカー
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script>
// Leaflet地図初期化
var map = L.map('map').setView([35.0, 135.0], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 画像カードからマーカーを生成
function updateMarkers(filter) {
// 既存マーカーをクリア
if (window.markers) {
window.markers.forEach(m => map.removeLayer(m));
}
window.markers = [];
document.querySelectorAll('.card').forEach(card => {
const tags = card.getAttribute('data-tags').split(" ");
const lat = card.getAttribute('data-lat');
const lon = card.getAttribute('data-lon');
const show = (filter === "all" || tags.includes(filter));
card.style.display = show ? "" : "none";
if (show && lat && lon) {
const title = card.querySelector('.meta').innerText;
const thumb = card.querySelector('img').src;
const marker = L.marker([parseFloat(lat), parseFloat(lon)])
.addTo(map)
.bindPopup(`<b>${title}</b><br><img src="${thumb}" width="120">`);
window.markers.push(marker);
}
});
}
// フィルタボタン
document.querySelectorAll('#filters button').forEach(btn => {
btn.addEventListener('click', () => {
const filter = btn.getAttribute('data-filter');
updateMarkers(filter);
});
});
// 初期表示
updateMarkers("all");
</script>
4. ポイント
- タグフィルタと地図マーカーを同じ関数で制御 → ボタンを押すとサムネイルと地図が連動
- 月別ページは
YYYY-MM.htmlとして生成し、トップページからリンク - Leaflet.js を使うので無料で軽量、オフラインでも利用可能
5. 発展アイデア
- 複数タグ選択（チェックボックス式で「旅行＋家族」など）
- 月別＋タグ＋地図を組み合わせた高度な検索UI
- EXIFのカメラ機種やレンズ名をタグに追加してフィルタ
✅ これで「月別アルバムページ」に タグフィルタと地図表示を両方組み合わせたギャラリーが完成します。
