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

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

Cloud Functionsを定期的に実行する ⏰

昔はCloud Functionsに加え、Cloud Pub/Sub、Cloud Schedulerで設定が必要だったようですが、いまはCloud Functionsで設定すれば、自動的にCloud Pub/SubのトピックとCloud Schedulerのジョブが作成されます。便利な時代になりましたね。firebase.google.com…

Expo(44.0.0) + Firebase(9.6.8)でアプリをつくった際に「Can't find variable:IDBindex」と表示される際の対策 🔥

結論 firebase 9.6.7を使ったら解決した。(expoは44.0.0) ことの発端 こちらのドキュメントをみながら、ExpoアプリにFirebaseを導入しようとしたのですが、iOSでもAndroidでもinitializeAppのタイミングで「Can't find variable:IDBindex」とエラーが表示…

ミドルウェアを使ってVercelにデプロイしたNext.js製のウェブサイトにBasic認証を設定する 🔐

追記 Next.js 13以降での設定方法をまとめました。blog.kimizuka.org Next.js 12から導入されたミドルウェアを使って、Basic認証を設定するサンプルを見つけたので試してみました。nextjs.orggithub.com _middleware.ts import { NextRequest, NextResponse …

Xcodeインストール済みのMacでExpoアプリをiOSシミュレーターでプレビューできない場合に確認すべきこと(✔ Xcode needs to be installed (don't worry, you won't have to use it), would you like to continue to the App Store?)📱

ことの発端 expo startで起動したExpoアプリは、ターミナルでiを押下することでiOSシミュレーターでプレビューすることができます。 MacにXcodeとCommand Line Toolsがインストールされていることが条件となるのですが、両方インストールしても、 ✔ Xcode ne…

Expoでつくったアプリにサーバからプッシュ通知を送ってバッジをつける 📛

前回つくった、Expoアプリにプッシュ通知を送るローカルサーバ。blog.kimizuka.orgすんなりうまくいったので、これをそのままHerokuやら、Lambdaやら、Cloud Functionsやらにデプロイすれば、問題なくプッシュ通知を遅れると思い込んでいましたが、冷静に考…

コントローラーでオブジェクトを掴むことができるWebVRをつくる ✊

まだ片手にしか対応できてませんが、コントローラーでオブジェクトを掴むことができるWebVRをつくりました。 cannon.jsで物理演算しているので、掴んだオブジェクトを放り投げることもできます。 DEMO kimizuka.org 実装方針 マウスで3Dオブジェクトを掴んで…

Expoでつくったアプリにローカルサーバからプッシュ通知を送ってバッジをつける(Expoの導入・プッシュ通知を受信するアプリの作成・プッシュ通知を送信するローカルサーバの作成) 📛

結論 ことの発端 Expoの調査 Expoの導入 ❶ アカウントの作成 ❷ アプリの準備 ❸ expo-cliの導入 ❹ expo-cliにログイン プッシュ通知を受信するアプリの作成 ❶ プロジェクトの作成 ❷ expo-notificationsの導入 ❸ app.jsonを編集 ❹ コードを書く App.tsx プッシ…

床を傾けて3Dのボールを転がす(Cannon.js + Three.js + React.js) 🏐

Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード(抜粋) function handleMouseMove(evt) { const deg = 12; const x…

Three.js(r136)から THREE.GammaEncoding が undefined になっていることに気づく 😱

Three.js(r127)で開発していたサイトで、Three.jsのバージョンをr136まで上げてみたところ、glTFファイルの色味が若干薄暗くなりました。 r127 r136 直感的に、 renderer.outputEncoding = THREE.GammaEncoding; の部分が効いていないのだと思い、調査して…

2つの3Dオブジェクトを衝突させる(Cannon.js + Three.js + React.js) 💥

前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標(中…

3Dオブジェクトに上向きの力を掛ける(Cannon.js + Three.js + React.js) 🐭

前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモック をつくりました。blog.kimizuka.orgつくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。今回は、ものすごくシンプルに、マウスダウン 自分の…

マウスで3Dオブジェクトを掴んで放り投げる(Cannon.js + Three.js + React.js) 🐭

Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算…

3Dオブジェクトの位置を物理演算で算出する(Cannon.js + Three.js + React.js) 📈

Cannon.js + Three.jsでオブジェクトの位置を物理演算で算出してみました。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCa…

AR.js + Three.js + React.js でWebARコンテンツをつくるときのためのカスタムフックをつくる 🔨

AR.js + Three.js + Next.js(React.js) でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…

textareaを使ってHTMLの特殊文字をアンエスケープする 📝

特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < &lt; > &gt; " &quot; ' &apos; & &amp;こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…