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としてレンダリングされてしまうのでその修正をしました。
見た目上は違和感少ないものですが、読み上げ機能を使うと2つのリストアイテムがある」状態と判定され、2つめの中身があることを期待させてしまいかねないので、それであればない場合は描画しないように対応しました。
日付が出る箇所は <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 さんが音頭を取ってアクセシビリティプレ試験会を実施し、その試験会中で上がってきたアクセシビリティ上の問題を対応したものの1つです。
最新のお知らせのリンクリストが、日付の部分がリンクテキストではないスタイルなのにリンクの一部になっていて、見た目やインタラクション(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シンタックスです。
stylelint8へバージョンアップしたときに *.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