最近、急激に寒くなって、さっき暖房つけようかなと思ってしまった。
（冷房も暖房も不要で、長ズボンでロンTとかで心地よい秋が好き。自分が小さい頃はもうちょい秋が長かった気がする。）
で、いったん暖房つけ始めると、無いとだめな体になっちゃうんで、もうちょい我慢して湯たんぽをひさしぶりに使うことに。
ハリネズミ柄が可愛いすぎる
本来愛猫用に買ったけど、つかってくれなかったんで自分（おっさん）用。
「頭寒足熱」 という言葉があるように、全部あったかくするより足元だけこういうので暖かくする方がよいらしい
真冬はそうも言ってられへんけど、湯たんぽ併用して健康と電気代節約していこうと思う
Google Maps APIを使えば、色味やマーカーなど埋め込み地図を色々カスタマイズできるけど、 以下の料金体系のうち、月200ドル分を超えると従量課金されるらしい。
ただシックな感じにしたくてモノクロにしたいだけなら、無料で生成できる埋め込みコードに少し足せば出来る。
style="border:0;"をstyle="border:0;filter:grayscale(100%);-webkit-filter:grayscale(100%);"に変更する。（styleにfilter:grayscale(100%);-webkit-filter:grayscale(100%);を足すということ）<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.8739874327662!2d139.74433855838237!3d35.65858049504988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1634501565532!5m2!1sja!2sjp" width="600" height="450" style="border:0;filter:grayscale(100%);-webkit-filter:grayscale(100%);" allowfullscreen="" loading="lazy"></iframe>
こんな感じで表示されればOK。
注意点としては、全部がグレースケールになるんで、マーカーが目立たない。
CSSのfilter次第で色々出来る。
filter:sepia(50%);filter: invert(100%)魔界っぽい。ハロウィンイベントとかアバンギャルドな店舗とかに良いかも？Webサイトに埋め込んだGoogleMapをデフォルトのデザインじゃなくて、そのサイト用にカスタマイズしたい場合がある。
Google Maps APIを使ってできるけど、オプションやらたくさんあって出来ることが多い。
今回は、以下の簡単なカスタマイズを行う方法をメモしておく。
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head> <body> <script src="https://maps.googleapis.com/maps/api/js?key={APIkeyが入ります}"></script> <script type="text/javascript"> function googleMap() { // 座標（下記は東京タワーの位置） const latlng = new google.maps.LatLng(35.6591269646591, 139.74632274913765); // #mapにGoogle Map設置 const map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: latlng, styles: [ { featureType: 'all', elementType: 'all', stylers: [ { saturation: -100 } // モノクロにする ] } ] } ) // icon画像 const iconImage = { url: '/icon.svg', scaledSize: new google.maps.Size(80, 80), // アイコンサイズ } // マーカー設置 new google.maps.Marker({ map, position: latlng, icon: iconImage, }) }; google.maps.event.addDomListener(window, 'load', function () { googleMap(); }); </script> <!-- ここに地図が埋め込まれます --> <div id="map" style="width:100%; height:600px;"></div> </body> </html>
Google Maps APIは従量課金だし、APIKEYの発行やら面倒で使いたくない場合は、モノクロにするだけなら無料で出来たので、以下の記事参照。
favicon.icoをオリジナルのものにしたくて、/staticフォルダのfavicon.icoを差し替えたけど、ブラウザのタブを見るとNuxtデフォルトのアイコンのままだった。
キャッシュかと思い、nuxt.config.jsのfavicon.icoの箇所にパラメータ?v=1.0.0を追加した。
head: { ... link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v=1.0.0' }, ], ...
それでもNuxtデフォルトのままだった。
Chromeのデベロッパーツールでソースを見ると、以下の３つが反映されていて、下の２つがNuxtデフォルト画像だった。 Firefoxでは更新されてたので、favicon.icoを優先的に見るブラウザだと問題ないけど、Chromeとかの主要なブラウザはpngのほうを優先的に読んでるっぽいので、修正する必要がある。
<link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico?v=1.0.0"> <link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.3c27b8.png"> <link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.3c27b8.png" sizes="512x512">
{ "name": "name", "short_name": "name", "description": "description", "icons": [ { "src": "/icon_64x64.png", "sizes": "64x64", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_120x120.png", "sizes": "120x120", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "start_url": "/?standalone=true", "display": "standalone", "background_color": "#ffffff", "lang": "ja" }
/staticフォルダに、manifest.jsonとオリジナルアイコンを入れる。 favicon.ico apple-touch-icon.png icon_64x64.png icon_120x120.png icon_144x144.png icon_152x152.png icon_192x192.png icon_384x384.png icon_512x512.png
nuxt.config.jsを以下の様に追記する。
head: { ... link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v=1.0.0' }, { rel: 'shortcut icon', hid: 'shortcut-icon', href: '/icon.png?v=1.0.0' }, { rel: 'apple-touch-icon', hid: 'apple-touch-icon', href: '/apple-touch-icon'.png?v=1.0.0' }, { rel: 'manifest', hid: 'manifest', href: '/manifest.json?v=1.0.0' } ], ...
すると、オリジナルの画像のアイコンが反映された。
nuxt.config.jsのVuetify > optionsにcustomProperties: trueを追記する。
...
vuetify: {
....
options: {
customProperties: true
}
},
},
...
CSSに、var(--v-primary-base)のように記述すれば、変数を利用できる。
background: var(--v-primary-base);
※単一ファイルコンポーネント（style内、template内にインライン指定とか）でも、assetsフォルダとかに入れる個別のscssファイル内のいずれからも呼び出せる。
--v-primary-base以外にどんな変数があるの？ってcolor変数の一覧を見たい時は、
Google Chromeのデベロッパーツールで、<body>タグを確認すれば、どんな色かも併せてチェックできるので便利。
FireStoreのTimestampはそのままだと、以下のような形式で取得できる。
Timestamp(seconds=1634252400, nanoseconds=0)
Date型に変換するには、以下の2通りが考えられる。 ※timestampという変数に取得したTimestampが入っている想定
console.log(timestamp.toDate())
// Fri Oct 15 2021 08:00:00 GMT+0900 (日本標準時)
console.log(new Date(timestamp.seconds * 1000)) // Fri Oct 15 2021 08:00:00 GMT+0900 (日本標準時)
以下の証明書エラーで、tesseract.jsの言語ファイルが読み込めなかった。
Uncaught (in promise) FetchError: request to https://tessdata.projectnaptha.com/4.0.0/{言語コード}.traineddata.gz failed, reason:certificate has expired
tesseract.jsを使った処理の前に、以下を記述すればエラー回避出来た。
process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0
tesseract.jsに限らず、node.jsでcertificate has expiredと出たエラー全般に使えそう。