結論 「Shift」を押しながら、トラックパッドを上下にスクロールすれば、左右にスクロールできます。 ことの発端 展示にアプリケーションの開発 + アプリケーションをインストールしたPCの納品という仕事があった際、展示期間中に納品したPCを遠隔で操作した…

くるくる回るように数字が変化するカウンターを作りました。 styled-components、lodash、gsapに依存しています。 lodashはreverseしか使っていないので、reverseを自作して外すこともできたのですが、面倒なので使っちゃいました。 gsapに関しても、CSSアニ…

reactnative.dev import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( <View style={ styles.container }> <WebView source={{ uri: 'https://expo.dev' }} /> </View> ); } const styles = StyleSheet.create({ container: { fl…

僕は3つ方法を使い分けています。 ❶ コンソールを確認する yarn startを実行したコンソールに出力されているので、ターミナルを見れば確認できます。 一番手軽です。 ❷ JS Debuggerで確認する yarn startを実行したコンソールで「j」を押下すると、Chromeの…

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

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

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

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

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

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

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

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

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

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

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