すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
作業配信の動画などでキーボードとマウス操作を可視化できるツール (ゲームなどにも)｜横野まあさ
キーボードとマウス操作が重要となる作業を動画やライブで人に見せたいときに、それらの視覚化をしたいと思うことがあります。 まず3DCGソフト Blender 作業配信の用途に最適だと思ったツールを1つ紹介し、そのあと、同種のツールのリンク集を載せます。 Screencast Keys https://github.com/nutti/Screencast-Keys ある方の Blender 作業動画に、こちらの Screencast Keys が使われており、マウス＋キーコードの表示のみ、かつ白と背景色の2色のみだったので、あまり見ていて疲れなさそうなシンプル設計に惹かれました。 私のほうで撮影したスクリーンショットを載せます。 Blender アドオンとして設定画面からインストールし、利用します。こちらは Blender 専用のアドオンになりますので、Blender 以外の場面では利用でき
モデリングとアーキテクチャの知見を積み上げて基幹システムに可変性を注入する - MonotaRO Tech Blog
こんにちは。 この記事では、2024/5/22に開催された「アーキテクチャを突き詰める Online Conference」で弊社CTOの普川がお話しした内容（ビジネスの構造をアーキテクチャに落とし込みソフトウェアに可変性を注入する〜モノタロウ基幹システム刷新の実践例）を、現場目線から改めてご紹介します。 なお、本稿の執筆は頼と尾髙が分担しておりまして、途中で急に文体が変わったな？と違和感を持たれることもあろうかと思われますが、ご容赦いただけますと幸いです。 本稿をさらに深掘りするイベントを10/4(金)に開催いたします。 ご興味ある方はぜひご登録ください。 https://connpass.com/event/328360/ 問題領域は関連システムの密結合点 分割を試みる 最初のモデルを手に入れる レイヤードアーキテクチャに沿って実装 レイヤードアーキテクチャのメリット モデルを洗練させ
医薬品検索でMySQLの全文検索機能を使った話 - KAKEHASHI Tech Blog
AI在庫管理の開発チームでバックエンドエンジニアをしている沖です。今回は、AI在庫管理の医薬品検索において、MySQLの全文検索機能を使った話を紹介しようと思います。 この記事は秋の技術特集 2024の 8 記事目です。 今までの医薬品検索では満足できないユーザーがいた なぜMySQLの全文検索機能を採用したのか 全文検索機能を導入する 全文検索インデックスを付与したテーブルを作成する パーサー 照合順序と正規化 全文検索インデックスを使用して検索する データを最適な状態に保つために おわりに 今までの医薬品検索では満足できないユーザーがいた AI在庫管理には、医薬品の在庫一覧画面など、医薬品名で絞り込む画面がたくさんあります。この絞り込み機能を実現するために、これまではSQLのLIKE検索を利用していました。 LIKE検索は、使い慣れたSQLを用いて部分一致検索を実現できる便利な方法です
PowerShellで面倒なオブジェクトはPSCustomObjectに変換するのが早道
PSCustomObjectとはそもそもなんぞや PowerShellのパイプラインは、オブジェクトを流すようになっている。なので、複雑な情報はPowerShellのオブジェクトにすると、あとの処理が簡単になる。 そのためにあるのが、「PSCustomObject」と呼ばれる汎用のオブジェクトだ。このオブジェクトであれば、Format-*や*-ObjectといったPowerShellの汎用コマンドを適用できる。 逆に言えば、PowerShellの汎用コマンドは、フラットな構造のオブジェクトを想定しており、プロパティの値がオブジェクトになっているようなものは扱いにくい。このような場合に、PSCustomObjectを作ってフラットな構造にすることで、以後は処理しやすくなる。 なお、PSCustomObjectの基本的なことは、Microsoftのサイトにページ（https://learn.m
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
「乙女ゲーの悪役令嬢」という架空概念が発生・定着するまでのザックリ歴史認識語り
保志見祐花「副業盟主とコメディ女」🖤💚くまのぷーさんかわゆす🐻 @EmP3h よく「中世ヨーロッパを舞台にしてるのにジャガイモがトマトが」なんて話で盛り上がるのですが、乙女ゲーユーザーからすると「乙女ゲームに悪役令嬢なんてものは存在しておりません」がジャンルが出来上がってるので問題ないと思います ジャガイモやトマトがなんだ 悪役令嬢なんておらんぞゲームには 保志見祐花「副業盟主とコメディ女」🖤💚くまのぷーさんかわゆす🐻 @EmP3h ゲームやってたとはいえ、少しばかりのもので、そのほとんどの知識は雑誌(ビズログやパッシュ、オトメディア)などでプレイできたのは数少ないんですけど マジの乙女ゲームにはライバル役っていなくて。昔はいたけど悪役じゃなくてライバルなんで、こっちを嵌めようとしてこないです。 保志見祐花「副業盟主とコメディ女」🖤💚くまのぷーさんかわゆす🐻 @EmP3h
useDeferredValueを使用してUIを素早く最適化する | POSTD
登場以来、Reactはアプリケーションのパフォーマンスを最適化するためのツールを多数供してきました。中には極めて有益でありながら、あまり知られていないものもあります。useDeferredValueはその一つです。このツールは、特定の状況においてユーザーエクスペリエンスを大きく左右することができます。⚡ 筆者は最近このフックを使用し、このブログの厄介なパフォーマンス問題を解決したのですが、そのあまりの効果に衝撃を受けました。低性能デバイスでは反則級の改善が見られ、まるで黒魔術のようでした。 useDeferredValueには若干気後れさせるような評判があり、実際かなり洗練されたツールではあるのですが、正しいメンタルモデルで向き合えば恐るるに足りません。このチュートリアルでは、その仕組みと、アプリケーションのパフォーマンスを劇的に改善させる使い方を詳しく説明します。 問題 数年前、筆者は本
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
闘病記と電子書籍の相性がバツグンな件について
２年ほど前、AmazonKindleで電子書籍を出版した。 統合失調症になってから障害者雇用で働いてきた体験を書いた。 毎月、３〜５人以上の人が読んでくれて、銀行口座に振り込まれた額は総額９千円近くになった。 （ちなみに、Kindleの自己出版は費用は無料。売上から手数料を引かれた額が振り込まれる） AmazonKindleの自己出版（KDP）は、闘病記というジャンルについて、革命を起こしたと思う。 有名人とかすでに出版業界の中にいる人が、病気になったりしたら、すぐに闘病記本が出版されたりするが、 無名の人が本を出そうとしても、出版社は相手にしてくれない。 自分も昔、出版社に持ち込みしようとしたことがあるが、まったくダメだった。 で、有名人とか出版業界人による闘病記は、特殊な世界で生きている人たちの話なので、普通の患者にはあまり参考にならないことが多い。 普通の人は、病気になっても、仕事を
あまりにも娘がうるさくて騒音計で測ったらこれ→「子どもの声がうるさい」問題はこれだったのかも
リンク jp.misumi-ec.com 騒音計/アスベストサンプリング機器の特長 | 技術情報 | MISUMI-VONA【ミスミ】 騒音計 アスベストサンプリング機器 騒音計 騒音を測定する測定器です。 特長 機械や車・飛行機の騒音測定や、防音設備の性能試験に使用します。 普通騒音計 屋外・工場・事務所などの環境騒音測定を目的とした騒音計で、一般的な測定器です。 精密騒...
プロダクト開発でsqlcを採用した話
はじめに toB向けの0->1のGoのバックエンドAPIの開発でsqlcを採用しました。 使い始めてから1年半くらい経ったので感想を書いてみようと思います。他の人のブログでよく言及されている点については同じことを書くことになるので書きません。 使っていたsqlcのバージョンは1.18~1.26です。 sqlcを採用した理由 sqlcに限らずバックエンドAPIの開発の技術選定をする上で技術的な要件は無かったです。開発効率や開発速度を高めることができる技術選定を求められていました。 バックエンドAPIの開発のリードエンジニアは私だったので、私が使い慣れているツールをなるべく使い、技術検証や使い方を調べる時間を極力減らし開発効率と開発速度を上げようとしていました。ただ、全て私が知っているツールだと私の開発のモチベーションが上がらなかったので、Product Ownerに相談してORMのみ使ったこ
仕組みと嬉しさから理解するeslint FlatConfig対応
重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e
██な██を作り出せ！████選手権
(太めのゴシック体でキーワードが記された画像) ██や██でおなじみの███。 みなさんも、一度は目にしたことがあるのではないでしょうか。 そんな███ですが、こんな風に思ったことはありませんか？ (提案や問いを投げかける文章が記された画像) やはり、███といえば██。 誰しも███を███してみたいという気持ちがあるはずです。 (フリー素材のイラストが微妙に揺れ動くgif画像) 今回はそんな想いを胸に、██な███を███ ██します！ 題して、████選手権！ (選手権の手順やルールを説明する画像) 挑戦者はこの4人！ (参加者の顔写真が並べられた画像) 普段から███を██しているため、██な██には定評のあるメンバーです。 今回の選手権でも素晴らしい████を見せてくれることでしょう。 1人目 ███トップバッターは███。 社内きっての██として知られている███ならではの██
偽装されたMicroSDの正体を探る | データSOS
「GoProで使っていたMicroSDカードのデータ読み込みができなくなった」とMicroSDカードのデータ復旧をご依頼いただきました。「Windows10のエクスプローラーで見ると、ファイル、フォルダが文字化けしている。撮影中にバッテリーが切れたので、その影響でおそらくFATが破損しているのではないか」と詳しい状況もお知らせいただきました。 何となく違和感を覚えるSanDiskのMicroSD お預かりしたMicroSDは「SanDisk Extreme PRO」容量1TBのMicroSD。表面を見たところ、なんとなく違和感を覚えます。印刷のテカリといい、文字の大きさやバランス、何かしっくりしません。 まずはこのカードの仕様を確認しようと、SanDiskの日本公式サイト（SanDiskはWesternDigitalが買収しWesternDigitalのブランドとなっています）を見ると「E
別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを - 株式会社真摯
別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを 2024 7/23 Webサイトにてリンク先を別タブで開く用途で、a要素へのtarget="_blank"の指定に加えてrel="noopener noreferrer"が指定されていることがあります。 しかし現時点では、リンクを別タブで開く目的にて「target="_blank"とrel="noopener noreferrer"をセットで記述」というのは不要です。そのような無思考な運用になっていれば見直した方が良いでしょう。特にrel="noreferrer"の指定はアクセス解析に影響を及ぼします。 主要ブラウザーでnoopenerは対応済み、noreferrerは特定用途で利用を 2024年現在、主要ブラウザーはa要素へのtarget="_blank"の指定でrel=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
You and 120% Cleaner React
3大大人が本気でやったら命が危ない小人の遊び