こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク

Mark Seemann　著、吉羽 龍太郎、原田 騎郎　訳、Robert C. Martin　まえがき TOPICS 発行年月日 2024年06月 PRINT LENGTH 312 ISBN 978-4-8144-0079-9 原書 Code That Fits in Your Head FORMAT Print PDF EPUB ソフトウェアは複雑さを増すばかりですが、人間の脳は限られた複雑さしか扱えません。ソフトウェアが思い通りに動くようするには、脳に収まり、人間が理解できるコードを書く必要があります。 本書は、拡張を続けても行き詰ることなくコードを書き、複雑さを回避するための実践的な方法を解説します。最初のコードを書き始めるところから機能を追加していくところまでを解説し、効率的で持続可能なペースを保ちながら、横断的な問題への対処やトラブルシューティング、最適化を行なう方法を説明します

「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt

aria-labelを使うな アクセシビリティを学ぶ中で、「aria-labelを使うな（ariaを使わないのが一番いい）」を見かけた方も多いのではないでしょうか。 この記事では実際にいろんなパターンを用意したページで実際にスクリーンリーダーと音声コントロールを使用してみて、どういう実装にしたら一番いいのかを体験していきます。 いろんなパターンを用意したページ https://shamokit.com/examples/a11y/aria-label 上記URLに以下の6パターンを用意しました。 ボタンタグ内に「カウントアップする」というテキストを入れる ボタンタグ内に「カウントアップ」というテキストを入れ、aria-label属性で「カウントアップする」というテキストを指定する ボタンタグにtitle属性で「カウントアップする」というテキストを指定する ボタンタグにaria-label属

小林 優多郎 ［Tech Insider 編集チーフ］ May. 14, 2024, 08:30 AM テックニュース 18,813 OpenAIは5月13日（現地時間）、新しい対話型生成AIサービス｢GPT-4o｣を発表した。 GPT-4oは有料版｢ChatGPT Plus｣や｢ChatGPT Team｣のユーザー向けに展開を開始しており、今後エンタープライズ向けにも提供予定。 無料版ChatGPTユーザーに対しても、1日で利用できるメッセージの数に制限をつけつつも展開する（OpenAIによるとPlusユーザーのメッセージ送信可能数は無料版の5倍でTeamsやエンタープライズ版はそれ以上）。 GPT-4oとは何なのか。また、そのGPT-4oの上で走らせたOpenAIの驚きのデモの様子を振り返りつつ解説しよう。

kmizu @kmizu A Software Engineer in Osaka (& Kyoto). Ph.D. in Engineering. Interests: Parsers, Formal Languages, etc. ツイートは所属先の見解と関係ありません．思いついたことをつぶやきます．人生を楽しく生きよう（New!） kmizu.github.io kmizu @kmizu GPT-4oの画像認識力と理解力をもってすればいけるやろと思ってやってみたら実際いけた。 ペーパープロトタイピングから最初のHTML書き起こすのにかなり使えるのでは。 つーか指示そのものを画像の中に書いたの読み取ってくれるの何か世界の壁を超えて対話してる感があって凄い #GPT4o pic.twitter.com/3XHMFg3yye 2024-05-14 12:49:41

その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完

はじめに GitHub Actions (GHA) 、便利ですね。 便利なんですが、動作確認するのに PR 出してマージするのが煩わしい...。そもそも PR する前に動作確認しておきたいし、やたらに PR 作りたくもない...。 そんな悩みを解消してくれるのが act でした。これならローカルで動作確認できるので GHA 開発が捗ります！！ act 使ってみた記事は沢山ありますが、動かすまでに詰まったポイントをお作法として整理 してみました。act の使い方に悩まれている方の参考になれば幸いです。 2024/5/8 追記 act の実行に IAM ロールに追加設定が必要な点を追記しました。 AssumeRole するために sts:TagSession 権限を付与する 対象読者 GitHub Actions を使っている / 使おうとしている方 GitHub Actions の動作確認に

2024/04/24 令和トラベルで発表した Node.js v22 で変わることの話です。

ランダムなパーティクルを中心にシンプルなものから印象的なもの等、背景で参考になりそうなスニペットを幾つかまとめてみました。 Particle Text マウスオーバーで入力した文字の形に変化が起きるパーティクルになります。 マウスに連動して動くものはやはり面白いですね。 表示されるテキストも任意で変更できるのですごく使いやすそうです。 ICOSAHEDRON 3Dのシェイプがランダムに生成され波のように動きます。 Antigravity FLOW アイコンがふわふわと浮き上がっていく様子が可愛くてずっと見ていられます Fluid Simulation こちらもマウスに連動して動くタイプのものになります。 光の粒がドラッグに合わせた動きをするのが楽しいですね。 CSS PARTICLES まるで宇宙空間のような表現、白いパーティクルがゆっくりと上にあがっていきます。 単純な動きですが、ちゃん

本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ

PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0

言葉の定義 モバファクの 1on1 の目的 1on1 で自分が大事にしていること 1on1 はメンティーの時間である 1on1 はメンターの時間でもある 1on1 初回 今使っている 1on1 のフォーマット 体調 半期目標の進捗振り返り ネクストアクションの振り返り うまくいかなかったこと・もっとよくなりそうなところ・うまくいったこと・その他に話したいこと ネクストアクション 1on1 の中でのやりとり お休みの取り方がわからない 最近見積もりの精度が高くなっている 朝会の議事録をとるようにしたい 最近チームの動きがぎこちないと感じている 1on1 定期的な振り返り まとめ こんにちは。駅メモエンジニアの id:dorapon2000 です。 今回は自分自身がメンター側として実施している 1on1 について、どのように実施しているのかご紹介しようと思います。 1on1 のやり方はメンター

【この連載について】 この連載では、「1週間でGoogleアナリティクス4の基礎が学べる本」を執筆されているWeb解析士のみなさん（GA4アベンジャーズ）を中心に、初心者が引っかかりがちな疑問・トラブル解決の基礎知識から、知っておきたい役立ちノウハウ、解析の設定事例、個々の機能解説、最新のホットな話題までをお届けします。 今回は、フリーコンサルタント「デジタルドクター」としても活動する島田敬子さんによる解説です。 【以下の14のポイントでつまづきやすい！】標準レポートとデータ探索は同じ指標の数字が微妙にずれることがある。どっちのレポートが正しいの？ページビューがない！ユーザー数がわかりづらい！エンゲージメント率と直帰率はどちらを見るべき？離脱率はどこに表示される？閲覧開始数とランディングページの違いは？　セッションあたりの平均エンゲージメント時間と平均セッション継続時間、平均エンゲージメン

先週MacBookAirのM3モデルが発表されて、勢いで買ってしまいました。 普段は行き当たりばったりで必要なアプリをインストールする感じでセットアップしているのですが、もう少しスマートにセットアップしたいので、整理しながらセットアップしようと思います。 スクリーンショットの見た目等が変わると思うのでOSVersion等貼っておきます。 MacBookAirのスペック また、この記事で紹介されていないアプリでおすすめなものやおすすめ設定があればコメントしていただけると喜びます！ OS設定 トラックパッド まず一番最初にやりたいのはOS設定からトラックパッドを選択して軌跡の速さを最速にします。 これをしておくとこの後の作業も早くなるのでまずはこれ。 Dockの整理 MacにはDockというよく使うアプリや起動中のアプリが表示される領域が存在します。 個人的には1軍のアプリしかDockに置いて

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ