Day23：Hugo+BlowfishテーマでGoogleMapがはみ出ないように表示する

本記事の概要

Hugo+BlowfishテーマでGoogleMapを埋め込んだ際、はみ出ないようにする方法を説明する初心者向け記事です。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

GoogleMapのHTML埋め込みについて

GoogleMapにはHTML埋め込み機能があり、GoogleMap側でコピーした埋め込み用のHTMLをHugoの記事に貼り付けることで、GoogleMapを埋め込むことが出来る。

HTMLの埋め込みの例

GoogleMapの埋め込み結果の例

GoogleMapがはみ出る場合について

GoogleMapのサイズによっては、地図がはみ出る場合がある。
PCのような画面の横幅が広い環境では問題にならないことが多いが、スマホのように横幅が狭い環境だと、レイアウトが崩れる場合がある。

対策方法を考える

コピペしてきたHTMLタグを修正して見た目を整えるといったことも考えられるが、それだとHTMLを貼り付ける度に手修正が生じる。

それだと面倒だし、なにより手修正していることに気付きにくい。

そこで、以下のように「GoogleMapからコピペしたHTMLを表示制御用のdivで挟む」形で対策することを考える。

GoogleMapがはみ出ないようにする対策

<div> <!-- 表示制御用のdiv(このdivの内容を考える) -->

<!-- GoogleMapからコピペしたHTMLをそのまま貼り付ける -->

</div> <!-- 表示制御用のdiv -->

divの内容について

解決するためには上記のdivの内容を考える必要があるが、次の2点を考慮する必要がある。

• divの属性などについて
  • BlowfishテーマはTailwind CSSを使用しているためそれに従う
• div自体をコピペする手間について
  • ShortCodeを使用し、記載する属性などはShortCode側に定義すればよい
    (属性等を覚える必要が無い)

これらを踏まえた上で、ShortCodeをを設計する。

ShortCodeの内容について

layouts\shortcodes\gmap.htmlとして、下記のように実装する。

layouts\shortcodes\gmap.html

<div class="relative w-full overflow-hidden rounded-lg shadow-lg " style="aspect-ratio: 4 / 3;">
    <div class="absolute inset-0 w-full h-full">
        {{ .Inner | safeHTML }}
    </div>
</div>

簡単な解説

1,2行目でdivにclassを定義している。
tailWind CSSを利用して、領域サイズを指定された領域いっぱいにするようにしている。
styleとしてaspect-ratioが定義されているが、これは表示する内容の縦横比を指定することになる。
ここでは、4:3にしているが好みによって変えても良い。

3行目は、ShortCodeのInnnerTextを安全なHTMLとして解釈するようにしている。
なお、ShortCode内のInnnerTextはGoogleMapからコピペしたHTMLである。

使ってみる

使う際は、GoogleMapからコピペしたHTMLをgmap ShortCodeで挟むだけである。
使う分には細かいHTMLのクラスは覚えなくて済む。

gmap ShortCodeを使ってみる

{{< gmap >}}
/* GoogleMapからコピーしたHTMLタグを貼り付ける(記載は省略) */
{{< /gmap >}}

スクショだけでは若干分かりにくいが、ブラウザーの幅を狭めてみると、周りの内容に追従してGoogleMapの内容も縮小して表示するため、はみ出ないようになる。

まとめ

Hugo+Blowfishテーマ環境でGoogleMapがはみ出ないようにするために、制御用のdivで囲う方法を紹介した。

BlowfishテーマがTailwind CSSを利用しているためclass定義が重要になるが、ShortCodeを利用することで、定義内容をShortCode側で管理できる。