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

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

JavaScript

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では期待通りの値が返ってこな…