これは何 Qiitaでは現在アクセシビリティ改善プロジェクトを立ち上げて、アクセシビリティ改善の取り組みを進めています！ この記事では、具体的にどのように改善を進めてきたのかと、実際やってみてどうだったかを紹介します。 背景 アクセシビリティ改善プロジェクトを立ち上げる前から、UIデザインや実装時に、クリックできる要素のタップエリアや、背景と文字色のコントラスト、画像やアイコンに適切な読み上げが設定されているかなどなどアクセシビリティ対応自体は行なっていました。 社内でも「アクセシビリティ」という言葉は浸透しており、デザインや実装、レビュー時に「アクセシビリティ対応の観点で〜」といった会話が自然に起きるような状態でした。 一方で明確なルールや基準は設けられていなかった為、漏れが生じたり人によって対応に差が出たりしてしまっていました。 また、インタラクションのある複雑な動きのUIではアクセシ

レスポンシブイメージとは 画面幅や端末（パソコン、スマホなど）に応じて表示するイメージを切り替えること なぜ重要なのか スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想 逆にスマホ用の小さな画像をPCで開くと、画像がボケる なので表示端末に応じて画像を切り替える必要がある そのために何を理解する必要があるのか HTML5でimgに追加されたsrcset属性, sizes属性 ブラウザがどうやって画像を選択しているのか Retinaについて 凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました 早速実装してみよう サイズが異なるフラミンゴの画像を4つコチラから拝借しました。 普通にimg srcを指定して表示する まずは普通にimgにsrcを設定します。

はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色

2024年1月時点のAWSベストプラクティスに従って作成しました 好評でしたら続編も検討します 1. 環境ごとにアカウントを分離する 本番、検証、開発ごとにアカウントを分割しましょう ✕良くない例 ◎良い例 最初にアカウント分割しておかないと、後で分割するのはとても大変です アカウントを分割することで「検証と思って作業したら、実は本番だった」のような事故を減らすことができます コストがアカウント単位で集計されるため、環境ごとのコストを簡単に算出することができます AWS Organizationsを使用することで、各環境に応じた権限設定が簡単にでき、ガバナンスを強化することができます AWSアカウントはAWS Control TowerのAccount Factoryを使用することで、クレジットカード情報を都度入力することなく簡単にアカウントの払い出しが可能です また、AWS Contro

はじめに こんにちは！ご訪問いただき、ありがとうございます！ 僕は現在、エンジニアとしての就職を目指しながら、インボイス制度に対応した請求書を、Web上で作成・発行できるサービスの開発をしています。 その開発を進めていく中で、読んでもらえるREADMEを作成したいという想いから、世の中の開発者がどのようにREADMEを作成しているのかを、GitHubで調べて分析をしました。 本記事では、たくさんのREADMEを見て学んだ、読みたくなるREADMEを書くためのコツを、実際に僕が作成したREADMEを例にしてご紹介します。 実際に作成したREADME 前提 今回ご紹介する内容は、未経験でエンジニア就活をする際に、採用担当の方が読みたくなるようなREADMEを作成することを目的とした内容となります。 また、実際に作成したREADMEを例にコツのご紹介していますが、時間の兼ね合いで、学んだコツを反

更新情報 ▼ 2020/05/18 内容を再度検証して更新しました。 新たに Safari と Edge を追加しました。 はじめに JSからHTMLを書き換える際に、 DOM.textContent DOM.innerText DOM.innerHTML などを使って書き換えますが、この3つの違いって何だろう...? となったので実際にコンソールで試して違いを確認しました。この記事はそのメモです。 なぜ調べたのか 今どきググればすぐ出てくるはず！！ とか思っていたのですが、どうも書いてあることが記事によってバラバラで困りました。 一番多い違いの理由として 対応ブラウザ※ が挙げられていたのですが、どうやらそれは2020年では古い情報が多い気がしました。 はっきりする他の理由がググっても出てこなかったので自分で調べちゃえ！ってノリです ※ IEだと textContent が使えない /

はじめに 私は、さくらインターネットというクラウドサーバの会社の社長をしていて、よく経営者の方からのメンタリングのリクエストをいただくことがあります。 その中で多くの割合を占めるのが、ITエンジニア(以降、エンジニア)のマネジメントと、エンジニア組織の構築をどのようにすればいいのかというテーマです。 確かに、どんなビジネスをするにしても、単にSaaSやノーコードツールを活用するだけでは足りなくて、自分たちでシステム開発しないといけないケースが増えてきているのは、間違いないなと思います。 外注をしてシステム構築をするケースももちろん多いですが、基幹システムのような使いにくくても自社の社員が我慢すればいいものと違って、自社のお客様向けのシステムだと使いやすくないとお客様が離脱してしまいますし、常にアップデートをし続けて、最良のUI/UXを作ることが業績に直結します。 要は、今のデジタルシステム

1. はじめに ソフトウェア開発のチームに、新しいメンバーが入ってくることはよくあります。 以前に新卒社員がチーム入ってきた場合の育成方法を紹介しました(こちら)。 今回は、新卒社員ではなく、他の会社から中途入社か同じ会社の部署異動で来る新メンバーの話です。 (エンジニアが数百人などで規模が大きい会社の場合、部署が違うと仕事のやり方が全く変わる場合があるので、今回は中途入社と他の部署からの異動を同じように「新メンバー」として扱います) 会社や部署が変わると仕事のやり方が大きく変わるため、仕事のやり方に戸惑うことが多いと思います。 本稿では、そのような「新メンバー」を活躍しづらくしてしまうアンチパターンとその対策を紹介します。 2. 中途入社や部署異動で来た新メンバーが適応することの困難さを理解する 中途入社や部署異動で来た新メンバーが組織に適応することは、新卒社員のそれとは別の難しさがあり

筆者について 筆者は地方中小SIerの現職エンジニアです。3年目で実力はまだまだですが、主に初学者・未経験者・独学者へ向けた記事を作成しています。 筆者はスキルアップ&Web系企業への転職を目指し、HappinessChainというスクールで勉強を進めております。 →Web系企業への転職が決まりました。 若干の開発経験者として、最近はスクール内の初学者の方にペアプロを行うことが増えてきました。ペアプロの中で、初学者の方はプログラミングの進め方そのものを知る機会がほとんどない ことに気が付きました。そういった初学者の方に「実装の方向性だけでも示したい」思いから本記事作成に至りました。 まえがき プログラム初学者、未経験の方にとってプログラムのコーディング作業はとても難しい作業だと思います。スクールに入っている場合、実装課題・コーディング課題になった瞬間太刀打ちできないケースも多いと思います。

はじめに 私は他人のコードをレビューしたことも自身のコードを他人にレビューしてもらったこともない初学者として現在のプロジェクトに加わりました。そこから現在までの2年間毎月10から20ほどのプルリクエストをレビューし、またチームメンバー内で読みやすいコードについて議論することで、徐々に読みやすいコードを書くためのポイントが掴めてきました。 これらの経験を通じて、私が現在考えている読みやすいコードを書くためのポイントを本記事にまとめていきます✍️ 前提 言語はJavaScriptで、レガシーな環境での手続き的なJavaScriptを想定しています。 「JavaScriptの文法やメソッドは理解してきたけど、より読みやすいコードの書き方がわからない」と感じている初学者向けです。 筆者は一般的なコーディング規約や設計原則についての書籍や資料をほとんど参照していません（読んだことがある本と言えばリー

皆さん三項演算子をif文の短縮形だと思っていませんか？ あくまでif文は文、三項演算子は演算子なので意味合いが違います。 三項演算子を適切に使用することで理解しやすいコードになるので、例題を見ながら三項演算子の使い所について学んでいってください。 ※ 使用する言語は javascript（ES2015）です。 三項演算子（条件演算子）とは まず、三項演算子についてのおさらいです。MDN Web Docsより引用して説明します。 式と演算子 ･ 条件（三項）演算子 条件演算子はJavaScriptで唯一3つの被演算子を取る演算子です。 条件に基づいて2つの値のうち1つを選択します。 標準的な演算子を使用できる場所ならどこでも条件演算子を使用できます。 引数 condition trueかfalseかを評価する式です。 expr1, expr2 各々の値の場合に実行する式です。 conditi

どういう状況？ とあるWebサービスの、全てのページに入れるJS製共通コンポーネントを作成、反映することになった！ が、ページには既にjQueryが読み込まれ、且つjQueryプラグインが拡張されているような状態。順当な対応であれば、追加する共通コンポーネント側で、jQueryが読み込まれているかどうかを判定し、読み込まれていなければ読み込む、という対応になるだろうか。というかjQueryのバージョンくらい管理しろよという話でもあるけれども。 ググったら jQuery.noConflict(true) なるもので、複数バージョンのjQueryを存在させておけるらしいが、挙動が色々不明瞭なので、色々検証してみた。 お題目 ひとまず謎の jQuery.noConflict(true) を詠んでみる。 jQuery.noConflict(true) を呼ぶ事で、呼ぶ前と何が変わるのか どう使うべ

はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 そもそもVSCodeって？ VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって？ 字や記号などのテキストで構

はじめに この記事は CrowdWorks Advent Calendar 2016 18日目の記事です。1 やすにしと申します。世間一般的に言う、ジャーマネ的なことをやらせていただいております。組織というのはナマモノでして、常に変化し、課題の種のようなものを見過ごすと、後々大変なことになることが多くあります。とはいえ、うまくいっても空気のように当たり前となりますし、うまくいかないと批判の的になるというなんとも世知辛い役割ですね。 我々も、5人ほどのエンジニアだった組織が、9ヶ月ほどで30人を超え、大きな変化を迎えました。人数が多くなるということは、課題が変容し複雑になるということ。当然ながらその複雑な課題に対して対処するわけですが、そこで多くの会社は「マネジメント」をしようとします。ただ、そのマネジメントもやり方を間違えると、活力や改善や変革をする芽を奪ってしまい、一気に硬直化し、数人だ

Cookies.set('cookie_name', 'value') //7日後に有効期限が切れる、vokkiesを保存する Cookies.set('name', 'value', { expires: 7 }) //pathを指定して、それ以下のpathでのみ有効なcookieを保存する Cookies.set('name', 'value', { expires: 7, path: '' })

概要 バイト先のアプリ開発でデータを一時的に保存したいのですが、LocalStorageだと なぜか動作しないという問題がありました。 そこで、LocalStorageのように半永久的に残るものではなく 期限付きで削除してくれるものを使いたいなぁとCookieを思い出したので使ってみました🔥 使い方 大まかな流れ 大体はLocalStorageを利用する時と同じです。 若干Cookieの特徴があるので、そこだけ使い方が変わるイメージになります！ Cookieに保存する時 JSONに変換 Cookieにセット 期限、パスなどの設定 JSONに変換しない場合、[object Object]といった謎の形式になってしまい オブジェクト形式のデータを読み込めなくなるためです。 （valueに複数の値がセットされている場合に “.” で繋ぐことにより値を取得できる性質を利用）

これ一つだけで良い。 $(callback)はHTMLの解析が終わった後にコールバック関数を呼び出す。scriptタグの書く位置に左右されず、綺麗に実行します。 このように、余分で意味の無い関数は省いて、ブロックネストを減らす書き方をしよう。write less, do more! 互換の無い書き方 readyイベント 次のクセの悪い書き方をするとjQuery 3.0では動かなくなった1。

はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになることで個人開発で多くのサービスが作れるようになりました。 そんな私が去年の自分にアドバイスするなら、 0からReactを学ぶならこのロードマップで勉強しろ と言いいます。 Reactを学ぶことで 勉強することが楽しい ↓ モノを作ることが楽しい というマインドに変われたの

はじめに レスポンシブデザインのWebページを制作する際、CSSのメディアクエリで指定した条件（ブラウザ幅などのブレークポイント）に応じてJavaScriptの処理を実行させたい場面があります。 ブラウザ幅の変化を扱う場合、古くは「window の resize イベントを監視してブラウザ幅を取得する」といった手法も取られていましたが、パフォーマンスなどを考慮した場合には少し実装に工夫が必要でした。 IE10以降の主要なブラウザであれば window.matchMedia メソッド を利用することでシンプルな実装が可能です。 window.matchMedia メソッドを利用した実装 例として、ブラウザ幅 769px をブレークポイントとする場合を考えると、JavaScriptのコードは次のようになります。 // 1. 変数mqlにMediaQueryListを格納 const mql =

resizeもしくはwindow.matchMediaを用いてウィンドウの幅に合わせてJavascriptの処理を変える方法JavaScriptCSS3jQueryレスポンシブ はじめに こんにちは。 私はフロントエンジニアとして働いていますが、未経験であるため現在課題を出されています。 その課題で「ウィンドウの幅に合わせてJavascriptの処理を変えたい！」ということがあったのでその方法を書いておきます。 jQueryのresizeを使用した方法 まず、方法として考えられるのがjQueryのresizeメソッドです。 resizeはウィンドウの幅が変わると実行するメソッドで、ウィンドウの幅に合わせて処理を変えたい時に使用できます。 $(window).resize(function(){ //windowの幅をwindow_widに代入 let window_wid = $(wind