近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
歴史・年表でみるAWS全サービス一覧 －アナウンス日、General Availability(GA)、AWSサービス概要のまとめ－ - NRIネットコムBlog
小西秀和です。 Amazon Web Services(AWS)に関する情報や魅力を様々な観点から記事にしてみていますが、技術史が好きなこともあって今回はAWSサービスの発表の歴史を年表でまとめました。 AWSからもWhat's Newとして公式アナウンスは発表されていますが、アナウンス日、GA日(一般提供開始日)、サービス名、サービス概要といった情報に圧縮して時系列でAWSサービス一覧を一枚もので確認できる記事が今まで欲しかったので自分で作成してみることにしました。 AWS全サービスの歴史年表の作成方法 AWS全サービスの歴史年表の対象となるAWSサービスは次の手順で選定しました。 AWSサービス・製品一覧「Cloud Products(英語版)」にあるサービスのうち「～ on AWS」といったサードパーティー製品がメインとなるサービスを除いたリストを作成 AWSサービス・製品一覧に記載
イヤホン・ヘッドホンで音楽を聴いていたら、家のチャイムが鳴っているのに気づかなかった。何かいい解決策はないの？ iOS14 / iPadOS14から「サウンド認識」機能が追加されました。元々は「アクセシビリティ」に分類されている、聴覚サポート機能の一つです。しかし、iPhoneが聞き取った音を通知してくれる機能は、日常生活で便利に活用することができます。 例えば、イヤホンやヘッドホンで音楽を聴いていると、外部の音を認識しづらくなります。そのため、ドアのチャイムが聴こえなくて応対できない場合があります。「ドアベル」の音を通知するように設定すれば、チャイムの音が聞こえなくて宅配便の荷物を受け取れなかった、といったことを防ぐことができます。「ドアベル」の他にも「水の出しっ放し」などの認識可能な音があるので、お好みで設定することをおすすめします。
はじめに 2023年2月3日、Apple が新型の MacBook Pro / Mac mini を発売しました。 おもわず財布の紐が緩んでポチってしまった方も多いと思います。 そこで、Mac を買ったらやっておきたい初期設定を記事にまとめました😀 参考：おれのおれによるおれのためのMacおすすめ設定 Chrome のインストール まず最初に Chrome をインストールし、アカウントにログインします。 初期設定の過程でいろいろと調べものをしたり、Google ドライブに保存しておいた設定ファイルなどを取り出したりしたいからです。 システム設定関連 １. 入力周りをカスタマイズする これから設定を進める上で、入力でモタつくとイライラするので、まずは入力周りをカスタマイズします。 トラックパッドを最適化 システム設定 > トラックパッド > 軌跡の速さを最速にします。 同時にタップでクリッ
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
iPad OSになってから一度もキーボードを試してないなと思い、ThinkPad Tablet 2用キーボードをつないでみたところ、赤ポッチも使えた。長時間駆動も可能な謎マシンの誕生だ。 iPhone、iPad、Macの新OSが一通り出そろった。早くから一般にもβ版の提供が始まっていたが、コデラの場合、iPhoneとMacはガチで仕事で使うのでβ版には手を出さず、iPadのみβ版を入れて様子を見ていた。現在は13.2 Public beta 3をインストールしているところだ。 iPad向けOSは、バージョン13でiPhone用から枝分かれし、iPad OSという形になった。大画面を生かし、モバイルOSとパソコンOSの中間ぐらいを行くことになったという印象だ。 すでにβ版の頃から多くのサイトが新機能を紹介しているので、正式リリースとなっても世の中の関心が薄く感じるのは残念だが、個人的にiPa
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
マルスと「熟練が必要なUI」についての議論
JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動
サイボウズは7月14日、ITエンジニア新人研修用の資料を無料公開した。2023年の新人研修で使用したもので、講義資料・動画を用意している。内容はローカライゼーションやアクセシビリティー、セキュリティなど全9種類。 23年の研修では、「新入社員メンバーに、“自信を持ってチームにジョインできた!” （と思ってもらえる）」というコンセプトを設定。新入社員らに「開発・運用本部のチーム／人や体制、風土／文化」「これからのチーム活動となる前提、共通の知識」を学んでもらえるよう、研修内容を設計した。 公開した講義資料のジャンルは「ローカライゼーション」「アクセシビリティー」「Webフロントエンドテストと自動化」「オブザーバビリティ入門」「ソフトウェアテスト」「モブに早く慣れたい人のためのガイド」「セキュリティ」「ITコミュニティー文化と情報発信に共通する成長と貢献の要素」「テクニカルライティング」の全9
これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r
こんにちは。決済チームでエンジニアとして働いている芦川です。 UPSIDER Tech blog 第2弾として「決済チームがテストコードを書く際に気をつけていること」を紹介しようと思います。 TL;DR 100％のテストカバレッジを目指す テストはブラックボックスを優先して記述、どうしても到達できない場合はホワイトボックス 最初のテストケースは、テスト対象が動作する最も一般的なケースであるべき 私たちは日々大量のコードを書いており、そのシチュエーションは多岐にわたります。 そういった環境において、動作確認からのコード改修のコストを考えた場合、自動テストの有無によって生産性に大きく差が出ることは容易に想像ができます。また、既存のサービスに改修を加えるために、そのサービスの概要を把握したい場合、良いテストコードはドキュメントとして役立ちます。 以前、私はテストコードを一切書かないプロダクトの開
Latest topics > なぜMozillaはXULアドオンを廃止したのか？（翻訳） - outsider reflex
Latest topics > なぜMozillaはXULアドオンを廃止したのか？（翻訳） 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「同調圧力は忌むべきものだ」と思考停止していたことに気付いた話 Main 「なぜMozillaはXULアドオンを廃止したのか？」に寄せられていた反応を見て、「甘い……甘すぎる……」と思って、W3C信者時代からの価値観に行き着いた話 » なぜMozillaはXULアドオンを廃止したのか？（翻訳） - Aug 22, 2020 （原著：David Teller, 2020年8月20日、CC BY-NC 4.0で公開されている内容の全訳。Qiitaにもクロスポストしています。） 要約：Firefoxはかつて、XUL
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
目の見えない人が、床に物を落として困っている。 見えにくい視力の方が、説明書の小さい文字が読めずに困っている。 そんなときも目の見える人―――例えばぼくが―――代わりに見て説明すればいい。遠く離れた場所にいる知らない人でも大丈夫。 今日は、そんな超絶すごい体験を作り出してるアプリの話です。 “Be My Eyes”というインターネット体験。 仕事中、机の上に置いてあるスマホが震える。“Be My Eyes”というアプリの呼び出し通知。ちょっと通話する余裕くらいはあるなと思ったら通話に出ればいいし、時間がないときなら他に時間のある人が出てくれるから自分が出なくもいい。 通話に出たら、スマホのカメラを通して目の見えない人から頼まれたものを見て説明する。 「説明書を読んでもらえませんか？電気の消し方を知りたくて。」 「ボタンを長押しすれば電気が消えるって書いてありますよー」 「床に落としたものを
自作チンコントローラーに、TENGAが製品提供。障害と戦う男性の快適なスティック操作を支援 - AUTOMATON
格闘ゲーマーの畠山駿也（Jeni）氏は10月31日、自身のTwitterアカウントにて、TENGAから製品を支援提供されると報告した。使い道は、筋ジストロフィー症を患う同氏による自作コントローラーである「チンコントローラー」の緩衝材だという。 【ご報告】 この度、株式会社TENGA様より製品提供のご支援をして頂ける事になりました✨ 自作のチンコントローラーでの練習中にあごを傷めて悩んでいた所、緩衝材としてPOCKET TENGAを加工して使ってみた旨のツイートをした事がきっかけとなりました。@TENGA_PR 今後ともよろしくお願いいたします！ pic.twitter.com/gzxSKVubW7 — Jeni / 畠山駿也＠Chin Gamer (@jenixo0) October 31, 2022 念のため書き添えておくと、チンコントローラーとは、chin（チン）、すなわち下顎を使って
アップル、iPhoneやMacが自分そっくりのAI生成声で話す「Personal Voice」発表。学習もローカルで完結（CloseBox） | テクノエッジ TechnoEdge
AIを活用して声を学習し、本人そのままの高精度な声で生成する技術がここ数カ月で大きく進化しています。 RVCというAIボイスチェンジャー機能は、岸田首相の声真似を本人の前でデモするまでになり、AIフェイクボイスの問題が一部で取り沙汰されるようにもなりました。 そんな中、アップルがAIを使った人声の学習・生成機能「Personal Voice」を今年下半期のOSアップデートで提供すると発表しました。 iPhone、iPad、そしてAppleシリコンを搭載したMacで15分、ランダムに表示される150の文章を読み上げるだけで自分の声を学習することができ、テキストをタイプすると自分そっくりな声で相手に伝えることが可能になります。ただし、当初は英語のみです。 テキストした文章を音声化する機能（TTS、Text To Speech）をアップルは「Live Speech」という新機能で提供。これまでは
本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor
『ストリートファイター6』盲目のプレイヤーが現行最高ランク「マスター」に到達。困難を乗り越え辿りついた高み - AUTOMATON
『ストリートファイター6』において、あるプレイヤーが日本時間9月26日、エドモンド本田を操作し、本作における最高位のランクである「マスター」に到達した。そのプレイヤーはなんと全盲のゲーマーであった。 『ストリートファイター6』は、カプコンより発売されている対戦格闘ゲーム『ストリートファイター』シリーズの最新作だ。本作は、コマンドを入力して操作する従来のモードであるクラシックタイプに加え、簡易的な入力で必殺技を使用できるモダンタイプというモードを採用している。そしてほかにも『ストリートファイター6』には「サウンドアクセシビリティ」という機能が実装されている。 ゲームをプレイするには基本的に画面の情報が欠かせない。しかし視覚に障がいを持つ人は画面からの情報を得ることができない。そういった人も同じようにゲームをプレイできるような機能が本作の「サウンドアクセシビリティ」となる。相手との距離に応じて
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog
GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと
フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
2022年上半期に読んだ技術書
2022年上半期はとある都合もあってかなりの数の技術書を読んだので、その中でも良かったものとかの感想をまとめておきます。 2022年上半期で一番良かった技術書 A Philosophy of Software Design ソフトウェア設計の目的は複雑さを軽減することであるとして、その複雑さの定義と軽減する手法が書かれています。最近まで2年ほどフリーランスで色んな会社の開発に参加して、DDD的な設計やクリーンアーキテクチャを採用している現場が多かったもののそれらが逆に開発効率を低くしているのではという感想を持っていました。そこでこの本を読み、それらの目的であるはずの「複雑さを軽減する」という視点が抜けていたのかなと気付かされました。コードを読み書きしていて複雑さを感じなければモノリスでもMVCでもいいケースは多いと思います。複雑さを軽減する手法を解説する章では、やりすぎると逆効果であるとは
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
1．「設定」で「戻る」ボタンを長押しするScreenshot: David Murphy (Other)iOS 14以降のiPhoneなら、「設定」などのシステムアプリを閲覧中に、ボタンを長押しすると複数のページを素早くさかのぼることができます。 例えば、「設定」→「一般」→「キーボード」→「キーボード」のように、iPhoneの設定ページをどんどん進むと、画面左上に「キーボード」と書かれた「戻る」ボタンが表示されます。 このボタンを長押しすると、現在のページに至る途中のページが表示されるので、行きたいページを選択するとそのページにジャンプできます。 2．利用したいカメラモードに素早くアクセスするPhoto: blackzheep (Shutterstock)ポートレート写真を頻繁に撮影する人は、カメラアプリを開いてポートレートモードにスライドさせるのは非効率な感じがするかもしれません（他の
国の予算執行の無駄や事業の効果を外部有識者が点検する「秋の行政事業レビュー」は11月15日、教育現場のオンライン化を取り上げた。席上、有識者が取りまとめで「教育現場のICT化で教務・校務の効率化を進め、教職員数の合理化も進めるべきだ」と指摘したところ、河野太郎行政改革相は「（教育現場のICT化は）技術の導入によって、本当にサポートが必要な児童生徒に先生が寄り添える時間を作っていくところが狙い」と説明し、教職員数の合理化に関わる部分を取りまとめから削除するように指示した。終了後に記者会見した河野行革相は「財政の中で教員数をどうするかという議論と、デジタル化は一つ線を引いて考えるべきだ」と述べ、少人数学級の実現を含めた来年度予算の編成作業が進む中で、学校現場のデジタル化を教職員数の合理化や削減につなげるべきではないとの考えを示した。 教育現場のオンライン化を議題とした「秋の行政事業レビュー」の
【朗報】著作権訴訟で広告ブロッカーが勝訴
Adblock Plusを運営するeyeo社は、ドイツの出版社アクセル・シュプリンガー（Axel Springer）との長期にわたる法廷闘争でまたもや勝利を収めました。 ハンブルクの裁判所は、「広告をブロックするためにウェブサイトのHTMLコードを変更することで広告ブロッカーは著作権を侵害する」と主張する出版社側の訴えを退けた。 もし裁判所が出版社側の味方をしていれば、広告をブロックしたり、アクセシビリティのためにウェブページの配色を変更したりするなど、ウェブサイトのコードを変更しようとする試みは著作権侵害とみなされ、ウェブサイトの所有者から停止命令を受ける可能性があったかもしれない。 （参考までに、HTMLはウェブの95%を構成している。） eyeoはブログ記事で、拡張機能開発者やブラウザだけでなく、一般のインターネットユーザーも影響を受け、損害賠償の支払いを余儀なくされる可能性があった
<search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思
2022年、もっとも注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
人類はこの先食っていけるのか。調べてみた。
地球は人類を養えるのか？ この前、国連かなにかの機関の奇抜な髪の色をした専門家が、「ロシアによるウクライナ侵攻と、世界的な干ばつにより、来年の世界の食糧事情が危険だ」というようなことを述べていた。 奇抜な髪の色はともかくとして、おれは、「ロシアによるウクライナ侵攻と、世界的な干ばつが重なったら、世界の食糧事情は危なくなりそうだなー」と思った。一つじゃない、二つだ。二つも大きな要素があったら、危ない。そう思った。 そう思ったおれは、「ひょっとして、地球の人口は地球が人類を養える上限を超えているのでは？」と思った。思って調べた。 まず調べて出てきたのはWikipediaの「適正人口」という項目であった。どこぞのだれかがいろいろな基準で算出した地球の適正人口は15億から20億人だという。 え、そんなに少ないの？ というか、いろいろの基準がなかなかハードル高くない？ とりあえず、食えることが満たさ
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
「ゲーム内のクモ」扱い難しすぎ問題で開発者ら悩む。お約束の敵キャラでも、のっぴきならない恐怖感 - AUTOMATON
ゲーム開発において、ある共通の問題が存在しているようだ。それは、「クモ」をどう扱うかである。 『V Rising』といえば今月17日に早期アクセス配信を開始し、すでに100万本以上を売り上げた人気吸血鬼サバイバルだ。同作はまだ開発が進む段階ということで、ユーザーからのフィードバックを積極的に受け付けている。そうした議論が交わされる場の一つがコミュニケーションツールDiscordだ。『V Rising』のDiscordサーバーには「コンテンツと機能の提案」チャンネルが存在し、ここでユーザーが直接ゲームへの要望を投稿し、盛り上がっている。 そうしたなか、あるユーザーがユニークな提案を持ち上げた。「“恐怖症”対策モード」を実装してほしいという意見だ。いわく、そのユーザーの友人は「クモ恐怖症」を患っているとのこと。そのため、『V Rising』をプレイするなかで、ボスキャラクターの一体Ungora
全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者（エンジニア、プロダクトマネージャー、デザイナー）向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
これに対し、今回のデモを組織した団体「No Tech For Apartheid」は「自分たちの労働がアパルトヘイトや大虐殺の原動力となることは望まない」と訴える。Googleに対してイスラエル政府との契約の中止を求めるのは、発端となったプロジェクト・ニンバスの契約を「ガザのパレスチナ人を虐殺するイスラエルへの支援」と見なしていることによるものだ。 社員の解雇について同団体は「言語道断の報復行為」「Googleが自社の社員よりも、虐殺行為をしているイスラエル政府および軍との12億ドルの契約の方を大切にしていることが、これではっきりした」と反発した。 また抗議デモは平和的に行われ、Google社内で器物を損壊したり、同僚を妨害したりもしていないと主張。社員の解雇はGoogleのいう「開かれた文化」の虚偽をさらけ出したと訴え、解雇は不当だったとし全米労働関係委員会（NLRB）に不服を申し立てて
ガラス張りの図書館がある「まちなかリビング北千里」について、蔵書の紫外線対策などを吹田市に質問しました｜塩谷舞（mai shiotani)
昨年11月12日、私の故郷でもある大阪府吹田市にあたらしく出来た「まちなかリビング北千里」ついてTwitterで投稿したところ、さまざまな声が届きました。 その際に投稿した写真がこちらです（一部）。 これらの写真や「場所によって飲食OK」と書いていたツイートの文言などを受けて、「ガラス張りの図書館は、紫外線によって蔵書が退色してしまうのではないか」「高い場所に飾ってある本を手に取ることが出来ないのではないか」「飲食OKの図書館では、本に虫害が発生するのではないか」ほか、多くの懸念の声が、引用リツイートなどで見られました。 夢なの？というような理想の図書館が千里に出来てしまった…… 圧倒的な蔵書数、電源Wi-Fi完備でPC作業OK、場所によって飲食OK、「図書館なのにそんなに…？！」という夜8時までの開館時間。 なにより、窓の向こうの箕面の山々が美しい……。北千里駅すぐ。22日オープンで、h
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
私のフロントエンドディレクトリ構成・テスト観点 2022
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
【iOS14】ドアベルなどの音をiPhoneが聞き取って通知する「サウンド認識」 - iPhone Mania
【Ventura】ぼくのかんがえたさいきょうの Mac 初期設定 - Qiita
iPadにThinkPadキーボードをつないだら見たこともないデバイス爆誕
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
三連休はこれで勉強だ！ サイボウズ、新人ITエンジニア向け資料を無料公開
個人的PCまわりセットアップまとめ - Qiita
決済チームがテストコードを書く際に気を付けていること - UPSIDER Techblog
認知負荷の増加がWebサイトに与える悪影響
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
他者の眼になる魔法のようなインターネット体験。”Be My Eyes “ - フジイユウジ::ドットネット
すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
CSSとコンポーネント設計に対する考察 - uhyo/blog
iPhoneの知らないと不便な時短機能10選 | ライフハッカー・ジャパン
ICT化と教員削減、「取りまとめから削除」指示 河野行革相
【仕様の読み方】HTMLの要素をどうやって学ぶか
iPhone 12系統のレスポンシブ対応のメモ書き
Googleオフィスに警察、社員50人超を解雇 抗議デモ対応が見せつけた“IT界の巨人”の変貌ぶりとは
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ