aria-label 属性は、たまに「スクリーンリーダーによる読まれ方を指定する」属性のように思われてしまっているようです。この理解のされ方は、実はあまり正確なものではありません。 そもそもaria-labelという名前が aria- で始まているということは、WAI-ARIAで定義されている属性です。こういった属性は使う必要がなければ使わないに越したことはないという話を以前に書きました。 aria-label 属性も例外でなく、使い方を間違えると、意図した効果を得られないどころか、思わぬ形で作用してアクセシビリティを下げてしまうこともあります。 なお、 aria-label 属性と良く似た性質を持つ属性として aria-labelledby 属性があります。こちらは aria-label 属性とは違い、他の要素の id 属性の値を指定して、要素を参照して使用する属性です。ほかの要素を参照

タスクランナー的な用途で make を使っていて、パスが通ってるんだけど通ってない…？みたいな現象に出会ったときのメモです。 PATH := $(HOME)/.pub-cache/bin:$(PATH) .PHONY: path path: which fvm fvm --version ↑ のような Makefile があったとき、このタスクを実行すると $ make path which fvm /Users/takasfz/.pub-cache/bin/fvm fvm --version make: fvm: No such file or directory make: *** [path] Error 1 ↑ のように「 which だと見つかるが、コマンドを実行しようとすると見つからない」状態でした。 何が起きていたか make の仕様には、「通常はレシピの各行に対して新しいサ

はじめに この記事では GraphQL の Fragment Colocation という考え方を紹介します。 REST を使用していた頃から不満に感じていたものの、解決が難しいと感じていた課題が Fragment Colocation で見事に解決されたため GraphQL を使用している場合必ず知っておいた方が良い概念だなと思います。 また、前提としてこの記事では Apollo（もしくは Urql 等のデータフェッチライブラリ）を使用していることを想定しており、サンプルコードは React で記述しています。 Relay を使用している場合フェッチデータの宣言をデータを使用するコンポーネントで記述することが強制されるため、自然と Fragment Colocation を使用した実装になります。 この記事で書くこと Fragment Colocation の紹介・基本概念の説明 この記

「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し

はじめに Cloud Platform部のpddgです。2024年もサマーインターンシップを開催し、プラットフォーム（自社基盤）コースとして2名の方を受け入れました。 昨年の様子は以下からご覧いただけます。興味があれば是非ご覧下さい。 blog.cybozu.io 今回は受け入れたお二方のうち藤本陽人さん（static-fuji）に担当していただいた検証の中で発見したやや直感的でない挙動について、藤本さんによる検証結果を社員がまとめたものになります。 この記事内での検証のほとんどはインターン生である藤本さんによって実施されたものですが、一部社員がインターンシップ完了後にこの記事の執筆のために生成した図等も含まれます。 また、もう一人のインターン生の方にはRustでロードバランサを書くという課題に挑戦していただきました。こちらもインターン生の方に大活躍していただいています。是非ご覧下さい。

YAPC::Hakodate 2024での発表内容です。 https://yapcjapan.org/2024hakodate/

はじめに Cloud Run から 別の Cloud Run へアクセスするときに、その Cloud Run って「すべてのインターネットからアクセスさせる」必要ってあるのかな？という疑問がありました🤔 公式ドキュメント[1]を読むと Cloud Run からのアクセスをInternal (内部)として扱う方法について記載がありました。 3つの方法があるようですが、どうも理解が進まないので実際に検証してみたいと思います。 やりたいこと 検証プロセスの概観 Cloud Run を2つ作成します。以下はそれぞれのコードです。 client-node : server-node に対して、HTTPリクエストを投げる Cloud Run。この Cloud Run は常に 内向きは「すべて」とする。 リクエスト先 Cloud Run の公開URLを環境変数として設定している server-node

GitHub Actions で CI している皆様、こんにちは。 GitHub Actions 便利ですよね。使わない日がないというくらい毎日お世話になっています。 さて、CI といえば良く問題になるのが実行時間。 長い待ち時間は開発効率を下げますし、プライベートリポジトリだと Runner の費用も嵩んでしまいます。 時間を短縮する方法は色々ありますが、一手目によく行われるのが依存パッケージのキャッシュじゃないかなと思います。 例えば Go で開発していると、依存パッケージは ~/go/pkg/mod にダウンロードして保存されます。 これを CI 実行のたびにダウンロードしてコンパイルするのは時間とお金の無駄というものです。 幸い、GitHub Actions には CI の実行間でこういった依存パッケージを保存して再利用できるキャッシュ機能があります。 詳しくは以下のドキュメントを

TL;DR inputs.hoge はそのまま boolean として扱われて、 github.event.inputs.hoge は string で扱われる！ なのでそれらは、 name: workflow dispatch boolean inputs on: workflow_dispatch: inputs: boolean_input: description: 'A boolean input' type: boolean required: true default: true jobs: job: runs-on: ubuntu-latest timeout-minutes: 5 env: GITHUB_EVENT_BOOLEAN_INPUT: ${{ github.event.inputs.boolean_input }} INPUTS_BOOLEAN_INPUT: $

UX-movは様々なアプリのUIを動画で集めたギャラリーサイトです。

どうも Security Engineering の西川です。好きなポケモンはクワッスです。カミナシ社内に遂にポケモンカード部ができまして、部員同士切磋琢磨し始めています。いつか企業対抗ポケモンカード大会をするのが夢です。 さてさて、皆さんは AWS WAF（Web Application Firewall、以下 WAF）を使っていますか？サービスに WAF を導入する際は一定期間 COUNT モードで運用することがセオリーとされています。では、COUNT モードから BLOCK モードに切り替える時に何をもって BLOCK モードへの切り替えを判断していますか？ 本記事はつい先日リリースされたカミナシ従業員というサービスを開発しているメンバーから「WAF（Web Application Firewall） を COUNT モードで動かして一定期間経ったのだけど、どのルールを BLOCK

はじめにまず、先日の「1塁打」投稿について、想定以上の反響や様々な意見を頂けたことに驚き、また感謝しております。 今回、ダイニーはグローバル投資家から74.6億の調達をしました。 ようやくシードステージに立ったように感じます。 今の思いの丈を note にぶつけてみたので、読んでもらえると嬉しいです。https://t.co/6JHEDhwOWT — 山田真央｜ダイニー (@maochil) September 26, 2024 予想していた方もいた通り、このブログポストの一番の目的は以下のようなものでした。 「資金調達リリース直後の最も注目度が高いタイミングで、もう一発、IT業界に認知されるようなことを行い、採用に活かす」ということ。 そのため、何よりもインパクトを重視しました。語調は強く、文体も敬愛している三島由紀夫に寄せ（笑）、敢えて文学的な表現、リズムを取り入れました。 その甲斐も

Webサーバーで使うサーバー証明書の発行数が世界最多の認証局Let's Encrypt（レッツエンクリプト）は2024年7月23日、衝撃的な声明を発表した。サーバー証明書の有効性を確認するメジャーなプロトコル「OCSP（Online Certificate Status Protocol）」のサポートを終了する意向を示したのだ。

はじめに アクセスキー発行するのって非推奨なの？ 普段、CLI操作はCloudShellや、Cloud9上で行うようにしているのですが（環境構築 したくない。）、デスクトップ上で操作したい時があります。 そこで、一番簡単な方法であるアクセスキーを発行しようとすると、こんな代替案を提案されます。 この警告にモヤモヤしていたので、今回は「IAM Identity Center」を使ってみた。っていう記事です。 実は、アクセスキーは丸見えだったり。 最近、職場の本番リリース中に気づいたのですが、AWS CLIに保存したアクセスキーや、シークレットアクセスキーは丸見えだったりします。 (↓は既に削除しているキーたちです。) アクセスキーの何がいけないのか？ おおむね以下の理由から、非推奨の模様。 永続的な認証情報だから。 キーが流出すると、攻撃者がリソースにアクセスし放題。 キーの管理が面倒。 複

Note CloseWatcher API は 2024 年 9 月 28 日現在 Chrome, Edge v126 以降でのみ利用可能です。 ダイアログやポップアップ、ピッカー、通知などの UI はユーザーによって閉じられることが想定されています。このような UI は閉じるボタンによって閉じられる他に、デバイス固有のメカニズムによっても閉じられることが期待されています。例えば、キーボードでは Esc キーを押すことで、Android では戻るボタンを押すことで UI を閉じることができます。 ブラウザの標準の要素を使用している場合、これらのメカニズムは自動的に提供されます。しかし、開発者が独自の UI を作成する場合、これらのメカニズムを実装する必要があり、困難な作業です。CloseWatcher API は、これらのメカニズムを提供するための API です。ユーザーにより閉じるアクシ

月間アクティブユーザー数が2億人を超える人気チャットアプリ「Discord」の公式ブログにおいて、「どのように使用する帯域幅を削減したのか」について解説した記事が投稿されています。 How Discord Reduced Websocket Traffic by 40% https://discord.com/blog/how-discord-reduced-websocket-traffic-by-40-percent Discordのクライアントがサーバーに接続すると、ゲートウェイと名付けられたサービスを通してリアルタイムにさまざまなデータが送受信されます。2017年の後半にzlibを導入してデータを圧縮することで、転送されるデータの量は2分の1から10分の1程度まで減少しました。 その後、Zstandardという2015年に登場した手法が人気を集め、Discordでも使用を検討するこ

Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、 Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、 Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、 UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confir

負荷テストツール４選！ユーザーが語る効果的なパフォーマンステストのプラクティス！ 登壇資料 https://trident-qa.connpass.com/event/326996/