先日、自前でAPIを用意してShopifyのブログ記事一覧を取得しましたが、前回、商品一覧を取得する際にGraphQLの使いかたを学んだので、GraphQLで書き換えてみます。blog.kimizuka.org blog.kimizuka.org 手順 プライベートアプリを用意して、ストアフロントAP…

前回は、js-buy-sdk（shopify-buy）を使って商品一覧を取得しましたが、今回はGraphQLで取得します。 方法はいろいろあるのですが、GraphQLを扱いやすくするためにApollo Clientを使って実装しました。blog.kimizuka.org個人的には結果が同じであれば使い慣…

手順 プライベートアプリを用意して、ストアフロントAPIのアクセストークンを取得する help.shopify.comこちらの手順に従って、 プライベートアプリを用意する ストアフロントAPIを有効にする 商品、バリエーション、コレクションを読み込むの権限を付与する…

なにか根本的なところを間違えている気がしてならないのですが、強引な手法でShopifyのブログ記事一覧を取得できたのでメモを残しておきます。 結論 src/pages/api/getArticles.js import axios from 'axios'; export default async function getArticleList…

かつては自前でmicroCMSとNext.jsを組み合わせていましたが、SDKができたとのことだったので、つかってみました。Nuxt.js用のSDK、GatsbyJS用のSDKとフレームワーク専用で用意されているものもありますが、Next.jsは専用のものが無いので、Javascript（Node.…

DEMO Oculus Quest用 DEMO 👉 https://kimizuka.org/mock/r127/vr-collision Oculus Rift用 DEMO 👉 https://kimizuka.org/mock/r111/vr-collision※ r111はコントローラーの位置にCubeが表示されます 解説 こちらの記事で作ったコードを改造して、VRコントローラ…

DEMO https://kimizuka.org/mock/collision画面をクリックすると、オブジェクトが近づいて行って接触すると「HIT!」と表示されます。 実装方針 色々方法はあると思うのですが、今回は Sphere.intersectsSphere を使って球体と交差している球体があるかを判定…

結論 DEMO ことの発端 ソースコードの確認 WebVR API と WebXR Device API WebVR APIに対応しているThree.jsのバージョンを探す r111 r127 結論 Three.js(r111)を使いましょう。github.comただし、r111には XRControllerModelFactory.js が無いのでコントロ…

DEMO https://kimizuka.org/mock/click Three.jsでオブジェクトがクリックされたことを判定したいなと思い、いろいろ調べてみたのですが、公式ドキュメントに紹介されているやり方で問題なく対応できました。threejs.org ソースコード抜粋 window.addEventLi…

Three.jsでVRコンテンツを作る際、console.logで出力した値を確認するのが面倒なので、かつて作成した動的にテキストを出力できるテクスチャを切り出して、ログの出力に特化させたものをつくりました。blog.kimizuka.orgこちらの記事内に出てくるDEMOでもち…

ことの発端 TypeScript + Three.js（r127）での開発で、 const camera = new THREE.PerspectiveCamera(); camera.updateProjectionMatrix(); というコードを書いたところ、 Property 'updateProjectionMatrix' does not exist on type 'PerspectiveCamera'.t…

ローカルにウェブサーバを立てて、別のデバイスからアクセスする際、ローカルIPを調べるのが面倒なので、常時表示されておきたくなります。 そんなとき、これまでは IP in menubar というアプリを使って、MacのメニューバーにIPアドレスを表示していたのです…

ことの発端 以前、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>…

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

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…

github.comいままではNode.jsのバージョン管理にndenvを使っていたのですが、 [Deprecated] nodenv is better alternative Please consider to use nodenv. ndenv repository is not maintained actively. いつの間にかDeprecated（非推奨）になっていたこと…

ファイル名からタイムスタンプの削除 ファイル名の変更 保存場所の変更 プレビューを表示せず即時保存 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のように「~」とか「@」を使う方法はないもの…