公式ドキュメントに書いてある通りなのですが、ほんのりハマったのでメモ。nextjs.org ことの発端 src/app/page.tsx import { ServerComponent } from '@/components/ServerComponent'; export default function Home() { return ( <ServerComponent /> ); } src/components/Sev</servercomponent>…
3年半前の記事のアップデート版です。blog.kimizuka.org3年半前の記事には環境を書き忘れたので、今回はしっかり書き残しておこうと思うのですが、Next.js（14.2.13）のApp Routerで検証しました。Adobe FontsをWebフォントとして使おうとすると、 <script> (functio…
Three.jsやPIXI.js経由で、間接的にWebGLを使ったことはあるものの、直接操作をしたことがなかったので、めちゃめちゃ基本的なところから触ってみました。 順序としては、 試しに三角形を描く 試しに四角形を描く 四角形にテクスチャを貼る という順序で進め…
先日作成したMeta Quest向けのWebVRコンテンツ ですが、Meta Questのパススルーを使い、背景を実写にしてみます。blog.kimizuka.orgかつて、getUserMediaを使って、どうにかQuestのカメラにアクセスできないかを試行錯誤していた時期もあったのですが、パス…
blog.kimizuka.org昨年作った、Firebase Cloud Messagingから、最近通知が送られてこないなと思っていたのですが、遅ればせながら、Messaging.sendAll()が廃止されていたことに気が付きました。取り急ぎ動くようにするのであれば、Messaging.sendAll() を Me…
2022年はWebVR、2023年はWebARに関する知見をまとめたりしていましたが、久しぶりにWebVRコンテンツを作ってみました。kimizuka.org内容としては、 目の前にCubeがひとつ浮いている コントローラ（もしくは手）が表示されている コントローラ（もしくは手）…
こちら、下記3つの記事の組み合わせです。blog.kimizuka.org blog.kimizuka.org blog.kimizuka.orgM5StickC Plus2でGPS座標を取得して、Cloud Firestorに送信します。 準備するもの M5StickC Plus2 GPSユニット Arduino Firebaseのアカウント（Blazeプランに…
実装手順 ❶ パッケージを用意する yarn add firebase firebase-tools ❷ package.jsonを編集する package.json { "name": "functions-to-firestore", "scripts": { "login": "firebase login", "init": "firebase init", "emulate": "firebase emulators:star…
nextjs.orgNext.js 13.5から、 next dev --experimental-httpsで、開発サーバをhttpsで立ち上げることができるようになった模様です。めちゃめちゃ便利です。 package.json { "scripts": { "dev": "next dev", "dev:https": "next dev --experimental-https"…
blog.kimizuka.org blog.kimizuka.org最近はGPSの記事ばかり書いている気がしますが、今回はM5StickC Plus2でGPS座標の取得を試みます。 前回までは、M5StickC Plusを使っていましたが、今回からは、M5StickC Plus2を使います。本体が若干黄色くなっています…
昔は、クリップボードにテキストをコピーするだけのためにFlashを使ったりしていましたが、現在はJavaScriptのnavigator.clipboardだけで実現できます。developer.mozilla.org DEMO ポラーノの広場ボタンを押すと、「あのイーハトーヴォのすきとおった風、夏…
実装手順 ❶ パッケージを用意する yarn add firebase firebase-tools ❷ package.jsonを編集する package.json { "name": "gps-distance", "scripts": { "login": "firebase login", "init": "firebase init", "emulate": "firebase emulators:start", "deplo…
https://docs.m5stack.com/ja/core/m5stickc_plus より引用前回作ったCloud Functionsの関数のHTTPトリガーをWiFiに接続したM5StickC Plusから叩いてみます。blog.kimizuka.org WiFi接続 HTTPリクエスト JSONのパース と、やらないといけないことがいくつか…
前回は、モジュールバンドラー無しでCloud Firestoreをさささっと使いましたが、今回は、Cloud Functionsを使って、Cloud Firestoreに保存した値を読み取るウェブAPIを作ります。blog.kimizuka.org実際のところ、今回の用途（Cloud Firestoreに保存した値を…
かつて、Firebase Hosting + Cloud Firestore + Firebase Authenticationを使いつつ、モジュールバンドラー無しのプロトタイプを作ったことがありました。blog.kimizuka.org今回もモジュールバンドラー無しで、Cloud Firestoreをさささっと使うプロトタイプ…
