はじめに Expressでウェブサーバを建てる際、http://localhost:3000 でアクセスすることが多い（ポートが3000の場合）のですが、自前で証明書を準備して、https://localhost:3000 でアクセスできるように設定してみます。僕の開発環境がMacOSなので、MacOSで…

5年前ぐらい前につくった紙吹雪をJavaScriptからTypeScriptに移植してみました。 Canvasに紙吹雪をレンダリングする基本方針はそのままに、ちょっとだけ挙動を変更しています。 具体的には、TypeScriptバージョンは紙吹雪が舞い散り終わった後、ループさせず…

developer.mozilla.orgtransform-matrixを使って、クリックした箇所を基準に2倍に拡大する四角形をつくりました。もう一度クリックすると元の大きさに戻ります。 DEMO ソースコード JavaScript const rect = document.getElementById('rect'); let scale = 1…

Macのトラックパッドのピンチイン・ピンチアウトをJavaScriptで取得したい場合、wheelイベントを使います。 ピンチイン・ ピンチアウト、ホイールを区別しない場合 DEMO ピンチイン・ピンチアウト、マウスホイールで値が更新されます ソースコード（抜粋） …

追記 公開しました！chrome.google.com 以前作成した、こちらのブックマークレット。blog.kimizuka.orgいまでも愛用しています。 先日、Goolge Chromeの拡張機能の作り方を調べたところ、非常に簡単だったので移植してみることにしました。さらには勉強のた…

ひさしぶりに、Goolge Chromeの拡張機能をつくることになったので、メモを残しておきます。 どれぐらいひさしぶりなのか調べてみると、僕が最後に拡張機能をつくったのが、2015年12月だったので、かれこれ7年ぶりでした。 その間に、manifest_versionが2から…

DEMO clip-pathで切り抜いたDOMをhtml2canvasで画像化すると、clip-pathが無視されます。 もろもろ試したところ、dom-to-imageというライブラリを使ってみると、しっかりとclip-pathを反映することができました。github.com html2canvasで画像化 dom-to-imag…

ことの発端 blog.kimizuka.orgかつて、Drag and Drop APIを試したことがありましたが、最近になってiPadで動作していないことに気がつきました。（iOS 15.6にて確認） iOS 15.6で動作しなかったDEMO（Drag and Drop API） caniuse.comCan I use では、iOS15…

ローカルで立ち上げたサーバをさくっとグローバルに公開したいとき、ngrok が便利です。ngrok.com 準備 ❶ ngrokのアカウントを作る https://ngrok.com/ の「Sign up」からアカウントを作成します。 ❷ authtokenをメモする https://dashboard.ngrok.com/get-s…

imagemin と imagemin-pngquant を使って、ディレクトリ内のPNG画像をまるっと軽量化するスクリプトを書きます。 www.npmjs.com www.npmjs.com 実装方法 ❶ 必要なパッケージをインストールします yarn add -D imagemin imagemin-pngquant ❷ distディレクトリ…

需要があるかは謎ですが、長方形を扇のように分割するコードを書いたので、記録を残しておきます。 DEMO HTML <canvas></canvas> <input type="number" value="5" min="1" max="18" /> JavaScript const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let length = 5; canvas.width = 400; c…

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

ことの発端 調査（Issueを発見） さらに調査（プルリクエストを発見） 検証 左（ブレンドモードなし） HTML 中央（ブレンドモードあり） HTML 右（ブレンドモードあり） HTML 画像化 左（ブレンドモードなし） 中央（ブレンドモードあり） 右（ブレンドモー…

以前、iOS15でWeb Share APIを試しました。blog.kimizuka.orgその際は気づかなかったのですが、ファイルを複数シェアしようとすると順番が保証されないということに気づきました。 DEMO https://develop.kimizuka.org/web-share-api-multiple-files/Web Shar…

ことの発端 かつて導入した nodenv 。blog.kimizuka.org nodenv install -lでインストールできるバージョン一覧を表示した際、インストールしたいバージョンが表示されないので更新の方法を調べ始めました。 結果として、anyenv を使ってインストールしてお…

特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < &lt; > &gt; " &quot; ' &apos; & &amp;こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…

iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、‍️という絵文字。 [...'‍️']; // => ['', '‍', '', '️']と言う感じで、 と に分かれてしまいます。そ…

Drag and Drop APIを検証しました。developer.mozilla.org 実装手順 最小構成だと、 ドラッグ可能にしたい要素のdraggableをtrueに設定する ドロップ可能にしたい要素にdragoverイベント、dropイベントを設定する dragoverイベント、dropイベントに設定した…

changeイベントを使うと値の確定時、inputイベントを使うと値の入力時に発火します。 DEMO 百聞は一見にしかずなのでDEMOを操作してもらうのが一番早いです。

以前作成・検証した、Googleカレンダーの予定名を「予定あり」に変更するスクリプト、html2canvasでのスクリーンショットの撮影、ユーザークリックなしのファイルダウンロードを組み合わせたブックマークレットをつくりました。 blog.kimizuka.org blog.kimi…

最近、(new Date).getMonth()の結果を英語にする機会がありまして、愚直に、 [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][(new Date).getMonth()]; 的なコードを書いた…

html2canvasを使ってHTMLの画像化を試みました。

スプレッドシートに描いた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…