bnsgt's diary

個人的な備忘と日記

【fabric.js】スマホのピンチ操作を有効にする方法

npmで、普通のfabric.jsを利用していた。 www.npmjs.com その場合、ピンチイン・ピンチアウトで、選択したオブジェクトの拡大・縮小ができなかった。 fabric-with-gesturesをインストールすれば、使えた。 www.npmjs.com TypeScriptの場合、npm install --sa…

【fabric.js】オブジェクトの縦横比(アスペクト比)が変わってしまうハンドルを非表示にする方法

デフォルトだと4つの角に加えて、回転用の突出したやつと、4辺の真ん中にハンドルがあり、大きさを変えたり回転したりできる。 オブジェクトとして配置したものが写真だったりした場合は縦横比変えたくない。 その場合、setControlVisibleを操作すれば、意…

猫は要望がある時に鳴く

トイレが汚いとかご飯が欲しいとかあるけど、その辺は日頃ケアしているので、うちの愛猫が鳴いてくるのはだいたいかまって欲しい時。 本能的に明け方〜朝方活発になるけど、忙しくてなかなかかまってあげれず、鳴き続けてこっちもイライラすることがあった。…

【fabric.js】canvasがw300px * h150pxになってしまう場合の対応

以下のように単純な四角形を設置した場合、canvas要素にインラインスタイル(width: 300px; height: 150px;)が適用される。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> </html>

【React】 create-react-appのbuildで、デプロイ先がサブディレクトリの場合

デプロイ先が、https://〇〇〇.com/△△△/のようなサブディレクトリの場合、js,css,画像などを相対パスで読み込む必要がある。 package.jsonに以下を追記すればOK。 homepage": "./", publicフォルダに入っている画像などを読み込んでいる場合は、srcをルート…

楽天証券で、米株積立購入が出来るようになった

2021年12月26日から楽天証券で、米株積立購入が出来るようになった。 www.rakuten-sec.co.jp ETFも積立購入出来るので、少額やけど早速設定しておいた。 手間や思考使わず購入出来るんで便利。

amazonはいちいちチャージしてから購入した方が少しお得

現金の場合 5000円以上チャージで、0.5%〜2.5%ポイントもらえる。 www.amazon.co.jp クレカの場合(プライム会員のみ) 5000円以上チャージで、0.5%ポイントもらえる。 www.amazon.co.jp クレカの方は、いちいち上のリンクから「キャンペーンにエントリーす…

【TypeScript】モジュールの宣言ファイルが見つからない時の対応

npm packageをimportして使おうとしたら、以下のようなエラーが出ることがある。 モジュール '{package name}' の宣言ファイルが見つかりませんでした。〇〇〇は暗黙的に 'any' 型になります。 npm i --save-dev @types/{package name} で、インストールでき…

お名前.comのjpドメインでwhois情報公開代行しているのに、登録者名が出ていた。

なんで?って思って調べたら、 2021年12月14日以前に汎用.jp/都道府県型.jpドメインにWhois情報公開代行設定をおこなわれている場合は、[登録者名]にお客様の情報が表示されます。 とのこと。 [登録者名]を非公開にしたい場合は、Whois情報公開代行設定をい…

【opencv.js】wasm streaming compile failedが出た時の対応

さくらサーバーのスタンダードプラン(https://rs.sakura.ad.jp/standard.html)で、opencv.jsを使おうとしたら、以下のエラーが出た。 opencv.js:20 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect r…

無駄なアプリやサービスは利用し過ぎない方が良い

さっきコンビニで、アプリを見せるだけで商品がもらえるやつがあったので、もらおうとしたけど、店舗になくてもらえなかった。 ちょっとイラッとしたけどそもそもこのアプリを入れてなければ、こんな思いをすることはなかった。 思えば日頃から、そのコンビ…

2021年下半期の振り返り

2021年もあと3週間! 今年の下半期を振り返る。 売上 8〜10月が超絶低い。 11〜4月末までは、案件参画出来たんで、そこそこ売り上げあげれそう。 役員報酬を上げた為、現在契約延長してもらえる想定かついま進行中のも無事に納品できたら、今期はざっくり70…

7インチか8インチくらいのAndroidタブレット

2年前購入した7インチのAndroidタブレットが、電源入らなくなりご臨終?と思って、新調しようとAndroidタブレット物色したので、メモ。 (後で電源ケーブルが壊れていたことが判明して、まだご健在なんでこれからも使う予定) bnsgt.hatenablog.com 比較は価…

元重製陶所の大根おろし器買った

寒くなってきて、白菜と肉を炊いた水炊きなんかが恋しくなる。 味はポン酢で、大根おろしも入ってた方がうまい。 100均で買ったプラスチックの大根おろし器があるんで、最近それで大根おろし作ったけど、水分多いし疲れるしで、ちょっと良いやつを買おうかネ…

角度調整できるモニターアームと電動ドリルを買った

最近、料理とかしながらもテレビ見たい時とか用に、角度調整できるモニターアームを購入した。 Amazon | PERLESMITH テレビ壁掛け金具 10-32インチ モニター LCD LED液晶テレビ対応 アームタイプ 360度回転角度調節 VESA対応100*100mm 耐荷重20kg(ネジ等付…

【Heroku】ReactのアプリをHerokuにデプロイする

ほとんど下記記事と同じ。 bnsgt.hatenablog.com 以下のみ異なる。 ブラウザのHerokuダッシュボードで、作成したアプリのsetting(https://dashboard.heroku.com/apps/{アプリ名}/settings)Add buildpackをクリックし、node.jsを選択し、Enter Buildpack UR…

【Heroku】ただ文字を表示するだけのプログラムをHerokuにビルドする

仕事でExpress, Reactを使うことになり、キャッチアップのため個人的にもMERNスタック(MongoDB, Express, React, Node.js)で、ちょっとしたアプリを作って見ようと思った。 Herokuでホスティングするのがメジャーなようで、情報も多いし、月550時間まで無…

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

最近、急激に寒くなって、さっき暖房つけようかなと思ってしまった。 (冷房も暖房も不要で、長ズボンでロンTとかで心地よい秋が好き。自分が小さい頃はもうちょい秋が長かった気がする。) で、いったん暖房つけ始めると、無いとだめな体になっちゃうんで、…

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

CSS

Google Maps APIを使えば、色味やマーカーなど埋め込み地図を色々カスタマイズできるけど、 以下の料金体系のうち、月200ドル分を超えると従量課金されるらしい。 developers.google.com ただシックな感じにしたくてモノクロにしたいだけなら、無料で生成で…

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

Webサイトに埋め込んだGoogleMapをデフォルトのデザインじゃなくて、そのサイト用にカスタマイズしたい場合がある。 Google Maps APIを使ってできるけど、オプションやらたくさんあって出来ることが多い。 developers.google.com 今回は、以下の簡単なカスタ…

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

favicon.icoをオリジナルのものにしたくて、/staticフォルダのfavicon.icoを差し替えたけど、ブラウザのタブを見るとNuxtデフォルトのアイコンのままだった。 キャッシュかと思い、nuxt.config.jsのfavicon.icoの箇所にパラメータ?v=1.0.0を追加した。 head:…

【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-p…

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

FireStoreのTimestampはそのままだと、以下のような形式で取得できる。 Timestamp(seconds=1634252400, nanoseconds=0) Date型に変換するには、以下の2通りが考えられる。 ※timestampという変数に取得したTimestampが入っている想定 toDate()を使う console.…

【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を使…

お酒飲んだら翌日鼻詰まる要因の確認

最近お酒飲んだ次の日、鼻の不調がやばかった。 今日は前日お酒飲んでいないので、鼻の異常はなかった。 アルコールのせいと思ってたけど、そういえば、最近お酒と一緒にナッツも一緒に食べていたので、原因の絞り込みのため、今日はナッツ系を取らずに、お…

猫が明け方めっちゃうるさかった原因

最近、明け方になると愛猫が「ニャーニャー」鳴き出し、暴れたりして起こされることが続いた。 でも今日は暴れることなく静かだった。 違いがあったのでメモしておく。 「窓を開けて寝ていた場合、明け方暴れる」ということ。 うちは前に大通りがあって、窓…

猫ちゃん迎えて1年で思ったこと

もうすぐ迎えてから1年になるんで今思うことを綴っておく。 可愛いは当たり前で、実益につながるような良いことがあると思う。 よかったこと 自己肯定感が上がる 帰ってくると必ずお出迎えをしてくれて、こんな自分でも待っててくれる猫がいると思うと明日…

【キャッシュレス時代の財布】財布をマジックテープ式からバンド式のに替えた

ちゃんとした長財布も持ってるけど、キャッシュレスが流行ってからは手軽さ重視で、主に持ち歩くのは最近小さい財布にしてる。 columbiaのマジックテープ式のを利用していて、薄くて軽くてデザインも好きやけど、唯一難点なのが、「マジックテープ式」なこと…

頭に来てもアホとは戦うな!マンガ版を読んだ感想

この本で言うアホは、狡猾なやつとか自分を上げるために利用してきたりするやつのこと。 そういう人はムカつくことはあるけど、自分の人生を生きるためにアホと戦う時間や労力はもったいない。 相手を変えるのは無理。自分の考え方やその人との接し方を変え…

お酒飲んだ時の体調

以前、1週間程度断酒してみた。 bnsgt.hatenablog.com ↑この記事以降も数日お酒を飲まず、確か7か8日くらい飲まなかった。 で、現在はというと、飲む日の方が多いけど、たまに飲まない日も作れていて、以前よりはかなりマシになった。 この記事を書いている…