Regional SCRUM GATHRING Tokyo 2022 速報(3日目)

こんにちは! ROXX で back check の開発エンジニア兼、スクラムマスターをやっている、ぐっきーこと山口 (@Area029S)です。Regional SCRUM GATHRING Tokyo 2022 3日目のレポートをさせていただきます!

OST(Open Space Technology)

discord とオンサイトそれぞれの会場を交えて、ハイブリットな OST を実施しました。 私はオンラインでの OST に慣れていた分、オンサイトではお目当てのテーブル探しに一苦労しましたが、楽しく参加してきましたので一部始終をお届けします。

来週からはじめること、やめること

A 枠 ost-table-1

いきいきいくおさんの「みなさん、いきいきしてますか?せーの、いきいき〜!!」の掛け声にのせて、来週からはじめること、やめることを発表しあう時間になりました。 個人的に好きだったのは「ふりかえりをうまくやろうとすることをやめる!」でした。会場で一番いきいきしたテーブルだったと思います。

フルリモート環境でのいい感じなオンボーディング気になっている

B 枠 ost-table-11

オンボーディング、チームビルディングのために、四半期に一回のペースで相互理解のためのワークショップをやっているというお話が印象的でした。バリューズカードゲーム、ドラッカー風エクササイズ、ストレングスファインダーなどを活用しているというお話を聞けました。

ネガティブワードを妥当な表現に変えたい!!!

C 枠 ost-table-1

チームの雰囲気が悪くなるネガティブワードを妥当な表現に変えたい!!!ということで日頃のネガティブワードあるあるをどう改善できるか考えました。 気遣いの行き届いた素敵な表現がたくさんでたので、私も積極的に使っていきたいと思います。

  • ~べき → ~の方が好き
  • 結局なにがしたいの → そういえば、この議論の目的ってなんでしたっけ?
  • それじゃない。◯◯だろ。→ それだったらこれは?
  • それでいいです → それがいいです
  • もうちょっとできるでしょ → 満足してる?
  • とくにないです → 完璧やん!
  • xxとか、zzとかっていう逃げ方はありますけど… → xxとかzzとかの選択肢を取れますね!

Closing Session

Closing Session は @Tsuyoshi Ushio さんによる、アメリカの超巨大クラウドの中の人に転生したガチ三流プログラマが米国システム開発の現実をリークするというセッションでした。

Ushio さんは現在アメリカの Microsoft でシニアエンジニアとして働いています。ただ、特別エンジニアとして優秀なわけではありません。偶然、経歴が求められていたものとフィットしただけであり、どうやったら Microsoft で働くエンジニアになれるの?という問いに対しての Tips は、「面接を受けましょう」ということでした。

また、日本とアメリカ(特に Microsoft )との組織の違いとして、アメリカではウォーターフォールのメリットは0だから、100%の現場でアジャイルを導入している。また、チームのメンバーがインディビジュアルコントリビューター(IC: 個人事業者的な意味合いで使われている)として、管理されるわけではなく自分たちで行動やキャリアを選択していくいう点を挙げられていました。

おわりに

3日間行った RSGT2022 もついに終わってしまいました。 discord のみなさん、オンサイトのみなさん、3日間楽しくギャザリングできましたでしょうか? 私ぐっきー個人の振り返りとしては、新たな学びを得たとともに、多くの方と交流できたので有意義なギャザリングができたと感じております。

また、 RSGT2022 の1日目、2日目の速報もあわせてお読みください。

最後に少しだけ、弊社 ROXX の宣伝をさせてください!今回の RSGT ですが、私は業務として参加しています。 RSGT は参加費がお高めなカンファレンスですが、これらは会社負担で参加できます。弊社 ROXX では、エンジニアが技術力をつけるための勉強会については本人が業務に活かせると判断するのであれば、基本的に業務扱いにしてくれます。

もし、弊社にご興味を持っていただけましたら、弊社 ROXX 採用サイトよりお気軽にカジュアル面談のお申し込みください!

最後まで読んでいただき、ありがとうございました!

Regional SCRUM GATHRING Tokyo 2022 速報(2日目)

こんにちは! ROXX で back check の開発エンジニア兼、スクラムマスターをやっている、ぐっきーこと山口 (@Area029S)です。Regional SCRUM GATHRING Tokyo 2022 2日目のレポートをさせていただきます!

Keynote

2日目の KeynoteDiana Larsen さんです。 The Agile Fluency Model を用いて、どのようにチームをリードし、彼らの能力を発揮させるために投資をするかについてお話されました。

Fluency (流暢さ)なアジャイルチームになるには Focusing, Delivering, Optimizing, Strengthening の4つの習熟度のゾーンがあります。また、ゾーン毎にそれぞれ以下の指標を計測します。 - Focusing: チームの取り組みに対する、ビジネス価値の観点からの進捗を可視化できている - Delivering: 望まれたタイミングで、いつでも高い品質の機能をデリバリーできる - Optimizing: 自分たちの製品が市場でどのような位置にあり、どのようにその位置を向上(または確保)させるかを説明できる

チームの習熟度はどのゾーンにいるのかを考え、今すぐ行動しましょう。 そして、効率ではなく、投資に対する効果を求めましょう。効果にもっとも価値があります。といった内容でした。

Fluency なアジャイルチームとして、より価値を届けられるチームを目指しましょう!

プロダクトバックログ Deep Dive

午後一発目は Ryutaro YOSHIBA (Ryuzee) さんのセッションを聞きました。

プロダクトバックログとはなにか。プロダクトバックログの管理、分割などを通して、プロダクトバックログをきっかけにスクラム全体の思想を感じられた、学びの深いセッションでした。 印象的だった言葉は「生煮えプロダクトバックログアイテムを食べると腹を下す」という言葉で、「これを避けるために、火が通って調理済みのプロダクトバックログアイテムを食べていくことが大原則です。検査と適用で自分たちにあった調理済みの状態を探していきましょう。」とワンセットにして、準備完了の状態の大切さを伝える際にぜひ活用させていただきたいと感じました。

QAなんなん?~みんなが納得できるQAのスタイルを見つけよう~

続いて、Kaori Tokiwa さん、 Naoki Kojima さん、 Yasuharu Nishi さん、 やすよ おおの さんの合同セッションです。

開発と QA が同じ方向に進む組織になるためのハッピーな QA のスタイルづくりについて、独自に考案した QA スタイルファインダーを使って考える。というお話でした。

QA スタイルファインダーの点数づけは左右の軸との相対値であって、チームの中でどこを大事にするか共通認識で持つことが大切です。自分たちで QA スタイルファインダーの採点をする中で、チーム自身で気づきを得られることが QA スタイルファインダーの強みということでした。 オーディエンスからは、 QA だけでなく、アジャイルチームにも活用できそうとの声もありました。 私個人的にも、可視化しづらいチームの状態というものをチーム全員が共通で認識できる。という意味でとても有効なツールだと感じました。

LeSS もスクラム。プロダクトオーナーがスクラムマスターとともに取り組んだ LeSS チームの合体から融合まで

2日目最後に聴いたセッションは、Yahoo Japan から Saiko Nakai さんです。 Saiko Nakai さんの体験から、スクラム less な LeSS チームと、ゆるふわスクラムチームがいかにして融合できたのかということについてのお話しでした。

融合の過程で学んだこととして、 - プロダクトオーナーはチーム全体に対してプロダクトが目指したい状態を明らかにする - スクラムマスターは、そのためにチームがどうあるべきかを明らかにする

これらを実践するためにも、プロダクトオーナーとスクラムマスターはたくさんおはなしをするべし。

また、スクラムで大事にしていたことは LeSS でも大事にしましょう。 規模は大きいけれど、やっていることはスクラムと一緒なので怖がる必要はありません。 基本はスクラムガイドに立ち返ろう。 LeSS もスクラムですよ。とのことでした。

プロダクトオーナーである Saiko Nakai さんの言葉で、スクラムチームとして大事にしたい価値観を言語化して、日々チームに伝えているというお話が印象的でした。 個人的には、プレゼンの内容から伺えた Saiko Nakai さんの現場推進力に終始圧巻されていました。

おわりに

さて、 RSGT も折り返しを越えまして、明日が 3 日目、最終日となりました! 楽しみな気持ち、寂しい気持ちが半分ずつありつつ、明日は最後までたくさん楽しんできたいと思います!

また、私ぐっきーも FIRST TIMER のリボンをつけて会場にいるので、この記事を読んだ方はお声がけしてくれると嬉しいです!

最後に少しだけ、弊社 ROXX の宣伝をさせてください!今回の RSGT ですが、私は業務として参加しています。 RSGT は参加費がお高めなカンファレンスですが、これらは会社負担で参加できます。弊社 ROXX では、エンジニアが技術力をつけるための勉強会については本人が業務に活かせると判断するのであれば、基本的に業務扱いにしてくれます。

もし、弊社にご興味を持っていただけましたら、弊社 ROXX 採用サイトよりお気軽にカジュアル面談のお申し込みください!

それではまた、明日 RSGT 3日目でお会いしましょう!

Regional SCRUM GATHRING Tokyo 2022 速報(1日目)

こんにちは! ROXX で back check の開発エンジニア兼、スクラムマスターをやっている山口 (@Area029S)です。Regional SCRUM GATHRING Tokyo 2022 1日目のレポートをさせていただきます!

Keynote

RSGT 初日の一日目の Keynote は、Manage It! 現場開発者のための達人式プロジェクトマネジメントの著者の Johanna Rothman さんから「Agile Program Management: Scaling Collaboration Across the Organization」です。

発表では Johanna さんが自身の経験(1980年台のコンピュータープロダクト開発)を題材にアジャイルなプログラムマネジメントについてお話しされました。 コラボレーションをスケールすることが大事であり、チームが自立して行動したり、 Small World Networks を作成することでこれが実現できるとのことでした。

計画については、ロードマップは4半期単位でも予定通りに進んだ試しがないのでつくらず、4週間分を1週間ずつにわけて計画を立てていき、1週間経過したらみえてきた課題に対しての改善をするために次の5週目の計画を立てる方法で計画しました。

また、進捗の見方としてベロシティの測定ではなくサイクルタイムで計測を行いました。これは顧客の求めているのは開発速度ではないこと。プロダクトが完成品にどれだけ近づいているかを確認するためです。また、顧客はフィーチャーを求めているので、バーンアップチャートを用いて確認することができます。

最後に、プロダクトがなんのためにあるのか、我々がどこに向かうのか、そのために我々は何をするのかの順で徹底的にプロダクトへフォーカスすると、メンバーが自律性を高めるための道筋が作れるとのことでした。

1980年代のアジャイル開発を実際に携わっていた人から聞くのは、スクラムのルーツを知れたような気がしてとても感動しました。

「いい感じのチーム」になるためにやること

@yohhatuさんからは"いい感じ"のチームになるにはどのような活動を行い、どのような関心を持てばいいのでしょうか?というお話しでした。 リーダーシップ、感情、実験の3つのテーマについて話しました。

リーダーシップ

みんなでリードしましょう。リーダーだけでなく、フォロワーシップも大切です。また、チームとしてのバランスも大切です。チームビルディングはスパイラルを登っていくことを意識しながら、継続的にやりましょう。

感情

感情を大切にすることで余白的な部分からでてくる気づきがあります。お互いのことを知り、理解することを心がけましょう。感情を大切にしてもらうためには、自分の弱みからオープンにしていくことがおすすめです。

実験

日常的に実験し続けましょう。 Tips として常になにかを変え続けていくことで変化に強くなります。また、継続的に行う中で、予想や仮説を持った上で一つ一つに対して本気で実験しましょう。

当たり前のことを当たり前に継続することが、いい感じのチームに近づけるヒントですとのことでした。

個人的には、普段の実験が習慣として定着していないことから、@yohhatuさんの「日常的に実験しましょう」という言葉が胸に刺さりました。

フリカエリ星人との邂逅 ~ふりかえりのお道具箱&お悩み相談~

@higuyumeさん / @viva_tweet_xさん

ここでは OST(Open Space Technology) 形式でお悩み+日頃のスクラムに対する Tips について、フーリーとカエリーの2人?が回答したり掘り下げたりしました。

最後にはこのセッションの振り返りも。とてもたくさんの振り返りがでました。

他のセッションは聴く側に回ることが多い中で、このセッションでは自分も一員になることができてとても楽しかったです。個人的には、頑張ってファしらない。 work together の一言でどこかほっとした気持ちになりました。

プロダクトゴールとは?あるいはプロダクトのゴールを設定するには何が必要か?

続いては、@tnagasawaさんによるセッションです。 セッション中に@tnagasawaさんがお話しされたプロダクトゴールの特性 FAST(Frequent discussions, Ambitiously, Specific metrics, Transparent) を元に設計されたプロダクトゴールのフォーマットは、ぜひ活用させていただきたいと思います。

また、プロダクトゴールには常に指標を計測して 検査・適用することが重要であり、プロダクトゴールと価値指標の検査は、経験主義に基づいたマネジメントフレームワーク - エビデンスベースドマネジメント(EBM)が参考になるとのことでした。 20分間のセッションではとても足りないほど学びの深い内容でした。

参考:EBM ガイド https://scrumorg-website-prod.s3.amazonaws.com/drupal/2021-02/2020-EBM-Guide-Japanese.pdf?nexus-file=https%3A%2F%2Fscrumorg-website-prod.s3.amazonaws.com%2Fdrupal%2F2021-02%2F2020-EBM-Guide-Japanese.pdf

あなたのSprint Goalは、機能してますか?

次に@KazuhideInanoさんによるセッションです。 スクラムガイドでのスプリントゴールと完成の定義の扱いは、今までは成果に付随するものでしたが、2020年からスプリントゴールを導入し、位置付けが明確になりました。よく聞く話でスプリントゴールは決めづらい。決めなくてもなんとかなる。との意見がありますが、実際は年々重要視されるようになってきているのです。

例えばスプリントゴールの効果として、チームの活動に軸を据える。ステークホルダーとのコミュニケーションの質を上げる。活動の透明性をあげ、検査し、適用を促す。などがあります。 具体的な例として、スプリントレビューの前に、スプリントゴールをステークホルダーに共有することで、スプリントレビュー時にはステークホルダーの理解度が深くなっており、より検査、適応にフォーカスしたコミュニケーションをとることができるようになります。

また、気をつけたい兆候としてスプリントゴールが単に行動の達成目標になってしまったり、ムーンショットすぎてどれも達成できなかったりなどが現れた場合は、振り返りをして改善できることはないか検討してみましょう。という内容でした。

私が所属するチームでも、スプリントゴールの扱いについては課題感がある中で、改めてスプリントゴールの重要性を確認できる内容のセッションでした。

おわりに

まだまだ RSGT は初日が終わったばかり! 2,3 日目のセッションも楽しみですね! 私もわくわくしながら明日を待ちたいと思います!

最後に少しだけ、弊社 ROXX の宣伝をさせてください!今回の RSGT ですが、私は業務として参加しています。 RSGT は参加費がお高めなカンファレンスですが、これらは会社負担で参加できます。弊社 ROXX では、エンジニアが技術力をつけるための勉強会については本人が業務に活かせると判断するのであれば、基本的に業務扱いにしてくれます。

もし、弊社にご興味を持っていただけましたら、弊社 ROXX 採用サイトよりお気軽にカジュアル面談のお申し込みください!

それではまた、明日 RSGT 2日目でお会いしましょう!

ウェブアクセシビリティ 再入門 − 2021年版

この記事は 個人Qiita と同じ内容です

qiita.com/sekiyaeiji

ウェブアクセシビリティ 再入門

※ 本稿は過去の登壇用のスライドの箇条書きのテキストを文章に起こし直し、更新されているデータを最新のものに置き換え、いくつかコメントを加筆して再編しました。

アクセシビリティ

"アクセシビリティ" とは、「accessibility」と書きヌメロニム表記でしばしば「a11y」と記載されます。

単語の意味としては以下の通り「アクセス可能性、アクセスのしやすさ」となります。

  1. 入手[利用]可能性、可触性、近接性、手の届きやすさ
  2. 近づきやすさ、アクセス可能性
  3. アクセス可能性、アクセスのしやすさ

accessibilityとは − 英辞郎 on the WEB

Web アクセシビリティとは

"ウェブアクセシビリティ" とは、現在市場において以下のように理解されているようです。

  • 高齢者、障害者を含むあらゆるユーザーを意識したユニバーサルで高品質なウェブUXとその提供

また、Web の創始者、ティム・バーナーズ・リー がWeb アクセシビリティについて2009年に触れた一節があるそうです。

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Web のパワーは、その普遍性にある。障害の有無に関係なく、誰もが使えることが、その本質である。

加えて、W3C は accessibility についての見解を現在このように記しています。

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.
サービスを高品質に提供したり、プロダクトを利用してくれるあらゆるユーザーを排除したくない開発者にとって、アクセシビリティは不可欠なものである。

引用 : Accessibility - W3C

障害の種別

障害には以下のようなカテゴリーがあるのと、それぞれ定義がなされています。

障害種別ごとの定義

「障害者」の定義って?障害者手帳や障害年金などのサービス、障害者雇用の対象、支援の根拠となる障害者総合支援法について説明します。 − LITALICO仕事ナビ

障害者のネット利用状況

障害を持つ方々は、インターネットにどのように接し、どのくらいの割合が利用し、どのような課題感を持っているのでしょうか。

障害者総数

ネット利用率

日本人全体のネット利用率

ちなみに国民全体のネット利用率はどの程度でしょうか。

2010年代は80%あたりでほぼ横ばいの推移をしていましたが、時世の影響でしょうか、2019年に突然約10%上昇しました。

ネット利用障害者数

  • 510万人
    • 人口比 4.0%
    • 障害者比 53.0% が利用
    • 増加傾向

ネット利用目的

  • 趣味、娯楽
  • 調べる
  • 情報発信
  • 勉強、仕事
  • 交流、コミュニケーション
  • 障害ハンディキャップの補完
    • 文字情報、テロップの充実
    • 文字メディアの音声化
    • 意思伝達の文字化・音声化ツール
    • 肢体不自由の補完

インターネット利用に際して困ること

  • コンピューターウイルスや不正アクセス
  • 障害に配慮したホームページの少なさ
  • 障害を補う機器、ソフトが少ない
  • 障害者向きの情報不足
  • 画面がごちゃごちゃして見にくい
  • 欲しい情報を見つけるのが困難
  • 通信費用が高い
  • わからないときに相談する人がいない
  • 利用者同士のトラブルが怖い

以上の情報をまとめると、Web プロダクトがこれら感情をユーザーに感じさせる状態がつまり、「Web アクセシビリティが悪い」状態ということになります。

極端に質の低いサイトやサービスでは、健常者も感じたことがある内容ではないでしょうか。

共感できる項目も多そうです。

・・・

さて、ここまで現状とユーザー課題についてまとめました。この現状を理解した上で、Web アクセシビリティにおいて実際に発生している課題は何か、について掘り下げて行きましょう。

モダンウェブアクセシビリティ

英国内務省が提唱し取りまとめる「Dos and don'ts」という accessibility に関する記事は、Web アクセシビリティ観点において、してほしいことしてほしくないことについて詳細をよくまとめられています。

Dos and don'ts on designing for accessibility」

001.png
@onouchidebe

英国内務省 (UK Home Office) Accessibility
Dos and don'ts on designing for accessibility
Dos and don'ts on designing for accessibility(pdf)
英国内務省 (UK Home Office) によるウェブアクセシビリティの「べき/べからず」ポスター
ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版

対象分類

Web アクセシビリティ において以下のカテゴライズごとに対策をまとめてくれています。

自閉症スペクトラムディスレクシア、不安状態 というカテゴリーに言及できているところがこれまであまりなかったポイントであり有用です。

詳細

詳細はそれぞれ以下のとおりです。ひじょうに役立てやすい情報にまとまっています。

自閉症スペクトラム

すること しないこと
単純な色を使う 鮮やかでまぶしい色を使う
優しい言葉で書く 比喩表現や慣用句を使う
簡単な文章と箇条書きを使う 区切りのない長文で文字の壁をつくる
説明的なボタンにする 曖昧で予測不能なボタンにする
簡潔で一貫したレイアウトを構築する 複雑でごちゃごちゃしたレイアウトを構築する

スクリーンリーダー

すること しないこと
画面の説明、動画の書き起こしを提供する 画像や動画だけで情報を表示する
順序立てた論理的なレイアウトにする ページ全体にコンテンツをバラバラに配置する
HTML5を使ってコンテンツを構造化する 文字サイズや配置に頼って構造化する
キーボードだけで使えるように構築する マウスや画面の使用を強制する
リンクや見出しは説明的に書く リンクや見出しを役立たずにする

ロービジョン

すること しないこと
良いコントラストと読みやすい文字サイズを使う 低いコントラストと小さい文字サイズを使う
すべての情報をウェブページ(HTML)で公開する ダウンロードの中に情報を埋没させる
色、形、文字の組み合わせで意味を伝える 色だけで意味を伝える
順序立てた論理的なレイアウトにする
(拡大表示したとき文章は折り返して表示される)
ページ全体にコンテンツを広げる
拡大表示したとき横スクロールが必要(※))
ボタンと通知は文脈にそって配置する 文脈と分離した操作をさせる

ディスレクシア

すること しないこと
理解を助けるために画像や図を使う 長い文章で大きな文字のブロックをつくる
文字揃えは左揃えで一貫したレイアウトを保つ 下線を引く、斜体を使う、大文字で書く
他のフォーマットでの情報提供を検討する
(例:音声や動画)
前のページを覚えておく必要がある
(リマインドやヒントを出しましょう)
コンテンツを短く、明確に、簡潔にする 正確なことばで入力する必要がある
(予測入力や自動補正の機能を使いましょう)
背景と文字のコントラストを利用者が変更できる(※) ひとつの場所に情報をつめこむ

身体障害・運動障害

すること しないこと
クリック可能な範囲を大きくする 精密さを要求する
操作対象のあいだを空ける 操作対象を近づけすぎる
キーボードや音声だけで使えるように設計する マウスをたくさん動かす必要がある
携帯電話やタッチスクリーンを想定して設計する(※) 短い時間制限をもうける
ショートカットを提供する タイピングやスクロールで利用者を疲れさせる

聴覚障害・難聴

すること しないこと
やさしい言葉で書く 難しい言葉や比喩表現を使う
字幕を使うか。動画の書き起こし文を提供する 音声や動画のみで情報提供する
順序立てた論理的なレイアウトにする 複雑なレイアウトやメニューをつくる
小見出し、画像、動画でコンテンツを分割する 長いかたまりのコンテンツを読ませる
予約や手続きの際に利用者が希望するコミュニケーション支援を利用できる 電話を唯一の連絡手段にする

不安状態

すること しないこと
操作を終えるのに十分な時間がある ユーザーを急がせたり、必要のない時間制限を設ける
これから何が起こるかを説明する 次にすることや時間制限で利用者を混乱させる
重要な情報は明確に 操作の結果がはっきりわからない
操作を完了するために必要なサポートを提供する サポートやヘルプにアクセスしづらい
ユーザーが送信前に入力内容を確認できる 質問に回答したユーザーを放置しない

詳細補足

以上詳細について少し補足します。

拡大表示したとき横スクロールが必要

  • レスポンシブレイアウトで解決できます

背景と文字のコントラストを利用者が変更できる

  • 現在では多くのOSにおいて設定が対応できています
    • OSの設定、操作を妨げない対応が重要です

携帯電話やタッチスクリーンを想定して設計する

  • レスポンシブレイアウトが重要です

実際に利用している様子がわかる動画から学ぶ

開発者が Web アクセシビリティ に取り組む際に、以下の動画は必ず確認しておく必要があります。

説明テキストで知ったつもりになるだけではなく、ユーザーストーリーを見て実感した上で開発、デザインに取り組むことが肝要です。

障害者のウェブページ利用方法の紹介ビデオ

視覚障害者(全盲)のウェブページ利用方法 (YouTube再生)

この動画でわかることは以下のとおりです。

まとめ

まずは JIS X 8341-3:2016 達成基準 早見表(レベルA & AA)適合レベル A から実装してみたいと実感することができました。

視覚障害者(弱視)のウェブページ利用方法 (YouTube再生)

この動画でわかることは以下のとおりです。

  • 弱視
  • 先天的、右:0.02(矯正)、左:光を感じる
  • グラフィック利用
  • Win拡大鏡による画面拡大
  • 支援技術なしでテキストを200%までサイズ変更できるようにする
  • 白背景がまぶしいため明暗反転する
  • 自動再生されるカルーセル等画像スライドは一時停止機能が必要
  • スマホタブレットも反転表示利用

まとめ

OSやブラウザの設定、操作を妨げない対応、確認が重要だと実感として知ることができます。

肢体不自由者のウェブページ利用方法 (WMVダウンロード)

この動画でわかることは以下のとおりです。

  • 手指に力がなく書籍のページをめくるのも困難
    • 活字メディアが利用できない
  • トラックボールを腕全体の動きで操作
  • オンスクリーンキーボードを利用
  • IE利用
  • 文字が小さく読みづらい
  • 横スクロールは発生してほしくない
  • 情報発信に挑戦中

まとめ

むしろデジタル機器やウェブコンテンツは より必要とされている と実感できます。

今日からできること

ここまで、アクセシビリティ をとりまく具体的な課題を知ることができました。

ではまず、われわれが実際に行動を起こす際に、まず何から着手ができそうでしょうか。

・・・

最初に対応できることとしてたとえば、Google DevTool の Lighthouse で計測できる Accessibility のスコアアップから目指してみるのはいかがでしょう。

何も行動しないよりは、すぐできることからまず始めてみましょう。

Lighthouse 頻出メッセージと対策例

Lighthouse で Accessibility 対策に取り組むとよく出てくる結果メッセージついて、以下に対策例をまとめてみました。

Background and foreground colors do not have a sufficient contrast ratio

  • 背景色と前景色は十分なコントラスト比を持っていません。

対策例

  • UIデザイナーと相談して色設定の変更を検討しましょう
  • Color Contrast Analyzer
    • レベルAA、レベルAAA への対応色(コントラスト値)を導き出せる

Heading elements are not in a sequentially-descending order

  • 見出し要素は順番に降順ではありません

対策例

  • 見出しの階層構造を適正化しましょう
before
        h3
    h1
          h4
              h6
      h2
            h5
after
    h1
      h2
        h3
          h4
      h2
        h3

Image elements do not have [alt] attributes

  • img要素 には alt属性 がありません

対策例

推奨
  • alt属性値に写真画像の内容を表現するテキストを設定しましょう
  • alt属性値にテキスト入り画像のテキストを設定しましょう
ミニマム対応
  • 空値のalt属性を設定しましょう
    • 読み上げ対象から外すことができます

Form elements do not have associated labels

  • フォーム要素 に ラベル要素 が関連付けられていません

対策例

  • 入力系に label要素 を設定するか、title属性 を設置しましょう
before
    <input type="checkbox"> メールニュースを希望する

    <select> 〜 </select>
after
    <input type="checkbox" for="form-mailnews">
    <label id="form-mailnews"> メールニュースを希望する</label>

    <select title="都道府県"> 〜 </select>

Links do not have a discernible name

  • リンクには識別可能な名前がありません

対策例

  • a要素 内にアンカーテキストを付与するか、alt属性、title属性、aria-label属性 などのいずれかにテキストを設定しましょう
before
    <a href="hoge"></a>
after
    <a href="hoge">記事ページへ</a>

    <a href="hoge"><img alt="記事ページへ"></a>

    <a href="hoge"><span title="記事ページへ"></span></a>

    <a href="hoge" aria-label="記事ページへ"></a>

frame or iframe elements do not have a title

  • frame要素 または iframe要素 にタイトルがありません

対策例

  • frame要素、iframe要素 に title属性 を設定しましょう
before
    <iframe>></iframe>
after
    <iframe title="YouTube動画"></iframe>

ARIA IDs are not unique

  • ARIAIDは一意ではありません

対策例

  • id属性値 を1ドキュメント内で重複させないようにしましょう

さらに深堀りする

Google DevTool の Lighthouse の対応が一通りパスできたら、つぎにやるべきことは以下のとおりです。

レベルAA、レベルAAA 実装を目指す

【参考】JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト

WAI-ARIA を利用する

  • role属性
  • aria属性

【参考】WAI-ARIAを活用したフロントエンド実装 | CodeGrid

まとめ − "ウェブアクセシビリティ 再入門 202112 記事バージョン" について総括

以上、重要なポイントを再確認しましょう

  • ウェブアクセシビリティとは、ユニバーサルで高品質なウェブUX のことです
  • 国内ユーザー数は現在 約510万人 で、さらに増え続けています
  • ウェブ は障害のある方々に必要とされています
  • 容易なことから着手しましょう
  • BE、FE、Des が協力して調査、改修しましょう

最後に

最後に、世界で最も有名な障害者と称された指導者、著作家ヘレン・ケラー(Helen Adams Keller − 1880年 - 1968年) のフレーズに触れて本稿を締めさせていただきます。

So long as you can sweeten another’s pain, life is not in vain.
人の苦しみをやわらげてあげられる限り、生きている意味はある

今回取り上げた ウェブアクセシビリティ の件に限らず企業活動とは、ヒトの幸福悩みの解決に根ざしてこそ継続でき得る活動である、と私は理解しています。

その延長線上に Webアクセシビリティ が存在し、国内だけでも 500万以上のユーザー がコンテンツの提供を望んでいるということを定期的に再認識し、プロダクト提供における自身の視野を広い状態に保っておくことは重要そうです。

TypeScript でオブジェクトのプロパティの型推論しても、親オブジェクト自体には型推論は適用されない

この記事は個人ブログと同じ内容です

TypeScript でオブジェクトのプロパティの型推論しても、親オブジェクト自体には型推論は適用されない


前置き

こんにちは、 back check 開発エンジニアの @sota_yamaguchi です。

今回は、直近の開発のなかで、 TypeScript の型推論の挙動に対してなぜか思ったように型が適用されないんだが、、、となったことがあったので、調査した結果知見を得られたので記事にしてみました。

結論

先に結論を述べておきます。 TypeScript の仕様として、オブジェクトのプロパティに対して型ガードを行って型を推論しても、親となるオブジェクト自体には型推論の結果が適用されません。

やろうとしたこと

A 型の demoData オブジェクトのプロパティからそれぞれ undefined を省くように絞り込んで、関数 testFunc の props として渡そうとしました。 if を通過したことによって、型推論で B 型の条件を満たせているように見えますが、 if 通過後も demoData の型が A 型として扱われていることによって、 testFunc の引数として渡そうとするとエラーがでてしまいました。

type A = {
  name: string | undefined
  email: string | undefined
}

type B = {
  name: string
  email: string
}

const testFunc = (props: B): void => {
  console.log(props)
}

const demoData: A = {
  name: 'hoge',
  email: 'hoge'
}

// A 型の demoData のプロパティの型 name, email から、それぞれ undefined を省くように絞り込む
if (!demoData.name || !demoData.email) {
  throw 'error'
}

// error: Argument of type 'A' is not assignable to parameter of type 'B'.
testFunc(demoData)

TypeScript の仕様

まず前提として TypeScript は構造的部分型の言語です。つまり、 A 型と B 型のシグネチャが等しければ、 A 型の代わりに B 型を渡しても怒られない言語です。 今回のケースでは、型ガードによって A 型のプロパティの型から undefined を除外したことで、型推論によって A 型は B 型と同等のインターフェースを提供すると推論してくれることを想定していたのですが、試したところエラーになってしまったので理由がわからずに詰まったというケースでした。

これについて調べた結果、 TypeScript の issue で以下のコメントを見つけました。

Type guards do not propagate type narrowings to parent objects. The narrowing is only applied upon access of the narrowed property which is why the destructing function works, but the reference function does not. Narrowing the parent would involve synthesizing new types which would be expensive. タイプガードは、タイプナローイングを親オブジェクトに伝播しません。ナローイングは、ナローされたプロパティにアクセスしたときにのみ適用されます。そのため、破棄関数は機能しますが、参照関数は機能しません。親を絞り込むには、コストのかかる新しいタイプを合成する必要があります。  by google 翻訳

TypeScript の仕様として、型ガードを行っても、型推論の結果は推論を行なったオブジェクトのプロパティにのみ適用され、親のオブジェクトには適用しないことがわかりました。

TypeScript がこれをサポートしていない理由としては、それっぽい回答として以下を見つけたので貼っておきます。(2021/12/30 時点では、この仕様について明言しているドキュメントはないようです)

  • パフォーマンスについて

    In other words, in order to know the type of x we'd have to look at all type guards for properties of x.That has the potential to generate a lot of work. X 型の型情報を知るためには、 X 型が持つすべてのプロパティに対して型ガードを実施して調べる必要があります。それは大量の処理を生み出してしまう可能性があります。 by オレオレ翻訳

回避策

では、 A 型のオブジェクトを B 型として扱うにはどうしたらいいのか。ということで今回の例に対しては以下の方法で回避することが可能です。

  1. 型ガードによって推論が効いているプロパティのみを引数として扱う方法
if (!demoData.name || !demoData.email) {
  throw 'error'
}

testFunc({name: demoData.name, email: demoData.email})

  1. 型ガードによって親オブジェクトにユーザー定義で型をアサインする方法
const isB = (x: A | B): x is B => !!x.name && !!x.email;

if (isB(demoData)) {
  testFunc(demoData);
}

1 の例はプロパティを推論して、そのまま利用しているのに対して、 2 の例はプロパティの検証をしたらおやオブジェクト自体に型のアサインをしています。 推論後の利用したいプロパティが限られているのであれば安全性を重視して 1 を。拡張性や可読性を上げたいなら 2 を。など、場面によってこれらを使い分けていけるとよさそうです。

おわりに

日頃から TypeScript は触っているので自分は慣れている方だと思い込んでいたのですが、今回の調査で何も分かっていなかったことを実感させられました。 いい振り返りにもなるので、また新しい発見があったら随時発信していきたいと思います。

非エンジニアが知らない、スクラム開発で行われていること

この記事は 個人Qiita と同じ内容です

qiita.com/sekiyaeiji

非エンジニアが知らない(であろう)、スクラム開発において行われていること

スクラム開発」とは、非エンジニアの方々の目にはどう映っているのでしょうか。

エンジニア組織が選択する開発手法のひとつ、ぐらいに見えているかもしれないですね。

実はスクラム開発は、開発手法のみならず、エンジニアにとって働き方改革らしきものまで提供してくれています。

非エンジニアの方々は知らないかもしれない、スクラム開発の根底にあるエンジニアの昨今の"働き方"についてご紹介したいと思います。

本稿ではスクラム開発の開発手法自体にはあまり触れず、スクラム開発がもたらすエンジニアの働き方の変遷にフォーカスをあてて議論を進めます。

スクラム開発自体の説明については日本語版公式ガイドを参照してください

スクラムガイド − スクラム公式ガイド:ゲームのルール / Ken Schwaber & Jeff Sutherland

スクラム用語解説

...と言いつつも、このあとの説明に必要になるスクラム開発に関する最低限の予備知識を、ここで解説しておきます。

スプリント

スクラム開発では短く区切られた期間の最小単位をスプリントと呼び、1スプリントは一般的に1週間や2週間に設定されます。

ポイント

スクラム開発では1つのチケットの作業量見積りを"ポイント"などの相対的な単位によって表現します。

たとえば3ポイントの基準チケットを用意しておき、あるタスクは基準チケットと比較して少し作業量が少ないので「2ポイント」とか、基準チケットの2倍弱ぐらいのボリュームだから「5ポイント」と決めよう、というような、見積りを行う際の単位として利用します。

ベロシティ

スクラム開発ではチームの1スプリントの処理ポイント数をベロシティと呼びます。

直近の3スプリントのベロシティの平均を、次のスプリントの目標ベロシティにする、というように利用します。

003.png

スクラム開発は"働き方改革"!?

スクラム開発の働き方とは

先述の通り、スクラム開発はエンジニアにとって、"働き方改革"かもしれません。

スクラム開発の業務スタイルのポイントは、行動量を一定に維持することです。

そのため、目標ドリブンとか、ウォーターフォール開発のような締切を設定する業務スタイルとは対照的な業務フローになります。

フェーズや状況によらず、常に行動量を一定にすることが重要になります。

細部を吸収しチーム全体のスループットのみを扱う

チームメンバーの日常においては、有休を取ることもありますし体調が悪い時もあるでしょう。 一時的なミーティングに時間を取られることもありますし、プロダクト開発以外の業務もあるでしょう。 突発的な障害対応や顧客サポート補助のような、予定している以外の開発タスクが発生することもあります。

スクラムチームで、直近数回の実績の平均値を次の目標ポイントにしているのはなぜかというと、上記のようなメンバーごとの都合やイレギュラーなイベントによるマイナスも包含して平均化することにより、それらの個々の事象を気にかける必要性を可能な限り削減するためです。 個々の事象を見積りに反映するコストを削減している、とも言えます。

そうして、コンスタントに一定の行動量を継続的に維持できることを重視します。

スクラム開発における働き方のポイント

スクラム開発では、あるスプリントだけ一時的にベロシティを上げてしまうと、目標ベロシティの現在の適正量が測れなくなったり、目標ベロシティが適正量を超えて増大することで徐々にチームを追い込んでしまうという課題が発生します。

ですのでチームの個々のメンバーが、継続的ではない、たまたま1スプリント内だけで一時的にベロシティを上げる行為は、慎むべきということになります。

それはベロシティの読みを狂わせ、チームを追い込んだりメンバーの疲弊の原因になるなど、チーム全体とってマイナスインパクトを発生させます。

また、Webプロダクトが24時間365日稼働であることが当たり前になっている現状において、さまざまな突発的な事態に素早く対応できるためにも、日常的な業務においては変動要素が少なく、稼働や思考サイクルが安定した状態であることが望まれます。

チームの行動量という、太さが常に一定のベルト状の帯を維持しておき、アウトプットはその帯の処理量に応じて一定の頻度で得られる状態をイメージすると理解しやすいかもしれません。

004.png

この帯の太さを一定に保つことへの努力を惜しまないことが、スクラムチームの重要な責務です。

スクラムチームは成長しないのか?

では、スクラムチームのパフォーマンスやアウトプット量には改善の余地はないのか、とか、まったくもって成長しなくてよいのか、というと、そんなことはありません。

チームのベロシティの向上自体を目指してはいけないという訳ではありません。

ベロシティを上げるために、スプリントイベントの改修や効率化、無駄の排除のような業務フローの改善を試みることによって、チームのベロシティの向上を目指すことは何ら問題はありません。

極端な改善例で言いますと、"ショートスリーパーのメンバーばかり集めてベロシティを上げる"とか...を、目指してはいけない、ということはありません。 ・・・なにか別の問題が起きそうな嫌な予感がするので私は実践しません w

スクラム開発のような働き方が実践できる条件

スクラム開発のような働き方はなぜ可能なのでしょうか。

このスタイルが可能になるためには、以下の2つの条件が必要と考えます。

  1. 一定期間中の予定タスクをチケット化して準備できる
  2. 不確定要素の介在が比較的少なく行動量を一定にできる業務内容である

上記は主務やすべての業務がこれに該当する場合だけでなく、一部の業務が継続的にこの条件を満たす場合にも運用できると思います。

1. 一定期間中の予定タスクをチケット化して準備できる

back check 開発チームでは1スプリントを2週間に設定しています。

スクラム開発では毎スプリント、スプリントが始まる前日までに、1スプリントの目標ベロシティ分のタスクを用意しておく必要があります。

優先順に並んだタスクチケットを上から順に取り、次のスプリントで対応するチケットを追加して行き、タスクの合計ポイント数が1スプリントの目標ベロシティのポイント数に達するところまでタスクチケットを追加します。

ある期間の単位でこれが毎回実行できる業務であれば、エンジニアリング業務以外でもスクラム開発と同じ手法で業務対応ができそうです。

2. 不確定要素の介在が比較的少なく行動量を一定にできる業務内容である

開発チームのエンジニアは、新規開発のコードだけをずっと書いていられるわけではなく、障害対応やバグ修正、顧客サポート補助、全社施策などのさまざまの差し込み業務にも対応していますが、それでも6〜7割以上はメインストーリーや改善施策などの主務に集中させてもらえている職能なのかもしれません。

差し込み業務はスプリントポイントに計上しませんので、スクラムチームのベロシティとは、主務(新規、改善タスク)におけるそのチームの価値提供の基準と言えます。

ですので、ある業務に対する単位期間中の一定の行動量を継続的に維持したい場合、維持できる場合に、スクラム開発の働き方が有用になります。

スクラム開発とその他の業務スタイル

スクラム開発とその他の業務スタイルをまとめると以下のようになると思います。

  • スクラム開発
    • チームの行動量をフィックスさせ、1スプリントごとにタスクを消化する
  • ウォーターフォール開発
    • 全体計画をフィックスさせ、複数の開発締め切りを経て計画の完了まで走り切る
  • 目標ドリブンの業務スタイル
    • 一定期間の目標をフィックスさせ、必要な行動量を割り出し目標達成にコミットする

それぞれ、何を軸として固定して、それに対して何を積み上げていくかの対象が異なります。

ウォーターフォール開発の課題

ウォーターフォール開発が昨今のWebプロダクト開発で活用されなくなっている理由を業務スタイル観点で考察しますと、計画が初期にフィックスされ途中の変更コストが考慮されていないために、短期の締切ごとに稼働を上げて変更分を吸収する傾向があり、チームメンバーを追い込むループが発生しチームが疲弊することが主な理由でしょう。

疲弊しても計画を達成すれば問題ないかと言えば、低下したチームパフォーマンスは元の状態に回復するまでインターバルが必要になり、インターバルのロスと追い込みのゲインが相殺するのと、スループットの増減が計画の読みを狂わせる点が課題になり、結論として使いにくいフレームワークとして利用されなくなっているようです。

目標ドリブンの課題

目標を定め必要な行動量を割り出して走り出す業務スタイルは、開発以外の職種で多く見られます。スクラム開発の働き方の実態はこのスタイルとほぼ違いはありませんが、決定的な差は、"目標"を目指さない点です。

平均ベロシティが安定して継続的に高い状態、というのが暗黙の"目標"になっていることもあるかもしれませんが、そういう"目標"を"目指す"という建付けは行いません。なぜでしょうか。

まず第一に、アジャイル開発において「"顧客との協調"を価値」としていることと、スクラム開発においてチームは常に"スプリントゴール(スプリントが提供する価値)"に集中しているため、他に目指すものが不要であるためです。

業務スタイル観点で言うと、"目標"の扱いの難しさがありそうです。

事業面においては目標値を設定できる職種もあると思いますが、開発では目標値の裏付けが求めにくいのです。

KPIの達成という観点が存在すると思われがちですが、それは要件定義側のPMとかデザインチームの目標に設定することは可能ですが、エンジニアリングの目標ではありません。

もっと具体的な、達成可能な定量目標を設定した場合も、目標には課題が多いです。

まず設定した目標値にロジックがないとチームメンバーに納得感が生まれにくいことや、早期に容易に達成できてしまう目標であれば、達成後のモチベーションが低下して残り期間の生産性が低下したり、その反対に難易度が高い目標だとそもそも達成のモチベーションが湧かず大きく不達に終わってしまいます。

目標という指標には元来、人間の主観が介在しやすかったり、人間の精神力を試すような性質がある点が、エンジニアリングとの相性がよくない本質的な原因のような気がします。

また目標という、根拠を立てづらい不確定要素によってパフォーマンスが左右されるというのも、計画の読みを狂わせる原因になりそうです。

まとめ ー スクラム開発の働き方が求められる理由

スクラム開発は開発スタイルとして価値がある手法ですが、定着する理由は業務スタイルとしても以上の通り、もろもろの要因があるということです。

  • 予定タスクを細分化したチケットを準備できる
  • 行動量を一定にできる

この条件にかなうすべての業務にこの手法が利用できます。

この業務スタイルを採用すると以下のメリットが得られます。

  • 確定したタスクの反復のため確実に実践できる
  • サイクルごとに業務のコンディションがモニタリングできる
  • いつもと違う問題が発生したら課題発見と改善のチャンスになる

ネクストアクション

私自身がPOとして要件定義や検証、インプット、アウトプットの反復など、エンジニアリング以外のタスクを生業としているため、月次とかで反復実行しているタスクをチケット化してスクラムのように進行できるかトライしてみたいと思います。

スクラム開発自体も各社試行錯誤しながら継続的なブラッシュアップを繰り返していると思われ、まだまだ進化の余地がある開発フレームワークですので、本稿のようなアウトプットによって活発に情報交換される状況を促進したいと思います。

参考図書

本稿では、スクラムの原則について確認するために、以下の書籍を参考にさせていただきました

SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発

日常から学ぶ 気づきの法則

この記事は 個人Qiita と同じ内容です

qiita.com/sekiyaeiji

Jira のバックログにおいて、
もう見返さないであろうストーリーとかタスクチケットを、ときどき却下しまくって、
小さな業務改善気分を味わっています

今回、少し思い切った断捨離にトライしました

最近追加したストーリーとタスク以外の過去数年分のチケット 135個 を、
チームメンバー全員に1週間ほど目を通し確認してもらった後に、
135チケットすべてを却下してバックログ断捨離を実行しようと思い立ちました

ふと思いついたこと

ところで削除対象の 135 チケットっていまのバックログのリスト全体のどのくらいの割合だ?

ぜんぶで 462 チケットあって 135 チケット削除したら 327 チケットになる、
ということは、135 チケットは現在のチケット全体の 29.2 %を占める...
リスト画面の項目が 3割 も減ったら、画面のパフォーマンス向上するかもな...

よし、測ってみよう ♪

パフォーマンス計測

Chrome > Dev Tool > Lighthouse > Performance にて、
チケット3割削除の前後の、5回の計速値の平均で、数値が向上するかどうか確認しました

001.png

計測結果値を眺めてみて、
メンバーにとって業務影響が最もイメージしやすい項目として、

  • Time to Interactive : UI全体が操作可能になるまでの時間

による比較をしてみようと思いました

削除前と後のTTI(Time to Interactive)の比較

Jira のバックログ一覧画面をリロードして、
Lighthouse の Performance を実行する作業を前後とも5回ずつ繰り返しました

1回目 2回目 3回目 4回目 5回目 平均 改善
before 7.4 12.8 9.7 9.6 9.6 9.82
after 7.4 7.4 7.4 7.9 8.2 7.66 2.16 s

ページのロード時に、画面が使えるようになる時間が、
9秒から7秒になり、2秒改善 という結果になりました

002.png

得られた効果

チームメンバーにアンケートを取って平均を出したところ、
この Jira の バックログ 画面の1日のロード回数は 4.85 回となりました
シンプルに 1日 4回ロードしてると仮定しますと...

時間

年間 200営業日 で
15人 のメンバー が
1日 平均4回 画面ロード する場合に
表示速度が 毎回 2秒短くなると
チーム全体で年間 6.7時間

つまり、Jira 操作に費やしている時間を 6.7時間 削減できた、ということです

チーム全員で、いままで捨てていた年間 6.7時間 を取り返せたことになります

効率

上述の計算の通り、チケットは 29.2 %削減できました

画面スクロールや目視での検索において、
無駄が3割ほど削減し、作業効率が向上できました
集中を阻害する要因も削減できたと言ってよいでしょう

所感

何気ない日常の作業について、
面白がって進められる方法を模索したり、
自身がほぼ事務的に行っているような業務の価値を再確認し、
効果があれば可視化して、
こうして自慢気にアウトプットして w より楽しんでみたり

こんな風に仕事ができている自分っていま、
大丈夫そうだな w って実感しました

考察

ともあれ、
実は以上のような取り組みを実践することは、
自身の目標評価サイクルを回す時や、
プロダクトの分析やデータサイエンスの解法を導き出す時など、
いろいろな場面でプロセスを生み出す時の作業と似ているところがあります

埋もれている法則性を見つけ出すことや、
まだ調べられてないことを調査し可視化しようとする動機と好奇心を持つことの価値、は
とくにデータサイエンスを進める際にも大切なポイントになります

ですので、事業プロダクトについても、
常日頃から上記のようなスタンスで、
没頭し面白がりながら好奇心と行動量を高い水準で維持しておくことで、
新しい指標や効果、価値を発見する確率を上げることができそうだ、
と感じた取り組みでした

まとめ

  • 何気ない日常を面白がる素材はすぐ手元に転がっている
  • 日常を面白がれる活力が湧く
  • 埋もれた価値再発見しわかりやすい指標で可視化するスキルは有用である
  • 没頭面白がりながら好奇心行動量を維持することで、気づきの確率は上げられる