タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
毎年恒例のひとりアドベントカレンダーです。 ちなみに去年は DevTools の話でした。 本年もよろしくお願いいたします / 知名度が低いウェブ標準Advent Calendar 2021やります。ひとりで。 https://t.co/7VMyWIu5Ss — 高梨ギンペイ (@ginpei_jp) December 1, 2021 TreeWalker API widows fieldset filter: drop-shadow() Pointer Events indeterminate auxclick download Proxy wbrで単語の途中で改行 composedPath()で一気に遡る touch-actionでスクロールやズームを止める elInput.valueAsNumberで最初から数値 enterkeyhintでエンターキーの外観 setPointerCa
captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。 基本的な使い方 デモはスマホで見てね。 あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。 PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。 値 capture, captu
type=”email”は使わない方が良いんじゃないか（ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。 デモ： https://codepen.io/ginpei/pen/dPbWQKB @ だけ見るのが良いのでは 先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。 というわけでこれでどうですか。 メールアドレスの検証 メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP ア
こんなタイミングだけどアドベントカレンダーじゃないです。 先にまとめ apt install imagemagick /etc/ImageMagick-6/policy.xml を編集して PDF を許可（安全性に自信がある場合） $ convert a.pdf a-%03d.png 今回の環境 Ubuntu 18.04.3 on WSL インストール そのまんまのパッケージがあった。 $ apt search imagemagick | grep "^imagemagick/" WARNING: apt does not have a stable CLI interface. Use with caution in scripts. imagemagick/bionic-updates,bionic-security,now 8:6.9.7.4+dfsg-16ubuntu6.8 amd
USB接続したAndroid端末内のページをPCのDevToolsでデバッグする（なおRemote Devicesパネルはなくなりました）（ひとり DevTools Advent Calendar 2020 – 03日目） | Ginpen.com
3 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 最近は DevTools のエミュレート機能も強くなってはきましたが、まだまだ実機で確認する必要性は高いことと思います。PC と Android 端末を繋げて、端末内のウェブページを DevTools でデバッグできます。 DevTools で Android 内のページを開いた様子。画面も表示され、実機のものと連動する。 Android で開いているページをデバッグする 以下の手順で行います。 Android 側でデバッグ機能を許可する（初回） 端末を接続 対象を選択してデバッグを開始 Android 側でデバッグ機能を許可する（初回） 最初に 1 度だけ必要。 開発者モードを設定 Android 端末の設定で「ビルド番号」を表示 Android OS のバージョンによって場所が違
WSLのapt updateでRelease file is not valid yetと言われたらWSLの時刻がずれてるかも。 | Ginpen.com
apt install で 404 になってたので先に apt update すっかーと思ったらそっちが謎のエラー。”not valid yet” って。”yet” って。 Release file for http://security.ubuntu.com/ubuntu/dists/focal-security/InRelease is not valid yet (invalid for another 1h 12min 24s). $ sudo apt update [sudo] password for ginpei: Hit:1 https://download.docker.com/linux/ubuntu focal InRelease Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [114
WSL 2でCannot connect to the Docker daemonと言われたら、デフォルトを確認する。 | Ginpen.com
デフォルトの、なに、ディストロ？を確認してバージョンが WSL 2 になってなかったらそれが原因ぽい。 先にまとめ WSL2 + Docker docker run … でエラー： “Cannot connect to the Docker daemon at unix:///var/run/docker.sock” 対象の WSL2 のディストロをデフォルトに設定して再起動 同様のエラーは様々な原因がありそうなので、これで解決しないかも 状況 Windows 10 はこう。 >wsl --list --verbose NAME STATE VERSION * Ubuntu Running 1 docker-desktop Running 2 Ubuntu-20.04 Running 2 docker-desktop-data Running 2
ここまでのあらすじ：ESLint は便利。でも実行すると妙に遅い？ CI の実行時間には問題なく、VS Code のプラグインもストレスなく動く。でも手元のコンソールから実行するととても遅い……というか一生終わらない。どうして？ どこかで詰まっている？ なにが？ 先にまとめ ビルドファイルなんかが対象になってるかも DEBUG=eslint:* eslint . で実行し、詳細出力 目的でないファイルが含まれていないか確認 ignorePatterns へ追加して除外 なんか遅い…… あるとき大きめの自動変更をしました。 目視確認の前に機械的に判断できるものは判断してしまおうとコンソールから ESLint を実行したところ……終わらない。ESLint のエラーは VS Code 上ではちゃんと出てくるし、CI もご機嫌に回っているので特に気にしていなかったんですが、どこかに何か問題があるよ
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
indeterminate（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 06日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 06 日目 チェックボックスはオン・オフを表現するのに使われますが、未決定 indeterminate というオン・オフどちらでもない（あるいはどちらでもある）状態があり得ます。 JavaScript から indeterminate プロパティを操作するとそれを設定できます。また CSS では擬似クラス :indeterminate を用いてスタイルをあてることもできます。 またまだ選択されていないラジオボタンもこの未決定状態とみなされます。 <input type=”checkbox”> – HTML: HyperText Markup Language | MDN →未決定状態のチェックボックス デモ：indeterminate example 基本的な使い方 設定するには JavaScript から。HTM
JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目） | Ginpen.com
20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 02 日目 今日は DevTools で width と間違えて入力してしまいがちプロパティ第 1 位（おれ調べ）だった widows です。近年は補完の優先度が付いたのか事故はなくなりました。 widows – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/LYzEKBx DevTools で width と入力しようとして候補先頭の widows を選択してしまうところ。 基本的な使い方 例えば本を読んでるとページをめくって先頭に「です。」が来ていてすぐそのまま次の段落へ改められる、という様子を目にしたことがあるかと思うのですが、あれを防ぐことができます。 文章末尾の数文字だけが次の段落へ送られている様子。 widows は column
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
Coverageで使ってないコードを検出（ひとり DevTools Advent Calendar 2020 – 18日目） | Ginpen.com
18 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 たくさんコードを書いて書き足して消して書き直して消して書き換えてって繰り返してると「あれこれまだどこかで使ってるっけ？」みたいになることがあります。近年は VS Code が灰色で表示してくれたり ESLint で検出 できたりもできるけど、でも別ファイルからも使えるようなやつだとそういうのも厳しい感じです。 あと CSS の使われていないスタイルも。 DevTools にはそういうものを検出する機能があります。 先にまとめ Coverage パネルを使って未使用箇所や割合を計測 まともにやるならツールを 未使用コードを検出 DevTools の右上 “…” → More tools → Coverage 指示に従い reload ボタンを押す 画面は再読み込みされる 必要に応じて
フォームはEnterキーで送信できるようにする（ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ： https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の
VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目） | Ginpen.com
22 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 VS Code はウェブ開発に便利だな～、いっそブラウザーのタブも表示できないかな～、そう考えのあなたに朗報です。できます。 題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。 デモプロジェクト よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。 ginpei/vscode-debug-web-demo 本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。 Microsoft Edge Tools で VS Code 内にブラウザーの
download（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 08日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 08 日目 今日は <a> で使える download 属性です。 <a>: アンカー要素 – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/rNGeqry 基本的な使い方 通常 <a> のリンクをクリックすると画面遷移しますが download 属性を与えるとファイルをダウンロードするようになります。 属性の値は空か、ダウンロードするファイル名の初期値を指定することもできます。 利用可能なもの、不可能なもの 何でもダウンロードさせられるわけじゃなくて、ちょっと制限があります。 同一オリジンの URL blob: な URL data: な URL 他人のところのリソースをダウンロードさせることはできません。 使いどころ
setPointerCapture()でdocumentでonmousemoveしなくて済む（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 15日目） | Ginpen.com
ちなみにそれぞれ gotpointercapture と lostpointercapture イベントが発火します。 何が嬉しいか mousemove イベントを使って自前でドラッグを作ってみると直面すると思うんですが、このイベントって対象要素上でマウスカーソルを動かしたときにだけ反応しますね。 経験ない人からすると何当たり前のこと言ってんだって感じだと思うんですけど、こんなときに困るんです。 マウスカーソルを素早く操作して対象要素の外へ出てしまう デザインの都合上、重なり手前に表示される要素がある デモで右端を掴んで右側へドラッグしてみてください。たぶん止まります。カーソルを戻して、ゆっくり、はみ出ないよう少しずつ動かすとドラッグできます。 対処としては対象要素じゃなくて document の方で mousemove を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知名度が低いウェブ標準Advent Calendar 2021やります。ひとりで。 | Ginpen.com
ImageMagickでPDFをPNGやJPEGに変換する。 | Ginpen.com
ESLintが妙に遅いとき、不要なファイルを読んでないか確認して除外しよう。 | Ginpen.com
widows（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 02日目） | Ginpen.com
ameblo.jp/motoyuki2013
minako3.ht.gob.jp
nichikonokiroku.hatenablog.com
sakamichijyoho46.blog.jp
love-spo.com
barusu-z.hatenablog.com