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

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

JavaScript

ヘッダーをfixedにするときに心掛けて欲しい、たった2つのこと 2️⃣

DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…

M5StickC[obniz無期限ライセンス付属]の加速度センサにアクセスする 💻

obniz.io obnizとは 株式会社 CambrianRobotics(カンブリアンロボティクス)がつくっている、obnizという名のデバイスです。 そしてobnizOSという名のOSのことを指すこともあります。 M5StickC[obniz無期限ライセンス付属]の中のobnizはobnizOSのことを指し…

afplayコマンドをつかってMacにてターミナルからコマンドで音楽ファイルを再生する 💻

OSXのコマンドに afplay というものがありまして、これを使うとターミナルから音楽が再生できます。おそらく Audio File Play ということなんだと思います。違うかもしれません。 もうちょっと調べようと思ったのですが、OSXのコマンド一覧や、afplayのドキ…

PixiJSでviewに設定したCanvasをタッチの起点にした際もウィンドウのスクロールを可能にする 👼

www.pixijs.comPixiJS をつかって、前面Canvasのサイトをつくっているときには気づかなかったのですが、ファーストビューがCanvas(PixiJSでレンダリング)で、その下にコンテンツがつづくページを実装していた際に気付きました。PixiJSのviewに設定したCanv…

Macが接続しているWiFiのSSIDをコードから取得する 📡

Macが接続しているWiFiのSSIDなどステータスバーを見れば一目瞭然なのですが、今回はSSIDをコードから取得する方法を調査しました。 ターミナルから調べる Node.jsで調べる ターミナルから調べる /System/Library/PrivateFrameworks/Apple80211.framework/Ve…

Nintendo Switch ProコントローラーをMacに接続してGamepadAPIでイベントを受け取る 🎮

Gamepad APIをつかって、ブラウザからコントローラーの入力を取得。https://t.co/EQ4CxCylO6 pic.twitter.com/JuQ3At6RNP— 君塚史高 (@ki_230) 2020年7月3日 昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad …

Nintendo Switch ProコントローラーをMacに接続してNode.jsでイベントを受け取る 🎮

接続方法 ボタンイベントのコールバックを登録する ソースコード プルリクエストをつくる Nintendo Switch Proコントローラー、通称プロコン。www.nintendo.co.jp 世界のアソビ大全用に購入したのですが、複数人でのプレイ時には使用できず、どうしたものか…

Three.jsをつかってGETパラメータをキューブとして描画するウェブサイトをつくる 📦

ひょんなことからGETパラメータを基にキューブを生成してくれるサイトをつくってみました。develop.kimizuka.org 使い方 ❶ https://develop.kimizuka.org/cube/?1,1,1,1,1,1,1,1という形でGETパラメータにカンマ区切りで1を渡すと、1x1のcubeを8個並べてcube…

NuxtJS + TypeScript(nuxt-property-decorator) + Firebase Hosting + Cloud Functions でSSR環境をつくった際に {"code": "MODULE_NOT_FOUND"} になってしまったので調査した 🔥

いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…

同一WiFiに繋がっているGoogleHomeを探して音楽を再生するサーバを立てる 🔈

ユーザーが音声で質問したことに回答してくれる、夢のデバイス、スマートスピーカー。 スマートスピーカー向けのアプリケーションをつくるのも比較的簡単で、これまで僕も何本かリリースしてきました。amzn.tohttps://amzn.to/2Z7Koiyamzn.toしかし、スマー…

chartist.jsをつかってGETパラメータを円グラフとして描画するウェブサイトをつくる 📊

JavaScriptでグラフを描画したいときに使うライブラリとしては、Chart.jsが有名です。www.chartjs.orgしかし、今回はchartist.jsを試してみました。 理由はChart.jsよりシンプルそうだったからです。gionkunz.github.iochartist.jsの使い方はexamplesをみた…

スマートフォンのキーボードが表示された際にコンテンツが隠れないようにハンドリングする ⌨️

「ブラウザ版のYouTubeでもコメントを打ちながら動画を見たい」そんな体験を実現するための実装方法を検討してみました。 ことの発端 やりたいこと DEMO どうにかしてキーボードが表示されていることをキャッチするかを考える focusイベント案 リサイズイベ…

JavaScriptで非復元抽出を実装する 🎁

元来、抽選方法には「復元抽出」と「非復元抽出」がありまして、 復元抽出 抽出された要素を除外せずに再び母集団に戻して無作為抽出を行う抽選方法 非復元抽出 無作為抽出を何度か繰り返して行う場合、既に抽出された要素を母集団から除外して無作為抽出を…

JavaScriptで数字に英語の序数(st nd rd th)を追加する 🥇

ランキングを作成する際に、 getRankingText(1); // => '1st' getRankingText(2); // => '2nd' getRankingText(3); // => '3rd' getRankingText(4); // => '4th' getRankingText(5); // => '5th' . . . getRankingText(11); // => '11th' getRankingText(12)…

緊急モーションセンサにアクセスしてノートパソコンの本体向き、加速度を取得する 💻

いまからざっと10年前、そう2010年にFirefoxをつかって、MacBookの緊急モーションセンサ(加速度センサ)にアクセスした記憶があるのですが、ふと、「そういえば、最近はMacBookのブラウザでDeviceMotionEventにアクセスしても値が入ってこないな」と思った…

ApexをつかってLambdaファンクションをデプロイする 🖥

github.comAlexaスキルの開発ためにLambdaを使ってまして、LambdaへのデプロイにはApexをつかっています。LambdaのNode.jsランタイムをアップグレードすべく、1年ぶりぐらいに使おうと思ったら、すっかりと使い方を忘れていたため、Macへの導入手順とつかい…

gyp: No Xcode or CLT version detected! 🔨

Macにnpmやyarnでパッケージを追加しようとすると、稀に、 gyp: No Xcode or CLT version detected!と表示されて、npm install がうまくいかないことがありました。 なんとなく「Xcodeをアップデートしたあとに、一度も起動していないとコマンドラインツール…

IE11でdatasetをつかってdata属性を動的に更新すると属性セレクタで指定したスタイルが反映されない 💻

結論 IE11ではdatasetでdata属性を更新してもスタイルが反映されない IE11でもsetAttributeでdata属性を更新すればスタイルが反映される! 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…

canvasをつかって画像を歪ませる 📷

ほんのりと画像を歪ませる検証をしたく、npmを探したり、PixiJSのDisplacementFilterを試したりしてみたのですが、検証なので力技で自作した方が手っ取り早かろうということで自作してみました。本当はシェーダーでできそうな気がするのですが、力技なんで、…

JavaScriptで絵文字を含んだ文字列のlengthを取得する ✏️

JavaScriptで文字列の長さを取得するときは、String.prototype.lengthにアクセスすればOKです。 const text = 'こんにちは'; console.log(text.length); // => 5 ただし、絵文字を含む文字列の場合は、String.prototype.lengthでは期待通りの値が返ってこな…