【海外イベント紹介】 Speeding up Singapore’s COVID-19 response with the Jamstack by Kwa Jie Hao

今回は、「Jamstackカンファレンス 2021」で行われたプレゼンテーションから、

「Speeding up Singapore’s COVID-19 response with the Jamstack」

の内容をご紹介します:loudspeaker:

10年以上の歴史を持つ「Jamstackカンファレンス」は、Jamstackの生みの親であるクラウドコンピューティング企業「Netlify」が主催。世界中の開発者が集い、Jamstackをコンセプトとした最新のWebサイトの設計、開発などについて話し合います。プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。

>**目次**
政府謹製のWebサイトビルダー
Jamstackでの構築
フェイクニュースとの戦い
―成功例―
① 企業支援のためのサイト
② 市民の体験を共有するためのサイト
最後に

今回の講演者は、シンガポールのエンジニアチーム「オープン・ガバメント・プロダクツ」の一員であるKwa Jie Hao氏。

「オープン・ガバメント・プロダクツ」は、シンガポールの公共サイトで利用されるシステムやツールを次々に開発し、国を挙げてのデジタル変革を推進しているという、日本では例を見ない画期的なエンジニアチームです。

実は、シンガポールでは早くも公共サイトにJamstackを導入した実績があります。あわせて、独自のWebサイトビルダーまで開発したというのだから驚きです。

では、なぜシンガポールは公共サイトにJamstackを導入したのか、そして、コロナウイルスのパンデミックに際してそれらのサイトがどのように役立ったのか、さっそく見ていきましょう！

## 政府謹製のWebサイトビルダー
2017年、シンガポール政府は各種公共サイトのパフォーマンスを調査しました。

その結果・・・

ページ表示が遅い：10秒以上もかかるサイトも・・・
管理コストが高い：年間25,000シンガポールドル以上もかかるという試算・・・
アクセシビリティが低い：モバイルからアクセスできない、障害者への考慮が欠けている・・・
 
といった深刻な問題を抱えていることが明らかに。

そこで、政府は新しい仕組みを準備することにしました。それがズバリ、Webサイトビルダー「**Isomer**」。

講演者Kwa Jie Hao氏は、Isomerの開発に携わったメンバーの一員です。

## Jamstackでの構築
新しい仕組みを開発するにあたって、チームがはじめに行ったこと。

それは、**公共サイトでよく利用されるコンテンツとは何か**を調査することでした。

結果、ニュースや政策といった**情報を提供するためのコンテンツ**であることが判明。

このことから、**Jamstackでサイト構築すべき**！という結論を導き出しました。

>**■Jamstackを採用した「Isomer」で実現したこと**
>
>・ページ表示速度の向上
　待つ必要がないからユーザー（市民）がストレスなく閲覧できる。
>
>・セキュリティの向上
　自動監視するから安心・安全。ハッカーなどへ攻撃の糸口を与えない。
>
>・ユーザーフレンドリーなインターフェース
　サプライヤー（公共機関）が、手間なく速やかに情報を提供できる。
>　ユーザー（市民）が、スムーズかつ速やかに情報にアクセスできる。
>
>・アクセシビリティが考慮された、一貫したデザイン
　デザインテンプレートを用意し、公共サイトとしてのデザインの一貫性を担保。
　アクセシビリティの問題も解決。

![シンガポール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/0dd0536c-01a7-c1a9-346f-1c0187e646cc.png)
出典：「Our Users」 Isomer |Open Government Products
https://www.isomer.gov.sg/users/
Isomerのデザインテンプレートを使用することで、公共サイトとしてのデザインの一貫性を担保。

現在、Isomerを利用しているシンガポールの公共機関は、**なんと120超！！**

驚くべくことに、**今なお増え続けています**。

これら、一体何名のスタッフで運用していると思いますか？

なんと、**わずか8名**です！！！

まさにJamstackを採用したことによる恩恵と言えるでしょう。

Isomerの裏では、ストレージとしてGitHubが稼動、バックエンドはNetlifyがホスティング。

このJamstack構成こそが、少人数でのスピーディーなコンテンツの編集と公開を実現している所以なのです。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/5902520f-bd91-581e-c91d-0af1ada5beeb.png)

## フェイクニュースとの戦い

世界を変えたといっても過言ではないコロナウイルス。

その戦いでシンガポール政府が真っ先に直面した問題。

それは、フェイクニュースです。

噂が飛び交い、怪しげな治療方法がまことしやかに流通。デマを信じて的はずれな行動を取る人が続出しました。

このような状況を打開するためには、**正しい情報を、速やかに、さまざまなチャンネルで発信する**ことが大切であると政府は考えます。

そこではじめたのが、**プッシュ型の情報配信**です。日々の記者会見に加えて、WhatsApp（LINEみたいなもの）やTelegram（ショートメッセージ）などのアプリケーションから最新情報をどんどん発信しました。

とは言え、これらのアプリケーションでは、情報の速達性は賄えたとしても、扱うことができる情報の深度には限界が・・・。深い情報を伝達するには、もっと長い文章が必要でした。

そこで考えたのが、**Webサイトへの誘導**です。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/04592050-9ebc-1584-83d3-d55eaeda4926.png)
一例として、TelegramからWebサイトへの導線を示しています。
このようにアプリケーション側にリンクを貼り、Webサイト上のより詳しい情報に誘導します

Jamstackを採用したことにより、**アプリケーションの速達性に負けないスピードで作成でき、かつ、リアルタイムに更新できるサイトを構築**することに成功したのでした。

2つほど、その事例をご紹介します。

## ―成功例―

### ① 企業支援のためのサイト

当時、企業に対する支援スキームを確立することが政府にとって火急の要件でした。

ここでIsomerが以下の課題をすんなり解決！

・電話のホットラインなどでは、サポートが追い付かない
・Webサイトを立ち上げても、アクセスに耐えられない
 
Jamstackを採用したことで、わずか1週間でのサイト構築が実現。大量のアクセスにも対応することが出来たのでした。
>Gobusiness（https://www.gobusiness.gov.sg/）

### ② 市民の体験を共有するためのサイト

当時、パンデミック期間の体験を市民間で情報共有し、国民一丸となって危機を乗り越えるためのサイトが開設されました。

サイト構築に要した時間は、わずか36時間。

ステップはたったの3つ。
1. フォームに情報を入力
2. テンプレートに1のデータをインプット
3. サイト公開のボタンをクリック

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/0c5f174f-39a5-3708-84d9-ce0dc7a3c772.png)

ちなみに、裏側は以下のような仕組みになっています。

1. GitHubにリポジトリが作られ、Netlifyが起動。
2. GitHubに変更が伝わると、Netlifyが自動的にビルド。
3. サイト公開のボタンがクリックされると、KeyCDNのAPIを呼び出し、Netlifyのサイトが速やかに伝播。

裏側の仕組みを気にすることなく、コンテンツに注力することで実現したこのスピード感・・・！繰り返しになりますが、**Jamstack**を採用したおかげです！！

>Singapore Together（https://www.singaporetogether.gov.sg/）

## 最後に

プレゼンテーションの最後、Kwa Jie Hao氏は、「**Jamstackはforcemultipier（個々の力を最大限に引き出すもの）である**」と述べました。

従来型のサイト構築の手法だと、インフラのすべてを管理者がコントロールする必要があります。そのため、サイト完成後も長く運用にリソースが取られます。

一方、Jamstackのサイト構築の手法では、**バックエンドをGitHubやNetlifyなどのプロに委ねる**から、リソースが取られません。結果として、少人数でのサイト運用を可能にします。

シンガポール政府の試みと成功例は、「なぜJamstackなのか」という問いに対する解を、説得力を持って提示してくれました。

**スピード、安定感、少人数での運用**・・・、いずれの実績も、Jamstackを採用する大きな動機づけになるでしょう。 

最後まで読んでくださり、ありがとうございました:bow_tone1:

株式会社ヒューマンサイエンスは、他社にはない、「ドキュメント制作のノウハウ」×「最新のWeb開発技術（Jamstack）」を用いて、Webコンテンツとプラットフォームのソリューションをご提供します。

関心がある方は、ぜひこちらまでお問い合わせください！
**株式会社ヒューマンサイエンス
https://www.science.co.jp/document/jamstack.html**

本文書の出典元：https://youtu.be/08WujrMhqi8