晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

ホームページ、Web作成

Leaflet地図、作成記事「まとめ」。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 Leaflet地図作成記事をまとめてみた。

Leaflet地図:「日本)鉄道難読駅マップ」を作成。CSV使用。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、「日本)鉄道難読駅マップ」を作成。 駅マーカーをクリックすると読みを確認できる。 難読駅データは、以下の「ORIGAMI - 日本の伝統・伝承・和の心」の「日…

Leaflet地図:世界地図に国別宗教構成を円グラフ(Google Image Charts)で表示。

先日、Leafletで世界地図に国別宗教構成を表示するページを作成した。 前回は、世界地図に国旗を表示し、国旗をクリックすると、その国の宗教構成を表示する方式だった。 今回は、全世界の各国の宗教構成を円グラフで一覧表示する方式にした。 宗教構成デー…

Leaflet地図:世界地図に国別宗教構成を表示。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、世界地図に国別宗教構成を表示するようにした。 以前に作成した世界地図の国旗マーカーのクリックで、その国の宗教構成をポップアップで表示する。 宗教構成…

Leaflet地図:「日本酒生産量:都道府県別マップ」の「白地図+QuickChart.io 版」作成。

先程、Leaflet地図「日本酒生産量:都道府県別マップ」の「白地図+Google Charts(Image Charts)版」を作成した。 日本酒生産量の棒グラフを「Google Charts > Image Charts」で作成したが、左側のY軸を消す方法が見つからなかったので、グレーの縦線が付…

Leaflet地図:「日本酒生産量:都道府県別マップ」の「白地図+Google Charts(Image Charts)版」作成。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 以前に「日本酒生産量:都道府県別マップ」を作成した。 最近、「日本白地図」を作成した。 今回、「日本酒生産量:都道府県別マップ」の「白地図+Google Charts…

Leaflet地図:「日本白地図」作成。逆ジオコーディング付き。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、「日本白地図」を作成。「国土地理院」の「白地図」を使用。 https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png 作成した地図は以下。 拡大表示…

Leaflet地図:世界地図で「Google 衛星写真」を表示できるようにした。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 最近作成した世界地図で、「Google 衛星写真」を表示できるようにした。 ■ 世界地図:Jawg Maps + 雨雲 ■ 世界地図:Jawg Maps + 雨雲 + 国旗 ■ 世界地図:Jawg…

Leaflet地図:「Jawg Maps」世界地図に国旗表示(2)。首都に全世界の国旗を表示。

先日、「Leaflet」+「Jawg Maps」を使った世界地図に国旗表示機能を付けた。 クリックした場所に、その国の国旗を表示するタイプ。 今回、首都の場所に世界の国旗全てを表示するタイプを作成。 国旗のアイコンサイズ40px版と80px版を作成。 ■ 世界地図:Jaw…

Leaflet地図:「Jawg Maps」世界地図に国旗表示(1)。逆ジオコーディング「Reverse - Nominatim」使用。

先日、「Leaflet」+「Jawg Maps」を使った世界地図を作成した。 この世界地図に、国旗表示機能を追加。 緯度経度から国名検索には、「Reverse - Nominatim」の逆ジオコーディングAPIサービスを利用。 【例1】以下にように緯度経度を渡すと、 https://nomina…

Leaflet地図:「Jawg Maps」のシンプルな世界地図+「RainViewer」雨雲

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、シンプルな世界地図を作成。 [↑]にある「Jawg Maps」から、国名や主な都市名が日本語でシンプルに表示される以下の4つを表示できるようにした。 Jawg.Stre…

備忘録:[CSS] はてなブログ<table><tbody>の<th>だけを左揃え。

はてなブログの<table>で、<tbody>の<th>だけを左揃え。 以下のスタイルシートを本文内に追加。 <style> tbody > tr > th {text-align : left;} </style> tbody > tr > th {text-align : left;} 以下、サンプル。 製品名 センサーサイズ 焦点距離 F値 EVF 重量 最短撮影距離 Nikon P1000 1/2.3</th></tbody></table>…

世界地図の変遷+世界史年表「Ostellus - the future of history」

先程、世界地図の変遷を見ることができる地図「GeaCron:World History Maps & Timelines」を見つけたが、 leafletを使った「Ostellus - the future of history」という地図を見つけた。 これが、かなりの優れもの。 過去に遡って国境を確認できる。 第二次…

世界地図の変遷「GeaCron:World History Maps & Timelines」

Leafletを使った面白い地図をみつけてきた。 今回、Leafletは使っていないが、「GeaCron:World History Maps & Timelines」が素晴らしい。世界地図の変遷を見ることができる。 ヨーロッパの近世の変遷を少し見てみる。 この地図だとクリミア半島はロシアに…

Leafletを使った便利地図「世界の国別統計色別マップ」「Nominatim」「Real Country Sizes Shown」「History of International Borders」

以前に、「Leafletを使った凄い地図たち」という記事を書いた。 Leafletを使った地図で「世界の国別統計色別マップ」というのを見つけた。 実際の地図は以下。 人口密度、1人あたり国民所得、国連人間開発指数、教育水準指数、ジェンダー平等指数、幸福度指…

HTML表<table>の列の横幅(width)を一括指定はcolgroupが便利。

HTML表の列の横幅(width)を一括して指定するなら、colgroupが便利。 <table>の列幅をCSSで統一する方法もあるが、colgroupを使うとまとめて設定できる。 はてなブログの以下の記事内の表をcolgroupで設定してみた。 <table> <colgroup> <col width="19%"> <col width="81%"> </colgroup> <thead> ・・・・・ ・・・・・ </thead> <tbody> ・・・・・ ・・</tbody></table></table>…

JavaScript版「縦書き表示」作成。「window.opener」を使えば、親子ウインドウ間のデータ受け渡しは簡単。

以前、「ブラウザでテキスト縦書き表示」するページを作成した。 この時作成したのは、サーバーサイドでPHPで処理して縦書きページを表示する方式だった。 今回、PHPを使わずにJavaScriptでクライアントサイドで縦書きページを作成する。 https://ok2nd.saku…

Web写真アルバム「神戸散歩(2)」「大阪散歩(2)」作成。JPEG画像一覧HTMLはPHPで自動生成。

以前作成したWeb写真アルバム「神戸散歩 2017.5 ~ 2019.3」「大阪散歩 2017.6 ~ 2019.3」の続編「神戸散歩(2) 2019.4 ~ 2022.3」「大阪散歩(2) 2019.4 ~ 2022.3」を作成。 PHPプログラム「thumbnail-create.php」で、自動生成している。 例として、ディ…

Web写真アルバム「神戸散歩」「大阪散歩」「京都散歩」ポップアップ画像表示ページを、JavaScriptを使う方法に変更。

以前に作成したWeb写真アルバム「神戸散歩」「大阪散歩」「京都散歩」のポップアップ画像表示ページを、JavaScriptを使う方法に変更。 方法の詳細は以下の「My 野鳥図鑑」と同じ。

My 野鳥図鑑:GET引数をJavaScriptで<img src="">に渡す方法に変更。URLSearchParams使用。GitHubにもコピー。

以前、「My 野鳥図鑑」を作成した。 画像をクリックすると拡大画像が表示される。 この拡大画像を表示するページを、PHPが使えない環境でも動作できるように、PHP(.php)から、HTML(.html)に変更した。 https://ok2nd.sakura.ne.jp/birds/photo.php?photo…

はてなブログでPing送信のため「IFTTT」を使ってみた。「皆声.jp」を登録。

ブログ検索サイト「皆声.jp」というのがある。 ブログ記事を検索し、最新のものから順に表示してくれる。 ここに、自分のブログ記事を速やかに反映させたい。 新しい記事を投稿した時に、その旨を通知する機能として「ping送信」がある。 しかし、はてなブロ…

はてなブログで、<TABLE>のセル(TH,TD)の余白(padding)を変更するには、「!important」が必要。(カスタマイズCSS)

はてなブログで、<TABLE>の<TH><TD>の余白(padding)を変更するには、「!important」が必要。 ■ 特定の記事ページのみ変更する場合は、記事編集の「HTML編集」で、<style>~</style>を入れればよい。 【ページ内の全部のテーブル】 <style> th, td { padding: 3px !important; } </style> ただし、id付き</td></th></table>…

自分で撮った写真で2022年カレンダー。

↑ 昨年までは、写真とカレンダーを1枚のPDFにして、コピーショップに持ち込んでA3サイズで印刷していた。 今年は、写真を自宅のインクジェットプリンターでA4写真用紙に印刷し、カレンダー部分をA4厚紙に印刷し、2枚を裏側でマスキングテープで貼り合わせる…

はてなブログで、Webフォント(Google Fonts)を使う。

先日購入したスマホ「Xperia 1 III」では、ブラウザChromeでいくつかのホームページのフォントが、パソコンや他のスマホと違ってしまう。「Xperia 1 III」では、英文が固定ピッチのフォントになってしまって見づらい。 この「はてなブログ」も、「Xperia 1 I…

スマホによってフォントが違うのを防ぐには、Webフォント(Google Fonts)を使う。

先日購入したスマホ「Xperia 1 III」では、ブラウザChromeでいくつかのホームページのフォントが、パソコンや他のスマホと違ってしまう。自分が作成しているホームページでも違う。「Xperia 1 III」では、英文が固定ピッチのフォントになってしまって見づら…

Leaflet地図:GPXファイルを複数個、URLで指定。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示をいくつか作成してきた。 今回、GPXファイルをURLで複数指定できるタイプを作成。 形式:https://ok2nd.github.io/leaflet/gpx-multi.html?gpx=xxx/xxx.gpx,xxx/…

HTML<TABLE>に列を追加するなら「オンラインHTMLエディタ」が便利。

HTML<TABLE>に列を追加するなら、「オンラインHTMLエディタ - ONLINE HTML Editor」が便利。 HTML<TABLE>に行を追加するのはそんな面倒ではないが、列を追加するのは結構面倒くさい。Excelを使ったりすると、余分な属性が勝手についたりして使いものにならない。 「オンラ</table></table>…

外付けSSDに、XAMPP Portable + MyHome Portal を導入。

サブのPCとして、新しいノートパソコンを購入。 新しいノートパソコンに「XAMPP」+「MyHome Portal」を入れる。 パソコンのローカルディスク(C:)には直接入れず、外付けSSD(D:)に独立した形で入れる。 「XAMPP」には、「XAMPP Portable」がある。「XAMP…

神戸近辺の野鳥撮影地マップ作成。Leaflet使用。

神戸近辺で野鳥撮影した場所のマップを作成。 ≪神戸近辺の野鳥撮影地≫ 地図データを扱うJavaScript ライブラリ「Leaflet」を使っている。

Google Fontsの使えそうな日本語フォントをピックアップ。

Google Fontsに日本語フォントがたくさん追加されたようなので、確認した。 「祇園精舍の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。」で確認。 → 祇園精舍の鐘の声、諸行無常の響きあり。... 使えそうな日本語フォントをピッ…