アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編

※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar...

1w

アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編

クイックサマリー‐私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color...

5w

POSTDをGatsby.jsベースに変更しました

POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.（現新規事業開発部）で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳！」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。...

Apr 2021

PHPはもうダメだ、PHP万歳！

GutenbergとWordPressに関する騒動は、PHPの終焉につながる最新記事です。深呼吸をしてください、みなさん。トロールは無視し、Mark TwainとFidel CastroとPHPとの共通点を見ていきましょう。そして、もっと重要なのは、スタートアップやスモールビジネスにとって、PHPが今でも合理的な選択である理由です。 PHPはいつから廃れ始めたのか “PHPはもうダメだ”といったブログの投稿が、登場し始めたのは2011年のようです（これより古いものを見つけたら、お知らせください）。Mediumや、mushroomsのように突然出現したcoding bootcampsを探し回れば、その唯一の共通点は、みんながPHPを嫌っているか、あるいは単に無視しているかです。どうやら、法外な値段のコーヒーを飲みながら、油まみれのヒゲと皮肉たっぷりのTシャツと一緒に、PHPでコーディングするのは不可能のようです。...

Mar 2019

70%の人がフェイクニュースに懸念 — Google の闘い

「児童３０人をレイプした小児性愛者でHIV陽性の司祭　教会の外で磔りつけに」というようなタイトルを最近、見たことはありますか？　それほど以前のことではないでしょうね。こうした不快で輝かしくないタイトルには、特に心がそそられるものです。ソーシャルメディアのフィードをスクロールしているとき、大げさな見出しの付いたニュースがシェアされているのに出くわしたことは、誰にでもあるはずです。疑いを抱きながら記事をクリックして読む人もいれば、ニュースの出どころを確かめもせずに即座にシェアする人もいるでしょう。 注釈：「画像が付いているからといって、ネット上の情報をどれもこれも鵜呑みにしてはならない」―アブラハム・リンカーン 批評精神のある読者なら、数分間の手間をかけ、Googleが指示する注意義務を払って話の真実性を確かめるでしょう。でも、そのときには、その話は急速に広まって何百万回も閲覧されていて、もう手遅れかもしれません。...

Mar 2019

データサイエンティストにおいて、最も需要のあるスキルとは

雇用者は何を求めているのか？ データサイエンティストは、多くのことを知っていると期待されます。例えば機械学習、コンピュータ科学、統計、数学、データの可視化、コミュニケーション、そしてディープラーニングといったものです。これらの分野の中には、データサイエンティストが学んでいる可能性のある何十もの言語やフレームワーク、テクノロジが含まれています。雇用者側から求められたいデータサイエンティストは、限られた学びの時間をどのように割り当てるべきでしょうか。 私はデータサイエンティストにどのようなスキルが求められているのかを探るため、Web上の求人情報サイトを見て回りました。一般的なデータサイエンスのスキルと、特殊な言語やツールは分けて考えています。検索した日は2018年10月10日、サイトはLinkedInとIndeed、SimplyHired、Monster、それに[AngelList](https://angel.co/jobs）です。以下は、各Webサイトにデータサイエンティストの求人がどれだけ掲載されていたかを示す図です。...

Mar 2019

JavaScriptとオブジェクト指向プログラミング

本稿は、オブジェクト指向プログラミング（OOP）について予備知識のないJavaScriptの学習者向けに書かれています。OOP の中でJavaScriptに関連する部分にのみ焦点を当て、OOPの概要については説明しません。ポリモーフィズムについては、静的型付け言語の方が適しているため省きます。 なぜOOPを知る必要があるか？ あなたは初めてのプログラム言語にJavaScriptを選びましたか？　あなたはコードが10万行以上にわたる巨大企業のシステムを扱う腕利きの開発者になりたいですか？　 オブジェクト指向プログラミングを最大限活用できるように学ばなければ、到底無理でしょう。 様々な考え方 サッカーでは、安全に守りを固めることもできますし、サイドからの高いボールに飛びつくこともできます。また、先など考えずに攻撃することも可能です。これらの戦略は全て同じ目的を持っています。それは試合に勝つことです。...

Mar 2019

気をつけよう：プログラミングのキャリアの話 – 後編

デスクトップ ここでは、実際にデスクトップアプリケーションにならしめているデスクトップアプリケーションの一部についてお話しします。特定のスキルセットを必要とするデスクトッププラットフォームは大量に存在しています。例えば、Photoshopは画像を扱うアプリケーションなので、Photoshopなどで何か書きたければ、画像の処理を行うアルゴリズムと技法を絶対に知っておく必要があります。Dropboxなどで何か書きたい場合は、ソケットプログラミングを絶対に知っておく必要があります。そしてVisual StudioなどでコンパイラやIDEをビルドしたければ、コンパイラの操作方法を絶対に知っておく必要があります。ここではその詳細には触れません。デスクトッププラットフォームに取り組みたい場合に最も使う可能性のある言語について見ていきます。...

Feb 2019

気をつけよう：プログラミングのキャリアの話 – 前編

プログラミングの森の奥で道に迷わないために 私がプログラミングの仕事を始めたばかりのころの悩みの種は、どの言語や技術を選ぶべきか、でした。何を学び、何から始めればいいのか。プログラマとしての初仕事を獲得するために知っておくべきことは何か。そのころ（ほぼ10年前）、CourseraやUdemyやSoloLearnは、ありませんでした。いい職に就くための確実な方向、完璧な道筋がどんなものなのか、私にはわかりませんでした。高給で、満足できて、優遇される、21世紀の宇宙飛行士、つまりプログラマの仕事を得るには。 問題は今でも相変わらず同じです。ビギナーは選択の段階でつまずき、優れたプログラマになるための近道はなく、コミュニティは「Pythonっていう言語は簡単ですか？」というような新入りの質問を歓迎するほど温かくもありません。プログラマとして成功するための道筋は、むしろ以前よりも見えにくくなっています。あなたは（あなたがビギナーだと仮定して）、C++/C++11/C++14/C++17、Java、C#、Kotlin、PHP（何だって？）、Python、Node.js、JavaScript（ちょっと待て、Angularで？それともRea...

Feb 2019

役立つコードレビュー　8つのヒント

役立つコードレビュー（CR）のコツは、学校では習いません。アルゴリズム、データ構造、プログラム言語の基礎は習っても、確実に役に立つフィードバックを返す方法をじっくりと教えてくれる人はいないでしょう。 コードレビューは優れたソフトウェアを作り出すには欠かせないプロセスです。レビューを通したコードは、そうでないコードよりも質が高く、バグが少ない傾向があります。健全なコードレビュー文化には、副次的な利点もあります。たとえば、バス因子を押しとどめる、新メンバーのトレーニングに最適なツールになる、など。また、コードレビューは優れた知識共有の手段でもあります。 前提 まずは、この記事のポイントの前提を提示する必要があるでしょう。それは以下のとおりです。 信頼のおける環境で作業をしている。あるいは、あなたとチームは、あなたの信頼性を高めることを目指して作業している。...

Feb 2019