2020年の奇跡 GitHub上に公開された「東京都公式 新型コロナウイルス対策サイト」の裏側（世永玲生）

小池都知事の新型コロナウイルスに対する会見でも背景に表示されるなど、話題となった東京都公式の「 新型コロナウイルス対策サイト」。

オープンソースで作られたことも話題になりました。さて、この「東京都 新型コロナウイルス感染症対策サイト」ですが、ゆるキャラの渚の妖精ぎばさちゃんが事情に詳しいと言う話を聞きましたのでオンラインインタビューを行いました。

それでは、早速お伝えします。

渚の妖精ぎばさちゃんへのインタビュー

—こんにちは！
渚の妖精ぎばさちゃん（以下ぎばさ）「こんにちは〜。渚の妖精ぎばさちゃんです！アカモクという海藻のキャラクターです。よろしくお願いします。」

—今回は「GitHub上に公開された「東京都公式 新型コロナウイルス対策サイト」」についてお聞かせ願います〜
—では早速質問しますね。

Q：Code for Japanって何ですか？
ぎばさ「東京都の新型コロナウイルス対策サイトは、一般社団法人Code for Japanが委託を受けて開発がはじまりました！

Code for Japanは『ともに考え、ともにつくる』がキャッチコピーの団体です。何をしている団体なのかというと『社会課題をテクノロジーで解決する』ということを行なっています。最近だと後でも説明するオープンデータの取り組みが多いです。

今回の東京都新型コロナウイルス対策サイトは「社会課題をテクノロジーで解決する」と「ともに考え、ともにつくる」がものすごく良い形で実現されていると思います。」

—なるほど東京都から委託を受けたんですね。

Q：Code for Japanとぎばさちゃんは何か関係あるんですか？
ぎばさ「このCode for Japanの理事の一人である小泉勝志郎という人が作ったキャラクターがわたしなんです。以降彼のことは『うちの運営さん』と呼びますね！中の人なんていません！

わたしは東日本大震災の復興の取り組みの中で生まれました。震災後に新しいブランドを作ろうという中で海藻アカモクに着目してなんです。実は今回の新型コロナウイルス対策サイトは、関係した皆さんの東日本大震災での経験も生きているんですよ！それが後で出てくるシビックテック！」

—ふむ、シビルテック、後で詳しくお聞かせください

Q：今回の取り組みにはどう参加してるんですか？
ぎばさ「わたしのキャッチコピーは『ねばぎば！』。『粘る』と『ぎばさ』がかかってるんですがもう一つ『ネバーギブアップ』もかかってます。新型コロナウイルスにもネバーギブアップでありたいんです。

そこで、まあわたし本人じゃないんですけど、うちの運営さんが一部ソースコードを書いているんです。まあ、ちょっとだけなんですけどね！今回の開発を請け負ったCode for Japanの理事をやっているのもあって初期の頃に。

今や、数百人が参加する大規模オープンソースプロジェクトになって流れも速いんです！
どれだけ早いかというと、土日を休んで運営さんが『ゼビウス 魔の二千機攻撃』というアプリを作ってたんですよ。

そして、コロナウイルス対策サイトの方に、復帰しようとした週明けにはものすごく進んでいて、すっかりコロナウイルス対策サイトの開発では浦島太郎になっちゃってたそうで......。それだけ、流れが早いのです！

運営さんが現在、具体的にどんな変更をしているのかというと。例えばコレ！
該当リンク（GitHub）

これは文言変更ですね。文言変更なんてたいしたことないと思う人もいるかもしれませんが、まあ実際たいしたことはないんですけど。

重要なのはこういうちょっとした変更でも貢献できるってことなんですよ！実際、プロジェクトに参加している人たちはプログラマーだけじゃないんです。デザイナーもいるし、多言語対応のために翻訳している人もいます。

色々な人が様々な面でプロジェクトに貢献出来るんです。

この輪は世界に広がっていて、なんと台湾のデジタル担当大臣であるオードリー・タンさんもプルリクエスト（修正提案のようなもの）をしてくれているんです！
該当リンク（GitHub）

プルリクエストの内容は『繁体字』の『体』を『體』に変えて欲しいというもの。


文言変更も重要なんですよ！一応うちの運営さんは文言変更以外のプログラム修正もやってはいます。ちょっとだけですけど......。」

Q：GitHubに公開ってどのような効果があるんですか？
ぎばさ「まずはGitから説明しますね〜。厳密さよりも理解しやすさを意識して書いてますので、細かいツッコミどころはあるかもしれませんけどよろしくお願いします〜。

Gitっていうのはバージョン管理システムと呼ばれるものなんです。例えば、文章や絵を書いているときでも、いろいろ書き直していると途中で『あのときの内容まで戻したい！』と思っちゃったりしませんか？このあの時に戻したいができるものなんですよ！

で、複数の人で同時に仕事をやると同じファイルいじっちゃったりなんかもありますよね。さらには、プログラミングだと新機能の開発中なんだけど、今動いているシステムのバグを直すのが緊急で必要になってしまってプログラムが枝分かれしちゃうとか......。こう言ったところを解決してくれるのがバージョン管理システム！

Gitはいま一番使われているバージョン管理システムなんです。
GitHubというのは、全世界に公開されていろいろな人が使えるようになっているGitのシステムです。いろいろな人が使えるのでオープンソースのプロジェクトによく使われているんですよ。今はMicrosoftが運営しています。

このGitHubの機能でフォークというのがあります。あの食器のフォークですよ！別に脳天突き刺したりしないので安心してください！重要なのは枝分かれしてることです！
あるオープンソースプロジェクトから分岐して、別のプロジェクトを作ることができるんです！
なので、今回の東京都新型コロナウイルス対策サイトも、神奈川県版、大阪府版、その他全部で30以上も立ち上がっているんです！これはフォークという機能のおかげなんです。」

—すごい勢いで枝分かれし、拡散しているわけですね。

ぎばさ「実は宮城県版も非公式ですがわたしを作った団体の『Code for Shiogama』で作成しました。こちらはうちの運営さんがメインでの開発です。」
該当リンク（宮城県COVID19）

—非公式版もあるわけですね。

「宮城県版はまだ情報が少ないのですが、宮城県と情報の連携がより取れるようになれば充実していきます。これは他の自治体で作られているものもそうですね。

そして、先ほども紹介したオードリー・タンさんのプルリクエストとというのも、GitHubの機能です。


修正提案のようなものなんです。オードリーさんはまず東京都新型コロナウイルス対策サイトをフォーク（分岐）させて、そこで『nuxt.config.ts』というファイルの中身を書き替えました。そして、この内容を取り込んで欲しいとリクエストする。これがプルリクエストです。

この変更内容は実際に取り込まれています。この変更を取り込むことをマージと言います。今はコアメンバーの皆さんがこのマージ作業をしているので、反映すべき修正かどうかがちゃんと判断されているんですよ。

まあ、この流れを簡単とはちょっと言えないですよね〜。プルリクエストのような実際にファイルを書き換えたりは難しいと思う人も多いんじゃないでしょうか？
バグを見つけたので報告したいなんてときに使えるのがイシューです。

これがうちの運営さんが出したイシューです。
該当リンク（GitHub）

でも、気軽に投稿は......と思う方も安心してください！



うちの運営さんのイシューは重複したものがあったため、そのことについて指摘が来て取り下げられています。ちゃんとチェックがかかります。ホントお騒がせですね......。すみません！

とはいえ、今は大量のイシューとプルリクエストが来ているので、まずは同じものがないか調べてから投稿してもらうのが良いですよ！

実際貢献してみたいと思った方はこちらのリンク先がおすすめです。なんと高校生が書いてるんですよ！」
該当リンク（Qiita）

Q：この取組は、なぜ実現できたんだと思います？
ぎばさ「これはもう関わった皆さんの頑張りですよね！今もガンガン修正がされています。一人一人の頑張りが結実したものです！東京都の皆さん、コアメンバーの皆さんも当然大活躍ですが、一人一人の力があってのものなんです。」

Q：目的だったり、理念だったりはどんな感じですか？
ぎばさ「今回のプロジェクトってすごくオープンなんですよ。

まず今まで話してきたようにオープンソースであること。そして、オープンデータであることなんです。そして、開発でのやり取りもさっき話したGitHubから見ることができます。」

—全てがオープンなわけですね。

Q：オープンデータ・オープンソースであることにどんなメリットがあるんですか？

ぎばさ「オープンソースプロジェクトだから他の自治体で流用されているし、やりとりも公開されているんです。
オープンソースという言葉を「無料」という意味に捉えている人たちもいますが、オープンソースである意義はいろいろな人たちが関われること！今回のプロジェクトはまさしくオープンソースの理念に沿ったものだと思います。

今回のプロジェクトの「オープン」の中でもう一つ重要なのがオープンデータなんです。
例えば、今回のサイトを見て、このグラフはもっと別な表現が良いんじゃないかとか、他のデータと連携させると良いんじゃないかとか、全国を横断的に見れると良いんじゃないかとか思う人もいると思うんですよ。

今回の東京都新型コロナウイルス対策サイトのデータはオープンデータなんです。オープンデータというのは単に公開されているデータという意味じゃなく、プログラムから読み込める形をしているデータなんですよ！

例えば自治体でデータをPDFにして発表してるのが良くありますよね。これは公開されたデータではあるけど、プログラムから読み込むのが困難なのでオープンデータとは言わないんですよ。ここ大事です！でも、まずは公開されるだけでも、大きな前進なんですけどね。

話を戻して、オープンデータだと何が良いか？例えば今回の東京都新型コロナウイルス対策サイトを、自分好みの見た目に作り直すこともできるんです！
いま全国に広がりつつありますが、そちらも組み合わせていけば、また新しいものが作れそうですよね！
ちなみに、このような動きはシビックテックと言われているんです。」

Q：シビックテックとは何ですか？
ぎばさ「『市民の課題をテクノロジーで解決する』のがシビックテックです。

実は今回の東京都新型コロナウイルス対策サイトの分岐は各地域の『Code for ○○』が作ったものが多いんですよ！

この『Code for ○○』がシビックテックの団体です。Code for Japanは別に親組織というわけじゃなく、『Code for ○○』の日本という国版という位置付けです。関係団体として連携を取っているので、今回のような広がりにつながっています。

そして、わたしも宮城県塩竈市のCode for Shiogamaで生まれたキャラクターなんですよ！その後うちの運営さんがCode for Japanの理事になりました。

シビックテックが日本で始まったのは東日本大震災がきっかけと言えます。この時に社会の課題を解決するために、テクノロジーの使い手たちが集まって力を発揮しました。Code for Japanもその流れの中で生まれているんです。」

—なるほど、そんな経緯があったんですね。僕も中の人と東北支援のプロジェクトで出会った記憶があります。

Q：このプロジェクトでこだわった点、やって良かった点は何でしょうか？

ぎばさ「それはもう多くの人たちが参加してくれていることです！プログラムの部分も当然ですが、プログラマー以外の方も活躍しています。

東京都新型コロナウイルス対策サイトでは多言語対応やアクセシビリティと言ったいろいろな人が使いやすいように作られています。

当然多言語対応をする人は翻訳をしてくださってます。プログラマーというわけじゃありません。また、色々な人が使いやすいようするためのアクセシビリティもそうそうたる人たちが集まって議論が積み重ねられています。

その一例が『やさしい日本語』です。言語も『日本語』の他に『やさしい日本語』もあるんですよ！『多言語対応ではまだ対応していない言語が母国語の方には、なるべく理解しやすい日本語で』というものです。この「やさしい日本語」は当初全部ひらがなで記載された内容でした。

みなさんもふだんぶんしょうをよむときにわかるとおもいますがぜんぶひらがなだとぎゃくによみづらかったりもするんです。

今の文章って読みづらいですよね！」

—たしかにとてもよみにくいですてきどなかんじとひらがなのくみあわせがいいとおもいます

ぎばさ「『やさしい日本語』を選択すると、次のような難しい漢字は使わないけど、病気や人は漢字にして読みやすく、なおかつふりがな的にカッコの中に書くというものになっています。ここも議論が行われてこうなって行っているんです。これも多くの人が参加してくれているから、そして多くの人に使ってもらいたいからこそなんです。



そして、今回のプロジェクトには東日本大震災のときに、『自分も何かできないか？』と立ち上がってくれた皆さんも多く参加してくれています。Code for Japan代表理事の関さんもそうです。9年前の震災からの繋がりが今またこういう非常事態に絆となっているんです。」

Q：使った技術やフレームワークについて簡単な説明と共にお聞かせください

ぎばさ「Webのプログラミングというと、PHP、Perl、Rubyと言ったものがよく使われているんですが、これ全部サーバー側で動くプログラミング言語なんです。今回はこう言ったサーバー側の技術は使ってないんですよ。これが大きな特徴ですね。レンタルサーバーだと、サーバー側プログラミングが動くかどうかに制限があったりしますが、今回のものは環境も用意しやすいんです。

プログラミングのメインとなっているのはVue.jsという技術です。JavaScriptという言語で動く、サーバーではなくクライアント(パソコンやスマホ)の側で動くプログラムなんです。実際にはJavaScriptを拡張した言語のTypeScriptと、Vue.jsを拡張したNuxt.jsというものを使ってます。

いろいろ良いところがある技術ですが、今回のプロジェクトで重要なところだと、一つの画面を複数の部品に分けて開発がしやすくなるんです。1画面1ファイルだとバージョン管理システムを使っているとはいえ、複数の人が同時に編集したらこんがらかっちゃいます！なので、1つの画面を分けて開発できることは重要なんです。

また、Netlifyというサービスを利用しています。頭の方で話したサーバーサイドプログラミングがないサーバーレス用のホスティングサービスです。こちらはGitHubと連携することができるので、今回のプロジェクトにぴったりなんです。

先ほどから何度か話題に出ているプルリクエストですが、これが取り込むべきものかどうかもNetlifyを使うと「取り込むとどう変わるか」を確認できるようになるんです。多くの人が参加する開発ではこういうところも重要ですよね。」

Q：これからどの様に進化していくのでしょうか？

ぎばさ「まず47都道府県制覇！勢いとしては個人やコミュニティが立ち上げたものが多く生まれているんですが、自治体公式も増えてきています。どれだけ派生が生まれているかは以下のリンクにまとまっています。

該当リンク（GitHub）

また、自治体公式で行われるところも増えてきています。そして、国内でも勢いがすごいですが、もしかするとどんどん世界に広がっていくんじゃないでしょうか？実際オードリー・タンさんのプルリクエストのように海外からの注目もあります。
実際に台湾版やサンフランシスコ版も立ち上がりました！」」

該当リンク（台湾版）

該当リンク（サンフランシスコ版）

ー世界にも！これはすごいですね。

Q：最後に一言
ぎばさ「コロナウイルスで自宅待機の方がちょっとでも暇を潰せるように、無料でアプリ提供してます！『ゼビウス魔の二千機攻撃』3/31までしかダウンロードできないのでぜひ遊んでください！こちらもTypeScriptで書かれています！」

—ありがとうございました！

全世界に広がる新型コロナウイルス、その「正しい情報」を伝える為に始まったこのオープンソースのプロジェクトもまた全国、そして世界に広がっています。東日本大震災での経験、そしてそこで生まれた絆が、この様な形で社会に貢献していることに、僕は感動しました。