スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
調べ物をするときに個人的に超使ってるググり方３選 - Qiita
はじめに コーディング時にわからないことを調べるのはプログラマとして日常茶飯事かと思います。 本記事では、個人的にいつも使ってるググり方のコツを3つほどご紹介いたします！ 1. "(ダブルクォーテーション)で囲う(完全一致) ワードを "(ダブルクォーテーション) で囲うことで、囲われたワードを含めた検索結果のみを表示することが出来ます！ 例：「React "JISOU"」で検索 上記の例はReactの検索をしていますが、それに合わせてJISOUというワードを含めた検索結果のみを表示しています。 検索するワードによっては余計な結果が含まれることもあると思うので、欲しい結果のみを表示したい場合に使える手法です。 2. 検索するワードの一部を*(アスタリスク)に変更する（あいまい検索) 検索ワードの一部を *＊(アスタリスク) にすることで、あいまい検索（※）をすることが出来ます！ （※）あい
顔写真から自閉症を判別してみた - Qiita
はじめに この記事では今回開発したWebアプリ、自閉症識別（後に理由を説明しますが、動作が大変モッサリです）を公開するまでの経緯や考え・思いをまとめた。 6月中旬に差し掛かる頃から、Aidemy PewmiumのAIアプリ開発コースで、Pythonを用いてアプリ開発を行えるようになることを目標に学んできた。その成果として開発したのが、顔写真から自閉症を判別するWebアプリだ。 この記事では私自身がプログラミング超初心者として、そしていち支援者として感じたことも多く綴っているため、必要に応じて適宜読み飛ばしてもらえると良いかもしれない。 開発開始に至るまで 私はこちらの記事にあるように、保育士として児童発達支援に関わってきた。大変ではあるが非常に楽しい仕事だった。とはいえAidemyの講座受講中、成果物を何にするかをずっと考えていたが、この領域で何かやろうなんてことは全く考えていなかった。
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
「住所は英数字もすべて全角で入力してください」はなぜそうなったのか - Qiita
Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっていったのかが気になってる。いま存在しているのは過去の仕様や慣習の踏襲として理解できても、そもそもなぜそれらが生まれたのかが理解できない。 https://t.co/ZLz0Pw9GOK — ymrl (@ymrl) July 29, 2024 これについて
やらないと後悔するUdemy８選 - Qiita
はじめに みなさんは何か新しいスキルを得るときにどのように学習するでしょうか？ 私はプログラミングコーチングJISOUで多くのジュニアエンジニアとカウンセリングをする中で8割以上の人がUdemyで学習すると言っていることに気づきました。 そこで今回は私がいままでやってきた35個の講座の中でこれはやってよかったと今でも思えるものを紹介していきます。Udemyはその人が学習している技術や興味のある技術でないと参考にはしづらいと思いますが、おすすめを学習することは時間の観点でものすごい価値があると考えているので参考にしてみてください！ Udemyの怖いところ Udemyはとても恐ろしいサービスです 以前にも以下の記事を投稿して話題になりました。 ぜひ読んでほしいのですが、ざっくり解説すると 「Udemyは1本終わらせるのに数十時間単位で時間を使うので、その使い方を間違えると時間の損失が大きい」
Playwright を使いこなすためのベストプラクティス - Qiita
はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
ブラウザ開発者ツールのネットワークタブに表示されない情報送信手法 - Qiita
はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が
【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
SSH接続を10倍速くするたった3行の設定 - Qiita
今回は、SSH接続を劇的に高速化する方法をご紹介します。たった3行の設定を追加するだけで、接続時間を10分の1に短縮できます。しかも、2回目以降の接続では認証も自動的に行われるので、パスワードやパスフレーズの入力も不要になります。 要点 .ssh/configファイルのHost *セクションに以下の3行を追加するだけです。 詳しい説明 1. ControlMaster auto この設定で、1つのSSH接続で複数のセッションを共有できるようになります。新しくSSH接続を確立するたびに認証情報を入力し直す手間が省けて、接続がぐっと速くなります。具体的には： 初回の接続時のみ認証が必要 2回目以降は既存の接続を再利用するため、認証プロセスをスキップ パスワードやパスフレーズの入力が不要になり、接続がほぼ瞬時に完了 2. ControlPath ~/.ssh/mux-%r@%h:%p Contr
【Go】公式ツール "eg" を使って効率的にGoのコードをリファクタリングする - Qiita
はじめに こんにちは、ken です。お仕事では Go をよく書きます。 最近、Go の公式パッケージであるgolang.org/x/toolsを眺めていたら、なにやら有用そうなパッケージを見つけたので今回はそれについて書こうと思います。 それはegというリファクタリングツールです。 eg とは eg は、例ベースで Go コードをリファクタリングするためのツールです。このツールを使用することで、特定のコードパターンを別のコードに置き換えることができ、効率的にリファクタリングが行えます。 先ほど貼った公式ドキュメントに詳しい説明があるかと思いきや The eg command performs example-based refactoring. For documentation, run the command, or see Help in golang.org/x/tools/ref
【JavaScript】ネイティブで集合演算できるようになった - Qiita
JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,
しょーもない事務作業を快適にするためのツールを作りたいとき 〜セキュア意識の高い会社編〜 - Qiita
Pythonインストールできないんだけど！ なんかいつもこれ同じ作業してるよな、自動化出来ないかな…よしやったる！ ↓ みんなー！こんなツール作ったよー、使ってみてー！ ↓ そして起こる「ちょっと、俺、.pyとかいう拡張子使えないんだけど」の声。 会社のPCって外部のアクセス禁止だったり新規ソフトウェアのインストール制限があったりと、色々制約がありますよね。この制約のせいで、作ったはいいが使えなかった、みたいな理不尽なハマり方したり、一方で試してみたら意外とこれ動いちゃうんだ！？みたいなこともあったりするので、ここではそんなずる賢い業務改善を必死に考える社員のみんなに、どれでやれば利用可能なツールづくりができるのか、その選択肢を載せていくよ。 Python + exe化ツール(Pyinstaller) やっぱ中身含めてファイル操作系でちょこちょこやるならPythonが楽だよね。ただ、Pyt
「なぜ」と聞かずに理由を引き出す！「詰めてる」感を減らす言い換えテク - Qiita
こんにちは。KDDIアジャイル開発センターのサービスデザイナー よねみちです。 生成AIを用いたto Bプロダクトのスクラム開発や、お客様のDX・新規事業創出のきっかけとなるデザインスプリント支援などを行っています。 はじめに レビューや会議で誰かが「詰められてる」様子、心にきますよね。自分がやられるのはもってのほかですが、周囲で発生するだけでも心がすり減ります。。 特に、何か問題が発生したときや、参加者間の誤解が解消できないときに「詰め」が生じがちです。 質問する側の、焦りや不安から「なぜ？」「どうして？」「つまり？」と質問マシーンになってしまう気持ちも理解できるのですが。 問い詰めてしまい心理的に不安全な状況に陥ると「ミスを隠そう、自分が責められないようにしよう」と回避する力が働きはじめ、結果として「正確な状況がわからない」「適切なアクションが取れない」といったチームとして重大なリスク
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
朝にその日の作戦名を決めたら幸せになれた話 - Qiita
はじめに 私は毎朝その日の作戦名を決めている。私は優秀なエージェントなのだ 多くの人が仕事に追われてしまい心の余裕がなくなっている現代において「豊かに生きる」ということは憧れるようなライフスタイルになっている。 面白いことに、書店では「休養学: あなたを疲れから救う」や「なぜ働いていると本が読めなくなるのか」など仕事に疲れている人を対象にした本が飛ぶように売れている。 疲れ切った現代では、日々を豊かにいきることはなかなか難しいことになってしまっているように思われる。 しかし、私は日々を豊かに生きている自信がある もちろん仕事は週5日×8時間行っている。残業がないのは幸いなことだと思う。 そしてQiitaの記事も毎週3本書く生活もしている。それに加えてプログラミングコーチングJISOUで多くの生徒に日々指導を行っている。 そんな私でも毎日本を読む時間というのはしっかりある。 では、ここにはど
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
エンジニアというITの専門家でありながら、小賢しいWeb系の詐欺に80%ぐらいはまって死にかけた話 - Qiita
みなさんこんにちは！記事を読んでくださりありがとうございます。 Qiitaには初投稿なので、簡単に自己紹介をさせてください。 自己紹介 ・カナダのバンクーバーでWeb/モバイルエンジニアとして働いています ・2024年7月に日本に帰国し、プロダクトオーナーに転身します ・大阪出身です 何が起こったかの概要 タイトルの通り、小賢しいWeb系の詐欺にはまって危うく銀行口座に侵入されかけました。カナダで起こった出来事ですが、日本でも似たようなことが起こり得る事例かと思ったので、よりたくさんの方に注意喚起ができればと思いこちらに投稿致しました。 時系列での解説と違和感ポイント みなさん、Facebookには「マーケットプレイス」という機能があるのをご存知でしょうか？日本で言うジモティーのような機能です。カナダでは不用品の売買でFBのマーケットプレイスが非常によく利用されます。私は2ヶ月後に日本へ引
Apache APISIX を触ってみる - Qiita
この記事の目的 以下の記事で Kong Gateway の公式ドキュメントを読んで動作確認を行いました． 最近人気が伸びつつある API ゲートウェイである Apache APISIX についても同様に公式ドキュメントに沿って動作確認を行ったので，こちらの記事に残します． こちらの記事を参考にして Apaxhe APISIX の API Gateway, Dashboard, Ingress Controller 環境を構築することができます． デモ構成 そもそも API ゲートウェイとは何ぞや 技術の進歩が速い中で正確に「これが定義である」というのは難しいですが，CNCF Landscape の API ゲートウェイの章1では アプリケーション間のリクエストや通信を一元管理するもの ユーザーがやろうとしていることができるかを示すインターフェース ユーザーがやったことを評価・記録するもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
