ことの発端 以前、vwを使って画面幅に合わせたサイズ調整を行うモックをつくりましたが、今回はそれを簡単に設定できるユーティリティ関数を作ろうと思いました。 ひとつひとつを手書きで書いていくのは非常に骨が折れるからです。blog.kimizuka.org 方針と…

以前シンプルに作り直したカスタムフック をほんのり複雑に作り直しました。 具体的には以前のものはウィンドウのスクロール量を測定することに特化していたのですが、引数で測定対象を渡せるように修正した次第です。blog.kimizuka.org useScroll.tsx impor…

追記 ことの発端 結論 DEMO ソースコード 経緯 追記 両手のコントローラーに対応しました！https://kimizuka.org/mock/r127/vr-controller ことの発端 examplesを見ながらWebVRコンテンツをつくっていたのですが、コントローラーの「トリガー」「グリップ」…

changeイベントを使うと値の確定時、inputイベントを使うと値の入力時に発火します。 DEMO 百聞は一見にしかずなのでDEMOを操作してもらうのが一番早いです。

めずらしいケースだと思いますが、 <ul> {list.map((item, i) => { return ( <li>{ item.title }</li> <li>{ item.text }</li> ); })} </ul> というような感じで、要素を複数返したいケースに出くわしました。 <ul> {list.map((item, i) => { return ( <> <li>{ item.title }</li> <li>{ item.text }</li> ); </ul>…

先日、AR.js + Three.js + Next.jsでスマートフォン向けのウェブARをつくりました。3Dオブジェクトをブラウザ上に、3Dオブジェクトの影を現実空間に表示する、ウェブAR + プロジェクションマッピングを作りました。名付けて「影絵R（カゲエーアール）」です…

iOS15から明示的にcolorを当てないと、optionの文字色に-apple-system-blueと当てられてしまい、青くなってしまうようです。 body { color: #000; } option { color: #000; } では修正できなかったのですが、 select { color: #000; } で上書きました。ただ…

以前作成・検証した、Googleカレンダーの予定名を「予定あり」に変更するスクリプト、html2canvasでのスクリーンショットの撮影、ユーザークリックなしのファイルダウンロードを組み合わせたブックマークレットをつくりました。 blog.kimizuka.org blog.kimi…

最近、(new Date).getMonth()の結果を英語にする機会がありまして、愚直に、 [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][(new Date).getMonth()]; 的なコードを書いた…

ものすごく特殊な例な気がしますが、擬似要素に半角スペースを設定しようと思い、SCSSで、 p { &:before, &:after { content: ' '; } } と書いてみたのですがダメでした。HTMLであれば実体参照を使うところなのですが、 p { &:before, &:after { content: '&…

追記 のちに anyenv を使って導入し直しました。blog.kimizuka.org github.comいままではNode.jsのバージョン管理にndenvを使っていたのですが、 [Deprecated] nodenv is better alternative Please consider to use nodenv. ndenv repository is not mainta…

ファイル名からタイムスタンプの削除 ファイル名の変更 保存場所の変更 プレビューを表示せず即時保存 Macでは、 「command」+「shift」+ 「3」 「command」+「shift」+ 「4」 「command」+「shift」+ 「5」 で、画面のスクリーンショットを撮影することがで…

Appleシリコン（M1）のMacにndenvを使って、15.XのNode.jsをインストールしようとした際、 ndenv install v15.0.0 Downloading node-v14.0.0-darwin-arm64.tar.gz... -> https://nodejs.org/dist/v14.0.0/node-v14.0.0-darwin-arm64.tar.gz .ndenv/plugins/n…

html2canvasを使ってHTMLの画像化を試みました。

developer.mozilla.orgaタグに付与することで、クリックした際にファイルをダウンロードできるdownload属性。 非常に便利に使えるので、これまでも、aタグのダウンロード属性をつかった検証は何度か行ってきました。blog.kimizuka.org blog.kimizuka.org今回…

これまで、 input::placeholder { color: red; } input::-moz-placeholder { { color: red; } input::-ms-input-placeholder { color: red; } という感じでベンダープレフィックスをつけて実装していたのですが、改めてMDN Web Docsを確認したところ、IE以外…

スプレッドシートに描いた16×16のドット絵を配列に変換するGASを書きました。 上記のドット絵が、 const pictures = [ ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffff…

これまで、Next.jsでコンポーネントをインポートする際は、相対パスを使っていたのですが、コンポーネントを別のディレクトリに移動した際に、パスを書き換えなければならないこともしばしばありまして。Nuxt.jsのように「~」とか「@」を使う方法はないもの…

ことの発端 以前、Next.jsでSVGをコンポーネントのように扱う方法を調べました。blog.kimizuka.org今日もまた、いつものようにbabel-plugin-inline-react-svgを使ってSVGを読み込もうとしたのですが、 Error: Element type is invalid: expected a string (f…

結論 調査結果 Google Apple Facebook Amazon Microsoft Twitter Instagram フォントの指定を考える ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。 最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウ…

タイトルの通りです。micro:bitとGoogle ChromeをWeb Bluetooth APIで繋ぎました。 Google Chromeからmicro:bitのLEDマトリクスを制御します。まず、micro:bitの説明は端折りますが、簡単に説明すればマイコンです。 英国では11〜12歳の子供、全員に無償で配…

Atom Matrixを購入したので、Arduino IDEからコードを書き込んできました。ATOM Matrixwww.switch-science.com 完成したもの 本体を傾けると下方向を指す矢印を表示します。 ここに至るまでにやったことを順を追って説明していきます。 Atom Matrixの仕様を…

Three.jsに3Dモデルを読み込んだとき、時々、環境光源（AmbientLight）が当たらないモデル（平行光源・DirectionalLightや点光源・PointLightなど他のライトは当たる）がありまして、しょうがないので他のライトで照らしていたのですが、やっぱり気になるの…

ウェブアプリの開発中に、#ffffff → 255,255,255 みたいな変換が必要になりました。 こんな処理は絶対に誰かが書いているはずだ。と思い調べてみたところ、www.npmjs.comばっちり見つかりました。ソースコードも37行とかなり短く、これを使おうかなとも思っ…

ポインタを渡せば関数の引数に配列を渡すことができます。 void setup() { Serial.begin(9600); } void loop() { int arr[] = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; checkArr(arr); delay(1000); } void checkArr(int *arr) { Serial.println(arr[9]); // → 9 …

起動した際に、・expressでサーバを立てる（ポートは3000） ・publicディレクトリの中身をホスティングする ・socket.ioでサーバとクライアントの通信を行う（ipc通信の代替） ・Google Chromeを起動しhttp://localhost:3000を開く（Chromeのダウンロードは…

developer.mozilla.org developer.mozilla.org以前からAndroidのChromeには搭載されていたものの、iOSのSafariには搭載されてなかったWeb Share APIですが、iOS15にてついに有効になったとのことなので、早速実装してみました。一番ハマったところは、naviga…

passiveをfalseにしてtouchmoveのEvent.preventDefaultを実行すれば、Pull to Refresh（引っ張って更新）を止めることができます。 documents.addEventListener('touchmove', function(evt) { evt.preventDefault(); }, { passive: false }); 今回は、touchm…

今朝、iOSを15にアップグレードしつつ、Mac版のSafariも最新にしてみたところ、どちらもサイトによってメニューバーやナビゲーションバーの色が変わるようになってました。Safari15から、theme-colorを評価するようになったようです。developer.mozilla.org…

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…