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

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

M5StickC PlusをWiFiに接続し、Cloud FunctionsのHTTPトリガーのURLを叩いてJSONを取得する 🔥

https://docs.m5stack.com/ja/core/m5stickc_plus より引用前回作ったCloud Functionsの関数のHTTPトリガーをWiFiに接続したM5StickC Plusから叩いてみます。blog.kimizuka.org WiFi接続 HTTPリクエスト JSONのパース と、やらないといけないことがいくつか…

Cloud Functionsを使ってCloud Firestoreに保存した値を読み取る 🔥

前回は、モジュールバンドラー無しでCloud Firestoreをさささっと使いましたが、今回は、Cloud Functionsを使って、Cloud Firestoreに保存した値を読み取るウェブAPIを作ります。blog.kimizuka.org実際のところ、今回の用途(Cloud Firestoreに保存した値を…

モジュールバンドラー無しでCloud Firestoreをさささっと使う(Ver. 10.13.0) 🔥

かつて、Firebase Hosting + Cloud Firestore + Firebase Authenticationを使いつつ、モジュールバンドラー無しのプロトタイプを作ったことがありました。blog.kimizuka.org今回もモジュールバンドラー無しで、Cloud Firestoreをさささっと使うプロトタイプ…

鎌倉駅までの直線距離を表示するウェブサイトをつくりました 📱

DEMO iza-kamakura.kimizuka.fm リポジトリ github.com 制作経緯 navigator.geolocation.watchPositionの検証のために、現在地から鎌倉駅までの直線距離を表示するだけのウェブサイトをつくりました。developer.mozilla.orgnavigator.geolocation.watchPosit…

vh、dvh、svh、lvhの値を確認するWebページをつくる 📱

vh、dvh、svh、lvh、ついでにwindow.innerHeightの値を観測できるウェブサイトを作りました。https://viewport-height.vercel.app DEMO iOS Safari iOS Chrome iOSのSafariとChromeでvhの扱いが異なることがわかります。 ちなみにAndroid ChromeはiOS Safari…

ブーリアンを使って、Blenderで2つのオブジェクトの差分を取る 📦

最近、Blenderで3Dプリント用のstlファイルをせっせと制作しています。こんな感じで、toio用の治具を作ってみたり、こんな感じで、ATOM Matrixを腕時計のように装着できる治具を作ってみたりと、大活躍中です。Blenderも3Dプリンタも。さて、今回はBlenderで…

Macでelectron-builderで書き出したアプリを開こうとすると「壊れているため開けません。ゴミ箱に入れる必要があります。」と表示される際は拡張属性を削除すると開けるようになる 🗑️

タイトルの通りですが、Macでelectron-builderで書き出したアプリを開こうとすると「壊れているため開けません。ゴミ箱に入れる必要があります。」と表示される際は拡張属性を削除すると開けるようになります。 xattr -rc アプリ名でOKです。

Express + Socket.ioを使って静的なHTMLをホスティングしつつ、サーバとブラウザ間をリアルタイムに通信する(ES Modules編) 📡

こちらの記事のES Modulesバージョンです。 ※ Node.js v20.10.0、yarn 1.22.22 で作成blog.kimizuka.org 必要なパッケージをインストール yarn add express socket.io app.mjsを作成 import { createServer } from 'node:http'; import path from 'node:path…

direnvを使ってディレクトリごとに読み込む環境変数を切り替える 📁

Mac

direnvを使うと、ディレクトリごとに環境変数を切り替えられるようになります。 brewを使ってインストール brew install direnv ~/.zshrcに追記 ~/.zshrc eval "$(direnv hook zsh)"ここで、 export EDITOR=vimという具合にエディタも記載しておくと、 diren…

text-align: justifyやfont-feature-settings: 'palt'でテキストの文字詰めを調整する 📝

CSS

text-align: justify developer.mozilla.orgテキストを両端揃えにします。 厳密に言えば文字詰めとは別の処理なのですが、結果的に文字間が調整されます。 font-feature-settings: 'palt' developer.mozilla.orgOpenTypeのプロポーショナルメトリクスを有効…

Reactでインベーダーゲームのような動きをつくる 👾

前回はReactで等速で往復運動するコンポーネントを作りました。blog.kimizuka.orgこのコンポーネントを複数設置すればインベーダーゲームのような動きが作れると思い、試してみたのですが。※ クリックすると動き出します何かが違う。公式サイトを観察してみ…

Common JSの__diranameをES Moduleで使用する(ReferenceError: __dirname is not defined in ES module scope) 📁

タイトルの通りですが、ES Moduleで__diranameを使う方法です。例えば、index.jsや、index.cjsに、 console.log(__dirname); と記述し、 node index.jsnode index.cjsを実行すると、ディレクトリまでのパスが表示されますが、index.mjsに、 console.log(__di…

WebSocketを使って、Unityアプリとブラウザでメッセージのやりとりを行う ⚡️

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 HTTPリクエスト(POST)でJSONの送信 WebSocketによる通信 今回はここ blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.org今回のモックを作りたくて色々と記事を書いてきましたが、直…

Networking.UnityWebRequestを使って、Cubeがクリックされたときにローカルサーバに対してJSONをPOSTする 📮

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 HTTPリクエスト(POST)でJSONの送信 今回はここ WebSocketによる通信 前々回、前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト(POST)でJSONを送信します。 開発環…

Networking.UnityWebRequestを使って、CubeがクリックされたときにローカルサーバからJSONをGETする 🎁

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 今回はここ HTTPリクエスト(POST)でJSONの送信 WebSocketによる通信 前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト(GET)でJSONを取得します。 Unityアプリに加…