はじめに
PHPライブラリであるendroid/qr-codeを用いて、webページに任意のQRコードを表示します。
https://github.com/endroid/qr-code
環境は、Mac、VSCodeです。
流れ
①composerをインストール
②QRコードを表示
③html内の一部としてQRコードを表示する
④qr-code関連をqrcode.phpにまとめる
composerをインストール
こちらを参考に下記のコマンドを入力します。下記は2021年8月時点での最新版のコマンド。
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
作成されたcomposer.pharは、PATHディレクトリに配置する必要があるため、下記コマンドを実行することで、composerを任意のディレクトリから簡単に呼び出すことができます。
$ sudo mv composer.phar /usr/local/bin/composer
$ sudo chmod 755 /usr/local/bin/composer
$ composer -V
Composer version 2.0.12 2021-04-01 10:14:59
composerをインストールすることができました!
QRコードを表示
以降は、https://github.com/endroid/qr-code を参考にします
qr-codeディレクトリを作成後、index.phpを作成し、endroid/qr-codeをインストールします。
$ mkdir qr-code
$ cd qr-code
$ touch index.php
$ composer require endroid/qr-code
Usage: without using the builderのコードとUsage: working with resultsをindex.phpにコピペします
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelLow;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Label\Label;
use Endroid\QrCode\Logo\Logo;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeMargin;
use Endroid\QrCode\Writer\PngWriter;
$writer = new PngWriter();
// Create QR code
$qrCode = QrCode::create('Data')
->setEncoding(new Encoding('UTF-8'))
->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
->setSize(300)
->setMargin(10)
->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
->setForegroundColor(new Color(0, 0, 0))
->setBackgroundColor(new Color(255, 255, 255));
// Create generic logo
$logo = Logo::create(__DIR__.'/assets/symfony.png')
->setResizeToWidth(50);
// Create generic label
$label = Label::create('Label')
->setTextColor(new Color(255, 0, 0));
$result = $writer->write($qrCode, $logo, $label);
// Directly output the QR code
header('Content-Type: '.$result->getMimeType());
echo $result->getString();
$dataUri = $result->getDataUri();
さらにindex.phpに以下の修正を加えます
・今回は、logoとlabelは使用しないため、コードを削除
・最上部に、<?phpとrequire_once(__DIR__ . '/vendor/autoload.php');を追加
・$qrCode = QrCode::create('Data')のDataをQrコードを作成したいURLに変更。今回はhttps://www.google.com/にします。
<?php
require_once(__DIR__ . '/vendor/autoload.php');
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelLow;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeMargin;
use Endroid\QrCode\Writer\PngWriter;
$writer = new PngWriter();
// Create QR code
$qrCode = QrCode::create('https://www.google.com/')
->setEncoding(new Encoding('UTF-8'))
->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
->setSize(300)
->setMargin(10)
->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
->setForegroundColor(new Color(0, 0, 0))
->setBackgroundColor(new Color(255, 255, 255));
$result = $writer->write($qrCode);
// Directly output the QR code
header('Content-Type: '.$result->getMimeType());
echo $result->getString();
$dataUri = $result->getDataUri();
確認のため、VSCのターミナルを用いて、PHPのビルトインWebサーバーを起動し、http://localhost:8000/index.phpにアクセスします。
$ php -S localhost:8000
QRコードが表示され、読み取るとgoogleに遷移しました！
html内の一部としてQRコードを表示する
index.phpに以下の修正を追加
・下部のheader('Content-Type…以下を削除し、$img = base64_encode($result->getString());を追加
・最下部に?>と<html>…、<img src="data:image/gif;base64,<?= $qrCodeImg ?>">を追加
<?php
require_once(__DIR__ . '/vendor/autoload.php');
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelLow;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeMargin;
use Endroid\QrCode\Writer\PngWriter;
$writer = new PngWriter();
// Create QR code
$qrCode = QrCode::create('https://www.google.com/')
->setEncoding(new Encoding('UTF-8'))
->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
->setSize(300)
->setMargin(10)
->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
->setForegroundColor(new Color(0, 0, 0))
->setBackgroundColor(new Color(255, 255, 255));
$result = $writer->write($qrCode);
$qrCodeImg = base64_encode($result->getString());
?>
<html>
<body>
<h2>QRコード</h2>
<img src="data:image/gif;base64,<?= $qrCodeImg ?>">
</body>
</html>
webページの一部にQRコードを表示することができました！
qr-code関連をqrcode.phpにまとめる
index.php内にqr-codeのコードがあると保守性が悪いので、qrcode.phpを作成し、class名QrCodeGeneratorでまとめます。
$ pwd
qr-code
$ touch qrcode.php
index.phpに以下の修正を加えます。
・最上部に、include(dirname(__FILE__) . '/qrcode.php');を追加
・imgタグ内を<?= QrCodeGenerator:: makeImg($url); ?>
・qrcode関係を削除
<?php
include(dirname(__FILE__) . '/qrcode.php');
?>
<html>
<body>
<h2>QRコード</h2>
<?= QrCodeGenerator::makeImg("https://www.google.com/)"); ?>
</body>
</html>
qrcode.phpに以下を加えます。
・qrcode関係を移す
・classでまとめる
<?php
require_once(__DIR__ . '/vendor/autoload.php');
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelLow;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeMargin;
use Endroid\QrCode\Writer\PngWriter;
class QrCodeGenerator
{
public static function makeImg($url){
$writer = new PngWriter();
$qrCode = QrCode::create($url)
->setEncoding(new Encoding('UTF-8'))
->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
->setSize(300)
->setMargin(10)
->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
->setForegroundColor(new Color(0, 0, 0))
->setBackgroundColor(new Color(255, 255, 255));
$result = $writer->write($qrCode);
$qrCodeImg = base64_encode($result->getString());
return '<img src="data:image/gif;base64,' . $qrCodeImg . '">';
}
}
qrcode関係をまとめることで、保守性のよいコードにすることができました！
ちなみに
$qrCode = QrCode::create($url)
->setEncoding(new Encoding('UTF-8'))
->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
// QRコードのサイス（単位：ピクセル）
->setSize(300)
// QRコードの周囲の余白（単位：ピクセル）
->setMargin(10)
->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
// QRコードの色
->setForegroundColor(new Color(0, 0, 0))
// 背景の色
->setBackgroundColor(new Color(255, 255, 255));
// QRコードの中央に配置するロゴファイルのパス
$qrCode->setLogoPath('logo.png');
// ロゴサイズ（単位：ピクセル）
$qrCode->setLogoSize(20, 20);