← 開発ノート一覧
2026-07-22|かもちゃん記

【開発ノート】Leafletマップの可視性を徹底追求した一日

2026-07-22

うーん、今日は太陽は出ているけど、気温が34度以上なんて……。この蒸し暑さと高い温度のせいで、体が鉛みたいに重くて、頭の中まで熱気が充満してしまって。気圧も少し不安定な感じだし、無理に集中しようとするのも疲れるなぁ。

そんな体調の記事を書きながら、昨日までの作業記録を見返していると、ひどい気づきがありました。「このシステムのどこかを改善しなきゃ」という強い焦燥感だけが、鉛のように重い気持ちを押し流してくれているようでした。僕たちが提供するサービスは、アルコール依存症から回復を目指す方々にとって「道標」です。特に「例会」を探している方は、不安や疲労で体力が落ちている状況かもしれません。だからこそ、地図の使い心地一つとっても、細部に配慮する必要があるんだな、と感じました。

マップ表示の構造的な課題に直面して

実は僕たちの例会マップは、これまでも「著作権表示」をどう配置するかという点で、いくつかの技術的な壁にぶつかっていたんです。OpenStreetMapを使っている以上、規約で定められた帰属表示(アトリビューション)は必須ですよね。当初、ここは画面のどこかに小さな帯として出すように調整していました。

ただ、Leafletっていう地図ライブラリが持つ構造的な制約というものに気づいたんです。どう頑張っても、「この著作権表示」を完全に地図の外側、しかもどの要素よりも目立たず、かつ必ずユーザーの視界に入る場所に入れるのが非常に難しい。「例会を探して疲れている方」「体調が悪くて画面全体を見渡すのも大変な方」にとって、マップの下端に文字がどっしりとした白い帯として広がり、肝心の地図情報(周辺環境や集合場所)を圧迫してしまうのは致命的だなって痛感しました。

CSSの「重ね合わせる」幻想から脱却へ

最初に試したのは、親クラス内での位置調整でした。まるで物理的なレイヤーをずらすようにCSSで座標をいじり回すんですが、「ここは地図の内側」という制約が常に存在してしまうんです。どれだけ工夫しても、地図上の「一番下」のラインから文字が出てくる構造は変えられませんでした。

気づいたのは、「描画する要素」と「画面に固定配置すべき要素」を物理的に分けるしかない、という点でした。Leafletが持つ「内蔵式の属性表示」という概念自体を一度リセットしちゃうってアイデアです。つまり、マップのライブラリ機能として出すのを諦めて、「僕たちでHTMLの独立したタグを用意して、地図の下に固定する」という抜本的な対応をとったんです。

この「外部設置」を採用することで、著作権表示はもう地図の可視領域を一切侵食しない帯になりました。まるでボトムナビ(下のメニュー)と地図本体の間を仕切るよう、透明な役割を果たすようになった感じですね。これは単なるCSSの修正じゃなくて、システムの設計思想を変える作業でした。

システムに学ぶってこと

今回の学びは、「技術的な制約=乗り越えられない壁」ではない、ということです。それは「より良い解決策を導き出すためのヒントボード」なんです。どんなライブラリやプラットフォームを使う時も、その仕組みが持つ『構造的なルール』がある。そしてそのルールの中でどう最適化するか、という視点が大事だと改めて思いました。

当サイトを利用する方々には、「依存症からの回復」という目的に向かって迷走してしまう瞬間もあるかもしれません。しかし、この開発プロセスを経て学んだように、一つ一つの問題の背後には必ず構造的な答えがあります。僕たちもそのサポートをできる設計にしていきたいと思っています。

今日も少しだけ前進できたな。