苦節３年以上、Blogerに動的HTMLを掲載する方法をついに発見！！！

Pythonの学習においてDynamic HTML Map（動的HTML地図）を作成できるFoliumというLibraryを学習してきたのですが、わたしにはHTML言語の知識がなかったため、Foliumで作成した動的HTML地図をBlogerに表示することができず、悩んでいました。

最近、いまにゅ先生やPythonV-Tuberサプー先生のYou-Tube動画などでWebScrapingを学習する中で、HTMLの読み方を学習して少しだけ理解を深めることができたので、改めてBlogerへの動的HTML地図の描画・掲載にチャレンジしたところ、成功しそうなので、ここにRemindとしてRemainしておきたいと思います。

まず、GoogleColabでFoliumを使って、Defaultの動的HTML地図(この場合、OpenStreetMapという地図になります）を作成します。

# Get start Folium
!pip install folium
import folium
map = folium.Map(location=(35.3606, 138.7275), zoom_start = 12) # Arround Mt. Fuji, 'zoom_start' is defined the scale that the map initially drawn.
map # Show the map

GoogleColabの画面は以下のような感じになります。

この画面からGoogleChromeの「GoogleChromeの設定（わたしの場合、GoogleChromeのWindowの「×」印の下にある…（３つの点が縦に並んでます）の部分）」から「その他のツール」を選択し、「デベロッパーツール」を選択します。

WebScrapingの学習において、このデベロッパーツールというのを知ったことが大きな進歩でした。

デベロッパーツールを選択すると次のような画面になります。

少し見づらいですが、HTML言語が記述されている右上の小窓の「Element」の２つ左にある「小さな四角点線に斜め右下から入っている矢印」のところをクリックし、そのあとMousePointerを取り出したい動的HTMLMap上に移動します。すると、当該動的HTMLMapにハッチングがかかるので、そこでクリックします。

すると、動的HTMLMapに関して記述している部分のHTMLが蛍光ペンで表示されます。

このHTMLコードをコピーして、BlogerのHTMLビューにペーストしたら、もしかして、、、と思いましたが、こちらはうまくいきませんでした。（BlogerのHTMLビューについては後述します）

もう少しHTMLの記述を研究します。ここでGemini先生のご助言の登場です。Gemini先生からは「<iframe> タグを使った方法を強く推奨します。」と何度もご助言をいただきました。

HTMLの記述を見ると、蛍光ペンの少し下に<iframe>という記述があります。おそらく、ここを含んだひとまとまりのHTMLが動的HTML地図の内容を記述しているものと想像できます。

デベロッパーツールとGoogleColabの出力を見比べながら、GoogleColabの入力セルと出力の境目を探し、その境目以降のひとまとまりのHTMLをコピーします。具体的には以下が動的HTML地図に関連する部分だと思われました。

<html>

<head>

L_NO_TOUCH = false;

L_DISABLE_3D = false;

</script>

initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style>

#map_450948549e4359f0f428cd4bc3b06a98 {

position: relative;

width: 100.0%;

height: 100.0%;

left: 0.0%;

top: 0.0%;

}

.leaflet-container { font-size: 1rem; }

</style>

</head>

<body>

</body>

var map_450948549e4359f0f428cd4bc3b06a98 = L.map(

"map_450948549e4359f0f428cd4bc3b06a98",

{

center: [35.3606, 138.7275],

crs: L.CRS.EPSG3857,

...{

"zoom": 12,

"zoomControl": true,

"preferCanvas": false,

}

);

var tile_layer_7b8bab5f75212aa5c9331d98f76b699d = L.tileLayer(

"https://tile.openstreetmap.org/{z}/{x}/{y}.png",

{

"minZoom": 0,

"maxZoom": 19,

"maxNativeZoom": 19,

"noWrap": false,

"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",

"subdomains": "abc",

"detectRetina": false,

"tms": false,

"opacity": 1,

}

);

tile_layer_7b8bab5f75212aa5c9331d98f76b699d.addTo(map_450948549e4359f0f428cd4bc3b06a98);

</script>

</html>" style="border: none !important; height: 100%; left: 0; position: absolute; top: 0; width: 100%;" webkitallowfullscreen=""></iframe>

これをGoogleblogerのHTMLビューにペーストすると、リンク先のような表示を得ることができました。

https://shikuuk.blogspot.com/2025/05/folium-default-dynamic-html-mapopen.html

ちなみにGoogleBlogerのHTMLビューはBlogerの投稿画面の「タイトル」の真下のツールバーの左端の「ペン」マークをクリックすると、「<>HTMLビュー」というのが出てくるので、そこを押すとHTML記述の画面に遷移します。

しかし、このHTMLコードをBlogerに張り付けてみると、mapがText領域全体に表示されてしまうため、入力したTextが全く読めなく事象が発生してしまいました。

これでは使い物にならないため、試行錯誤を繰り返した結果、以下の方法にたどり着きました。

①GoogleColab画面からChromeの「ツール(Chromeの右上端にある縦の…)」－「その他のツール」－「デベロッパーツール」を選択（前述）

②デベロッパーツールの選択モードを利用(前述)して、GoogleColabの出力画面のFoliumMapの領域を選択(前述)

③デベロッパーツールで選択された領域の上にいくつかある「▼Body」を選択して、▼Bodyに含まれる内容を折りたたんだうえで、右クリック－「copy」－「copy element」を選択④GoogleColabの編集画面をHTMLビューに変更(前述)し、動的Mapを挿入したい部分に先ほどcopyしたHTMLコードをPaste。

⑤これを繰り返して、動的Mapが表示されるコピペを探索する。

Make this Notebook Trusted to load map: File -> Trust Notebook

（参考：CopyしたHTMLコード)

<body><div id="output-area"><span id="output-header"> </span><div id="output-body"><div class="execute_result"><div class="output_subarea output_html rendered_html"><div style="width:100%;"><div style="position:relative;width:100%;height:0;padding-bottom:60%;"><span style="color:#565656">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc="<!DOCTYPE html>

<html>

<head>

L_NO_TOUCH = false;

L_DISABLE_3D = false;

</script>

initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style>

#map_82816f3781042b0d1b6826120e5754fa {

position: relative;

width: 100.0%;

height: 100.0%;

left: 0.0%;

top: 0.0%;

}

.leaflet-container { font-size: 1rem; }

</style>

</head>

<body>

</body>

var map_82816f3781042b0d1b6826120e5754fa = L.map(

"map_82816f3781042b0d1b6826120e5754fa",

{

center: [35.3606, 138.7275],

crs: L.CRS.EPSG3857,

...{

"zoom": 12,

"zoomControl": true,

"preferCanvas": false,

}

);

var tile_layer_6c7c8a54d204268bbd2450fc0eb8cc31 = L.tileLayer(

"https://tile.openstreetmap.org/{z}/{x}/{y}.png",

{

"minZoom": 0,

"maxZoom": 19,

"maxNativeZoom": 19,

"noWrap": false,

"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",

"subdomains": "abc",

"detectRetina": false,

"tms": false,

"opacity": 1,

}

);

tile_layer_6c7c8a54d204268bbd2450fc0eb8cc31.addTo(map_82816f3781042b0d1b6826120e5754fa);

</script>

</html>" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe></div></div></div></div></div><span id="output-footer"></span></div></body>

ちなみに、今回の内容についてGoogleGemini先生に質問しても正確な答えは得られませんでした。GoogleGemini先生の回答を参考にしながら、試行錯誤を繰り替えして、何とかここまでたどり着くことができました。

Kitashirakawa Digital Exploring Office - Kitchen garden, Running/Marathon, Python etc.

このブログを検索

苦節３年以上、Blogerに動的HTMLを掲載する方法をついに発見！！！

コメント

コメントを投稿