開発・運用本部向け新人研修2018の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。そろそろプロ野球シーズンの開幕が待ちきれなくなってきたコネクト支援チーム*1の酒井（@sakay_y）です。 サイボウズでは、新入社員全体研修の後に、開発系の新入社員に対して1ヶ月程度の開発研修をおこなっています*2。内容は、毎年改善を重ねていますが、基本的には講義＋実習です。本記事では、先日公開した2018年の研修の講義資料を、全体の流れに沿って紹介したいと思います。 開発・運用研修について 本研修は「開発本部・運用本部に配属される新入社員が、部署配属後に必要となる基礎的な知識/技術/ツールを学び、体験できる。」ことを目的にしています。 新入社員3〜4名を1チームとして、そこに担当のメンターが1名付いて研修を進めていきました。講義では先輩社員に講師をお願いし、開発演習では各チームにメンターとは別の先輩社員が担当スクラムマスター（！）として付きました。 スケジュール 7/2 〜
こんにちは、サイボウズ株式会社の小林(@sukoyakarizumu)です。 2019年10月に、全盲の杉崎くん(@blindsoup2p1)が、エンジニアとしてサイボウズでアルバイトをはじめました。杉崎くんは2020年4月に、新卒でサイボウズに入社する予定です。 入社の経緯については、杉崎くんが以下の記事にまとめています。私の記事では、杉崎くんの出社にあたって、準備したことや気づいたことをまとめようと思います。 出社の練習をしようもともと杉崎くんは、面談や面接があるときに、何度かサイボウズの東京オフィスに来ていました。その際はサイボウズの社員が、オフィスの最寄駅である日本橋駅改札まで迎えにいっていました。 杉崎くん一人でも出社することができるように、杉崎くんと出社のルートを覚える練習をしました。練習は人事メンバー数人が主導し、私はそれに同行することにしました。 「壁」が重要な手がかりオフ
改正された障害者差別解消法の施行が迫りつつあり、企業にとってウェブアクセシビリティへの対応は急務といえる状況です。 また、アクセシビリティは法律だけの問題ではありません。Webサービスを展開している企業であれば、サービスを誰でも不自由なく使える状態にしていくためにも、アクセシビリティに向き合っていく必要があります。 今回は、アクセシビリティのテストと自動化における各企業の取り組み事例について、4名のパネリストにLT形式で発表していただきました。本記事では、テストの自動化やツール選定、普段の開発への組み込み方など参考になる情報が盛りだくさんだったトーク内容をご紹介します。 ■パネリスト 安田 慎さん/@syasuda90 株式会社サイバーエージェント AmebaLIFE事業本部 開発局 フロントエンドエンジニア 2016年に中途でサイバーエージェントに入社。フロントエンド開発を担当する傍らア
すごく良かった！！ まとめると TypeScript, Angular2, BEM, Sass, gulp 使って開発しろっていうカンファレンスでした。 Are you a Designer or an Engineer? twitter.com/yamasy1549 http://yamasy.info NIT, Akashi College 2nd grade 17歳 スライド http://www.slideshare.net/yamasy1549s/are-you-a-designer-or-an-engineer ハッカソンに参加 はじめはコード書けなかったので発表資料とか作っていた。イラレに詳しくなった ランディングページとか作るようになった rubygirlに参加 インターンでお仕事でコード書くようになって人に見られるコードを意識するようになった はじめはjQueryとか今は
2020年、サイボウズのアクセシビリティを振り返る - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 デザイン＆リサーチ アクセシビリティチームの SUGI(@blindsoup2p1)です。 私は今年の4月に新卒で入社した全盲のスクリーンリーダーユーザーで、アクセシビリティ・エンジニアとして活動しています。 サイボウズでは今年、正式にアクセシビリティチームが発足し、グループウェアのアクセシビリティ向上や社内への啓発を進めてきました！ この記事では、今年1年アクセシビリティチームが取り組んできた過程と成果をまとめ、来年の展望を示します。 と共に、エクストリームユーザーである私がアクセシビリティ向上にどうかかわっていったのかを合わせて紹介します。 ※アクセシビリティとは、能力・環境・状況にかかわらず、誰もがサービスやコンテンツを利用できること、またはその度合いのことです。 よくアクセシビリティは障害者・高齢者対応という誤解を受けますが、能力・環境・状況（の制約）は障害者
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
こんにちは。サイボウズの小林大輔といいます。社内で「アクセシビリティエキスパート」として活動しています。 サイボウズでは、2014年ごろからアクセシビリティについての取り組みを行ってきました。社内啓発活動の一環としてアクセシビリティの社内勉強会やワークショップを継続的に開催したり、実際の製品改善の取り組みも多数行ってきました。さらに社外に向けて、アクセシビリティの重要性や取り組み方を発信する活動もしてきました。 最近では、社内外でアクセシビリティという言葉を少しずつ聞くようになってきました。社内にも社外にもアクセシビリティを発信しつづけてきた身としては嬉しい限りです。 今回は、全盲 (両目が見えない) のエンジニアSUGIさんが入社したことで、私たちサイボウズが得た知見について紹介しようと思います。 もともと、私がアクセシビリティに関わることになったきっかけは、弱視の方へのユーザビリティテ
Speaker SRE @kani_b: AWS とログが好きな SRE [blog] [Web] @deeeet: Tech lead at microservices platform at Mercari [blog] @y_uuk1: ウェブシステムアーキテクチャが好き [blog] Performance @1000ch: 趣味は Web 標準技術と Web ページの品質改善です。Web の未来が気になります。 [web] [github] likr: 大学で働いています。趣味でWebや高速化をやっています。 [web] [github] @sisidovski: Web技術全般とパフォーマンスに興味があります。 [web] [github] A11y @tokimariri: フロントエンドエンジニア。社内外でアクセシビリティの啓蒙活動にあくせくしています。 @ma10: 19
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
はじめに <div class="button">や<a class="button">といったように、 ボタンを<button>以外で実装するのは極力避けよう、という話。 キーボード操作の問題 フォーカス <button>と違い、<div>やhref属性のない<a>には、フォーカスがあたりません。 フォーカスをあてるためには、tabindex属性が必要です。 ENTERキー/SPACEキーを押した時の処理 <button>にフォーカスしてENTERキー/SPACEキーを押すと、clickイベントが発火します。 このため、<button>の場合は、clickイベントハンドラを実装しさえすれば キーボードでボタンを押すことができます。 <div>やhref属性のない<a>の場合、このような気の利いた処理は行われないため、 自分でkeyupイベントハンドラを実装する必要があります。1 func
アクセシビリティを高めてみんなに伝わる発表資料のつくりかた / Cybozu Presentation Accessibility
サイボウズ株式会社で開催した「アクセシビリティを高めてみんなに伝わる発表資料のつくりかた」のスライド資料です。 以下のリンクから、PPT形式の資料を閲覧できます： https://cybozu-my.sharepoint.com/:p:/g/personal/daisuke-kobayashi_cybozu_onmicrosoft_com/EUw8uxvLxodNgXG0jVlv0O4B5LJ0eKa-jmYLrcWnTZkovQ?e=8W0TJm
SUGIです。 前々から書きたいと思っていた、自分がなぜ サイボウズ でアクセシビリティの仕事をしたいのか、ということについて書きたいと思います。丹精込めて😃 自分は、２０２０年４月から サイボウズ に新卒で入社し、 デザイン&リサーチ のチームでアクセシビリティ・エンジニアとしてお仕事をします。 現在はアルバイトで、週１ペースで通っています。楽しいです！😃 なぜサイボウズで働きたいと思ったのか。 感覚的に思っていることは、色あせていってしまう。だから文章にして残しておいて、振り返れるようにしたいと思っていた。だから、当時、そして今も強く思っていることを、書き記しておくのです！ サイボウズとは世界で一番使われるグループウェアメーカーになる。 サイボウズはチームワークあふれる会社、チームワークあふれる社会を作ることを掲げています。 チームワークを促進させるツールとしてグループウェアを開発
WAI-ARIA Authoring Practice Dialog(Modal)のフォーカス管理 - /var/log/sukoyakarizumu
この記事は、Web Accessibility Advent Calendar 2017 3日目の記事です。 はじめに モーダルなダイアログを開いたときには、ダイアログの外側の要素は操作できないようにしなくてはなりません。マウス操作だけではなく、キーボードなどによるフォーカスもダイアログの外側にあたらないようにしなければなりません。 この記事では、WAI-ARIA Authoring Practiceの実装をもとにフォーカス管理の方法について学んだTipsをメモしておきます。 WAI-ARIA Authoring Practice -Dialog(Modal) github 実装の基本方針 ダイアログの外側にフォーカスがあたったことを検出して、フォーカスを適切な位置に戻します。ダイアログの外側にフォーカスがあてるには、例えば以下のような操作が考えられます。 A) ダイアログの先頭の要素にフ
この記事は、Web Accessibility Advent Calendar 2017 2日目の記事です。 私が疑問に思った事をA11YJ Slackでご教示いただいた内容になるのですが、こちらを見ていないかたにもぜひ読んでもらいたいと思い記事にしました。 タイトルにあるようにA Responsive Accessible Tableの記事を読んでの感想なのですが、「Going Responsive > Adjusting to Viewport Size > Column Headers と Some Sort of Cell Label」の内容はアクセシブルではないと思いました。 Column Headers まず、table要素をCSSでdisplay: blockにするとスクリーンリーダーがテーブルと認識しなくなる件についてですが、実際にWindows7/NVDA2017.3jp
はじめに <? extends E>や<? super E>が使われているクラスにどのような値が代入できるのか考えよう。 手っ取り早く結論を知りたい人は図解を見てください。 準備 2つのクラスA,Bがある。クラスBはクラスAのサブクラスであるとする:
これは、Web Accessibility Advent Calendar 2016の10日目の記事です。 この記事では、アクセシビリティの検証で重要なコントラストチェッカーについてお話します。 コントラストチェッカーとは？ アクセシビリティに配慮したWeb制作を行うにあたって重要な項目のひとつは、 文字色(前景色)と背景色の選び方です。 それぞれの色に差異がない場合、文字を認識することが困難になり、 アクセシビリティが低下してしまいます。 コントラストチェッカーとは、２つの色のコントラスト比を計算し、 W3Cが定めたWebアクセシビリティの基準(WCAG2.0)に適合しているかを検証するツールです。 WCAG2.0には、コントラスト比を以下のように定めるよう規定されています。 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラ
2022/05/14(土)で開催された TechFeed Conference 2022 に関する、現時点での公開資料と Twitter アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Twitter アカウントについては、多くの方は公式サイトの紹介ページに記載 or 資料記載がありましたので、そちらから引用させていただきました。 そちらに記載がなかった方については、別途分かった方のみ記載。 資料について、見つけられなかった or 元々資料を使用していない 方についてはレポート記事を見つけられた方のみ、そのリンクを記載しています。 （ご本人の記事の場合は、本人記事という表記） リンクの間違い等ありましたらコメントい
拙著HTML解体新書でレビューいただいた@sukoyakarizumuから声かけをいただいて、Webアプリケーションアクセシビリティ──今日から始める現場からの改善 WEB+DB PRESS plusにレビュワーとして参加していました。すでに発売中で、なんでもすでに増刷がかかっているようです。よいことですね。 見本誌をご恵贈いただいていたので、発売前になにがしかブログ記事を書くのがいいよねと思いつつも、やっぱり最後まで読み通してからかな…とか思っていたら、結局最後まで目を通せずに今日まで来てしまいました。 ひととおり読むことが今日までできていない理由は、576ページという本書のボリュームにあります。このページ数でも著者陣が書きたかったものが全部収め切れなかったということで、紙面からこぼれ落ちたものがアクセシビリティを組織で向上させる──社内外の認知・効果測定から、新規開発への組み込みまで
Cybozu Meetup #5 開催します！ サイボウズの Meetup イベント第5回を開催します！ サイボウズは「チームワークあふれる社会を創る」を企業理念として掲げ、グループウェアや kintone などのクラウドサービスを開発・運用しています。 そんなサイボウズが、現場で働くエンジニア同士がカジュアルに情報交換できる交流イベントを開催します。サイボウズで使われている技術、製品、文化など毎回異なるテーマでお話しさせていただいたあと、サイボウズ社員と皆さまでディープにディスカッションしていきたいと思います。このイベントから新たなつながりが生まれることを期待しています！ 第5回のテーマは『デザイン&アクセシビリティ』 サイボウズのデザイングループはサイボウズ製品のUI/UXを担うグループです。「デザイン」といっても画面のUIを作るだけがデザイングループの仕事ではありません。ワークショッ
「すべて」の人にWebコンテンツの価値を届ける品質 / readable_na_cybozu_191102
2019年11月2日「リーダブルな昼下がり」で発表したスライドです： https://readable-na.connpass.com/event/145881/
はじめに <? extends E>や<? super E>といった宣言の意味をまとめる。 非変性 <? extends E>や<? super E>の解説をめる前に、Javaコレクションの「非変性」を確認しておこう。 3つのクラスA,B,Cがあり、以下のような親子関係があるとする。
はじめに JavaのList<Object>とList<?>のふるまいの違いを簡単に解説する。 代入できる値 List<?>型の変数には、すべてのList型の値を入れることができる。<>の中の型はなんでもよい。 List<Object>型の変数には、List<Object>型の値のみ入れることができる： List<?> list1; List<Object> list2; list1 = new ArrayList<Object>(); list2 = new ArrayList<Object>(); list1 = new ArrayList<Integer>(); list2 = new ArrayList<Integer>(); //コンパイルエラー List<?> list1 = new ArrayList<Object>(); List<Object> list2 = new A
イベントレポート: Cybozu UXCafe「チームで取り組む！サイボウズのアクセシビリティ」 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、デザイングループ の小林(@sukoyakarizumu)です。 2018年11月28日に開催したイベント「UXCafe チームで取り組む！サイボウズのアクセシビリティ」についてレポートします。 イベント中のツイートは、Togetterにまとめられています。 すべての発表資料は、Compassで閲覧できます。 イベントの趣旨 今回のイベントは、サイボウズのさまざまな開発チームがアクセシビリティに取り組んでいることを伝えるために開催しました。 サイボウズは、複数の開発チームがアクセシビリティの活動を進めています。また、特定の職能だけではなく、デザイナー、プログラマー、QA、TC(Technical Communication)など、さまざまな職能のメンバーが一緒にアクセシビリティに取り組んでいます。 今回は、「Garoonチーム」「TCチーム」「kintoneチーム」の3つの開発
概要 サイボウズのさまざまな開発チームの「アクセシビリティ」に関する取り組みを紹介します！ サイボウズは「チームワークあふれる社会を創る」を企業理念として掲げ、 グループウェアや kintone などのクラウドサービスを開発・運用しています。 サイボウズでは、高齢者や障がい者を含めて、チームにいる誰もがアクセスできる製品を目指し、 アクセシビリティの取り組みを進めています。 今回は、それぞれの開発チームがどのようにアクセシビリティに取り組んでいるか、お伝えします！ トーク内容 トーク1: Garoonチームのアクセシビリティ サイボウズ Garoonの開発チームには、デザイナー/PG/QAからなるアクセシビリティギルドが存在します。 それぞれのメンバーがどういった立場からどのような活動をしているかご紹介します。 河内山 琢哉 デザイングループ デザイナー（@kochitaku） 杉山 祐一
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全盲の新入社員はサイボウズに出社できるのか？｜sukoyakarizumu
ウェブアクセシビリティ テストと自動化における挑戦と失敗 - Findy Engineer Lab
20160305 フロントエンドカンファレンスのメモ - Qiita
全盲のエンジニアと働くことで見えてきたサイボウズのアクセシビリティ｜Cocoda
次世代 Web カンファレンス - connpass
ヘッダーを固定した表のアクセシビリティ - Qiita
ボタンは<button>で実装しよう - Qiita
私はなぜ、サイボウズでアクセシビリティに取り組みたいのか by blindsoup｜blindsoup
Re: A Responsive Accessible Table - White Stage
<? extends ...>や<? super ...>って何？代入編 - Qiita
コントラストチェッカーのばらつきと対策 - Qiita
TechFeed Conference 2022 公開資料・Twitterリンクまとめ
Webアプリケーションアクセシビリティ発刊によせて - 水底の血
Cybozu Meetup #5 デザイン&アクセシビリティ (2017/06/20 18:30〜)
<? extends ...>や<? super ...>って何？基本編 - Qiita
List<Object>とList<?>の違い - Qiita
UX Cafe: チームで取り組む！サイボウズのアクセシビリティ (2018/11/28 19:00〜)