2022-02-01から1ヶ月間の記事一覧
特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < < > > " " ' ' & &こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…
blog.kimizuka.orgかつて、 controllerModel.motionController.data にアクセスすることで強引に取得していた、トリガー、A、B、X、Yボタンの状態ですが、VRボタンを、Three.jsのVRButton.jsからImmersive Webのwebxr-button.jsへ切り替えたところ、スマート…
immersive-web.github.io ことの発端 普段はThree.jsでWebVRコンテンツをつくっているので、Three.jsのVRButton.jsを使っています。github.comしかし、以前、gamepadにアクセスしようとした際、sessionが隠蔽されており、外部からスマートにアクセスする方法…
github.comそもそも、GraphiQL側の問題のようなのですが、Shopify GraphiQL Appにエラーとなるようなクエリを書き込んでしまうと、エラーで画面が表示されなくなります。それだけならまだしも、「前回のクエリをlocalStorageに保持して初期値に使う」という…
iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、️という絵文字。 [...'️']; // => ['', '', '', '️']と言う感じで、 と に分かれてしまいます。そ…
linear-gradientとbackground-sizeをうまく使うと、背景に繰り返しで線を引くことができます。 DEMO CSS div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, red 1px, transparent 1px); background-size:…
過去にも商品一覧やブログ記事一覧を取得したことがあったのですが、GraphQLの書き方を調べながらいろんなものを取得してみたので書き方をメモしておきます。blog.kimizuka.org blog.kimizuka.org 商品一覧取得の書き方例 { products(first: 10) { edges { n…
Drag and Drop APIを検証しました。developer.mozilla.org 実装手順 最小構成だと、 ドラッグ可能にしたい要素のdraggableをtrueに設定する ドロップ可能にしたい要素にdragoverイベント、dropイベントを設定する dragoverイベント、dropイベントに設定した…
最近、CSSのmix-blend-modeを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる値を確認しました。developer.mozilla.org 基本的な使い方 mix-blend-modeを指定すると、重なっていている要素の色を合成し…
最近、CSSのfilterを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる関数を確認しました。※ SVGフィルターは試してません ※ 上限はある程度適当に決めていますdeveloper.mozilla.org DEMO 記述順 今回は…
screen.getAllDisplaysを使えば、利用可能なディスプレイを配列で取得することができます。www.electronjs.org const displays = screen.getAllDisplays(); // ディスプレイの配列を取得 この際、配列の順序がよくわからない（認識された順？）ので、僕は座…
文章での表現がすごく難しいのですが、 const [list, setList] = useState([{ color: 'red', text: 'Ya-Ha-!' },{ color: 'blue', text: 'Yo-Ho-!' },{ color: 'yellow', text: 'Ya-Ha-!' },{ color: 'green', text: 'Yo-Ho-!' }]); と、いう感じでuseState…
テキストエリアに行数制限を作りたくてもろもろ検討しました。 日本語だけの対応でOKであれば、当幅フォントを使って行も列も制限を掛けるのが良いと思いました。 DEMO フォントサイズを10pxに設定 リサイズを不可に設定 大きさを20文字×10行に合わせる 最大…
