bnsgt's diary

個人的な備忘と日記

ちょうど良い季節がなくなったのと湯たんぽ

最近、急激に寒くなって、さっき暖房つけようかなと思ってしまった。

(冷房も暖房も不要で、長ズボンでロンTとかで心地よい秋が好き。自分が小さい頃はもうちょい秋が長かった気がする。)

で、いったん暖房つけ始めると、無いとだめな体になっちゃうんで、もうちょい我慢して湯たんぽをひさしぶりに使うことに。

f:id:bnsgt:20211021021943p:plain

ハリネズミ柄が可愛いすぎる

本来愛猫用に買ったけど、つかってくれなかったんで自分(おっさん)用。

「頭寒足熱」 という言葉があるように、全部あったかくするより足元だけこういうので暖かくする方がよいらしい

真冬はそうも言ってられへんけど、湯たんぽ併用して健康と電気代節約していこうと思う

【Google Map】Google Maps APIを使わずに、埋め込み地図をCSSでモノクロ(グレースケール)にする方法

Google Maps APIを使えば、色味やマーカーなど埋め込み地図を色々カスタマイズできるけど、 以下の料金体系のうち、月200ドル分を超えると従量課金されるらしい。

developers.google.com

ただシックな感じにしたくてモノクロにしたいだけなら、無料で生成できる埋め込みコードに少し足せば出来る。

手順

  • Googleマップで、埋め込みたい場所を表示する。
  • 共有をクリックして出てきたダイアログの地図を埋め込むタブに移動し、HTMLをコピーする。 f:id:bnsgt:20211018052104p:plain
  • コピーしたHTMLの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次第で色々出来る。

developer.mozilla.org

  • filter:sepia(50%);
  • filter: invert(100%)魔界っぽい。ハロウィンイベントとかアバンギャルドな店舗とかに良いかも?

【Google Maps API】Webサイトに埋め込んだ地図をモノクロにしてsvgのオリジナルマーカーを適用する方法

Webサイトに埋め込んだGoogleMapをデフォルトのデザインじゃなくて、そのサイト用にカスタマイズしたい場合がある。

Google Maps APIを使ってできるけど、オプションやらたくさんあって出来ることが多い。

developers.google.com

今回は、以下の簡単なカスタマイズを行う方法をメモしておく。

要件

  • モノクロ(グレースケール)
  • svg画像でマーカーを設定する。

前提

サンプル

<!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の発行やら面倒で使いたくない場合は、モノクロにするだけなら無料で出来たので、以下の記事参照。

bnsgt.hatenablog.com

【Nuxt.js】Nuxt.jsでfaviconの設定が更新されない時の対応

favicon.icoをオリジナルのものにしたくて、/staticフォルダのfavicon.icoを差し替えたけど、ブラウザのタブを見るとNuxtデフォルトのアイコンのままだった。

f:id:bnsgt:20211017100200p:plain

キャッシュかと思い、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デベロッパーツールでソースを見ると、以下の3つが反映されていて、下の2つが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">

対応

  • 以下の様なmanifest.jsonを作成する。
{
  "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' }
    ],
...

すると、オリジナルの画像のアイコンが反映された。

【Vuetify】Nuxt.jsのCSSでVuetifyのcolor変数を読み込む方法

nuxt.config.jsのVuetify > optionsにcustomProperties: trueを追記する。

  • nuxt.congif.js
  ...
  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>タグを確認すれば、どんな色かも併せてチェックできるので便利。

f:id:bnsgt:20211015194150p:plain

【Firebase】FireStoreのTimestampをJavaScriptのDateに変換

FireStoreのTimestampはそのままだと、以下のような形式で取得できる。

Timestamp(seconds=1634252400, nanoseconds=0)

Date型に変換するには、以下の2通りが考えられる。 ※timestampという変数に取得したTimestampが入っている想定

  • toDate()を使う
console.log(timestamp.toDate())
// Fri Oct 15 2021 08:00:00 GMT+0900 (日本標準時)
  • secondsに1000を掛けて、new Date()を使う。
console.log(new Date(timestamp.seconds * 1000))
// Fri Oct 15 2021 08:00:00 GMT+0900 (日本標準時)

【node.js】certificate has expiredが出た時の対応

以下の証明書エラーで、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と出たエラー全般に使えそう。