晴歩雨描

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

ホームページ、Web作成

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

Leaflet地図:複数地点マーカー表示。CSVファイルをURL指定。

地図データを扱うJavaScript ライブラリ「Leaflet」を使ってKMLやCSVファイルで地点表示をいくつか行ってきた。 今回、シンプルなCSVファイルをURLで指定するタイプを作成。 CSV形式は、以下。 地点名,緯度,経度 ≪CSVサンプル≫ 月桂冠,34.929136,135.76161 …

JavaScript)2枚の写真の一部を拡大して画質比較できるツールを作成。

ブラウザで、2枚の写真の一部を拡大して画質比較できるツールを作成してみた。 「画像の一部を拡大して別枠に表示する」以下のJavaScriptライブラリ「jquery.ImageExpansion.js」の改修版を使用。 【改修版】 【作成ツール】 スマホでは、正常動作しない。あ…

HTMLとCSSで点線リーダー:目次や索引で項目名とページの間を点線で結ぶ。(Googleフォント)

目次や索引で、項目名とページの間を点線で結ぶ(タブリ-ダー)のをHTMLとCSSで実現する方法の備忘録。 ≪完成イメージ≫ ≪参考にさせてもらったページ≫ 他の方法を公開しているページ。 【関連:Wordで点線リーダーをつくる方法】 ≪作成したページ≫ →→→ http…

Leaflet地図:「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「RainViewer」の雨雲レーダーを地図に重ねて表示するようにした。 参考になるWebページ。 【サンプル 1】 直近の雨雲を重ねて表示。 →→→ https://ok2nd.github.i…

Leaflet地図:「日本酒生産量:都道府県別マップ」作成。サンプルソース。逆ジオコーディング付き。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「日本酒生産量:都道府県別マップ」を作成した。(↓) 「knooto.info」の以下の地図とJavaScriptを参考にした。 都道府県別の県境データは、政府CIOポータル「IT…

Leaflet地図:国土地理院のハザードマップを重ねて表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、国土地理院の「ハザードマップ」を重ねて表示してみた。 以下の7つを重ねて表示できるようにした。 洪水浸水想定区域(想定最大規模) 浸水継続時間(想定最大規模…

Leaflet地図:「OpenWeatherMap」降水量、雲、気圧図を重ねて表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「OpenWeatherMap」の降水量、雲、気圧図を重ねて表示できるようにした。 APIキーが見えてしまうので、作成したページはとりあえず非公開。 【サンプルソース抜粋…

Leaflet地図:「OpenWeatherMap」の天気予報表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に「OpenWeatherMap」の天気予報を表示してみた。 「OpenWeatherMap」のAPIを使用するには、APIキーが必要になるので、取得しておく。 【当日の天気取…

Leaflet地図:「新潟酒蔵マップ」作成。CSVファイルから。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「新潟酒蔵マップ」を作成した。 「LinkData」のデータを使わせてもらった。 「LinkData」のデータをCSVファイルにして、CSVファイルを読み込む方式にした。 →→→ h…

Leaflet地図:「日本シームレス地質図 V2」をオーバーレイ。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「日本シームレス地質図 V2」を使って、地質図をオーバーレイしてみた。 【サンプルソース】 var Overlay_Map = new Array(); Overlay_Map[ 0 ] = L.tileLayer('ht…

Leaflet地図:国土地理院のジオコーダーで住所から緯度経度検索。CSVからも。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、国土地理院のジオコーダーを使って、住所から緯度経度を取得して地図にマッピングを試した。 【プログラムソースサンプル】 function addrSearch(address) { // 国…

Leaflet地図:国土地理院「色別標高図」「陰影起伏図」オーバーレイ。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、地図のオーバーレイを試した。 国土地理院の「地理院タイル」を使った。 国土地理院 の「色別標高図」「陰影起伏図」を使った。 var Overlay_Map = new Array(); O…

Leaflet地図:世界遺産マップを作成。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、世界遺産マップを作成。2013年までの登録遺産を登録。 →→→ 世界遺産マップ(Leaflet版) マーカーをクリックすると、情報パネルを表示。名前をクリックするとGoogl…

Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ:OpenWeatherMap】 →→→ Interactive weat…

Leaflet地図:オープン時に現在地表示。地点名、住所検索機能。サンプルソース。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に2つの機能を追加する方法。 【オープン時に現在地を表示をする】 ≪プログラムソース≫ 現在地にマーカーを表示するようにした。 <style> .center-icon { width…

「Leaflet」は登山道もルート検索できる。「OpenStreetMap」は登山道も分かりやすく表示される。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」では、ルート検索もできる。※ ただし、ルート検索機能を付けたページは非公開(以下に詳細)。 「Leaflet」のルート検索では登山道も対象になる。これは「Win…

Leaflet地図:ルート検索もできる。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 Leafletでも、ルート検索(経路検索)ができる。ただし、ルート検索のエンジンサーバーがデモ用しかなさそうなので、公式に利用可能かどうかが不明。 ということで、ルー…

Leaflet地図:JavaScriptライブラリを使わずにKMLを表示。URLでKMLファイル指定。サンプルソース。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、KMLファイルのLeaflet地図表示を試した。前回はJavaScriptライブラリ「leaflet-kml」を使った。 今回、JavaScriptライブラリ「leaflet-kml」を使わずに、KMLファイ…

Leaflet地図:KMLを表示。サンプルソース。Windy.comで表示も。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、KMLファイルのLeaflet地図表示を試した。JavaScriptライブラリ「leaflet-kml」を使った。 【プログラムソースサンプル】 <script src="js/L.KML.js"></script> <script> var map = L.map('map'); var tileLayer…

Leaflet地図:フルスクリーン表示機能追加。requestFullscreen()版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、ライブラリ「Leaflet.fullscreen」を使って、フルスクリーン表示機能を追加した。 今回、「Leaflet.fullscreen」を使わずに、「document.body.requestFullscreen()…