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をインストール
[こちらを参考](https://getcomposer.org/download/
)に下記のコマンドを入力します。下記は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');"
```
<br>
作成された`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
```
<br>
[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();
```
<br>
さらに`index.php`に以下の修正を加えます
・今回は、logoとlabelは使用しないため、コードを削除
・最上部に、`<?php`と`require_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](http://localhost:8000/index.php)にアクセスします。



```
$ php -S localhost:8000
```

![スクリーンショット 2021-08-01 18.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/7a3e879d-8a03-fb59-785b-1dd831999cc6.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/518dca8c-7572-62ac-9201-126bea748acc.png)

webページの一部にQRコードを表示することができました！

#qr-code関連をqrcode.phpにまとめる
`index.php`内にqr-codeのコードがあると保守性が悪いので、`qrcode.php`を作成し、class名`QrCodeGenerator`でまとめます。

```
$ pwd 
qr-code

$ touch qrcode.php
```
<br>

`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>
```
<br>
`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コードを生成してみる](https://qiita.com/danishi/items/fd8038ee373c04b94bf6)