Subscribe to receive notifications of new posts:

Subscription confirmed. Thank you for subscribing!

開発者スポットライト:Chris Coyier、CodePen

Loading...

Developer Spotlight: Chris Coyier, CodePen

Chris Coyier氏は15年以上にわたりWeb上で構築しています。2007年、Chris氏はフロントエンドおよびフルスタック開発者向けのWebの主要な出版物の1つであるCSS-Tricksで、Web開発の世界で成功しました。

2012年にChris氏は、CodePenを共同設立しました。これは、開発者が協力してHTML、CSSおよびJavaScriptで記述されたコード例を共有できるようにするブラウザ上で動作するオンラインコードエディターです。

CodePenの性質上、すなわち、ホスティングコードと人気の高い埋め込み機能により、開発者が世界中でCodePenの「pen」機能を共有できることから、どんな種類の最適化でもCodePenのビジネスに大きなインパクトをもたらす可能性があります。CodePenは、これらの最適化の最初のステップとして、コードを実行し、Cloudflareのネットワークにデータを格納する機能にますます依存します。Chris氏が言うように、CodePenは「非常にたくさんのこと」のためにCloudflare Workersを使用しています。

「外部のCMSからコンテンツを抽出し、利用者のブラウザに到達する前に、Workersを使用してHTMLを操作します。たとえば、元のページを取得してコンテンツを取得し、フルレスポンスのためにそれらをつなぎ合わせます。」

Workersは、ネイティブのリクエスト/レスポンスクラスを使用して直接レスポンスに対応でき、当社のストリーミングHTMLRewriterエンジンを追加することで、パフォーマンスを損なうことなくHTMLを変更、結合および解析できます。Workersの機能はCloudflareのネットワークにデプロイされるため、CodePenはオリジンサーバーとクライアント間の非常にインテリジェントなミドルウェアを瞬時にデプロイすることができ、いかなる追加インフラストラクチャも立ち上げる必要はありません。

Chris Coyier氏のYouTubeチャンネルで人気の動画の中で、CodePenのフロントエンドエンジニアと対談し、CodePenの重要な機能を構築するためのCloudflare Workersの使用方法を説明しています。Chris氏は以下のように話しています。

「Cloudflare Workersは、常にエッジで実行されるサーバーレス機能のようなもので、信じられないほど高速化します。それだけでなく、周辺ツールが本当に素晴らしいのです。ご自身のWebサイト上で特定のルートで実行することができ、どんなに厄介なCORSのトラブルも排除し、クリーンなAPIの作成に役立ちます。しかも、KVストレージ(エッジも同様)へのアクセス、画像編集と最適化、HTML書き換えなどといった特別なパワーも持ち合わせているのです。」

また、CodePenは、Workers KVを活用してデータを格納します。これにより、結果をキャッシュし、地理的にユーザーの近くにあるCloudflareのネットワーク上でアクセス可能にすることで、膨大な量の反復処理作業を回避できます。

「WorkersはKV Storeと組み合わせて、価値あるジョブを実行します。たとえば、KV Storeをチェックして、何らかの処理作業が必要かどうか、またはその作業が既に完了しているかどChris氏うかを確認します。作業の必要があればそれを行い、それからKVを更新し、作業が完了してその結果がどこにあるのかを確認します。」

彼のYouTubeチャンネルのフォローアップ動画で、はWorkers KVに集中して取り掛かかり、ストレージを備えたシンプルなサーバーレス機能を構築し、Cloudflareにデプロイする方法を伝えています。Workers KVを追加すると、パフォーマンスやスケーラビリティを損なうことなく、Workers関数と並行して複雑なデータ構造を保持できます。

Chris氏とCodePenチームはWorkersに投資しており、最も重要なのはCloudflareの開発者ツールで開発することを楽しんでいることです。「周りのDXは疑いたくなるほど素晴らしいです。他のクラウド機能サービスから来ると、私たちがやるべきことを行うためにちょうど適切な量のツールがあるように思います。」

CodePenは、Cloudflare Workersの開発者環境をスタックに統合する際に何ができるようになるかを示すよい例です。ビジネス、WorkersおよびWorkers KVやHTMLRewriterのツールなどのあらゆる要素を通して、CodePenは将来を見据えた、高パフォーマンスのアプリケーションを構築できるのです。

さらにCloudflare Workersについての詳細を知り、ご自身のサーバーレス機能をCloudflareネットワークにデプロイしたい方はworkers.cloudflare.comをご確認ください!

We protect entire corporate networks, help customers build Internet-scale applications efficiently, accelerate any website or Internet application, ward off DDoS attacks, keep hackers at bay, and can help you on your journey to Zero Trust.

Visit 1.1.1.1 from any device to get started with our free app that makes your Internet faster and safer.

To learn more about our mission to help build a better Internet, start here. If you're looking for a new career direction, check out our open positions.

Full Stack Week (JP) 日本語 Cloudflare Workers (JP) Cloudflare Workers KV (JP) サーバーレス

Follow on Twitter

Kristian Freeman |@signalnerve
Cloudflare |Cloudflare

Related Posts

November 19, 2021 1:59PM

Cloudflareで次の動画アプリケーションを構築

歴史的に、動画アプリケーションの構築は非常に難しいものでした。動画の録画、エンコード、そして再生の裏には多くの複雑な技術があります。幸いなことに、Cloudflare Streamではすべての難しい部分を取り除くことで、カスタム動画やストリーミングアプリケーションを簡単に構築できます...

November 17, 2021 1:58PM

Cloudflare Pagesを使用したフルスタックアプリケーションの構築

これは大々的に披露するしかないと思っていたため、私たちはCloudflare Pagesでのフルスタックアプリケーションのサポートを発表できることに興奮していました。Cloudflare Workersの支援を受けてサ...

November 17, 2021 1:22PM

Cloudflare PagesがGitLabのサポートを開始

Pagesの構想の初期段階で、既存のワークフローとシームレスに統合するスムーズな開発者エクスペリエンスを備えたプラットフォームの構築に着手しました。ところが、Pagesの一般提供を発表した後、当社のプラットフォームは、実際にはすべての開発者が使用できるとは限らないことに気づいたのです。...

November 16, 2021 1:58PM

Cloudflare WorkersでJavaScriptモジュールのサポートを開始

Cloudflare WorkersでJavaScriptモジュールのサポートを開始します。JavaScriptで記述されたWorkerの例を見れば、過去数年間にインターネット上で出現するようになった次のコードスニペットに気付くかもしれませ...