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

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

Next.jsでコンポーネントをインポートするときにNuxt.jsのように「~」や「@」を使いたい 💻

これまで、Next.jsでコンポーネントをインポートする際は、相対パスを使っていたのですが、コンポーネントを別のディレクトリに移動した際に、パスを書き換えなければならないこともしばしばありまして。Nuxt.jsのように「~」とか「@」を使う方法はないもの…

Nextプロジェクトにbabel-plugin-inline-react-svgを導入したときに、Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.と表示される時の対策 ✌️

ことの発端 以前、Next.jsでSVGをコンポーネントのように扱う方法を調べました。blog.kimizuka.org今日もまた、いつものようにbabel-plugin-inline-react-svgを使ってSVGを読み込もうとしたのですが、 Error: Element type is invalid: expected a string (f…

GAFAのfont-familyを調べて、フォントの指定を再考する 📝

CSS

結論 調査結果 Google Apple Facebook Amazon Microsoft Twitter Instagram フォントの指定を考える ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。 最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウ…

micro:bit(マイクロビット)とGoogle ChromeをWeb Bluetooth APIで繋ぐ 🟦

タイトルの通りです。micro:bitとGoogle ChromeをWeb Bluetooth APIで繋ぎました。 Google Chromeからmicro:bitのLEDマトリクスを制御します。まず、micro:bitの説明は端折りますが、簡単に説明すればマイコンです。 英国では11〜12歳の子供、全員に無償で配…

Atom Matrix(ESP32-PICO-D4)に搭載されている加速度センサの値を取得し、下を指す矢印を表示するコードをArduino IDEから書き込む 👇

Atom Matrixを購入したので、Arduino IDEからコードを書き込んできました。www.switch-science.com 完成したもの 本体を傾けると下方向を指す矢印を表示します。 ここに至るまでにやったことを順を追って説明していきます。 Atom Matrixの仕様を確認する 公…

THREE.MeshStandardMaterialのmetalnessを1にすると環境光源(THREE.AmbientLight)が当たってないように見える 👀

Three.jsに3Dモデルを読み込んだとき、時々、環境光源(AmbientLight)が当たらないモデル(平行光源・DirectionalLightや点光源・PointLightなど他のライトは当たる)がありまして、しょうがないので他のライトで照らしていたのですが、やっぱり気になるの…

JavaScriptで6桁のカラーコード(#ffffff)をrgb(255,255,255)に変換する 🎨

ウェブアプリの開発中に、#ffffff → 255,255,255 みたいな変換が必要になりました。 こんな処理は絶対に誰かが書いているはずだ。と思い調べてみたところ、www.npmjs.comばっちり見つかりました。ソースコードも37行とかなり短く、これを使おうかなとも思っ…

Arduinoで関数に配列を渡す 💻

ポインタを渡せば関数の引数に配列を渡すことができます。 void setup() { Serial.begin(9600); } void loop() { int arr[] = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; checkArr(arr); delay(1000); } void checkArr(int *arr) { Serial.println(arr[9]); // → 9 …

ElectronでBrowserWindowではなく外部ブラウザを使う 💻

起動した際に、・expressでサーバを立てる(ポートは3000) ・publicディレクトリの中身をホスティングする ・socket.ioでサーバとクライアントの通信を行う(ipc通信の代替) ・Google Chromeを起動しhttp://localhost:3000を開く(Chromeのダウンロードは…

iOS15のmobile Safariに搭載されたWeb Share APIを試す 📱

developer.mozilla.org developer.mozilla.org以前からAndroidのChromeには搭載されていたものの、iOSのSafariには搭載されてなかったWeb Share APIですが、iOS15にてついに有効になったとのことなので、早速実装してみました。一番ハマったところは、naviga…

iOS15のmobile Safariに搭載されたPull to Refresh(引っ張って更新)を強引に無効にする 📱

iOS

❶ 画面全体をoverflow-y: scrollの要素で囲う ❷ overflow-y: scrollの要素をちょっとスクロールさせておく ❸ overflow-y: scrollの要素のスクロール位置を監視してscrollTopが0にならないようにするの3点を実装することで、Pull to Refreshを強引に無効にす…

iOS15のmobile Safari、MacのSafari 15からmetaタグでテーマカラーが指定できるようになった模様 📱

今朝、iOSを15にアップグレードしつつ、Mac版のSafariも最新にしてみたところ、どちらもサイトによってメニューバーやナビゲーションバーの色が変わるようになってました。Safari15から、theme-colorを評価するようになったようです。developer.mozilla.org…

position: fixedで位置を指定した要素の親要素にoverflow: hiddenを指定を併用したい場合、親要素のtransform, perspective, filterを指定する 👀

CSS

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…

改めてwidnow.closeの挙動を確認する(target="_blank"で開いたwidowを閉じる) 🚪

developer.mozilla.orgMDN Web Docsにてwindow.closeの仕様を確認してみると、 Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。このメソッドが許可されるのは、window.open() メソッドを用いたスクリ…

Reactでchildrenにpropsを渡す 👨‍👩‍👧

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…

TypeScriptでthisの型を指定する 👨‍🏫

functionで宣言した関数の中でthisを使うと、 'this' implicitly has type 'any' because it does not have a type annotation. とエラーが出ます。アローファンクションと近い、functionによる関数宣言は実行方法によってthisが変化するからです。TypeScrip…

Node.jsでimport・exportを使う 💻

Node.jsで普通にimportを使おうとすると、 SyntaxError: Cannot use import statement outside a module と怒られます。いままではおとなしくrequireを使ってきましたが、世間はもう2021年。子供の頃思い描いていた未来です。 そう。流石にimportを使いたい…

Macでelectronとserialportを組み合わせてアプリを作る ⚡️

4年ぐらいぶりにシリアル通信を行うElectronアプリを作りました。おぼろげながら、 electronとserialportを普通に組み合わせるとエラーが出る rebuildすると使える という4年前の記憶がありまして、まずは、electron + serialportで中身が空っぽのアプリを作…

webpackでバンドルするスクリプト内で実行したスクリプト名を取得する 💻

process.env.npm_lifecycle_event で取得できます。Next.jsのexport設定を本番とステージング環境用で分ける際、 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "export-staging": "next build && n…

jQueryのclosestをjQuery無しで使いたい時は、Element.closestの出番 🔍

jQueryのclosetとは querySelectorは己の子要素を検索するメソッドですが、closetは逆に己の親を検索する、jQueryオブジェクトのメソッドです。api.jquery.com Given a jQuery object that represents a set of DOM elements, the .closest() method searche…

microCMSのYouTube埋め込みの横幅を100%に変更する 📝

microCMSのリッチエディタですが、下記サービスの埋め込みに対応しています。 YouTube(https://www.youtube.com/) Vimeo (https://vimeo.com/) Twitter (http://www.twitter.com/) Instagram (https://instagram.com) Facebook (https://www.facebook.com/…

git pullしようとした際に「error: cannot lock ref」というエラーが出たので解決策を探る 🐱

Git

git remote prune originで、リモートで削除されたリポジトリをローカルに反映したらpullできるようになった。

JavaScriptで角度の平均を計算する 🧮

ベクトルを合算し、原点からの角度を出すのがセオリーのようです。関数にするとこんな感じです。 function getAverageAngle(angles = []) { let x = 0; let y = 0; angles.forEach((angle) => { x += Math.sin(angle / 180 * Math.PI); y += Math.cos(angle …

myCobotをPythonから動かすための準備をする 🤖

Mac

MacとmycobotをUSB-Cで繋いで、python3経由で操作するための設定方法をまとめておきます。 ファームウェアの書き込みだけうまくいかず、Windows機を使いました。 myCobotとは Elephant Robotics社とM5Stack社が共同で製作した6軸の可動域を持つ協働ロボット…

Error: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts を解決する 💡

Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts とエラーが出ました。指示さ…

iOS13以降、DeviceMotionEventにアクセスするためにはパーミッション取得が必要 📱

実装のたびに調べている気がするので、まとめておきます。iOS12.2からブラウザから加速度センサの値にアクセスするには、ユーザーからパーミッションを取ることが必須になりました。iOS12.2では設定アプリからパーミッションを取る形式だったのですが、iOS13…

Googleカレンダーの予定名を隠すスクリプトをつくりました 📅

会社勤めだったころは、同僚のGoogleカレンダーを確認できたので、空いてる時間を探せたり、探してもらえたりしたのですが、フリーランスでリモートで仕事を進めていると、そうはいかず、オンラインミーティングの日程を合わせるのがやや大変だったりします…

forwardRefを使って子コンポーネントにrefを渡す 👦

forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…

Next.jsで複数のassetPrefixを切り替えながら使う 💻

ことの発端 めずらしいケースだとは思うのですが、最近、ステージングと本番のURLルートのパスが違う環境でNext.jsを使う機会がありました。ざっくりいうと、 本番 https:/kimizuka.fm/production/ ステージング https:/kimizuka.fm/staging/ みたいな感じで…

ループで生成した要素にuseRefを使う 🔁

creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …