2021年オープンソースコントリビュート活動振り返り
2021年もまもなく終わりですね。みなさんは今年どれくらいオープンソースにコントリビュートできたでしょうか？（唐突）
私は昨年、東京都新型コロナウイルス感染症対策サイトのコントリビュートするようになってから、業務中や余暇時間を使って、目のついた・興味があるオープンソースにコントリビュートしていくのが趣味になっています。
今年もいくつかのオープンソースにPull RequestやIssueでコントリビュートしてみましたのでその振り返りをしてみようと思います。
Vue.js 関連
vue-a11y
Vue.jsユーザーでアクセシビリティに関心が高い人たちが集まるチームがあり、それがvue-a11yです。主催は Alan Ktquez 氏で、なにか手伝えることはないかと手を挙げてみたところ、私もメンバーとして誘ってもらいました。
今年はサイトの日本語ページ開設やドキュメントの翻訳対応やそのレビューなどを行いました。
日本語翻訳に参加してくれた かずやんさん、manak1 さん、ありがとうございました！
しかしながら今年は諸事情で主催のAlan氏や私自身がvue-a11yに割く時間がなかったため、グループ全体の活動としてはあまり進捗がない形でした。
オープンソースとは別件ですが、メンバーの Marcus Herrmann 氏が Accessible Vueという電子書籍を今年リリースしました。
Vue.js開発においてのアクセシビリティ考慮する点をあげた書籍なので、ぜひご覧ください。
その他、awesome-vue に現行メンテナンスされているeslint-pluginの eslint-plugin-vuejs-accessibility がなかったので追加してみたり、
eslint-plugin-vuejs-accessibilityドキュメントでのリンクが壊れている箇所を修正したり、
自作してみた Visually hidden コンポーネントを追加してもらったりしました。
vuejs/vue-test-utils
Vue.js公式のコンポーネントテストユーティリティ集
業務で使用するため確認することがあったのですが、日本語誤字があったので修正報告しました。
業務中にもすぐ出せるのは良いことです。
vuejs/vue-router
Vue.js公式のルーターライブラリ
WAI-ARIA 1.1仕様書では aria-current の設定値に true と false 文字列も含まれているため、設定できることを vue-router のドキュメントにも明示できるようにしました。
FortAwesome/vue-fontawesome
Vue.jsで使用できるFont Awesome 5ライブラリ
業務上で使用している中でアイコンに装飾文字を使えないかと調べてみたところ、実現することはできましたがREADMEにその使い方がなかったため追加したものです。
vueuse/vueuse
Anthony Fu 氏が作成したVue Compositionユーティリティ集
コードサンプル内の img において代替テキストがなかったため追加しました。
vuejs/docs
Vue.js公式ドキュメントのリポジトリ
アクセシビリティにまつわる項目において、フォーム関連のタグを <label> で囲むと支援技術側でのサポートを得られないため Warning 扱いにしており、HTMLの書き方としては間違いがないのに非推奨扱いにも感じられてしまったので、その異議を申し立てたPull Requestです。
以前ドキュメントの日本語翻訳した際にレビューで目を通したはずなのですが、当時意識してできていなかったのか、何故見逃していたのかが分かりませんでした…
resetercss/reseter.css
Reset.css、Normalize.cssといったCSSリセットの良いとこ取りした新しいリセットCSS
サイトのドキュメントスタイルが崩れていたことを報告しました。
単純に事象を伝えただけですが、コントリビューターとして追加してもらいました（今確認しましたがコントリビューター欄はなくなってそう）。
zenn-dev/zenn-community
Zennのユーザが要望や質問などを投稿できるリポジトリ
4/20のアップデートにより追加されたスクラップでコメントが多い場合に「いちばん下へジャンプ」するボタンが追加されたのですが、このボタンにキーボードフォーカスが当たるようにしてほしい要望を出しました。
再現の確認としてgifアニメーションで確認できるようにしました。
上記要望は対応していただいてキーボードフォーカスが当たるようになっていました。
スピーディな対応、ありがとうございました！
microcmsio/microcms-blog
microCMS社が公開している公式ブログソース
パンくずリストにカテゴリがない場合でもHTMLとしてレンダリングされてしまうのでその修正をしました。
見た目上は違和感少ないものですが、読み上げ機能を使うと２つのリストアイテムがある」状態と判定され、２つめの中身があることを期待させてしまいかねないので、それであればない場合は描画しないように対応しました。
日付が出る箇所は <time> 要素でマークアップするように変更しました。
azu/philan.net
azuさんが作成した何処に寄付をしたかを記録できるようにしてくれるサービスソース
寄付先のサイトURLがない場合、リンク先のない別窓リンクの <a> 要素で囲まれてしまうので、URLがない場合はリンクにしないように変更しました。
自分でローカルで立ち上げた際には結果が目視できなかったので勘で対応したところはあります。
ユーザーアイコンをクリックしたときに表示されるメニュー項目の内部が button タグでレンダリングされるため、a タグのように別窓表示ができなかったのでそれができるようになるといいという要望。
Chakra UIの扱い方がわからなかったのですが、azuさんによって改修していただけました。
rits-dajare/rits-dajare.github.io
立命館ダジャレサークルのオフィシャルサイトソース
焼肉争奪戦！NU CAMP Dev&Pub LT Party というイベントを拝見して、ygkn さんが発表内でサイトのアクセシビリティ対応をやってみた！とされていて個人的に感銘を受けました。
ソースコードをオープンソースとして公開していたので、自分からもよりよくできそうなアクセシビリティ改善提案をさせてもらいました。
nygardk/react-share
React.js製のソーシャルシェアボタンライブラリ
先述した立命館ダジャレサークルのアクセシビリティ改善で発見した問題点について。
シェアボタンにある aria-label が実際にテキストを挿入したときとで意図しない読み上げになってしまうことが問題となりそうだったので、解決案を提示しました。
余談ですがIssueを書きながら、以下のことが大事だと改めて認識できたことは収穫でした。
I think we should let the developers who use the library think about the button description.
github/catalyst
GitHubによるWeb Componentsライブラリとそれにまつわるドキュメント
コードが囲われている <pre> 部分がスマートフォンなど画面幅が縮んだデバイスで閲覧した場合、コード文がはみ出して閲覧しづらい箇所を修正対応しました。
個人的な感想ですが、レビュワーと多少チグハグなやりとりとなってしまったため、レビュー対応の難しさを感じるなどありました。
corocn/paternity-leave-in-japan
corocn さんが運営している男性育休取得実績のある日本のテクノロジー企業のまとめ
所属する企業の2ヶ月以上の取得事例があったため、追加させてもらいました。
shunito/axe-locales
shunito さんが作成した、ウェブアクセシビリティ検証ツール aXe の言語を簡易的に切り替えるライブラリ
ローカルで起動した際に window is undefined となってしまうパターンに遭遇するので、空のオブジェクトで切り替えるパターンを追加しました。
sadnessOjisan/blog.ojisan.io
sadnessOjisan さんの旧ブログリポジトリ
文章中の英単語を強制的に改行する word-break: break-all; が見づらかったので、overflow-wrap: break-word; に修正しました。
IE11も対応しているサイトだったとのことなので使えるプロパティも考慮しました。
word-break: break-all; |
overflow-wrap: break-word; |
|---|---|
 |
 |
なおその後、神の怒りに触れてリバートされました（文字量でカラムサイズ決めないでおくれ）。
tokyo-metropolitan-gov/covid19
東京都新型コロナウイルス感染症対策サイト のリポジトリ
以前サイトのアクセシビリティチェック会を有志で実施したのですが、改めてアクセシビリティ方針立てて試験して基準を満たすことが決まったため magi1125さんと masup9 さんが音頭を取ってアクセシビリティプレ試験会を実施し、その試験会中で上がってきたアクセシビリティ上の問題を対応したものの１つです。
最新のお知らせのリンクリストが、日付の部分がリンクテキストではないスタイルなのにリンクの一部になっていて、見た目やインタラクション（hover）に差があるのでセマンティクスにも差が必要となっている問題を修正しました。
読み上げについての認識違いもあったのでレビューいただいたことで自分にとっても学びが得られました。
ビルド時のアクセシビリティLinterを導入する提案ではmagi1125さんから直接ご指名いただいたので私が分かりうる限りでアドバイスさせていただきました。
SnO2WMaN/tohohoify
SnO2WMaN さん作のトホホ…な画像を生成するジェネレーター
意味不明なTwitter上の内輪ノリから発生して作られたものですが、aXe DevTools でCriticalなアクセシビリティ上の問題となっていた箇所を修正したものです。
kawamataryo/animated-emoji-gen
Kawamata Ryo さんによる動くSlack絵文字のGIFを作ることができるアプリ
上記のtohohoifyと同様に aXe DevTools でCriticalなアクセシビリティ上の問題となっていた箇所を修正したものです。
yuiseki/crisis-news-map-next
yuiseki さんによる全国災害情報地図サイト
災害関連ニュース記事ページでのラジオボタン操作の補助と、バグ報告をさせてもらいました。
余談ですがyuisekiさんが副業としてOSSコミッターで働かれるようです。個人的にとても興味深い話でありました。おめでとうございます！
miyaoka/employment-ojisan
miyaoka さんによる sadnessOjisan さんが就職するまでのカウントダウンサイト
詳細は【ネタアプリ】就職カウントダウンサイトを作った話を参考いただければと思いますが、その中で私はアクセシビリティ対応をしました。
svelte-jp/svelte-site-jp
有志によって運営されているSvalte日本語サイトのリポジトリ
SvelteJPのDiscordにある「ドキュメント翻訳」チャンネルがあり、運営メンバーの tomoam さんから翻訳作業の募集が出ていたりします。
Svelteの雰囲気を知るために翻訳作業に参加させてもらいました。
現在はSvelteKitの日本語サイト翻訳作業の募集もされています。私もやってみようかなと思いますが、興味ある方はどうぞ！
microcmsio/react-hooks-use-modal
microCMS社のReact Hooksを用いてモーダルを呼び出すライブラリ
上記のアクセシビリティ対応自体は dqn さんによるもので私によるものではないですが、老婆心でアクセシビリティレビューを勝手にしてしまいました。
React.js実装での参考となり大変学びがありました。
ボタンをキーボード操作する際にエンターキーでは機能するのですが、モーダル内ではスペースキーでは機能しなかったのでバグとして報告しました。
らんすさんの報告にてdisable-scrollによる影響であることが判明しました。ありがとうございました！
mdn/translated-content
MDNドキュメントの翻訳コンテンツリポジトリ
フロントエンド業務ではお世話になることが多いMDNドキュメントですが、脱字や英語コンテンツとで差分があったりします。Pull RequestやIssueを通じてコントリビュートさせてもらいました。
日本語翻訳コンテンツは日本人のレビュワーおらっしゃるようで、報告は日本語のみでも問題ないそうです。
sveltejs/svelte
Svelteのメインリポジトリ
svelte-checkにおける a11y-label-has-associated-control はラベルが for 属性を持っているかどうかをチェックしてくれます。しかし、現状では for="" でもバリデーションチェックは通ります。なぜなら、ラベルが for 属性を持つかどうかだけをチェックしているからです。
そこで対応するコントロールの id 属性とラベルの for 属性が一致すれば問題ないというようなバリデーションにしたいと提案しました。
その提案に対してコアメンバーからは以下のように返答をもらいました。
This would be tricky, since components are compiled independently. If the compiler saw a given for attribute, but not a matching id, there's no way to guarantee that the id is not present in some other component, or even another element on the page not controlled by Svelte. There would be a significant chance of false positives.
This is the kind of check that would be better done on the rendered page using a tool like Axe, which can check the page as a whole instead of individual components.
おおまかに訳すると *.svelte コンポーネントにおいて一意であるidを検出することをバリデーションとすると誤検知につながりかねない、これはコンパイラとして見る部分ではなくaXeのような全体チェックで見るべきだ、といった内容でした。
結果としては破却された提案でしたが、私の中でアクセシブルなコンポーネントを作成する上でのヒントとなったIssueでもありました。
ota-meshi/postcss-html
HTMLをパースするためのPostCSSシンタックス
stylelintが8にバージョンアップしたときに *.vue ファイルでの <style> ブロックのLintがエラーになることがありました。原因がいまいちつかめてなく悩んでいたときにメンテナの ota-meshi さんが聴いてくださいと言っていただいたのでIssueを作成しました。
別の Issue では事象が発生した状況のリポジトリを提示していたので、自分も真似してみました。
間違ってプライベートで作って見せられなかったミスをやらかしましたが…
gatsbyjs/gatsby
GatsbyJSのメインリポジトリ
こちらはIssueではなくDiscussionでの投稿です。
私が登壇した JSConfJP の発表にて <RouteAnnouncer> の紹介をしたのですが、こちらで使用されている aria-live の値が常に assertive を指しています。
しかし WAI-ARIA 1.1 では、以下のように書かれています。
Because an interruption may disorient users or cause them to not complete their current task, authors SHOULD NOT use the assertive value unless the interruption is imperative.
aria-live の値が常に assertive に指定されると困惑するユーザもいるかもしれません。
そこでVue.js版のRouteAnnoucerでもあるvue-announcerでは aria-live の値を他のものに設定できるので、そうした形で変更できないかという提案になります。
Next.jsでも使用されている大元のものはGastbyJSで作られたものだったので、本家の方で提案してみました。
sergeicodes/a11ymyths
アクセシビリティにまつわる謬説（まちがった説や説明）をまとめたサイト
MITとして公開されていたのでフォークして独自で日本語版を公開したところ、オーナーの Sergei Kriger 氏が日本語版でコントリビューションしませんか？と誘われたので別途Pull Requestを作成しました。
最初はmythを「俗説」として訳していたのですが、kazuhito さんが「謬説」と訳されていたのでそちらが言葉として良さそうだなと思ったので参考にさせていただきました。
yamanoku/awesome-japanese-a11y-companies
アクセシビリティに取り組む・推進している日本のテクノロジー企業のawesomeリポジトリ
最後は自分が作成したオープンソースで、今年の9月から取り組んでみたものです。
Webアクセシビリティのまとめサイトとして accrefs.jp というものがあるのですが、企業の取組事例だけを抽出したい・投稿を容易にしたいというモチベーションからGitHubで管理するようにしています。awesome-a11y にも追加させてもらいました。
機械的な仕組みは特になく、事例があがったものは随時commitしていく形です。今のところ自分のみがコントリビュートとなっていますが、自薦・他薦問わずプルリクエストの方はお待ちしております！
こうした方がよいのでは、みたいなものは discussions にて投稿ください。
その他
この他にもバグ報告や誤字・脱字の修正や指摘をしたり、署名したり、ツイートの保護活動や、侍同士のやり取りなど色々とやっていました。
総括
タイトルからもあるように「OSS」としてではなく「オープンソース」と称したのはソフトウェア以外のものへのコントリビュートが多いところもあります。
azuさんが2020年の振り返りで言い換えていたことも印象に残っているため自分もそう表現してみようかなと思っています。
こうやって挙げてみると去年よりも今年はいくつか首に突っ込めた活動ができたかなと思っています。Notionにて個人のものもまとめていますのでこちらもご覧ください。
すべてのコントリビュートに対して全部問題が解消できたかというと、そういうことばかりではなく問題としてそのままになっているものもあります。
ですが、東京都新型コロナウイルス感染症対策サイトでもそうだったのですが、自分の得意分野を活かしてコントリビュートすることで、普段自分がやっていることの精度を高めていくことにもなったり知らなかったことを学ぶことにもなるので、やはりコントリビュート活動は実りがあり楽しいものです。
そして、来年は今年あまりできなかったvue-a11y関連のことをやっていこうと思っています。
オープンソースコントリビュート活動以外の支援としてGitHub Sponsorsを出している私個人として応援したい人たちには継続支援させてもらっています（2021年12月現在）。
- sponsors-kazupon - $5 a month
- sponsors-azu - $5 a month
- sponsors-0918nobita - $1 a month
- sponsors-kt3k - $1 a month
- sponsors-sosukesuzuki - $2 a month
- sponsors-nuxt - $10 a month
- sponsors-kubosho - $1 a month
- sponsors-markuplint - $5 a month
- sponsors-ota-meshi - $5 a month
そしてありがたいことに、私自身も はぜさんと kazupon さんからGitHub Sponsorされてます。
いつもありがとうございます！
最近のOSSへの支援が足りていない現状を見るに、普段のオープンソース活動が普段の収益に置き換えることができるかというと果てしない夢のようなものだと思っています。
今のところは自分にとってなんらかプラスとなれればといいなと考えています。
とはいえ消極的な宣伝のままでも伝わってほしいものも伝わらないため、こうした振り返りも含めてアウトプットを皆さんに伝えられる場についても意識していきたいなとも考えております。
今年もありがとうございました。来年もよろしくお願いします。
Discussion