LoginSignup
4

More than 1 year has passed since last update.

posted at

updated at

PHP endroid / qr-codeを用いて、QRコードを表示

はじめに

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にコピペします

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は使用しないため、コードを削除
・最上部に、<?phprequire_once(__DIR__ . '/vendor/autoload.php');を追加
$qrCode = QrCode::create('Data')のDataをQrコードを作成したいURLに変更。今回はhttps://www.google.com/にします。

index.php
<?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

スクリーンショット 2021-08-01 18.28.14.png

QRコードが表示され、読み取るとgoogleに遷移しました!

html内の一部としてQRコードを表示する

index.phpに以下の修正を追加
・下部のheader('Content-Type…以下を削除し、$img = base64_encode($result->getString());を追加
・最下部に?><html>…<img src="data:image/gif;base64,<?= $qrCodeImg ?>">を追加

index.php
<?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>

スクリーンショット 2021-08-01 18.42.12.png

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関係を削除

index.php
<?php

include(dirname(__FILE__) . '/qrcode.php');

?>
<html>
<body>
  <h2>QRコード</h2>
  <?= QrCodeGenerator::makeImg("https://www.google.com/)"); ?>
</body>
</html>



qrcode.phpに以下を加えます。
・qrcode関係を移す
・classでまとめる

qrcode.php
<?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);

参考文献

【PHP】endroid/qr-codeを使ってQRコードを生成してみる

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4