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

今回はJamstackを使用した、Armorbloxの事例について紹介いたします！

最高のプロジェクトは、お客様がJamstackを使うことで得られるメリットを、お客様のウェブサイト上ですぐに体験できるプロジェクトです。

著者：Arkadiusz Gorecki 2019年11月10日
原文：https://bejamas.io/blog/editor-friendly-jamstack-website-armorblox-case-study/

Bejamasのウェブ開発では、パフォーマンスとセキュリティが常に最優先されています。世界中の企業に最高のセキュリティサービスを提供することを使命とする企業から、ウェブサイトに関する問い合わせを受けたとき、私たちの価値を証明できるようなプロジェクトになると思いました。

そのため、一生懸命このプロジェクトに取り組みました。

1. 概要

Armorblox社はカリフォルニアを拠点とする企業で、サイバーセキュリティの分野における真のイノベーターです。自然言語理解や自然言語処理から深層学習まで、最新のAI技術を用いて、さまざまなコミュニケーションプラットフォームにおけるデータ損失やIDベースの攻撃から組織を守ります。

投資家からの本格的な支援を受けている新興企業である彼らは、ブランドアイデンティティをサポートするだけではなく、ページのロード時間が短く、ユーザーを惹きつけ、高いレベルのセキュリティをアピールできるウェブサイトを必要としていました（ビジネスではセキュリティが特に重要ですよね）。始まったばかりとはいえ、彼らのチームのほとんどは、すでにWordpressのウェブサイトを構築・運営した経験がありましたが、Wordpressに対して不満を持っていました。

幸いなことに、彼らはJamstackについて以前から知っていて、WebパフォーマンスとWebサイトのセキュリティに関しては、Jamstackが競合他社を大きく引き離していることをよく知っていました。

以前は、Wordpress、HTML、Flashなどを使ってWebサイトを制作していましたし、様々なCMSシステムも使っていました。まだウェブサイトを持っていなかったので、セキュリティやパフォーマンスの面で有利なJamstackでウェブサイトを一から作ることができたのは良いニュースでした。
Melinda Marks
Armorblox社マーケティング担当VP

高速で100％安全なウェブサイトを簡単に拡張できることをすぐに目標にしました。

1－1 使用したスタック

Armorblox社のスタッフと社内で議論を重ねた結果、Emerging Dynamicsプロジェクトで使用したものと同様の技術スタックを使用することに決めました。

・静的サイトジェネレータとしてのGatsbyJS
・ヘッドレスCMSとしてのStoryblok
・フォームのためのMarketo
・ホスティング用のNetlify

2. このプロジェクトでの最大の課題

実はStoryblokとは初めてのプロジェクトだったため、このヘッドレスCMSに適した仕組みを一から作らなければならず、正直なところ、すべてが驚きの連続でした。

個人的には、ライブプレビューのコンセプト全体と、Vueで書かれたカスタムプラグインのアイデアに驚きました。私が気に入ったのは、カスタマイズ可能なコンポーネントをいくつも作ることができ、しかも、エディターにとって明確で使いやすいものになっている点です。

2つ目の課題は、MarketoフォームをGatsbyのページに実装することでした。このサードパーティのソリューションをJamstackで最適化しようとすることに、大変苦労しました。問題の1つは、スクリプトの読み込みに対応することでした。ウェブサイトで複数のフォームを使用していたため、常に間違ったフォームが表示されてしまうことに悩みました。

最後に忘れてはならないのが、タイトな締め切りです。このプロジェクトは、絶対に守らなければいけない期日（製品発表のカンファレンス）があったので、非常に早く行動しなければなりませんでした。時間的にも、納期を考慮すると、新しいスタックを採用するのは少しリスクがありましたが、クライアントにとってはベストフィットであり、確実に成果を上げることができました。

2－1 プロジェクトの中心となるStoryblok

ここで簡単に思い出してください。StoryblokはAPIベースのヘッドレスCMSで、特定のコンテンツを選択し、ワンクリックで変更できるビジュアルエディターを備えています。非常にユーザーに優しく、カスタムプラグインを追加することができ、画像の最適化や修正のための画像APIも提供しています。さらに、Storyblokは、将来的にウェブサイトを拡張したいと考えている方にもおすすめです。既存のページのコンテンツを変更できるだけでなく、あらかじめ用意されたコンポーネント（ランディングページなど）から新しいページを追加することもできます。

例えば、毎日新しいページを作る必要があるとします。例えば、ランディングページや新製品/ツール/イベントなどのページなどです。コンポーネントが正しく設定されていれば、開発者に連絡する必要はありません。エディターは、それを瞬時に行うことができます。

Storyblokにはライブプレビュー機能がありますが、これがあまり必要ではなく、コンテンツそのものに集中したい場合（例えば、新しい記事を追加するとき）は、特定のページでこの機能を簡単に無効にして、他の重要なことに集中することができます。

これらのことからも、Storyblokがいかに万能であるかがわかります。必要に応じて、ページビルダーとしても、標準的な入力専用のヘッドレスCMSとしても機能します。いずれの場合も、これまでに出会ったエディターの中で最も快適な使用感を提供しています。

2－2 Gatsby-source-storyblokプラグイン

ヘッドレスCMSは、任意のフロントエンドフレームワーク（好みであればVanillaJS）を使用することができます。しかし、私たちがウェブサイトを開発していた当時は、StoryblokをVueで使用する方法についてのチュートリアルや記事しか見つけることができませんでした。しかし、カスタムプラグインもVueを使って書かれているため、Gatsbyのソースプラグインがすでに存在していました。

Gatsby-source-storyblokとその使い方の公式チュートリアルが1つあれば、十分すぎるほどの効果がありました。当初、このプラグインはいくつかの基本的な機能を提供していました。GatsbygraphQLにエントリーを変換する際に、当時の私たちに欠けていたのは、機能性でした。Storyblokは常に開発を続けているので、ソースプラグインが利用できます。一方、私たちは、自分たちで何とかしなければなりませんでした。

そのため、別のエントリーをリンクすると、そのデータ（以前のようにIDだけではなく）を取得できるようになり、追加のクエリやフィルタなどを記述する必要がなくなりました。使用例としては、記事と著者を持つ記事で、著者を別のエントリとして保持し、特定の記事にリンクさせるようなケースが挙げられます。

2－3 Marketo Formsの統合

Marketoは、さまざまなソリューションを提供するマーケティング自動化ツールで、企業のリード獲得、販売管理、ウェブサイトのパフォーマンスを測定するのに使われます。同社が提供するツールの一つである「Forms」は、お客様自身がウェブサイトの任意のページに埋め込むことができる、シンプルで柔軟なウェブフォームを作成するのに役立ちます。

MarketoのマルチプルフォームをJamstackのウェブサイトに実装するのはそれほど簡単ではないことがやってみてわかりました。

問題が発生したのは、異なるページで異なるフォームを使用しようとしたときです。ユーザーがサブページを切り替えると、正しいフォーム以外のフォームが表示されてしまうことがわかりました。以前に訪れたページのフォームであることもあれば、ユーザーが××フォームのあるページから××フォームのある別のページに移動すると、2倍になることもありました。

これまでのようにプラグアンドプレイタイプの操作はありませんでした。Marketo APIを使ってフォームデータを送信するのは簡単なのですが、ソフトウェアプロバイダーは自社のスクリプトをウェブサイトに設置することしか提案していません。そのため、一つ一つの目標をクリアするように脚本を差し込むことが大きな課題となりました。

例えば、フォームが以前に読み込まれたかどうかをチェックしたり、そのフォームが表示する必要のある正確なものかどうかをチェックしたり、場合によってはエンドユーザーに正しいフォームだけが表示されるようにするなど、動作させるための追加の仕事がありました。

ArmorbloxのWebサイトでは、複数のフォームが必要なだけでなく、フォーム送信後に別のページに移動したり、ファイルをダウンロードしたりと、フォームが行おうとしている内容に応じて異なるアクションが必要でした。Marketoのスクリプトとその手法を使えば、ここで苦労することはなく、スムーズに楽しく仕事ができました。

最後に、StoryblokとMarketoの間に追加の接続を行いました。ユーザーがフォーム付きのページを編集したり、新しいページを追加しなければならないとき、Marketoのパネルですべてのフォームの設定を行い、Storyblokに正しいIDを追加すると、すべてが自動的に行われます。

3. 結果

GatsbyとStoryblokを組み合わせたことにより、Armorbloxは見栄えがよく、しっかりと構築され、速くて、管理しやすいウェブサイトを実現しました。さらに、Storyblokはページのカスタマイズ、拡張、再構築が非常に簡単で、その点が最もArmorbloxチームが感心した点です。

性能面でも、彼らは満足していました。彼らが最も懸念していたのは、ウェブサイトに追加要素を加えることができることが、パフォーマンスにどの程度影響するかということでした。

今回使用したJamstackのツールのおかげで、そのような心配はほとんどありませんでした。

私たちのパフォーマンスとページローディングの統計は、Wordpressや他のサイトよりもはるかに優れています。アニメーションなどのデザイン要素も加えたいと考えていました。Jamstackでは、パフォーマンスを気にすることなくデザイン要素を追加することができます。
Melinda Marks
Armorblox社マーケティング担当VP

もう一つの幸せなクライアントは、使い古された言葉かもしれません。しかし、今回のプロジェクトでは、まさにそれが実現したと言えます。その上、このプロジェクトのおかげで、ウェブをより安全な場所にするための小さな貢献ができたと思っています。

さあ、Armorbloxのサイトに行ってみてください！

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

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