コンテンツにスキップ

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

Last reviewed: about 1 year ago

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

このチュートリアルのコードを確認したい場合、コードベースの最終バージョンはGitHubで入手可能です ↗。例のリポジトリに提供されているコードを取り、カスタマイズして、自分のプロジェクトで使用するためにデプロイできます。

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

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

まず、create-cloudflare CLIを使用して新しいCloudflare Workersプロジェクトを作成します。これを行うには、ターミナルウィンドウを開き、次のコマンドを実行します。

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

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
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は新しく構築されたレスポンスをクライアントに返します。あなたのWorkerは、オリジンサーバーに続くのではなく、Cloudflareのグローバルネットワーク ↗から直接新しいレスポンスを提供します。標準のサーバーはリクエストを受け入れ、レスポンスを返します。Cloudflare Workersは、Cloudflareのグローバルネットワーク上で直接レスポンスを構築することにより、迅速に応答することを可能にします。

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

Cloudflare Workersに公開するプロジェクトは、ESモジュール、npmパッケージ、async/await ↗関数などの最新のJavaScriptツールを利用してアプリケーションを構築できます。Workersを書くことに加えて、Workersを使用してこのチュートリアルと同じツールとプロセスを使用して完全なアプリケーションを構築することができます。

このチュートリアルで構築するQRコードジェネレーターは、単一のルートで実行され、リクエストを受け取るWorkerになります。各リクエストにはテキストメッセージ（例えばURL）が含まれ、その関数はそれをQRコードにエンコードします。関数は、PNG画像形式でQRコードを返します。

このチュートリアルのこの時点で、あなたの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でない場合は、新しいResponseを405ステータスコード ↗で返します：

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


    return new Response("POSTリクエストが必要です", {
      status: 405,
    });
  },
};

リクエストの基本的なフローを確立しました。次に、受信した有効なリクエストに対するレスポンスを設定します。POSTリクエストが来た場合、関数はQRコードを生成する必要があります。まず、"Hello Worker!"レスポンスを新しい関数generateQRCodeに移動します。この関数には最終的に関数のロジックの大部分が含まれます：

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


async function generateQRCode(request) {
  // TODO: QRコード生成を含める
  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パッケージをサポートしています。このサポートにより、Workersの機能を迅速に構築することが容易になります。qr-image ↗パッケージは、テキストを取得してQRコードにエンコードするのに最適な方法です。このパッケージは、QRコードをさまざまなファイル形式（デフォルトのPNGやSVGなど）で生成し、生成されたQRコードの他の側面を構成することをサポートしています。コマンドラインで、qr-imageをプロジェクトのpackage.jsonにインストールして保存します：

qr-imageパッケージのインストール
npm install --save qr-image

index.jsで、qr-imageパッケージを変数qrとしてインポートします。generateQRCode関数内で、受信リクエストをrequest.jsonを使用してJSONとして解析し、qr.imageSyncを使用してtextからQRコードを生成します：

const qr = require("qr-image");


async function generateQRCode(request) {
  const { text } = await request.json();
  const qr_png = qr.imageSync(text || "https://workers.dev");
}

デフォルトでは、QRコードはPNGとして生成されます。新しいResponseのインスタンスを構築し、PNGデータをボディとして渡し、Content-Typeヘッダーをimage/pngに設定します。これにより、ブラウザはWorkerから返されるデータを画像として適切に解析できます：

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

インストールしたqr-imageパッケージはNode.js APIに依存しています。これが機能するためには、Wrangler設定ファイルで（“nodejs_compat_v2”互換性フラグ）(/workers/runtime-apis/nodejs/#enable-nodejs-with-workers)を設定する必要があります：

compatibility_flags = [ "nodejs_compat_v2"]

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

WorkerはユーザーがルートにPOSTリクエストを送信すると機能しますが、適切なインターフェースで関数をテストできるようにすることが最良のプラクティスです。このチュートリアルのこの時点で、あなたの関数が受信するリクエストが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 headers = { "Content-Type": "image/png" };
  const qr_png = qr.imageSync(text || "https://workers.dev");


  return new Response(qr_png, { headers });
}


const landing = `
<h1>QRジェネレーター</h1>
<p>下のボタンをクリックして新しいQRコードを生成します。これにより、あなたのWorkerにリクエストが送信されます。</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">QRコードを生成</button>
<p>生成されたQRコード画像</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; // 新しく生成されたQRコードで画像ソースを更新
      }
      reader.readAsDataURL(blob);
    })
  }
</script>
`;

landing変数は静的HTML文字列で、inputタグと対応するbuttonを設定し、generateQRCode関数を呼び出します。この関数は、あなたのWorkerにHTTP POSTリクエストを行い、ページ上で返されたQRコード画像を表示できるようにします。

上記の手順が完了すると、あなたのWorkerは準備が整います。コードの完全なバージョンは次のようになります：

const qr = require("qr-image");


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 headers = { "Content-Type": "image/png" };
  const qr_png = qr.imageSync(text || "https://workers.dev");


  return new Response(qr_png, { headers });
}


const landing = `
<h1>QRジェネレーター</h1>
<p>下のボタンをクリックして新しいQRコードを生成します。これにより、あなたのWorkerにリクエストが送信されます。</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">QRコードを生成</button>
<p>生成されたQRコード画像</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; // 新しく生成されたQRコードで画像ソースを更新
      }
      reader.readAsDataURL(blob);
    })
  }
</script>
`;

5. Workerをデプロイする

上記のすべての手順が完了すると、Cloudflare Workers上でQRコードジェネレーターのコードが書かれました。

Wranglerには、Cloudflare Workersアプリケーションをバンドル、アップロード、リリースするための組み込みサポートがあります。これを行うには、npx wrangler deployを実行し、コードをビルドしてデプロイします。

Workerプロジェクトをデプロイする
npx wrangler deploy

関連リソース

このチュートリアルでは、QRコードを生成するWorkerアプリケーションを構築してデプロイしました。このアプリケーションの完全なソースコードを見たい場合は、GitHubで見つけることができます ↗。

自分のプロジェクトを構築し始めたい場合は、既存のクイックスタートテンプレートのリストを確認してください。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings