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

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

2020-06-01から1ヶ月間の記事一覧

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"} と表示されるので、なにかモジュ…

scroll-snapをつかってスクロールをぴたっと止める 📱

CSS

先日、「最新のSafariとChromeで観覧できればOK!」というウェブサイトを実装することになりまして、これはチャンス!ということで、前々から気になっていたscroll-snapを実戦投入してみました。developer.mozilla.orgJavaScriptを一切書かずに、ぴたっと吸…

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

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

.bash_profile を .zprofile にまるまるコピーする 💻

Mac

macOS Catalina(10.15)から、ターミナルで動くシェルがbashからzshに変更になりました。 それに伴い、いままで使っていた .bash_profile を .zprofileにまるまるコピーしようと思いまして、 cat ~/.bash_profile >> ~/.zprofileという感じでコピーしたので…

Oculus QuestとMacの間でファイルを転送する 👓

Mac

Oculus QuestのOSはAndroidベースなので、 Android File Transfer を使えばファイルを転送できます。www.android.comただし、開発者モードをONにしていると転送できないので注意が必要です。 ファイル転送までの手順 ❶ 開発者モードをOFFにする Oculusアプリ…

input type="number"についている上下ボタン(スピンボタン)の見た目をCSSで調整する 1️⃣

CSS

数字を入力することに特化した、input type="number"ですが、デフォルトで入力値をインクリメント・デクリメントさせるボタンがついてます。 webkit系のブラウザに限られますが、実はこちらのボタン、CSSを当てることが可能です。 その名も、-webkit-inner-s…

Firebaseのリアルタイムデータベースで読み込みは誰でもOK、書き込みは事前に許可したGoogleアカウントのみに限定するルールの書き方 🔥

結論 背景 Realtime Databaseのルールの書き方 ルールのサンプル 全員読み書き可 全員読み書き不可 全員読み込み可、書き込み不可 全員読み込み可、事前に指定したGoogleアカウントのみ書き込み可 注意事項 結論 { "rules": { ".read": "true", ".write": "a…

Window10搭載機がWiFiに繋がらない、5GHz帯に関してはSSIDが表示すらされないときの対策 🔎

Windows機のWiFiが急に調子が悪くなりました。 5GHz帯のWiFiをまったく認識しなくなったり、2.5GHz帯に繋いでも、すぐ切れてしまったり、たまに繋がってもスピードが全然出なかったりという感じです。Webでいろいろ検索したのですが、なかなか解決せず。 最…

Twitterカードは投稿後に差し替え可能 🦜

Twitterカードとは ウェブサイトにTwitterカードの設定をしておくと、タイムラインに投稿された際に展開されます。上記の例では、画像やサイト名が展開されてますが、動画を展開したり、iframeを展開したりすることもできるので、なかなかいろんなことができ…

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

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

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

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

Cloud Functionsのリージョンは簡単に変更できるが、Firebase Hostingと組み合わせて動的なHTMLを返そうとすると変更すると問題が出てくる 🌍

すべてはドキュメントに書いてあることではあるのですが、週末にほんのりはまったのでメモを残しておきます。 Cloud Functionsとは Google Cloud Functions は軽量なコンピューティング ソリューションであり、デベロッパーはサーバーやランタイム環境を管理…

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をアップデートしたあとに、一度も起動していないとコマンドラインツール…

CSS関数で属性セレクタの値を取得する 💻

CSS

developer.mozilla.org CSS関数のattr()をつかえば、属性セレクタの値を取得することができます。 昨日、属性セレクタを調べているときに知りました。 HTML <div data-text="Ya-Ha-!"></div> CSS [data-text]:before { content: attr(data-text); } と書けば、 [data-text]:before { content…

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

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

iOSシミュレータ(Version 11.5) + Safari でWebインスペクタをつかったデバッグがうまくいかない(macOS 10.15.5)📱

iOS

結論 あらすじ 疑ったこと ❶ Mac側のSafariの設定 ❷ iOSシミュレータ側のSafariの設定 結論 Safari Technology Preview を使うことで解決しました! あらすじ iOSシミュレータとMac版SafariのWebインスペクタでウェブサイトのデバッグを試みた Developメニュ…

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

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

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

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