スプレッドシートに描いた16×16のドット絵を配列に変換するGASを書きました。 上記のドット絵が、 const pictures = [ ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffff…

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

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

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

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

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

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

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

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

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

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

ものすごく久しぶりにExpress + Socket.ioでウェブサイトを作ったので、手順をメモしておきます。 ※ Node.js v14.15.0、yarn 1.22.5 で作成 必要なパッケージをインストール yarn add express socket.io app.jsを作成 const express = require('express'); c…

こんな感じで、顔の周りを切り抜くスクリプトを書きました。github.com (function() { window.trimAndResize = trimAndResize; function trimAndResize(canvas, size) { return faceapi.nets.tinyFaceDetector.load('https://justadudewhohacks.github.io/fa…

String.prototype.localeCompare という非常に便利なメソッドを発見しました。引数に'ja'を渡しつつ、Array.prototype.sortと組み合わせることで、日本語を五十音順にソートすることができるようです。developer.mozilla.org [ 'オギノ', 'マーティン', 'ナ…

Null合体演算子たるものを教えてもらいました。 Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。 https://developer.mozilla.org/ja/docs/Web/JavaScrip…

結論 経緯 結論 function isUniq(arr) { return new Set(arr).size === arr.length; } isUniq([0, 1, 2]); // => true isUniq([0, 1, 1]); // => false という感じです。 経緯 配列の中に重複した要素があるかを確認したい場合、lodashを導入しているプロジ…

属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…

github.comこちらのissue に対応するために調査しました。 こんなことは普通はしないと思うのですが、iOSにてページスクロール中にscrollToを使うと、 ❶ ユーザーがページのスクロールを開始する ❷ widow.scrollToでスクロール位置を変更する ❸ （指定箇所ま…

先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データをFirebaseにアップロードしたいと思いました。Next.js + RecorderService.js でブラウザで音声を録音する - みかづきブログ・カスタムそのために、Blob URL → Blob と Blob → Blob…

mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。developer.mozilla.org当初は、 ボイスメモで録音（音声ファイルを生成） どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…

npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…

MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…

HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…

ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…

mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…

canvasタグはcontextのputImageDataを使って、ピクセルデータを編集することができます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = document.createElement('video'); video.src = 'movie.mp4…

ビデオをミュートにすれば自動再生できることは知っていたので、 const video = document.createElement('video'); // ミュートに設定 video.setAttribute('muted', 'muted'); video.setAttribute('autoplay', 'autoplay'); video.setAttribute('loop', 'loo…

公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…