去る 2023年5月24日、Cloudflare Connect 2023 London に参加させてもらいました。
非常に刺激的なイベントで、本記事では当日の様子や、その結果テンションが上がって作ってみた Workers アプリの内容を共有します。Cloudflare に興味のある方、イベント参加を考えている方の参考になれば嬉しいです。
Cloudflare CONNECT 2023 に参加してきた
Cloudflare CONNECT とは
Cloudflare のフラッグシップイベントで、Cloudflare のビジョン・戦略・パートナー企業での活用事例について講演があったり、実際に Cloudflare で働く方々や他の企業の参加者と交流できます。
2023年は自分が参加したロンドンの他、サンフランシスコ、ニューヨーク、シドニーでも開催されます。
Connect is Cloudflare's flagship event that will connect attendees directly to the ideas, technologies and business leaders driving network and security transformation.
当日の様子
会場はイースト・ロンドンの「The Brewery」。18世紀の醸造所跡地を利用した歴史ある建物です。
Cloudflare CEO の Matthew Prince 氏と CPO（Chief Product Officer）の Jen Taylor 氏による基調講演から始まります。昨今のインターネット情勢と来るべき未来について、スターウォーズシリーズの展開になぞらえた語りが熱かったです。
講演は2つの会場に分かれて行われ、片方は大型スクリーンを使ったプレゼンテーション、片方がCloudflare とパートナー企業の対談という形で、興味あるアジェンダを選んで参加できます。
各講演の開始間隔もゆったりめに組まれていて、食事エリアでは他の参加者と交流もできます。
ケータリングも美味しかったなぁ…。
Solutions Demos 会場
Cloudflare のソリューションエキスパートの人たちと直接話せるワークショップ形式の会場も併設されています。ホワイトボードでの図解や実際のコンソール操作を交えて相談に乗ってもらえるのはめちゃくちゃありがたかったです。
しかも中の人みなさま各サービスに精通していらっしゃる・・・（当たり前か）。設計、実装、概念理解、どのレベルでも即座に回答がもらえるのは流石でした。
Cookiebot on Workers のアプリについて
今回のイベントで刺激を受け、早速 Cloudflare Workers で 1つ簡単なアプリを作ってみました。
弊社クラスメソッドで取り扱っている Cookiebot というサービスに関するものです。
Cookiebot って？
Cookiebot は CMP（同意管理プラットフォーム）のサービスで、最近よく見かける、ウェブサイトに初回訪問した際に表示される「このサイトでは Cookie を使っています」というアレです。
簡単なスクリプトを埋め込むだけで、訪問者からの同意に応じた他スクリプトの配信/ブロック、利用 Cookie のリストアップ、オプトアウト実装などを一手に引き受けてくれます。
クラスメソッドは Cookiebot とパートナー契約を締結しており、日本語での導入サポートや再販を行なっています。おかげさまで着々とご契約も増えています。
導入時のお客様の課題
Cookiebot は競合サービスに比べると導入が楽で、1つのスクリプトを埋め込むだけで同意バナーをサイトに表示させることができます。
とはいえ、スクリプトの埋め込み位置を気にする必要があったり、裏側の CMS によっては埋め込めるスクリプトに制限があったり、お客様ごとに導入手順を若干調整する必要がありました。
普段サポート業務を行う中で常々、「このプロセスをもっとスマートにできないものかなぁ」と思っていました。
やりたかったこと
Cloudflare CONNECT の講演で Workers のケーススタディを聴きながらふと、「Cookiebot の導入も Workersでやってしまえばいいじゃん」と思い立ちました。
早速ブースに行って相談してみました。
自分: 「これこれこんなことがしたいんだよね。この場合 Workers の HTMLRewriter は使えるかな」
Cloudflare: 「そうだね。HEAD へのタグ追加や改変ももちろんできるしフィットすると思う」
「HEAD 内のスクリプト挿入位置も制御したいんだよね」
「そしたら prepend メソッドはどうだろう。開始タグのすぐ後ろに挿入できるよ」
…
みたいな感じで、ほんの15分の会話で作りたいアプリがだいたい固まりました。
イメージ。
中の方、ざっくばらんな質問に丁寧に答えていただいてありがとうございました…（お名前を聞き忘れた）。
あとは手を動かすだけ、ということで帰ってホテルで簡単なコードを書き、テストしたところ思い通りの挙動になりました。
できあがったもの
基本的なコードは下記のみです。
export default {
async fetch(request) {
const cbid = "XXXX-XXXX-XXXX-XXXX";
class HeadRewriter {
element(element) {
element.prepend(
`<script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="${cbid}"
data-blockingmode="auto"
type="text/javascript">
</script>`,
{
html: true
}
);
}
}
const res = await fetch(request);
const contentType = res.headers.get("Content-Type");
if (contentType.startsWith("text/html")) {
return new HTMLRewriter()
.on("head", new HeadRewriter())
.transform(res);
} else {
return res;
}
},
};HTMLRewriter は、Workers のランタイムに組み込まれたセレクターベースの HTMLパーサーです。
例えば HTML タグの改変、属性追加、テキスト置換、要素の削除などがエッジ上の処理で可能になります。というか上記コードがシンプルなのでできることは大体わかるかと思います。
上記を Workers としてデプロイし、Workers Route (= Workersを適用するルール)の設定さえ済ませば、基本的にどんなサイトでも Cookiebot の導入が可能になります（別途 Cookiebot のアカウント取得は必要）。
↓アプリケーション側へのコード記述がなくても、下記のように同意バナーが挿入されます。
こちらは近日中に設定ツールを公開して、Cookiebot を導入されるお客様にお使いいただけるようにする予定です。
以上、簡単な一例でしたが、当日に自分が感じたグルーブ感が少しは伝わったでしょうか。
最後に
講演内容も一々勉強になりますが、「Connect」の名前通り、Cloudflare のメンバーや他の来場者と直接コミュニケーションを取るのが楽しいイベントかと思います。
コミュニティの熱も感じることができ、非常に有意義な１日になりました。
来年もどこかの都市で参加したい！
21
