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

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

Apollo Clientを使ってShopifyのブログ記事一覧を取得しNext.jsで表示する(GraphQL編) 📝

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

Apollo Clientを使ってShopifyの商品一覧を取得しNext.jsで表示する(GraphQL編) 🎁

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

js-buy-sdk(shopify-buy)を使ってShopifyの商品一覧を取得しNext.jsで表示する(REST API編) 🎁

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

@shopify/shopify-api(shopify-node-api)を使わずにShopifyのブログ記事一覧をNext.jsでつくったAPIで強引に取得する 📝

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

microCMSのSDK + Next.jsでコンテンツを取得する際にクエリを渡して取得件数を調整したりフィルターをかけたりする 📝

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

Three.jsでVRコントローラーとオブジェクトとの接触を判定する 🕶

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

Three.jsでオブジェクト同士の接触を判定する 📦

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

Three.jsでつくったWebVRをOculus Riftに対応させたいのであればr111を使うべし 🕶

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

Three.jsでクリックされたオブジェクトを判定する 🖱

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

Three.jsで表示したMeshにログを表示する 📈

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

Three.js(r127) + TypeScriptでの開発で「Property 'updateProjectionMatrix' does not exist on type 'PerspectiveCamera'.ts(2339)」を解決する 📦

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

Macのメニューバーに常にローカルIPを表示するelectronアプリをつくる 💻

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