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

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

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

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

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

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

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

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

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

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

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

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

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

ランキングを作成する際に、 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にアクセスしても値が入ってこないな」と思った…

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

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

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でもsetAttributeでdata属性を更新すればスタイルが反映される！ 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…

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

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

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