LoginSignup
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hirai-11

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

Last updated at Posted at 2021-08-01

はじめに

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のコード](https://github.com/endroid/qr-code#usage-without-using-the-builder)と[Usage: working with results](https://github.com/endroid/qr-code#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は使用しないため、コードを削除 ・最上部に、`<?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関係をまとめることで、保守性のよいコードにすることができました！

ちなみに

.php
$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コードを生成してみる

7
5
1

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
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?