はじめに

CDNとは？

"CDN" は「コンテンツデリバリーネットワーク」（Content Delivery Network）の略で、サービスや技術の両方を指すことがあります。

1. サービスとしてのCDN:

CDNは、ウェブサイトやアプリケーションの静的なコンテンツ（画像、スタイルシート、スクリプトなど）を高速かつ効率的にユーザーに配信するためのサービスです。CDNサービスプロバイダーは、世界中に分散したサーバーを備え、ユーザーに近い場所からコンテンツを提供することで、読み込み速度を向上させます。代表的なCDNサービスプロバイダーには、Akamai、Cloudflare、Amazon CloudFrontなどがあります。

2. 技術としてのCDN:

CDNはまた、コンテンツデリバリーの技術全体を指すこともあります。これは特定のサービスプロバイダーに限定されるものではなく、様々な企業や組織が自社でCDNを構築することも含まれます。この場合、CDN技術はコンテンツを最適な形でエンドユーザーに配信するための戦略や技術的手法全般を指します。

今回はサービスとしてのCDNを具体的にどのように使うことができるのかをお話ししたいと思います。

ダウンロードせずにフォントを利用する

WEBフォントを使えば、指定フォントがインストールされていないパソコンでも同じフォントを利用できます。
ただし会社によってそれぞれ規約がありますので、ご利用の際はご注意ください。

私は今回Adobe Fontsを利用しました。

まずはアカウントを作成し、利用したいフォントを検索します。

利用したいフォントを見つけたら、ページ下部にある[詳細]の部分にかいてあるコードをコピーし、使用したい部分のcssに貼りつけます。

ページ上部に戻り、右上の[フォントを管理]をクリックし、[Webプロジェクト]をクリック。

するとプロジェクトを埋め込みという文字の下に、コードが書かれています。
このコードを HTML の < head > タグ内にコピーします。

以上の作業で簡単に外部で公開されているフォントを利用できます。

アイコンの利用

次はアイコンをCDNで利用したいと思います。
例としてFont Awesomeを利用します。

まず以下のコードを HTML の < head > タグ内にコピーします。

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">

次に使用するアイコンを選びます。色やアニメーションを指定した後は、右のHTMLのコードをHTML内の利用したい場所に貼りつけます。

制作したサイト内にアイコンがアニメーション付きで表示されます。

情報漏洩などの危険性も

CDNは基本的に、オリジンサーバーから配信されたコンテンツをそのままキャッシュし、そのままエンドユーザーへ配信します。アクセスしてきたエンドユーザー全員に同じコンテンツを配信する場合であれば問題ありません。
しかし通販サイトなどユーザーごとに違ったレスポンスを返すサイトの場合は、CDNのキャッシュしているコンテンツを違うユーザーにレスポンスをすることで情報漏洩につながることもあります。

引用記事
「メルカリ」の個人情報漏えい、原因はCDNキャッシュの仕様、技術的な詳細情報を公表／Impress Watch

まとめ

今回HTMLなどの勉強をしてから、個人的に作成をして気づいたのがCDNの便利さです。
手軽に本格的なサイトを作成するのには欠かせないサービスだと感じました。

これからも利用していこうと思うので、セキュリティの危険性や規約などについても理解を深めていこうと思います。