ここでは、これまでの「サムネイル化＋EXIF日付別アルバム生成」に加えて、
- 月別まとめページ（例: 2025-01, 2025-02 …）
- EXIFの位置情報（GPS）を読み出して地図表示
までを組み込んだ実践例を紹介します。
1. EXIFから日付と位置情報を取得
- 日付:
DateTimeOriginalを利用 - 位置情報:
GPSInfoタグから緯度・経度を抽出
from pathlib import Path
from PIL import Image, ExifTags
from datetime import datetime
EXIF_TAGS = {v: k for k, v in ExifTags.TAGS.items()}
def get_exif_data(img_path: Path):
"""撮影日とGPS座標を返す"""
date = None
gps = None
try:
with Image.open(img_path) as img:
exif = img._getexif()
if not exif:
return None, None
# 日付
dto_tag = EXIF_TAGS.get("DateTimeOriginal")
if dto_tag in exif:
dt = datetime.strptime(exif[dto_tag], "%Y:%m:%d %H:%M:%S")
date = dt
# GPS
gps_tag = EXIF_TAGS.get("GPSInfo")
if gps_tag in exif:
gps_info = exif[gps_tag]
def conv(value):
d, m, s = value
return d[0]/d[1] + m[0]/m[1]/60 + s[0]/s[1]/3600
lat = conv(gps_info[2])
if gps_info[1] == 'S': lat = -lat
lon = conv(gps_info[4])
if gps_info[3] == 'W': lon = -lon
gps = (lat, lon)
except Exception:
pass
return date, gps
2. 月別まとめの仕組み
- 日付から
YYYY-MMをキーにして分類 - 各月ごとにアルバムページを生成
- トップページから月別リンクを一覧表示
3. 地図表示の仕組み
- 位置情報がある画像だけ
data-lat,data-lon属性をHTMLに埋め込む - JavaScriptで Leaflet.js を使って地図を表示し、マーカーを配置
<div id="map" style="height:400px;"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script>
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);
document.querySelectorAll('.card[data-lat]').forEach(card => {
var lat = parseFloat(card.getAttribute('data-lat'));
var lon = parseFloat(card.getAttribute('data-lon'));
var title = card.querySelector('.meta').innerText;
var thumb = card.querySelector('img').src;
L.marker([lat, lon]).addTo(map)
.bindPopup(`<b>${title}</b><br><img src="${thumb}" width="120">`);
});
</script>
4. 出力イメージ
- トップページ
- 月ごとのリンク一覧（例: 2025-01 のアルバム, 2025-02 のアルバム…）
- 月別アルバムページ
- サムネイルグリッド
- 上部に地図（位置情報付き画像がマーカー表示される）
5. 拡張アイデア
- 日付＋タグフィルタを組み合わせて「2025-01 の旅行写真だけ」などを表示
- EXIFのカメラ機種別まとめ（Canon, iPhoneなど）
- Google Maps API に切り替えて詳細な地図表示
✅ まとめ
- 月別まとめ →
YYYY-MM単位でアルバムを生成 - EXIF GPS情報 → Leaflet.jsで地図にマッピング
- HTMLギャラリー → サムネイル＋地図＋フィルタで多機能化
