blog.kimizuka.org前回 はiOSアプリのみ使える方法を検証しましたが、今回はAndroidアプリやウェブアプリにも対応できる方法を検証します。実現方法をざっくり調べると、かつては AsyncStorage を使った方法が主流だったようです。reactnative.devしかし、現…
ことの発端 ざっくりとした使い方 インポート 値の取得 値の保存 実装例 注意事項 追記 ことの発端 かつて、SwiftでiOSアプリを制作していた際、簡単なデータを永続化するときは UserDefaults を使っていました。developer.apple.comいまはExpoでiOSアプリを…
Cloud Firestore トリガー を使って、ドキュメントに変更があった際にプッシュ通知を送ってみました。firebase.google.com 前提 Cloud Firestoreにデバイストークンを保存する(tokensコレクションにデバイスIDをドキュメントIDにして保存する) Cloud Fires…
関連記事 Expoでつくったアプリにローカルサーバからプッシュ通知を送る blog.kimizuka.org Expoでつくったアプリにサーバからプッシュ通知を送る blog.kimizuka.orgこれまで、ローカルサーバからプッシュ通知送信、サーバからプッシュ通知送信を試しまし…
ことの発端 Expoで作ったアプリがフォアグラウンドになったタイミング、すなわちiOSアプリでいうところのviewWillEnterForegroundをどう書くのか、React Nativeのドキュメントで調べたところ、 import { useRef, useState, useEffect } from 'react'; import…
昔はCloud Functionsに加え、Cloud Pub/Sub、Cloud Schedulerで設定が必要だったようですが、いまはCloud Functionsで設定すれば、自動的にCloud Pub/SubのトピックとCloud Schedulerのジョブが作成されます。便利な時代になりましたね。firebase.google.com…
結論 firebase 9.6.7を使ったら解決した。(expoは44.0.0) ことの発端 こちらのドキュメントをみながら、ExpoアプリにFirebaseを導入しようとしたのですが、iOSでもAndroidでもinitializeAppのタイミングで「Can't find variable:IDBindex」とエラーが表示…
追記 Next.js 13以降での設定方法をまとめました。blog.kimizuka.org Next.js 12から導入されたミドルウェアを使って、Basic認証を設定するサンプルを見つけたので試してみました。nextjs.orggithub.com _middleware.ts import { NextRequest, NextResponse …
ことの発端 expo startで起動したExpoアプリは、ターミナルでiを押下することでiOSシミュレーターでプレビューすることができます。 MacにXcodeとCommand Line Toolsがインストールされていることが条件となるのですが、両方インストールしても、 ✔ Xcode ne…
前回つくった、Expoアプリにプッシュ通知を送るローカルサーバ。blog.kimizuka.orgすんなりうまくいったので、これをそのままHerokuやら、Lambdaやら、Cloud Functionsやらにデプロイすれば、問題なくプッシュ通知を遅れると思い込んでいましたが、冷静に考…
まだ片手にしか対応できてませんが、コントローラーでオブジェクトを掴むことができるWebVRをつくりました。 cannon.jsで物理演算しているので、掴んだオブジェクトを放り投げることもできます。 DEMO kimizuka.org 実装方針 マウスで3Dオブジェクトを掴んで…
結論 ことの発端 Expoの調査 Expoの導入 ❶ アカウントの作成 ❷ アプリの準備 ❸ expo-cliの導入 ❹ expo-cliにログイン プッシュ通知を受信するアプリの作成 ❶ プロジェクトの作成 ❷ expo-notificationsの導入 ❸ app.jsonを編集 ❹ コードを書く App.tsx プッシ…
Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード(抜粋) function handleMouseMove(evt) { const deg = 12; const x…
Three.js(r127)で開発していたサイトで、Three.jsのバージョンをr136まで上げてみたところ、glTFファイルの色味が若干薄暗くなりました。 r127 r136 直感的に、 renderer.outputEncoding = THREE.GammaEncoding; の部分が効いていないのだと思い、調査して…
前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標(中…