PHPでQRコードを作成する方法

読む所要時間: 12 分

September 28, 2021
執筆者
Matthew Setter
Twilion
Stephenie Minami Nakajima
Twilion
レビュー担当者
Miguel Grinberg
Twilion
Ashley Boucher
Twilion
Hiroto Masaki
Twilion

Copy of C02 Blog Text (5).png

この記事はMatthew Setterがこちらで公開した記事（英語）を日本語化したものです。

QRコードは現代の生活のあらゆる場面で使われています。

QRコードは小さく、専用のソフトウェアなしであらゆるスマートフォンで読み取ることができるため、カフェの会計、WiFiネットワークのアクセス、買い物などの処理を素早く簡単に行うことができます。

本稿では、PHPベースのアプリケーションでQRコードを作成する方法をご紹介します。

必要条件

このチュートリアルでは、以下の項目が必要です。

  • PHPの基礎知識。
  • GD拡張機能がインストールされているPHP 7.4。
  • グローバルにインストールされたComposer。
  • スマートフォン。

PHPでQRコードを作成する

まず、使用するすべてのファイルを保存するためのプロジェクトディレクトリ構造を作成します。最上位のディレクトリに切り替え、次のコマンドを実行します。

mkdir -p php-qr-code-generator \
    php-qr-code-generator/src/QR/{Image,Options} \
    php-qr-code-generator/public/img
  
cd php-qr-code-generator

Microsoft Windowsを使用している場合は、次のコマンドを実行します。

mkdir php-qr-code-generator
mkdir php-qr-code-generator/src/QR/Image
mkdir php-qr-code-generator/src/QR/Options
mkdir php-qr-code-generator/public/img
  
cd php-qr-code-generator

依存パッケージをインストールする

次に、今回のプロジェクトに必要な唯一の依存パッケージのchillerlan/php-qrcodeをインストールします。次のコマンドを実行します。

composer require chillerlan/php-qrcode

コードを記述する

IDEまたはテキストエディタを使用して、index.phpファイルをpublicに作成し、次のコードを追加します。

<?php
  
declare(strict_types=1);
  
use chillerlan\QRCode\QRCode;
use chillerlan\QRCode\QROptions;
  
require_once('./../vendor/autoload.php');
  
$options = new QROptions(
  [
    'eccLevel' => QRCode::ECC_L,
    'outputType' => QRCode::OUTPUT_MARKUP_SVG,
    'version' => 5,
  ]
);
  
$qrcode = (new QRCode($options))->render('https://twilio.com');
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Create QR Codes in PHP</title>
  <link rel="stylesheet" href="/css/styles.min.css">
</head>
<body>
<h1>Creating QR Codes in PHP</h1>
<div class="container">
  <img src='<?= $qrcode ?>' alt='QR Code' width='800' height='800'>
</div>
</body>
</html>

このコードでは、最初に必要なクラスをインポートし、Composerのオートローダーを導入します。新しいQROptionsインスタンスの$optionsを初期化し、QRコードを生成するためのオプションを格納します。

次に、このオブジェクトを使用し、QRコードを生成するQRCodeオブジェクトをrender() メソッドを介して初期化します。render()に、QRコードに格納するデータを渡します。ここではTwilioのURLを使用します。この文字列は任意のものに変更できます。

その後、QRコードはHTMLページのimgタグにレンダリングされます。このページでは、Tailwind CSSで構築されたカスタムスタイルシートを使用してサイトのデザインを調節しています。


必ずstyles.min.cssをpublic/cssにダウンロードしてください。ダウンロードしなければ、期待どおりにページがレンダリングされません。

コードをテストする

コードを記述したら、機能するかをテストします。publicディレクトリをディレクトリルートとして使用して、プロジェクトのルートディレクトリから次のコマンドを実行し、ローカルサーバーを起動します。

php -S 0.0.0.0:8080 -t public

次に、Webブラウザでhttp://localhost:8080を開きます。次のようにページがレンダリングされます。

 

QRコード

QRコードと境界線の間のスペース（クワイエットゾーン）を減らしたい場合は、LogoOptions[‘quietzoneSize’]の値を1～3に設定するか、LogoOptions[‘addQuietzone’]をfalseに設定します。

ロゴ付きのQRコードを作成する

マーケティングやユーザーとの信頼構築を目的に、QRコードにブランドやロゴを追加することもできます。これを行うには、chillerlan/php-qrcode:  QRImageWithLogoに付属しているサンプルクラスを使用します。

まず、vendor/chillerlan/php-qrcode/examples/QRImageWithLogo.phpをsrc/QR/Imageにコピーし、namespaceをApp\QR\Imageに更新します。

次に、IDEまたはテキストエディタを使用し、LogoOptions.phpファイルをsrc/QR/Optionsに新規作成します。LogoOptions.phpに、次のコードを追加します。

<?php
  
declare(strict_types=1);
  
namespace App\QR\Options;
  
use chillerlan\QRCode\QROptions;
  
class LogoOptions extends QROptions
{
  protected int $logoSpaceWidth;
  protected int $logoSpaceHeight;
}

このコードでは、基本のQROptionsクラスを拡張し、QRコードにオーバーレイされる画像の周囲の幅と高さを設定できるようにします。

Composerのオートローダーの構成を設定する

次に、実行時に検出されるようにPSR-4オートローダーを登録する必要があります。requireブロックの後に、次のJSONスニペットをcomposer.jsonに追加します。

"autoload": {
  "psr-4": {
    "App\\": "src/"
  }
}

次に、ターミナルで、プロジェクトのルートディレクトリで次のコマンドを実行します。

composer dump-autoload

コードを更新する

次に、public/index.phpの$optionsと$qrcodeの定義を次のコードに置き換えます。

$options = new LogoOptions(
  [
    'eccLevel' => QRCode::ECC_H,
    'imageBase64' => true,
    'logoSpaceHeight' => 17,
    'logoSpaceWidth' => 17,
    'scale' => 20,
    'version' => 7,
  ]
);

$qrOutputInterface = new QRImageWithLogo(
  $options,
  (new QRCode($options))->getMatrix(''https://twilio.com'')
);

$qrcode = $qrOutputInterface->dump(
  null,
  __DIR__.'/../public/img/logo-twilio-mark-red.png'
);

次のインポートを必ず追加してください。

use AppQRImageQRImageWithLogo;
use AppQROptionsLogoOptions;

このコードでは、$optionsを新しいLogoOptionsインスタンスとして初期化します。カスタムOptionsクラスのLogoOptionsは、2つのメンバー変数、$logoSpaceWidthと$logoSpaceHeightを含みます。これらは、QRコードにオーバーレイされる画像のサイズに影響します。

$logoSpaceWidthと$logoSpaceHeightは均等に分割できません。

このコードでは、これらの2つの他に、次の2つを設定します。

  • imageBase64:  QRコードをバイナリデータとしてレンダリングするか、Base64でエンコードされた文字列としてレンダリングするかを決定します。QRコードのレンダリングが簡単になるため、ここではtrueに設定しました。
  • scale:  QRコードのピクセルサイズを設定します。値が大きいほど、QRコードの品質が高くなります。

また、eccLevelをECC_Hに設定して、QRコードにロゴをオーバーレイできるようにし、versionを7に設定して、高いレベルのエラーの修正（QRコード内の上位レベルのデータのために必要）を可能にしました。

その後、$qrOutputInterfaceを新しいQRImageWithLogoインスタンスとして初期化します。PHPのGD拡張機能を使用して、QRコードの生成と指定した画像のオーバーレイが処理されます。

QRコードと格納するデータの生成方法が分かるように、$optionsと新しいQRMatrixオブジェクトがQRImageWithLogoのコンストラクターに渡されます。

最後に$qrOutputInterfaceのdumpメソッドを呼び出して、画像をQRコードにオーバーレイし、Base64でエンコードされたQRコードの文字列表現を返します。

dumpの最初のパラメーターとしてnullを渡しました。必要に応じて、出力ファイルの絶対パスまたは相対パスを指定してPNGファイルを生成できます。

画像ファイルを追加する

最後に、変更をテストする前に、QRコードにオーバーレイする画像を選択する必要があります。この記事では、Twilioのロゴを使用しています。ダウンロードするには、まずTwilioのライブラリでTwilioのロゴを開き、ページの右下にあるActual size_PNGリンクをクリックします。

別の画像を使用する場合は、画像をpublic/imgに保存し、画像のパスを2番目の引数として$qrOutputInterface->dump()に渡します。

変更をテストする

コードと画像を配置したら、QRコードの新しいバージョンを生成し、どのように表示されるかを見てみましょう。これを行うには、ブラウザでhttp://localhost:8080をリロードします。次のようにレンダリングされます。

 

 

ロゴ入りQRコード

QRコードの模様を変更する場合は、LogoOptionsを初期化するときに、maskPatternを1から7の値に設定するか、QRCode::MASK_PATTERN_AUTOに設定してみてください。

PHPでQRコードを作成する方法

chillerlan/php-qrcodeなどのパッケージやPackagistで使用可能な他のパッケージでは、ブランディングの有無にかかわらず、アプリケーションでQRコードを生成できます。必要に応じて使ってみてください。

アプリケーションでQRコードの使用を検討していますか？もしそうなら、作成したものをぜひ共有してください。

Matthew Setterは、Twilio VoicesチームのPHP編集者兼ポリグロットの開発者です。彼はDocker EssentialsとMezzio Essentialsの著者でもあります。PHPコードの作成に取り組んでいないときは、TwilioのPHP記事の優秀な編集者です。彼の連絡先はmsetter@twilio.comです。また、 TwitterとGitHubでも情報を発信しています。

画像著作権:

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。