みかづきブログ・カスタム

基本的にはちょちょいのほいです。

JavaScriptでCanvasにヘリンボーン(杉綾)を描く 🐟

ヘリンボーン(英: herringbone)は、模様の一種。開きにした魚の骨に似る形状からニシン (herring) の骨 (bone) という意味をもつ。gを黙字にせずヘリングボーンということもある。形状は、V字形や長方形を縦横に連続して組合せられている。 織物(綾織り)…

UIApplication.shared.isIdleTimerDisabledを使って、アプリの起動中にiOSデバイスがスリープしないようにする 📱

iOS

UIApplication.shared.isIdleTimerDisabled を trueに設定すれば、スリープに入らなくなります。developer.apple.com 試しに、かつてつくった WKWebViewを設置しただけのiOSアプリ に組み込んでみましょう。blog.kimizuka.org ソースコード ContentView.swif…

UIScreen.main.brightnessを使って、iOSデバイスの画面輝度を取得・設定する 📱

iOS

UIScreen.main.brightness を使えば画面輝度の取得と設定ができます。developer.apple.com値としては0から1をfloatで取れるようなので、 UIScreen.main.brightness = 1.0 // 最大輝度 UIScreen.main.brightness = 0 // 最低輝度 というような感じで設定でき…

3Dプリンタ用のsltファイルを書き出すためにBlenderに寸法を表示する 🖨️

オブジェクトモードで「N」を押下するか、右上にある「」をクリックすると、トランスフォームが表示され、そこで寸法が確認できます。寸法はメートルで表示されますが、シーンの設定 > 単位 > 単位を区切るにチェックを入れると、寸法に合わせて「cm」や「mm…

ElectronでBrowserWindowにlocalhostを表示する 💻

ElectronでBrowserWindowにlocalhostを表示するコードを書きました。 PC内に既にlocalhostが立ち上がっていればそれをそのまま、立ち上がっていなければ起動してからBrowserWindowに表示します。 静的なサーバを起動するだけなので、Expressは必要ないのです…

JavaScriptでネットワークの状態を確認する 📡

そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。そんなときは、 Navigator.onLine を使…

Reactで要素をダブルクリックした際のコールバックイベントを設定する 🖱️

いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。 びっくりして、筆を取っています。よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。ja.legacy.reactjs.org ソースコード(抜粋) <div onDoubleClick={ () => console.log('DoubleCl</div>…

Firebase Cloud Messaging + Cloud Functionsを使って、iOS16.4のPWA(Progressive web apps)にプッシュ通知を送る ✉️

前回は、Navigator.setAppBadgeを使ってアイコンにバッジをつけました 。blog.kimizuka.org今回はトークンをデータベースに登録して、サーバからプッシュ通知を送信してみます。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブ…

Next.jsでiOSにPWAを配布する為のページをつくる 📱

かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。youtu.begithub.com DEMO web-app-store-kit.vercel.…

CSSでダークモードを判定する 🐦‍⬛

CSS

developer.mozilla.orgOSのダークモードですが、メディアクエリで簡単に判定できます。 @media (prefers-color-scheme: dark) { /* ダークモードのスタイルを書く */ } DEMO 最近つくっている、PWAをホーム画面に登録することを促すポップアップです。 ライ…

ミドルウェアを使ってNext.js(13.1.0以降)で作成したウェブサイトにBasic認証を設定する 🔐

かつて、Next.js 12でミドルウェアを使ったBasic認証の設定方法を 記事 にまとめましたが、Next.js 13になって、ミドルウェアの設定方法に微妙な変更があったため調査しました。blog.kimizuka.orgnextjs.org 変更点 middleware.tsの位置変更 前回の方法 をそ…

Navigator.setAppBadgeを使って、iOS16.4のPWA(Progressive web apps)にアプリケーションバッジを付ける 📛

iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブサイトをホーム画面に追加する(displayをstandaloneにする) ❸ ユーザーアクションきっかけで通知の許可…

タッチディスプレイ付きのWindows機でGoogle Chromeのジェスチャーによる進む・戻るを無効にする 👆

chrome://flags の overscroll history navigation から無効にすることができました。

windowのサイズを計測するページをつくる 🪟

以前、まったく同じものをつくった気がしなくもないのですが、見当たらなかったので作成しました。develop.kimizuka.orgFullScreenAPI に対応しているブラウザであれば、全画面にすることもできます。 ソースコード(抜粋) index.js handleResize(); window…

Reactを使ったWebサイトで右クリックした際にメニューを表示させないようにする 🖱

右クリックした際の挙動は、 onContextMenu を使って制御できます。 なので、 Event.preventDefault を使って、既定のアクションが発生しないようにできます。developer.mozilla.org developer.mozilla.org ソースコード(抜粋) import { MouseEvent } from…