QR コードジェネレーターを作る

このチュートリアルでは、QR コードを生成する Worker アプリケーションを構築して公開します。

このチュートリアルのコードを確認したい場合は、完成版のコードベースが GitHub で公開 ↗ されています。サンプルリポジトリのコードを使い、カスタマイズして、自分のプロジェクトにデプロイできます。

始める前に

すべてのチュートリアルは、Cloudflare Workers アカウント、C3 ↗、および Wrangler のセットアップが完了している前提です。セットアップは Get started ガイドで行います。

1. 新しい Workers プロジェクトを作る

まず、create-cloudflare CLI で新しい Cloudflare Workers プロジェクトを作ります。ターミナルを開き、次のコマンドを実行します。

npm create cloudflare@latest -- qr-code-generator

yarn create cloudflare qr-code-generator

pnpm create cloudflare@latest qr-code-generator

セットアップでは、次のオプションを選びます。

What would you like to start with? では、Hello World example を選びます。
Which template would you like to use? では、Worker only を選びます。
Which language do you want to use? では、JavaScript を選びます。
Do you want to use git for version control? では、Yes を選びます。
Do you want to deploy your application? では、No を選びます（デプロイ前にいくつか変更します）。

作成したディレクトリへ移動します。

cd qr-code-generator

新しい qr-code-generator Worker プロジェクトのディレクトリでは、index.js が Cloudflare Workers アプリケーションのエントリポイントです。

Cloudflare Workers アプリケーションは、クライアントが Workers のルートへリクエストしたときに発生する fetch イベントの待ち受けから始まります。Worker がリクエストを受け取ったあと、アプリケーションが組み立てたレスポンスがユーザーに返ります。このチュートリアルでは、リクエスト / レスポンスのパターンの動きと、それを使って本格的なアプリケーションを作る方法を説明します。

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello Worker!");
	},
};

既定の index.js では、このリクエスト / レスポンスのパターンがそのまま動いています。fetch は本文が 'Hello Worker!' の新しい Response を組み立てます。

Worker が fetch イベントを受け取ると、新しく組み立てたレスポンスをクライアントへ返します。Worker はオリジンサーバーへ進まず、Cloudflare のグローバルネットワーク ↗ から直接新しいレスポンスを返します。通常のサーバーはリクエストを受けてレスポンスを返します。Cloudflare Workers では、Cloudflare のグローバルネットワーク上でレスポンスを組み立てるので、すばやく応答できます。

2. 受信リクエストを処理する

Cloudflare Workers に公開するプロジェクトでは、ES モジュール、npm パッケージ、async / await ↗ 関数など、モダンな JavaScript のツールを使ってアプリケーションを作れます。Workers を書くだけでなく、このチュートリアルと同じツールと手順で本格的なアプリケーションを構築できます。

このチュートリアルで作る QR コードジェネレーターは、1 つのルートで動き、リクエストを受け取る Worker です。各リクエストにはテキストメッセージ（たとえば URL）が含まれ、関数がそのテキストを QR コードへエンコードします。関数は、QR コードを PNG 画像形式で返します。

この時点では、Worker 関数はリクエストを受け取り、テキスト "Hello Worker!" の簡単なレスポンスを返せます。Worker に入ってくるデータを扱うため、受信リクエストが POST かどうかを確認します。

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}
	},
};

現状、受信リクエストが POST でない場合、関数は undefined を返します。ただし Worker は常に Response を返す必要があります。関数は受信した POST リクエストだけを受け付けるので、POST でない場合は 405 ステータスコード ↗ の新しい Response を返します。

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}

		return new Response("Expected POST request", {
			status: 405,
		});
	},
};

リクエストの基本的な流れができました。次は、有効な受信リクエストへのレスポンスを用意します。POST リクエストが来たら、関数は QR コードを生成します。まず "Hello Worker!" のレスポンスを、最終的に関数の中心になる新しい関数 generateQRCode へ移します。

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
		}
	},
};

async function generateQRCode(request) {
	// TODO: Include QR code generation
	return new Response("Hello worker!");
}

generateQRCode 関数を埋めたら、fetch 関数内で呼び出し、その結果をクライアントへ直接返します。

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}
	},
};

3. QR コードジェネレーターを作る

Cloudflare Workers にデプロイするプロジェクトは、すべて npm パッケージに対応しています。そのため、Worker の機能をすばやく組み立てられます。'qrcode-svg' ↗ パッケージは、テキストを受け取って QR コードへエンコードするのに便利です。コマンドラインで 'qrcode-svg' をインストールし、プロジェクトの 'package.json' に保存します。

npm i qrcode-svg

yarn add qrcode-svg

pnpm add qrcode-svg

bun add qrcode-svg

index.js で、qrcode-svg パッケージを変数 QRCode としてインポートします。generateQRCode 関数では、request.json で受信リクエストを JSON として解析し、qrcode-svg パッケージで新しい QR コードを生成します。QR コードは SVG として生成されます。SVG データを本文にし、Content-Type ヘッダーを image/svg+xml にした新しい Response を組み立てます。これで、ブラウザーは Worker から返るデータを画像として正しく解析できます。

import QRCode from "qrcode-svg";

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

4. アプリケーション UI でテストする

ユーザーがルートへ POST リクエストを送ると Worker が実行されます。ただし、関数をテストするための適切な画面も用意するのがよいです。この時点では、POST 以外のリクエストを関数が受け取ると 405 レスポンスを返します。新しい fetch では、405 エラーの代わりに静的な HTML ドキュメントを含む新しい Response を返します。

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

静的な HTML 文字列である landing 変数は、input タグと、対応する button を用意します。ボタンは generateQRCode 関数を呼びます。この関数は Worker へ HTTP POST リクエストを送り、ページ上に返ってきた QR コード画像を表示できます。

以上の手順が終わると、Worker の準備は完了です。完成版のコードは次のとおりです。

const QRCode = require("qrcode-svg");

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

5. Worker をデプロイする

以上の手順で、Cloudflare Workers 上の QR コードジェネレーターのコードを書き終えました。

Wrangler には、Cloudflare Workers アプリケーションのバンドル、アップロード、リリースが組み込まれています。npx wrangler deploy を実行すると、コードをビルドしてデプロイします。

Worker プロジェクトをデプロイするsh

npx wrangler deploy