Avenues物語～より良い教育を目指して～

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

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

Avenuesにとっては、静的なサイトでのパフォーマンスの向上は、合わせて良い事となりました。

著者：アルカディウス・ゴレツキ 2020年2月6日
原文：https://bejamas.io/blog/case-study-avenues/

興味深くやりがいのあるプロジェクトは私たちのスキルを高めてくれます。有意義で意欲的なプロジェクトは、私たちの心に豊かさをもたらします。そのため、より良い教育で世界を変え、未来を切り拓くことを目指す学校のプロジェクトに取り組めたことはとても光栄でした。

光栄であり、大きな責任です。

Avenues物語

Avenues: The World Schoolは、多くのキャンパスを持つ学校の一つで、世界に焦点を当てた変革的な学習体験を世界中の学生達に提供しています。ニューヨークに本社を置き、サンパウロと深圳にキャンパスを持ち、バーチャルキャンパスを世界中の人々に公開しているAvenuesは、より良い実践方法を開発し、現状に挑戦し、キャンパスだけではなく、世界中の教育に貢献することを使命としています。Avenuesのミッションをウェブ上で紹介するために協力したことは、困難ではありましたが、非常にやりがいのあるものになりました。

1－1 概要

以前のAvenuesのサイトはWordPressで構築されてから、6年以上が経っていました。長年の維持管理が複雑になってきたため、AvenuesのウェブサイトマネージャーであるDmitry Terner氏は、今後の再設計について明確なアイデアを持っていました。彼は、少なくともあと5年以上はテックコミュニティで主流になる、モダンなウェブ開発アーキテクチャでWordpressを置き換えたいと考えていました。

以前はパフォーマンスが脆弱であり、かつモバイルからの訪問者の割合が大きかったため、スムーズで高速なモバイルフレンドリーなウェブサイトにしたいと思っていました。また、コストを削減して開発を効率化したいとも考えていました。さらに、彼は多言語のリクエストをバックアップするシンプルでエレガントなCMSも求めていました。

1－2 使用したスタック

問題点やビジョンを考えると、Avenuesはすでにサーバーレスのインフラを持っていたため、ヘッドレスCMSの導入は最初から理にかなっていました。そこからJamstackを選択するのは自然な流れでした。

静的サイト生成ツールとしてのGatsby、コンテンツ管理ツールとしてのStoryblok、ホスティングとCI/CDソリューションとしてのNetlify

Storyblok
Avenuesの場合、標準的なヘッドレスCMSとシームレスなエディタ用の「ページビルダー」を組み合わせたCMSとしてStoryblokを選択しました。ライブプレビューオプションのおかげで、静的なウェブサイトのコンテンツをより便利に更新することができます。基本的に担当編集者は、これを使えば、新しいページを作ることができるだけでなく、古いページへの変更点がウェブサイト上でどのように見えるかを、再構築を待つことなく瞬時に確認することができます。

このスタックは信頼性の高いユーザー/エディタ中心のコンボであることが証明されたため、すでにいくつかのプロジェクトで使用されています。Storyblokは、編集者がウェブサイトのコンテンツを完全に制御できる素晴らしいCMSです。今までは、中国のサーバーでファイルを保持することが義務化されているという懸念がありましたが、GatsbyとBuddyのスムーズな統合には本当に驚かされました。しかし、いくつかの課題がありました。

Jamstackのメリットをストレートに受けることができました。コストは、拡張機能の実装の容易さや固有のセキュリティの向上と同様に、明らかにメリットがありました。
　　　　ドミトリー・ターナー/アベンニューズのサイトマネージャー

1－3 このプロジェクトでの最大の課題

本来なら大きな助けになるはずだったStyled-Componentsが私たちの抱えていた最大の課題の一つになりました。

スタイリングされたコンポーネントとは？Styled Components は CSS-in-JS の変形版で、クラス名が衝突せず、実際の CSS コードを書いてコンポーネントのスタイル設定をすることができます。

小さくて、似ているようで違うものをいくつも持つよりもカスタマイズ性の高いコンポーネントを作ることに注力していました。クライアントからの厳しいデザインガイドラインがあり、デザインの悪いコンポーネントはウェブサイト全体のパフォーマンスに悪影響を及ぼす可能性があったため、この作業は非常に困難を極めました。

1－4 結果

現在のセットアップは、はるかに合理化され、費用対効果が高く、汎用性が高いことが判明しました。まだこれを活用したことはありませんが、APIアクセスでコンテンツレイヤーとプレゼンテーションレイヤーを完全に分離できるようになったことは、Avenuesチームに新たな可能性をもたらしました。彼らは今、キャンパスのロビースクリーン用のアプリケーションを使って、これをどのように拡大できるかを検討しています。サーバーインフラの心配をしなくて済むようになったのは大きなメリットです。

Bejamasにとって、学習は適切な教育から始まる刺激的な旅であり、できれば一生続くことを願っています。人生を教育に捧げる人々と一緒に働くことができたことで、私たちの努力ははるかに価値のあるものになりました。

BejamasはJamstack製品の専門家として、自社では検討していなかったStoryblok CMSを推奨していました。そのような指導、親しみやすさ、専門知識は、私たちが求めていたものであったため、本当にこのプロジェクトが行えてよかったと思っています。
　　　　ドミトリー・ターナー/アベンニューズのサイトマネージャー

Avenuesプロジェクトで、私たちは真に変化を起こし、未来に影響を与え、より速く、より良いインターネットのウェブサイトを一度に構築することができました。

今日の世界に変化をもたらしたと言える人は何人いますか？

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

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