@axe-core/playwright によるアクセシビリティテストの自動化
@axe-core/playwright によるアクセシビリティテストの自動化 2024.08.18 axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。 今書いているコードがアクセシビリティ上の問題を持っていないかどうかを確認するために、Lint ツールによる機械チェックが有効です。eslint-plugin-jsx-a11y や Markuplint といったツールを導入することで、コンポーネント単位で静的にコードを解析してアクセシビリティの問題を検出できます。このような Lint ツールは、code を書いている最中に即座にフィードバックを受けるこ
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
「ダークパターン」とは？7つの類型を解説／企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス
うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企
テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
YAPC::Hiroshima 2024の前夜祭でキャッシュバスターズは何を話すのかChatGPT 4に予想させてみた - YAPC::Japan 運営ブログ
あけましておめでとうございます、YAPC::Hiroshima 2024 スタッフの id:Pasta-K です。 前夜祭内で行われるスペシャルパネルディスカッション ｢Cache-Control: max-age=86400｣ に関連して、キャッシュバスターズのお2人( id:onk, id:Soudai )からそれぞれキャッシュに関する記事が公開されました。 onkさんの記事では 十把一絡げに「麻薬」と言うのではなく、キャッシュをパターン化して乗りこなすというのが望ましい姿でしょう。現代的な Web アプリケーション開発において、キャッシュを使うのはむしろ前提としないと機能しないと私は考えます。 という上でキャッシュと上手く向き合うためのパターン化について紹介されていました。 Soudaiさんの記事では、 『失敗から学ぶRDBの正しい歩き方』 第16章 キャッシュ中毒 でもキャッシュを
引越しにおけるネット回線ガチャと開通待ちで勝利するための知見まとめ 2023春 - はげあたま.org
www.hageatama.org 【追記】続編を書いたつもりが何の参考にもならないので読まなくても支障はありません。 先日、引越し先のインターネット契約で困ってたリアル友人にSNS上で細かくアドバイスしたら大変感謝されたので、今後は「まずこれ読んでおいて」と言えるような記事を書き残しておきます。 直近3年で3回引越し、プロバイダ利用4種の経験をまとめた素人記事でして、気になる点があればどんどんとフィードバックして充実させていきたいのでご指摘お願いします。 6/21（更新翌朝）：光コンセントがある前提で動くのは厳しくない？と言われて、確かにそう思ったので改訂。LANケーブルについての記述追加。 6/21（夜追記）: 不動産屋さんと光コラボについて追記 【主張の概要】 光コンセントが元からある物件を選べ フレッツ光回線でプロバイダをいつでも切り替えられるようにしろ IPv6 (IPv4 ov
個人開発で即戦力になるツール・サイトまとめ - Qiita
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
脆弱性診断につかえる実践的なテクニックを列挙してみた - shikata ga nai
Hello there, ('ω')ノ これまで、実例をもとに学んだ脆弱性診断につかえる実践的なテクニックは以下のとおりで。 ・サブドメインの1つに403を返すエンドポイントがある場合は、通常のバイパスは機能しないので、Refererヘッダを変更すると200 OKが取得できる場合があります。 ・エンドポイントのディレクトリとリクエストボディを削除して、メソッドを「PUT」から「GET」に変更すると隠されたエンドポイントに関する情報を取得できる場合があります。 ・見つけたエンドポイントに通常アカウントで403エラーが発生した際、管理者アカウントのjsonリクエストの本文と比較して差分のパラメータを追加するとアクセスできる場合があります。 ・Linux環境でコマンドを実行する際、スペース文字をバイパスするためのペイロードは以下のとおりです。 cat</etc/passwd {cat,/etc/
WebAuthnをエミュレートするWebアプリの開発 - セキュアスカイプラス
こんにちは、SSTでWeb脆弱性診断用のツール(スキャンツール)開発をしている坂本(Twitter, GitHub)です。 最近 WebAuthn *1 を触る機会がありました。 WebAuthnを使うと、Webアプリのログインで指紋認証や顔認証など多要素認証を組み込むことが可能となります。 一方で脆弱性診断の観点から見ると、burpやzapなどのスキャンツールで WebAuthnを使ったログイン処理をどうやって再現するかが悩ましく感じました。 もちろん、2022年2月時点でほとんどの（筆者の知る限りではすべての）Webサイトで WebAuthn を始めとする多要素認証はオプション扱いです。 多要素認証のフローそのものの診断を要望されない限りは、従来のID/パスワード認証によるログイン処理でスキャンや手動診断が可能です。 とはいえ転ばぬ先の杖と言いますし、診断ツールを開発している筆者として
Web Bluetooth API と Bluetooth MIDI を使って子供向けの音符学習アプリを作る - エムスリーテックブログ
エムスリー エンジニアリングGの岩本です。 会社ではiOS開発からサーバサイドの開発を担当していますが、家でDIY・IoT・スマホアプリなどを作るパパエンジニアやっています。 最近小学生になった娘がピアノに興味を持ち始めました。といっても習い事にするまでの興味はないようですが、楽しそうに猫ふんじゃったを弾いています。ところがドレミの音符もわかっていません。今回は子供に音符を教えるためといって買ったワイヤレスMIDIアダプター MD-BT01を使って、Chromeと通信してかんたんな音符を学習する子供向けのアプリを作ってみました。 なお、エムスリーテックブログのものづくり系の記事が増えてきたのでこちらもよろしければ参照ください。 Bluetoothを使った筋トレ用デバイスを作ろう - エムスリーテックブログ ROSでSLAMラジコンをつくった - エムスリーテックブログ FireTV sti
Web配信の技術という本を書きました – cat /dev/random > /dev/null &
twitterでなんどもつぶやいてるので多分知られているとは思うんですが、Web配信の技術という本を書きました。 せっかくなんで、なんでまたこんな本を書いたのかとかどういう流れだったのかみたいなのを簡単に書いてみようかなと そもそもどういう本なのか 非常にタイトルを決めるのが難しい本でした。 サブタイトルに「HTTPキャッシュ・リバースプロキシ・CDNを活用する」とあるようにいわゆるHTTPキャッシュの本なわけですが、コンテンツ配信の技術といえばCDNの印象が強く出ますし（本書はCDNの使いかたというわけではないです）、Web配信といえば動画ストリーム配信（VTuberの配信とか）を思い浮かべる人も多いと思います。 今考えればWebコンテンツ配信の技術とすればよかったかもと思いつつ、今度は長くなりすぎるのでなかなか難しいです。 ということでHTTPキャッシュを使ってWebサイトを高速化した
感想「SREがセキュアなWebシステムを構築、維持するためにやれることはなにか」 – koyama's blog
mixiの清水さんがSRE NEXT 2020で発表されていたスライドを見て感じたことをメモする． ログの扱い https://speakerdeck.com/isaoshimizu/what-can-sre-do-to-build-and-maintain-a-secure-web-system 49 ページより引用 ログに認証情報や個人情報をはじめとする機密情報を出力しない．ログを大量に出力するとコスト(お金)に影響が生じる． koyamaの脳内 役立つログを適切な粒度で出力するよう適切な設定が必要になりそう．この粒度を適切に決めるのは，熟練したソフトウェア開発者しか出来ないのでは?複数メンバーが参加するソフトウェアプロジェクトで認識を統一するのは難しい．開発用のデバッグログもプロダクションで出力すると機密情報になるので，動作モードによって出力するログも制御すべきということかな．開発環
Micro Frontends Architecture Patterns
本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte
OpenCVがWebカメラであなたの顔を画像として取得するまでの仕組み
全体像 全体としてはこんな感じです。レンズを通して顔の像を作るところは光学の世界、センサ面に結像された像を読み取る電子の世界。そして、センサと PC の橋渡しを USB で行う通信の世界、受け取ったフレームを処理するソフトウエアの世界、という流れで説明していきます。 物理（光学）の世界～一眼とWebカメラ（とスマホ）の違い～ 一番大きな違いは設計思想そのものです。レンズとセンサの大きさ、撮影設定などの柔軟性などに現れています。 一眼レフ：でっかいレンズ × でっかいセンサ ＝ つよい Web カメラ：写ってればいいでしょレベル～産業用レベル スマホ：目的ごとに複数のカメラモジュールを用意したりソフトで後処理したり。ともかく小さく薄く。 光学の世界で大事なことを一つだけ（機種選択の基準として） ピント合わせ の方式はどうなっているか？ マニュアルフォーカス → 自分でリング回す：ピント合わせ
WEB アプリケーション設計入門 / Introduction to web application design
PHP Conference Japan 2020 トーク前提の資料です。そのため、トークがないと理解が難しいかもしれません。 https://youtu.be/UTKJ-Lgn3aI?t=36 ※冒頭音声が小さいです。マイクを手に持ってから聞こえやすくなると思います。 資料中の ADOP については下記を参照ください。 https://nrslib.com/adop/ # Abstract https://fortee.jp/phpcon-2020/proposal/da5b9d99-e5a6-4f51-adea-1f1c10d99020 # Ref https://github.com/nrslib/scrum-app-sample-php https://github.com/nrslib/repository-support-php # URL Togetter: https://
Webディレクターのスキルツリー - 二宮日記
Webディレクター解体アドベントカレンダー初日の記事です。今日はWebディレクターという職種を定義するために作ったRPG風のスキルツリーとその活用方法を紹介します。あとは関連する他の開発メンバーとお互いの担当範囲を明確にする方法や、スキルツリーをスキルアップに役立てる方法について書きます。 曖昧な仕事 Webディレクターという職種に期待される仕事の内容は、開発に関わる他の職種と比べても非常に曖昧です。そもそも何ですか、ディレクションって。英語を直訳すると方向とか指示とかそういう意味ですけど、概念的でふわっとしています。 ディレクションという仕事に含まれる範囲も様々です。受託でホームページ制作を請け負って進行管理をメインに行うWebディレクターもいれば、既存自社サービスの売上増に責任を負う人も、新サービスの立ち上げに挑戦する人もいて、同じディレクターという名前でもやっている仕事が全然違います
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
国土交通省が新サイト「不動産情報ライブラリ」を無料公開、早くも神サイトと評判【やじうまWatch】
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
GitHub - varkor/quiver: A modern commutative diagram editor for the web.
