あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2023年のWebアクセシビリティに関連する出来事を振り返りつつ、2024年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2の勧告とWCAG 2.1の更新 長らく待ちわびていたWCAG 2.2について、2023年10月5日付けでようやくW3C勧告（Recommendation）となりました（日本語訳はまだありません。詳細は後述の「臨時WGの活動状況」を参照）。また、これと連動する形でWCAG 2.1（日本語訳）の勧告も改めて発行されました。 今回のWCAG 2.1の更新では、達成基準4.1.1構文解析に注記が設けられています。これにより、WCAG 2.2で削除された達成基準4.1.1の扱いについて連続性が保たれるようになっています。WCAG 2.1からの変更点は、公
Design Skill Map - メルカリUXデザインチームの専門スキル｜Mercari Design Blog
UX Designチームのasakomです。今回はデザイナーの役割定義の活動の一つとして作成した、”Design Skill Map”についてお話しします。 このSkill Mapは、メルカリUX Designチームで求めるデザイナーの専門スキルを整理したものです。以前紹介したDesign Ladderは、メルカリの行動指針に基づいて作成した、デザイナーに求める態度やマインドセット。今回は専門職としてのデザイナーに必要な技術や知識をSkill Mapとしてまとめました。 UXデザイナーの役割定義や、個人の目標設定、採用の基準作りなど、チームの運用に関わる人や、メルカリのUXデザインチームが求める人材に興味のある方に、ぜひ読んでいただきたいです なぜSkill Mapを作ったかUXデザインチームの役割定義は、チームのミッション達成のために存在します。私たちのチームのミッションは、”メルカリの
音楽、数学、タイポグラフィ
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、kintone フロントエンドリアーキテクチャプロジェクト (フロリア) に所属している 21 新卒の西川 (@nissy_dev) と左治木 (@sajikix) です。 フロントエンド刷新プロジェクトへの配属から約 1 年が経ち、プロジェクトに関わる中で多くの学びがあったので振り返ってみました。 目次 自己紹介 西川です 左治木です kintone フロントエンドリアーキテクチャプロジェクト（フロリア）とは 配属されてみて実際どう？ プロジェクトから学べたこと 小規模なチームでのスクラム開発 Testing Trophy を意識した QA とのテスト設計 アクセシビリティを考慮した UI の開発 現在取り組んでいること いきなり刷新プロジェクトに配属されるのってどう？ チームに任された裁量が大きく、新卒でも技術選定やより良い設計の提案をしながら開発できる 新規開発した機能に
Blueskyの開発者に「鍵アカウントの実装予定は？」「日本支社の設立予定は？」など何でも聞けるイベントが開催されたので行ってみたら開発者の「やることリスト」に追加されるアイデアが続々飛び出す充実のイベントでした
Bluesky開発チームに直接質問できるイベント「Bluesky Meetup in Osaka Vol.2」が2024年4月14日(日)に大阪で開催されました。イベントにはBluesky開発チームのテクニカルアドバイザーを務めるWhy氏が登壇し、ユーザーからの「こんな機能の実装予定はある？」「日本支社の設立予定は？」といった多様な質問に答えてくれました。 Bluesky meetup in Osaka Vol.2 - connpass https://428lab.connpass.com/event/313710/ ・目次 ◆1：会場はこんな感じ ◆2：Bluesky Meetup in Tokyo Vol.2のおさらい ◆3：Why氏との質疑応答 ◆4：Why氏への直撃インタビューもあり ◆1：会場はこんな感じ Bluesky MeetupはBluesky開発チームにリアルタイムで質
@1000ch です、今回は新しいメルカリ Web について書きます。この大きなプロジェクトのリリースは、多くの人の多大なる貢献によって成されたものです。そのプロジェクトの立ち上がりから今日まで、リードする役割でプロジェクトを見てきた一部始終を記録するべく書きます。 メルカリにおけるレガシーなソフトウェア ソフトウェアは生モノとよく言われますが、古くなったソフトウェアとどう付き合っていくかは、どの開発組織も抱えている、あるいはいつかはぶつかる課題なのではないかと思います。多くの方々に利用して頂くためには大規模なソフトウェア群を開発し運用する必要があります。しかし、はじめから全てを見越して完璧なアーキテクチャを構築するのは不可能であり、それをビジネスの成長に耐えうるものにソフトウェアを成長させていくのがエンジニアリングの責務です。 2013 年にスタートしたメルカリに於いても例外はなく、急速
コンピューターと人間を区別し、ボットが悪事を働くことを防ぐためにウェブサイトのログイン画面などに実装されているのが、車や信号など特定の物体が写った写真を選んだり、歪んだ文字を読み取って入力したりする「CAPTCHA」です。iPhone向けのOSであり2022年秋に登場予定の「iOS 16」ではこのCAPTCHAを自動でバイパスする機能が追加されることが明らかになっています。 iOS 16 Will Let iPhone Users Bypass CAPTCHAs in Supported Apps and Websites - MacRumors https://www.macrumors.com/2022/06/20/ios-16-bypass-captchas/ iOS 16 will let you bypass CAPTCHAs on some apps and websites
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 R／RStudioでやさしく学ぶプログラミングとデータ分析 掌田津耶乃 データサイエンティストのための特徴量エンジニアリング Soledad Galli(著), 松田晃一(訳) 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著), 株式会社フレアリンク(監修) 徹底攻略 基本情報技術者教科書 令和6年度 株式会社わくわくスタディワール
みんな知らない、知ると得するAirPodsの隠し機能
みんな知らない、知ると得するAirPodsの隠し機能2024.04.19 21:00154,623 Dua Rashid - Gizmodo US ［原文］ （ 岩田リョウコ ） AirPodsをカスタマイズしてみよう！ AirPodsが発売されて、最初は｢うどん？｣などと揶揄されていましたが、結局かなり浸透してオーディオ界を席巻する存在となりました。でもAirPodsがどんな機能を持っているのか詳しく調べたことって意外とないかも？ということで、地球上で一番人気のあるイヤホンのひとつ、AirPodsの知られざる隠れ機能を見ていきましょう。 別室での会話を聞くImage: 岩田リョウコAirPodsには、別の部屋で行なわれている会話を聞くことができる｢ライブリスニング｣機能というものがあります。これはAirPodsのどのモデルにもある機能です。 まず、iPhoneの｢設定｣を開き、コントロー
Invoke、Comfy Org、Civitai、LAIONは6月25日、米コミュニティーサイト「Reddit」の「r/StableDiffusion」スレッドで、画像・動画・音声生成のためのオープンライセンスAIモデルの開発を推進することを目的にしたプロジェクト「Open Model Initiative」の立ち上げを宣言した。 企業による技術の独占を防ぎ、アクセシビリティを確保 「Open Model Initiative」の初期メンバーは、企業向け生成AIプラットフォームを提供するInvoke、直感的に操作できるオープンソースの画像生成AIツール「ComfyUI」を開発するComfy Org、クリエイター向け生成AIモデル共有サイトを運営するCivitai、大規模な学習データセットを構築するLAIONだ。 彼らは、最近の制限的ライセンス下でのAIモデルのリリースに懸念を示し、オープン
視覚障害者はどうやってゲームをするのか ― 「ポケモン」は泣き声で暗記し、ボヨンというSEでマップを把握。「無双」はシステムがバリアフリー
買いたいのに買えない謎解きゲーム『人の財布』年内最後の販売が4/16に開始！ 現在6ヵ月待ちで、今回を逃すと2025年までお預け 「視覚障害者もビデオゲームで遊んでいる」と聞くと驚くだろうか。 まだまだ多様な人たちが社会参加しているとは言えない日本では、視覚障害者がパソコンやスマホを使いこなして生活し、仕事をしていることはあまり認知されていないように思う。 「視覚障害者＝点字を読む」というイメージが強いが、実は視覚障害者の半数は点字を読めないと云われている。生まれ持って視覚に障害がある人よりも中途で視覚障害を得る人が多いのだが、大人になってからだと点字を習得するのは難しいからだ。 となると主な情報収集は耳になるわけで、パソコンやスマホも、視覚障害者にとっては大事な情報源だ。こうした電子機器を使いこなすというのも、晴眼者にはなかなか想像しづらい。 どうやって画面を使わずにパソコンやスマホを使
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 （2024/02/04追記）もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
Scenery Illustration by J.HUAこちらの記事は、2018年12月に公開された『 2019 UI and UX Design Trends 』の和訳になります。 はじめに私たちは去年、モバイルUIデザインのトレンドについての予測をまとめました。今年はモバイルだけを対象とせずに、さらに深く掘り下げていきます。 モダンなデザインの一番のトレンドは前後関係のあるつながりの中にあります。そのため、一般化することができません。 この記事を読むことであらゆるツール、技術の進歩、またユーザー向けのプロダクトが実際にどのように機能なのか開発者が理解し、全てが上手くいくように感じるでしょう。 近いうちに、販売だけでなく、生産するものすべてを網羅するユニバーサルデザインの考え方を発展させて行くでしょう。自分で何か物事を行うためには、より良いデザインの選択が必要です。 国家としての印象さ
今回は、乳幼児を連れて日本に旅行にやってきた、 オーストラリア人女性の投稿からです。 女性は息子さんの誕生以後、 「しばらくどこにも旅行出来ないね！」 と周囲の人たちから幾度となく言われてきたそうなのですが、 この10年間で何度も日本に来ていた女性は、 「早くこの美しい国のことを息子にも教えてあげたい」 という想いから日本旅行を決断。 コメント欄では日本旅行の感想を綴っており、 日本の乳幼児関連の施設や設備が充実していることや、 乳幼児連れでも旅がしやすいことへの感激を伝えています。 投稿には同様の体験をしたママさんたちなどから、 多くのコメントが寄せられていました。 その一部をご紹介しますので、ごらんください。 「日本に恋する気持ちも分かる！」 外国人夫婦が幼い娘を連れて日本を満喫 翻訳元 ■ 100パーセント共感出来る！ 私たちは21ヶ月の子供を連れて日本を旅行したの。 私たちも娘も、
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
AWS、自社製品のために開発したデザインシステム「Cloudscape」オープンソースで公開。UIコンポーネント、デザインパターンなど
AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.https://t.co/M8wKGqzH5E pic.twitter.com/9JOtkMF8Bi — A
『FF16』は“簡単すぎる”との人気ストリーマーの発言で議論勃発。『エルデンリング』を引き合いに出して - AUTOMATON
とある人気配信者が「『ファイナルファンタジー XVI』（以下、FF16）は簡単すぎる、高難易度設定を初めからプレイアブルにしてほしい」と発言。複数のユーザーに引用されて議論を巻き起こしている。 『FF16』は、『ファイナルファンタジー』（以下、FF）シリーズ最新作。舞台となるのは、クリスタルの加護を受けし大地ヴァリスゼア。この地では、クリスタルの巨塊“マザークリスタル”によってエーテルが供給され、剣と魔法の世界で人々は安息に暮らしていた。ロザリア公国、ザンブレク皇国、ウォールード王国。それぞれの国がマザークリスタルを保有することで均衡が保たれていたが、世界が“黒の一帯”に蝕まれることで、そのバランスが崩れつつあった。主人公となるのは、クライヴ・ロズフィールド。ロザリア公国の第一王子であるクライヴは弟と共にナイトとして鍛錬を続けていたが、悲劇へと巻き込まれていく。 本作では、本格的なアクショ
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
Stability AI、言語モデルシリーズ「StableLM」の第1弾をリリース — Stability AI Japan
Stability AIは、新しいオープンソースの言語モデル StableLMをリリースしました。アルファ版は30億パラメータと70億パラメータのモデルが用意されており、今後150億パラメータから650億パラメータのモデルも用意される予定です。開発者は、CC BY-SA-4.0ライセンスの条件に従って、商用または研究目的で、私たちのStableLM ベースモデルを自由に検査、使用、適応することができます。 2022年、Stability AIは、プロプライエタリなAIに代わる透明でオープンで拡張性のある画期的な画像モデルである Stable Diffusionを一般公開しました。StableLM モデル一式のリリースにより、Stability AI は、基盤AI 技術をすべての人が利用できるようにすることを続けています。StableLMモデルは、テキストやコードを生成でき、様々なアプリケー
まえがき アクセシビリティーの観点からWebサイトを診断し、AIプラットフォームを利用して得た情報をもとにベストプラクティスを提案してくれるオープンソースのWebサービス「Visible」を開発しました。 WebサイトURL: https://visi.dev GitHubリポジトリ（Starください！）: https://github.com/visible/visible GoogleのLighthouseなど、Webサイトの診断を行ってくれるサービスは以前からありましたが、診断だけではなく改善点の提案も行う新しいサービスになっています。また、アクセシビリティーに関する理解を深めてもらえるように工夫をした設計にしていたり、コマンドライン版ではスタンドアロンで実行可能なようになっています。 2020年度の「独創的アイデアと卓越した技術を持つ小中高生クリエータ支援プログラム」未踏ジュニアに
脱力トロンボーンゲーム『Trombone Champ』が愛と注目を集める。音程が外れた方が楽しい、問題児系リズムゲーム - AUTOMATON
デベロッパーのHoly Wowは9月16日、トロンボーンリズム音楽ゲーム『Trombone Champ』を発売した。対応プラットフォームはPC（Steam）。発売から間もない本作は、海外のメディアやSNSで妙な注目と愛を集めているようだ。 『Trombone Champ』は、リズム音楽ゲームだ。プレイヤーはトロンボーン奏者として、さまざまな楽曲を演奏する。操作としては、左クリックまたはキーボードの任意の文字キー/スペースキーを入力すれば、トロンボーンを吹ける。マウスでポインターを上下させれば音程がスライド、画面右から流れてくる譜面に音程を合わせてトロンボーンを演奏するのだ。吹き続けると息切れするシステムも存在するため、吹きっぱなしで音程合わせのみに集中する、といった攻略法はとれない。 先週リリースされたばかりの本作は、さっそく海外メディアやTwitterユーザーから注目を集めているようだ。
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
大塚流フロントエンド開発の歩き方
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。 フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認する プロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
防災情報アカウント「特務機関NERV（@UN_NERV）」を運営するゲヒルンは、スマートフォン用アプリ「特務機関NERV防災アプリ」のiOS版を9月1日・防災の日に提供開始しました。アプリは無料で、後日Android版も提供予定です。 アプリ公式サイト さまざまな防災情報を受信できるアプリで、事前に登録した地域または現在地から、利用者に最適な情報を独自の優先度に基づいて表示。プッシュ通知でも、位置情報・防災情報の種類・緊急度等によって、通知音なしの「静かな通知」や、通常の通知、ユーザーに危険が迫っていることを知らせる「重大な通知」を送り分けます。 なお、緊急地震速報（警報）や津波警報などの重大な通知は、マナーモードやおやすみモード中でも強制的に鳴って知らせます（※iOSの設定画面から無効に設定可能）。 被害が予想される地域の住民や訪問者等が、迅速な判断・行動が取れるよう補助する目的で開発
『ストリートファイター6』の”視覚情報なしで対戦できる機能”に全盲プレイヤーが協力していた。ePARAがサポート - AUTOMATON
株式会社ePARAは5月1日、カプコンの対戦格闘ゲーム『ストリートファイター6』について、本作に導入されるサウンドアクセシビリティの改善に協力したことを明らかにした。 ePARAは、年齢・性別・時間・場所・障害の有無を問わず参加できる環境の下おこなわれるeスポーツであるバリアフリーeスポーツ事業や、障害者の就労支援事業などをおこなっている企業。これまでには、視覚情報を一切使用せずに音声だけで状況を判断して戦うeスポーツイベント「心眼CUP」を、『ストリートファイターV チャンピオンエディション』を用いて開催した実績もある。 スト6のサウンドアクセシビリティ機能は、ePARAさんに協力いただき素晴らしい内容になりました👏 ePARAのみなさんとサウンドチームによる努力と挑戦の結果です。 本当にありがとうございます🙏 JP: https://t.co/YoDhQpSZ8R EN: http
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
はじめまして、ムツミ（@623px）と申します。「CAMPFIRE」という、クラウドファンディング事業の会社のデザイナーをしています。 普段はグロース周りのデザイン施策を担当していて、少し前は仲間集めプラットフォーム「TOMOSHIBI」という新規事業のデザイン全般を担当していました。 --- 最近デザインを勉強している友人にむけて、勉強におすすめの記事や本をまとめる機会があったのですが、UIデザインをはじめたの頃の自分に読んで欲しい…と思うものばかりでした。当時のわたしは「とりあえずやってみてわからなかったら調べる！」という方法で突き進み、体系的に学ぶことが少なかったためです（反省） まだまだデザインを語れる立場ではないのですが、せっかくなので当時の自分に向けて、そしてこれからの自分のおさらいになるように、厳選してnoteに記録しておこうと思います。 僭越ながら、UIデザイン勉強中の方や
E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog
こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ
新人研修の内容を検討しているのですが、それにあたり各社の新人研修を調査しました。 なお本記事は、@gcchaan氏のGitHub Gistにある「研修資料まとめ」を参考に作成しております。 @gcchaan氏の「研修資料まとめ」はとても素晴らしいまとめで、これを見ると各社がどのように新人エンジニアを育成しているのか見てとれたり、新人エンジニアがどのような研修を経て成長していくのか垣間見えます。 DMM.com（2019） DMM.comの研修で紹介されている技術書 GMOペパボ（2019） LINE（2018） Spee（2016） Wantedly（2019） ウエディングパーク（2019） エムスリー（2018） 研修概要 KAYAC（2017） クックパッド（2016） GREE（2014） ぐるなび（2017） LEMPについて サイバーエージェント（2019） エンジニア研修がど
HTMLにsearch要素が追加されたぞ！
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
AppleはAndroidユーザーからのメッセージを「あえて」緑色にすることで不快感を与えるデザインを実践しているという指摘
iPhoneに標準搭載されているメッセージングアプリ「iMessage」においては、「iPhoneから送信されたメッセージ」と「それ以外の端末から送信されたメッセージ」は色分けされて表示されるようになっています。前者は青地に白、後者は緑地に白で文字が表示されますが、緑地に白というコントラストは非常に読みにくく、UXデザイナーのアレン・スー氏が「Appleは意図的に読みにくくしている」と非難しています。 One trick Apple uses to make you think green bubbles are “gross” | UX Collective https://uxdesign.cc/how-apple-makes-you-think-green-bubbles-gross-e03b52b12fed スー氏は「決して緑色が読みにくいわけではない」と前置きし、「緑地に白抜き」
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版） | Recruit Tech Blog
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
Metaは現在、JavaScript Webテキストエディターフレームワークの「Lexical」をリリースしている。軽快さや拡張性、アクセシビリティを重視し、開発者は必要に応じた機能を持つテキストエディターが利用可能。基本的な雰囲気はWebで確認できるが、ローカル環境に導入する場合は、「npm install --save lexical @lexical/react」を実行する。 Webブラウザー上で動作するLexical Lexicalは編集要素に取り付くエディターインスタンス、エディターの状態を示すセット、セット情報を受け取り、状態に応じてDOMを更新するリコンサイラーの3要素で構成されている。そのため、UIコンポーネントやツールバー、リッチテキスト機能、マークダウンなどの機能はプラグイン経由で実装・拡張する仕組みだ。公式サイトのプラグインページでは、Lexicalの状態更新時に呼び
CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最
イーロンマスクの「開発の5ステップ」をまとめました - あなたの要件はアホだし、そのプロセスも要らない、すぐ最適化するな。 - Make組ブログ
イーロンマスク氏がスペースXを案内するという動画（Starbase Tour with Elon Musk PART1）の中で語られた「開発の5ステップ」が僕的に衝撃でしたのでまとめます。 この内容、心底素晴らしいのですが、元動画では話が少しとっ散らかっていますし専門的すぎます。 僕自身、何度も内容を思い返して役に立ったのですが、見直すたび読解に苦労するので自分のためにまとめ直しました （ありがとう、僕！愛してるよ！）。 以降については、イーロンマスク氏が語る開発の5ステップについてまとめています。 余力があれば、自動字幕ありで動画を見ながらのほうが、イーロンマスク氏の熱意を感じられて楽しいと思います（下の動画では、この話が始まる辺りから始まるようにしています）。 youtu.be イーロンマスク、開発の5ステップ 開発の中では以下の順序を必ず守らないといけません。 要件をアホのままにしな
kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている 現状 今後 フロントエンドが技術的にもチーム的にも分割されている モノリスな構成からの脱却 アーキテクチャとチーム（
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
SEOに強いWebマーケティング会社「ウェブライダー」代表の松尾です。 この記事はSEO業務に従事するすべての方へ向けて、私たちウェブライダーがSEOコンサルティングの中で大切にしているSEO哲学について共有します。 進化を続けるGoogleアルゴリズムの中で、継続して評価されるサイトを運営するには、Googleの進化の方向を予測しつつ、サイト運営者の歩むべき方向を示すコンパスが必要です。 この記事ではそのコンパスを提供します。 ちなみに、私たちウェブライダーは、SEOコンサルティングを手がけるいっぽう、自社メディアも運営しています。 中でも「美味しいワイン」「美味い居酒屋」「Betters」「CHECK-LIST」「素敵なギフト」などのメディアは、さまざまな検索ワードで上位表示し続けています。 今回紹介するのは、まさにそれらメディアの成功を支えている哲学。 もしあなたが「Googleのア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年のWebアクセシビリティ | gihyo.jp
新しいメルカリ Web の話 | メルカリエンジニアリング
iOS 16で「私はロボットではありません」のCAPTCHAをスルーできるようになる機能が登場
外注で初期開発したシステムを内製化するためにやったこと
無料で使える画像生成AIの定番は「Stable Diffusion」ではなくなるかもしれない
まだ日本ではWebアクセシビリティが義務化されません（2024年4月から6月の時点では）
マークアップを進化させる WAI-ARIA の基本
【2019年版】UIとUXデザイントレンド - baby-degu - Medium
海外「欧米ではあり得ない！」 赤ちゃんと日本を旅した外国人ママが日本の社会に感激
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
機械学習APIでWebサイトの改善点を提案するサービスを作った話 - Qiita
LCHは、UIにベストなカラースペース｜hirotoarakawa
「特務機関NERV」防災アプリが提供開始 ユーザーの現在地・登録地点から最適化し国内最速レベルで通知
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう！」と思う読み物7選｜623
各社のエンジニア研修で探る、新人エンジニアに必要な技術と駆け出しエンジニアの成長論 - このすみノート
Meta、JavaScript Webテキストエディターフレームワーク「Lexical」をOSS
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
SEOを成功させる10の本質と哲学｜松尾茂起（ウェブライダー）