Jamstack事例 ～国連COVID-19の場合～

#Jamstack
#JavaScript
#WordPress
#cdn
#static_site_generator
#CSS
#Next .js
#Netlify
#HTML
#Gatsby
#Hugo

今回も前回に引き続きBejamas社が取り組んだJamstackの事例についてご紹介したいと思います！

クリエイティブなユーザー生成コンテンツで健康に関する重要なメッセージを世界中に広めようとしているTalenthouseと一緒に開発ができたことは、これまでで一番やりがいのある仕事になりました。

著者：トム・クルーパ　2020年10月5日
原文：https://bejamas.io/blog/case-study-united-nations/

私たちはコロナの影響で前例のない時代に生きています。COVID19のパンデミックで依然として世界の多くが封鎖されています。しかしそれと同時に、今まで以上につながりを深めることができました。このような困難な時代には、大小問わず変化をもたらすことが不可欠です。

国連COVID-19の レスポンスサイトでクリエイティブなコンテンツに取り組むことができ、毎日何千もの投稿をより速く、より安全にさばくことができ、最善の方法で支援することができました。

#UNCovid19Brief 国連（UNCovid19Brief）では、公衆衛生上の重要なメッセージを翻訳するために、異なる文化、言語、コミュニティ、プラットフォームを超えて人々を巻き込み、情報を提供するアートワークになるべく、皆様のご協力を必要としています。

1. 国連にあった問題

国連では以前は Scala + Play フレームワークでWebサイトを構築していました。コードベースの技術的な負債は、単純な変更を難しくしてしまい、テスト/リリースに時間がかかり、結果バグを発生しやすくしてしまっていました。なおかつ、サイトの構造上、標準的なレイアウト・デザインしか適用することができませんでした。

新しい機能の実装に時間がかかりすぎてしまうので、Talenthouseが別の解決策を模索していました。しかしTalenthouseはTLNT内の他のプロジェクトですでに Jamstack のアプローチを使用していました。

2. Jamstackで救出

このプロジェクトは、世界中の様々なアーティストがCOVID-19のトピック（予防、エンゲージメント、サポートなど）を中心に作品を発信できるようなコンテンツハブを作ることを目的としています。国連のサポートのおかげで、ハブには初日から膨大な数の作品が投稿されて、アクセスが集中することが予想されました。大量のアクセスがあっても、最新のアート作品を表示できる技術スタックが必要でした。

3. MVPまであと6日

わずか6日で最初のバージョンを開発しました。この段階ですでに、世界中の何百人ものアーティストが制作した膨大な量の作品を誰もがダウンロードして利用できる状態になっていました。すべてをゼロから構築してインフラを維持するのではなく、使い勝手の良いアプリを提供することに集中しました。 Jamstack のエコシステムのおかげで、非常に短い時間で素晴らしい結果を得ることができました。

3－1 SSGとしてのNext.js

私たちは、パフォーマンスが良く、頻繁な更新にも対応できるように、静的なサイトジェネレーターとしてNext.jsを選びました。新しいアートワークを追加するたびにウェブサイトを完全に再構築するのを避けるために、インクリメンタルスタティックリジェネレーションとフォールバックを利用して、バックグラウンドで新しいページを生成できるようにしました。

3－2 CI/CDとしてのバーセル

CI/CDソリューションでは、Vercelを選びました。Next.jsを作ったのと同じチームが作成しており、ほぼ設定なしでNext.jsのWebサイトのホスティングを提供しています。結局のところ、「Next.js用に作られたプラットフォームにデプロイする」のが良かったのですが、特にインクリメンタルスタティックリジェネレーションやフォールバックモードと相性が良かったです。

3－3 Faunaをデータベースとして

すべての作品を保存するためにFaunaDBを選びました。FaunaDBは、Jamstackのウェブ開発アーキテクチャに非常にフィットする素晴らしいDBソリューションです。彼らの公式の説明で、Faunaが何であるかを非常にわかりやすく説明しています。

“FaunaDBは、クライアントとサーバーの関係を再考するグローバルなサーバーレスのデータベースです。 カスタムビジネスロジックをサポートするWebネイティブのGraphQLインターフェイス、最新のセキュリティを備えた一貫性のあるデータとコンピュートファブリック、データベース操作からの完全な自由度を備えたFaunaDBは、コードの簡素化、コストの削減、リリースの迅速化を可能にしています。”

FaunaDBは、どの場所からでもタイムラグ無く接続することができ、かつ標準で安全な、拡張性に優れた信頼性の高いプラットフォームです。

3－4 イメージCDNとしてのCloudinary

このプロジェクトのもう一つの優れたツールはCloudinaryです。これにより、画像や動画の配信方法を効率的に管理することができました。これは、アップロード、ストレージ、操作、最適化から配信までのすべてをカバーしています。

Cloudinary は、最適化された高速コンテンツ配信ネットワーク（CDN）を介してメディアを配信します。そのため私たちのプロジェクトとも非常に相性が良かったです。Cloudinary は人気のあるすべての開発フレームワークのクライアントライブラリを提供してくれます。

3－5 投稿を保存するAirtable

このプロジェクトの核となる機能の一つは、展示されている作品ごとにダウンロードをリクエストできる点です。ダウンロードを承認してもらうためには、名前や、作品の使用用途などユーザーからの情報が必要でした。AirtableはExcelによく似ていますが、単純なスプレッドシート以上の機能があります。

Airtableは、レコードを相互にリンクして、データ入力のための多くの機能をを作成するデータベースとしても使用することができます。

3－6 検索用 Algolia

Algolia は、タイトルや説明文で特定の言葉を探したいときに、すべてのアイテムを高速に検索するのに役立ちました。

私たちは、国連からCovid-19への対応を支援するよう要請され、コミュニティへの呼びかけと同時に、パートナーや世界中の人々がダウンロードできるように承認された作品を管理するコンテンツハブを提供しています。DenisとBejamasのチームが24時間体制で、私たちと国連の緊急の要望に応えてくれたからこそ、このプロジェクトは完成したのです。責任を持って協力してハブ機能を構築し、進化させてきた Bejamasは、国連にとってかけがえのないパートナーです。
Clare McKeeve
TLNT Holdings SA最高経営責任者

4. 結果

ウェブサイトのパフォーマンスが2倍になり、Jamstack ソリューションの安定性が確実のものとなったため5000以上のアートワークを提出しても、ウェブサイトは何の不具合もなく動作することができています。

あなたも支援に参加することができます

#UNCovid19クリエーターと一緒に活躍するための重要なメッセージを簡潔にまとめました。
・簡単な個人の衛生対策でCOVID-19の感染拡大を防ぐことができます。
・物理的な距離を保ってください。
・自分の症状を認識してください。体調が悪いときは家にいてください。
・世界的な連帯を強め、優しさの伝染を築くために協力しましょう。
・噂を信じない。恐怖と誤報は、私たちが克服しなければならない2つの大きな課題です。
・もっと参加して、寄付してください。

あなたがクリエイティブな人であれば、#UNCovid19Briefにメッセージを送り、あなたのコミュニティを広めてください。そして、そうでなくても、手本となって#UNCovid19Briefの作品を他の人と共有して、刺激を与えてください。

このような危機的状況にあっても、自分にできることを行い、重要なメッセージを共有する声になるだけで、最後まで支え合うことができます。

最後まで読んで下さり、ありがとうございました。

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