@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

Web

ブラウザからJavaScriptモジュールをjQueryとともに使う

ブラウザでJavaScriptモジュールが使えるようになりました。 <script type="module">って書くやつです。 これを使うとimport/exportを使ってモジュール感の依存関係が解決できます。 これまでは人間がscriptタグの順番を決めるか、Webpackのようなモジュールバンドラーで事前処理す…

FormData

FormData 先週、Form要素のデータがそのまんま欲しくて、はじめて使いました。 そのときは次のようにJSON形式で送信しました。 const formData = new FormData(document.bookForm); const name = formData.get("name"); const age = formData.get("age"); co…

FirefoxでAsynchronous Clipboard APIのwrite, read, readText関数を使う方法

Firefox 95.0でAsynchronous Clipboard APIのwrite, read, readText関数を使うには以下の設定が必要です。 高度な設定 Firefoxのアドレスバーにabout:configと打ち込むと、高度な設定が出来ます。 Firefoxのアドレスバーにabout:configを入力して高度な設定…

JavaScriptでご利用の端末がAndroidか確かめる

結論 function isAndroid() { return /Android/.test(navigator.userAgent) } にしました。 経緯 AndroidのChromeブラウザでは、一番上までスクロールしてさらに下方向にドラッグするとリロードします。 このときだけ window.onbeforeunload = () => true を…

Clipboard Events APIではpreventDefaultを呼ぶ必要がある

https://w3c.github.io/clipboard-apis/#override-copy To override the default copy event behavior, a copy event handler must be added and this event handler must call preventDefault() to cancel the event. window.addEventListener('copy', (e) …

clipboardchangeイベントは実装されていない

Clipboard API and events を読んでいたらclipboardchangeイベントというsyustem clipboardに変化があったら発火する、便利そうなイベントがありました。 次のようなコードを試してみました。 window.addEventListener('clipboardchange', () => { console.l…

FirefoxではAsynchronous Clipboard APIを使ってもクリップボードから読み込めない

Clipboard API and events を読みました。 Asynchronous Clipboard APIを使ったサンプルをCodepenで作りました。 Google Chromeだと、全部動きます。 FirefoxだとwriteTextしか動きません。writeはwriteで書き込むためのClipbordItemがサポートされていない…

ブラウザを起動している端末がモバイル機器であるか判定すること

stackoverflow.com を参考にして、次の関数で判定してみました。 function () { return ( 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ) } タッチ出来るかどうかで判定します。 これだとsurfaceみたいなタ…

Firefoxでdragenterイベントが2重に発火することがある

Firefoxでdragenterイベントが2重に発火する現象を見つけました。 再現するCodepenを作りました。 See the Pen dragenter by shigeru.nakajima (@ledsun) on CodePen. ファイルを青い四角にドラッグすると表示が変わります。 このときFirefox 94.0.2 (64 ビ…

importmapを手書きするとつらいこと

VSCodeがinvalidなJSONを検出してくれない VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。 <script type="importmap"> { "imports": { "action-stream": './node_modules/action-stream/index.mjs', } } </script> JSONなので、シングルクォートもケツカンマも許容されませ…

HTMLのscriptタグのdefer属性

HTMLのscriptタグにdefer属性があります。 これを使うと何が嬉しいのでしょうか? スクリプトがDOM構築に与える影響 スクリプトはdocument.write を実行してHTMLを操作することが許されています。 このため、ブラウザは<script>タグを見つけると、DOM構築を一度停止…