This content originally appeared on Twilio Blog and was authored by Matthew Setter
この記事はMatthew Setterがこちらで公開した記事(英語)を日本語化したものです。
QRコードは現代の生活のあらゆる場面で使われています。
QRコードは小さく、専用のソフトウェアなしであらゆるスマートフォンで読み取ることができるため、カフェの会計、WiFiネットワークのアクセス、買い物などの処理を素早く簡単に行うことができます。
本稿では、PHPベースのアプリケーションでQRコードを作成する方法をご紹介します。
必要条件
このチュートリアルでは、以下の項目が必要です。
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コードと境界線の間のスペース(クワイエットゾーン)を減らしたい場合は、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 App\QR\Image\QRImageWithLogo;
use App\QR\Options\LogoOptions;
このコードでは、$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コードの模様を変更する場合は、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でも情報を発信しています。
画像著作権:
- https://i1.wp.com/hbchamberpulse.com/wp-content/uploads/2020/06/home_hero_image.91274147.jpg?fit=1102%2C1200&ssl=1
- http://1dj7ia2prpz93pxo7t32a2j1-wpengine.netdna-ssl.com/wp-content/uploads/2010/11/bigwild1.jpg
- https://www.labelsmith.com/wp-content/uploads/2016/07/QR-rolls.jpg
This content originally appeared on Twilio Blog and was authored by Matthew Setter
Matthew Setter | Sciencx (2022-02-16T10:25:05+00:00) PHPでQRコードを作成する方法. Retrieved from https://www.scien.cx/2022/02/16/php%e3%81%a7qr%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.