IME利用者のEnterが暴発しないようにisComposingで防ぐ | ダーシノ(@bc_rikko)
IME利用者のEnterが暴発しないようにisComposingで防ぐ 海外製Webサービスを利用すると、日本語変換の確定時（Enter押下時）に入力途中のデータがSubmitされてしまうことが多々ある。GitHubのIssue/PRのタイトルしかり、ChatGPTの入力欄しかり。 Enterでフォームを送信するのはWebの標準的な挙動だが、IME利用者（主に日本/韓国/中国語話者など）にとって非常に不便なので変換確定時のEnterのイベントを無効化する処理が必要になる。 そんなときに使えるのがKeyboardEvent.isComposingやElement#compositionstartイベント、Element#compositionendイベントだ。 <form> <label for="title">Title</label> <input id="title" type="te
Webナビゲーションの歴史 | ダーシノ(@bc_rikko)
Webナビゲーションの歴史 Webのナビゲーションは単なる技術的な進化ではなく、ユーザー体験と開発モデルの変化とともに再設計されてきた。URLや履歴、画面状態をどのように一致させるかという問題への解答の変遷だ。 Webの初期 Webの初期は、文書閲覧システムとして設計された。 ページごとにひとつのURLが割り当てられ、ユーザーはハイパーリンクをクリックしてページを移動していた。そのため、ページ遷移の際は常にフルリロードが行われた。 <a href="./toc.html">Table of Contents</a> <a href="./about.html">About me</a> Ajaxの登場 2000年代前半にXMLHttpRequestが登場し、URLはそのまま（ページ遷移しない）でページの一部を更新できるようになった。 しかし、画面の状態とURLと履歴が分離した。（代表的なサ
geolocation要素による位置情報の取得方法 | ダーシノ(@bc_rikko)
geolocation要素による位置情報の取得方法 Chrome 144以降で<geolocation>要素がサポートされた。 JavaScriptのGeolocation APIよりも権限要求や位置情報取得の実装が簡略化された。Geolocation APIでは予期せぬタイミングで権限要求のダイアログが表示されたり、ブラウザがブロックしたり、ユーザー体験が阻害されるケースがあったが、<geolocation>要素ではユーザーの明示的な操作により開始されるので意図とタイミングが明確になった。 <!-- 手動実行 --> <geolocation id="geo-manual"> Fallback: Geolocation element is not supported </geolocation> <!-- 自動実行 --> <geolocation id="geo-auto" auto
生成AIを支える技術: 埋め込みモデル、ベクトル変換、ベクトル検索を手計算で理解する | ダーシノ(@bc_rikko)
上記の共起表からは以下のような情報が読み取れる。 「犬」は「走る」とよく共起するが、「動く」とはほぼ共起しない 「猫」と「寝る」の関連性は、「犬」や「うさぎ」より強い 共起表の具体的な作成ステップ 「A は B です」 … A→Bは近い 「A は C です」 … A→C は近い、かつ C→B とも近い 「B は D です」 … B→D は近い、かつ同じくBが現れる D→A とも近い 「A は B です」 … 同じ文章があるので他の C、D よりも A→B のほうがより近い のように大量の文章を解析し学習していくことで、精度の高い共起表が作成できる。 3.ベクトルに変換する 使われ方の傾向を数値で表すために、共起表の行ごとにベクトルへ変換する。 犬 = (10, 1, 3, 2, 0) 猫 = (9, 15, 3, 0, 0) うさぎ = (5, 2, 10, 1, 0) ロボット = (0
usingを使いリソース管理（解放）を行う | ダーシノ(@bc_rikko)
usingを使いリソース管理（解放）を行う JavaScriptはガベージコレクションを備えているため、スコープを外れると自動的にメモリが解放される。しかし、非メモリリソース（データベースやファイルストリームなど）を扱う場合は、明示的な解放（cleanup）をしないとリソースリークが発生してしまう。 従来のようにtry-finally句を使いコネクションの解放やストリームのクローズ処理を行う場合、忘れずに解放処理を書くことが開発者に委ねられる。そういった煩わしさを解消するためにusingが提案された。 執筆時点では、Stage 3に到達しており、TypeScript 5.2で先行実装されている。 usingの使い方 usingを使うためには、Disposable、またはAsyncDisposableインターフェースを実装する。 Disposable // class FileStream
クエリコンテナ単位とaspect-ratioを使ったマガジンUI | ダーシノ(@bc_rikko)
クエリコンテナ単位とaspect-ratioを使ったマガジンUI ブログやニュースサイトなど、トップページに記事が並んでいるデザインを作るときに、クエリコンテナ単位やaspect-ratioを使うと、最小のCSSでレスポンシブなページを実装できる。 <section class="magazine"> <article> <img src="..." alt="..."> <h2>Title 01</h2> </article> <article> <img src="..." alt="..."> <h2>Title 02</h2> </article> </section> .magazine { display: flex; gap: 1rem; } article { /* アスペクト比を4:3に固定 */ aspect-ratio: 4/3; flex-grow: 1; /* .
background-clipでテクスチャ画像を使ったテキストやボーダーを表現する | ダーシノ(@bc_rikko)
background-clipでテクスチャ画像を使ったテキストやボーダーを表現する Safari 18.2でbackground-clip: border-areaがサポートされた。 サポート状況は以下のとおり。 background-clipを使うことで、background-imageなどで指定した背景を切り抜き、表示することができる。 デザイン性重視のウェブサイトでも、画像をつくって<img src="..." alt="テキストの説明">みたいなことをせずに、そのまま表示できる。ただし、背景画像を透過させるためにcolor: transparentをしているため、background-imageの読み込みに失敗すると何も見えなくなってしまうため、フォールバックのテストが必要だ。 <section class="clip"> Hello world. <section> .clip
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
