Hack For
Japan+はCodefor Japan
あなた社会に役立つのスキル

あなたのスキルは社会に役立つ
2011年3月11日の東日本大震災発生の直後に発足したHack For Japanと「市民が主体となって自分たちの街の課題を技術で解決するコミュニティ作り支援」を掲げる
Code for Japanのメンバーから、防災や減災、地域の活性化や課題解決、そして人材育成など、「エンジニアができる社会貢献」をテーマにした記事をお届けします。

第 105 回

行政公式 OSS が発信した Withコロナのデモクラシーの形● Code for Japan ／学校法人立志舎 Web システム所属
今村 かずき（いまむら かずき） Twitter @kaizumaki

東京都新型コロナウイルス感染症対策サイト（以下、対策サイト）の制作・運営については、数々のメディアに取材していただきました。その中で記者の方に「新しいデモクラシーの形だと思った」という感想をいただいたことがあり、「なるほど、そういうはひとしおでした（図 2）。しかし、本当の始まりはここからだったのです。

ミラクルコーディング

見方もあるのか」と印象に残っています。そこで私3 月 4 日、GitHub で見知らぬ人からの issue が立もタイトルにその言葉を拝借することにしました。

ち、それを見知らぬ人が解決しようとしているとこ行動原則がそこにあったろを発見し、何かが始まった！と察知しました。私
たちはまったく心の準備ができていませんでしたが、そこから矢継ぎ早に展開する様子は、新聞や各エンジニアとしてこのプロジェクトに参加したと

種 Web メディアなどで報じられているとおりです。

き、プロジェクト責任者であり Code for Japan 代表

リポジトリには Vue.js や Nuxt.js に詳しい人はもの関治之さんから行動原則（図 1）をまず読むように

ちろん、TypeScript、アクセシビリティ、多言語言われました。デザインもコーディングも建設途中化、CSS、デザイン、パフォーマンス……さまざまでしたが、行動原則を読んだとき私にはやるべきこな方面でその道に長けているコントリビューターのとがはっきりわかったという感覚がありました。

みなさんが集まりました。寄せられる Pull Request

3 月 3 日深夜にサイトが公開されました。そのとのソースコードは、どれもうなるほどのすばらしさの issue の数は 100 余り。

でした。ブラウザ上で見える実装もさることなが限られたメンバー内でのやりとりでしたが、達成感ら、「ソースコードをきれいにしました」「開発環境

きの GitHub リポジトリ

注1

注1▼ 図 2 開発はリモートでやりとりしながら行われた
https://github.com/tokyo-metropolitan-gov/covid19▼ 図 1 行動原則。CODE_OF_CONDUCT.md としてGitHub のリポジトリから見ることができる

176 - Software Design

第 105 回

行政公式 OSS が発信したWithコロナのデモクラシーの形を整えました」といった目に見えない提案も本当にうれしかったです。

▼ 図 3 東京都が示した元のチャート（上）。これが見事に   コーディングされた（下）これが HTML でできてるなんて信じられないだろ？
対策サイトの特徴的なイメージとなった「検査陽性者の状況」のチャート。当初は SVG 画像でしたが、多言語化のためにコーディングが必要になりました。私はこれをどのようにコーディングすればいいのか、まったく検討がつきませんでした。そんなとき、GitHub 上でいろんな人たちが議論に参加してくれました。table マークアップで頑張ってくれた人、セマンティックコーディングをアドバイスしてか？ 果たして正解はあるのか？ 行動原則に「No人、デザイナー、データビジュアライズの専門家。

one left behind（誰ひとり取り残さない）」と宣言した

多くの人の手を経て、最終的に ul タグと li タグによ重みをこれほど感じた瞬間はなかったと思います。

るリストが入れ子になった HTML マークアップと、レスポンシブ対応の CSS を駆使したミラクルなコードが提出されました（図 3）。

翻訳コントリビューターたちの使命感
GitHub 上では数字に表れていませんが、翻訳コ

私は心の底から驚いて、Slack にこう書き込みまントリビューターの方々も活躍していました（翻訳した。
「信じられないだろ……？ これ、HTML でについては Transifex というサービスを利用していできてるんだぜ……？」

るため、GitHub からは活動内容が見えません）。

「No one left behind」の重みる用語は難解です。そのうえ、感染の状況が長引くアクセシビリティへの関心の高さ
アクセシビリティに関しては当初からさまざまな行政の使う日本語や、新型コロナウイルスに関すとグラフの注釈が書き換えられることが頻繁に発生しました。そのたびに各国語に翻訳してくれるコントリビューターがいることを忘れてはいけないと常々思います。

議論が起こっていました。私たちの中でアクセシビ日本語を母国語としない人々のために、東京の状リティに詳しい人はいなかったので、コントリ

況を世界に発信することに使命感を持って取り組んビューターの中にいた数人の専門家に旗振りをお願でいる彼らに敬意を表します。

いすることになりました。
とくにグラフの色については激論が交わされました。初期に用いられていたグラフの色は、色覚特性の方にはとても見えにくい状態だったのです。
この issue は SNS で広く知れ渡り、エンジニア、デザイナーのみならず、研究者、色覚特性当事者も報告漏れ、その裏側で5 月 11 日、東京都に感染者数の報告漏れがあったことが発覚し、さらには重複計上もあるとのことでした。データの信頼性が揺らぐ緊急事態です。

議論に参加しています。それが私たちの予想外の方東京都の担当者から一報をもらった直後から運営向に広がりを見せていて、私たちが意図するところメンバーで集まり、対応を検討しました。感染者数とは外れた意見も散見されました。の未報告分、重複分をどのようにグラフで表現する誰の意見が正しいのか？

それを誰が決めるのHack For Japan + Code for Japan

くれた人、多言語化コーディングを担当してくれたかを話し合いました。

Sep. 2020 - 177あなたのスキルは社会に役立つ
当初、未報告分を積み上げ棒グラフで表現するとす。誤表示が起こると、ほどなく issue を立ててくいう案が東京都からありましたが、過去の日付にされるコントリビューターがいます。現象を報告し、かのぼった未報告分はそれぞれわずかな数値です。

その原因を提示してくれます。誤表示が起こったと積み上げ棒グラフにしてもよくわからなくなってしきはだいたい私たちや東京都の担当者は気づいておまいますし、しかも重複分を表現できません。

り、裏で必死になって原因を探っているのですが、1 人の運営メンバーが「それではフェアではない」

issue のコメントに私たちも気づいていない現象やと意見しました。単純棒グラフにしたほうがよっぽ原因を書いてくれるので、「あ、そうか、それが原ど混乱しません。その後、実装のプレビューをもっ因なのか！」と気づくことも多いです。て東京都の担当者に提案しました。結果、単純棒グラフでいくことになりました（図 4）。
閲覧者に対して真摯であろうとする運営メンバーなくして、対策サイトを持続させることはできなかったと思っています。

バグ報告に感謝OSS にバグはつきものだと思っています。巨大に成長した OSS だとなおさらです。

バグを報告してくれるコントリビューターは本当に貴重な存在です。こんな心強い人たちが見に来てくれる限り、この OSS を続けていける、そんな気がしています。

行政公式サイト運営のバランス
民間医療機関による PCR 検査の開始や、ホテルでの宿泊療養が始まるなど、東京都の施策が変わるごとに新しいデータが加わるようになりました。そ度々起こるのが、本番サイトにデプロイしたときれに伴い、表現が変わるグラフや不要になる注釈もやデータが更新されたときに初めて発見される表示出てきます。とくに今まであったものを削除するこ不具合です。私たちはすべてのソースコードを把握とに私たちはとても慎重になりました。

し記憶しているわけではないので、ちょっとした実

そんなときは、履歴を残すために GitHub に状況装の違いが、ある日突然バグになる可能性は常にあを書き込むようにしました。異論があれば受け付けります。

る姿勢です。実際に異論が出たことはありません

しかし、こんなときこそ OSS の力は発揮されま▼ 図4

報告漏れの分を積み上げ棒グラフにすると、かなり  わかりにくい形に。このあと単純棒グラフにしたが、削除された注釈について質問のコメントがついたことがありました。私が勝手に答えるべき内容ではなかったので、東京都の担当者に回答を求めました。見た人に誤解を与えるようなデータの表現があってはならないのと同様に、GitHub のコメント 1
つとっても食い違いがあってはならない。その思いで東京都の人も真剣に取り組んでくれました。
「公式サイトの運営は辛いですね」と言われたこともあります。確かに、市民と行政の板挟みと取られるかもしれません。私としては板挟みに悩むというよりは、東京都とともにコントリビューターも守る、そういう割とシンプルな心持ちでいます。

ラベリングの葛藤
3 月は改善すべき点が数多くあり、エンジニアリ

178 - Software Design

第 105 回

行政公式 OSS が発信した
Withコロナのデモクラシーの形ングを施す余地がたくさんあったのですが、それらの対応がおおむね完了していくと、コミットすべき課題も自然と減っていきました。

そこに協力してくれたのが、おもに 10 代のコントリビューターたちでした。

一方で、感染者数がピークを迎えた 4 月は世間がテキストコミュニケーションスキルの高さに助けられる不安に満ちているように見え、issue にもそれが表れモニタリング指標のグラフ7 つ＋総括表の、合計ているように感じました。ほしいデータがない、8 つの issueを立てました。私たちは「明日の朝までもっと注意喚起につながるようなデータを出してほに issueに動きがなかったら、運営側で引き取ろう」

しい、そういった issue が立つようになりました。と話していたところでした。ギリギリまで OSS の力

それらの issue には「need-official-confirmationを信じたい。それでダメなら内々で対処しようと。

（関係者の確認が必要なもの）」ラベルを付けます。

そこから数時間経ったところで、10 代のコントリビューターたちが次々と「やります」とコメントし、実装にとりかかってくれました。彼らの実装スピーます。もちろんすぐに結論が出るものではなく、公ドに驚いた私は運営メンバーに「終わりそうな勢い式広報として考慮すべきこともたくさんあります。

です……！」と報告しました。

そういうこともあり慎重に対応していたのです

彼らがすごいのは GitHub 上でのコミュニケーが、そのうち「need-official-confirmation」ラベルをションスキルの高さです。基本的にテキストコミュ付けたまま、ディスカッションもされることのないニケーションなのですが、自分が何をやったのか、issue が増えていくことになりました。

何がわからないのか、何を知りたいのかを彼らは的

今思えば、あのとき東京都の人もコントリビュー確に表現します。他人の書いたコメントに対してターとともにディスカッションに加わることはできも、丁寧に受け答えします。その表現力はまったくなかっただろうか、GitHub 上で行政と市民が「とも大人と同等です。だったらあとは若い人たちに任せにつくる」を実現できなかっただろうか、と葛藤すて、年配はそろそろ引退しますかね……と、年寄りる日々です。

くさいことは言いたくないのが本音ですが、若い人

10 代のコントリビューターたち
ゴールデンウィークを過ぎたころ、政府や東京都たちから我々が学ぶことは本当に多いです。

すべてのコントリビューターに感謝をの施策が変わっていきました。対策サイトはこれらコントリビューターのみなさんはコロナ禍をともに対応しなければなりません。感染状況が落ち着いに戦ってきた同志だと私は思っており、実際に顔をてきたにもかかわらず、東京都から要求される開発合わせたことはないですが、GitHub で築かれた絆を項目はどんどん増えていきました。しかし、GitHub勝手に感じています。一緒に新しいデモクラシーのでは 3 月に比べるとだいぶアクティビティが減って一端を作り上げることができたと思っています。

きており、コントリビューターもまばらでした。
そんなころに、東京都から大規模開発案件が依頼

Hack For Japan + Code for Japan

公式のサイトであるため、文言の変更や見た目に関わる変更については東京都に確認する必要がありあなたも貢献してみませんか？

されます。
「モニタリング指標」という東京都の新た東京都新型コロナウイルス感染症対策サイトのな施策に伴うグラフの追加です。モニタリング指標

GitHub リポジトリから、あなたも貢献してみませは 7 つあり、ほぼすべてが新規の実装でした。

んか？ 気づいた点があれば issue を立ててみてく

スケジュールに余裕がない中で、運営メンバーのださい。すでにある issue に自身の考えをコメント

間では「このリリースが予定どおりできたらミラクすることも立派なコントリビューションです。あなル」とまで話していました。

たのアクションをお待ちしています！ s

Sep. 2020 - 179