Slide 1

Slide 1 text

QRコードを学んで遊ぼう 第177回 PHP勉強会@東京

Slide 2

Slide 2 text

#phpcon_odawara #boko 自己紹介 meihei | Yohei Ema BASE株式会社 BASE / Product Dev / Feature Dev 1 X: @app1e_s mixi2: @meihei2 GitHub: @meihei3

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

意外と知らないことが多い!!

Slide 6

Slide 6 text

アジェンダ 1. QRコードって何なんだ!? 2. 誤り訂正符号なにそれ? 3. ロゴ重ねQRコードを作ってみた

Slide 7

Slide 7 text

QRコードって何なんだ!?

Slide 8

Slide 8 text

QRコードとは ● 1994年にデンソーウェーブが開発した2次元コード ○ QRコードは株式会社デンソーウェーブの登録商標です ←こういうの 地下鉄での活用事例 https://www.youtube.com/watch?v=I27vrvGgMDQ

Slide 9

Slide 9 text

何が面白いの? ● 一次元コードに比べ情報を多く格納できる ● どの角度からも高速で読み取れる ● 誤り訂正機能がある 参照 https://time-space.kddi.com/mobile/20190425/2624.html

Slide 10

Slide 10 text

全方向高速読み取り ● 3コーナーに配置されるファインダパターンによって 安定した高速読み取りができる ● どの角度からも黒1:白1:黒3:白1:黒1 という黒白比になる 参照 https://www.ipsj.or.jp/dp/contents/publication/51/S1303-S05.html

Slide 11

Slide 11 text

全方向高速読み取り 黒1:白1:黒3:白1:黒1

Slide 12

Slide 12 text

誤り訂正機能 ● データ符号語をブロックに分割し、各ブロックに対 してリード・ソロモン (RS) 符号を適用 ● インターリーブして、連続欠損を分散・訂正能力を 最大化 ● 1 ブロックあたり最大で{誤り訂正パリティ}/2語ま での誤りを完全に直せる

Slide 13

Slide 13 text

?

Slide 14

Slide 14 text

誤り訂正符号なにそれ?

Slide 15

Slide 15 text

RS 符号の説明(超簡略化) ● データ符号語をブロックに分割し、各ブロックに対 してリード・ソロモン (RS) 符号を適用

Slide 16

Slide 16 text

RS 符号の説明(超簡略化) ● データ符号語をブロックに分割し、各ブロックに対 してリード・ソロモン (RS) 符号を適用

Slide 17

Slide 17 text

インターリーブする ● 1byte(1符号語)ごとに交互に並べる ● 連続でデータが掛けることを防ぐ ○ 現実世界では、データが欠損する場所が集中するため

Slide 18

Slide 18 text

データの誤りを訂正可能 ● 1 ブロックあたり最大で{誤り訂正パリティ}/2語ま での誤りを完全に直せる ● インターリーブしたら、見かけ上多くのデータが欠 損していても訂正可能

Slide 19

Slide 19 text

データと誤り訂正符号の配置 ● QRコードには、この誤り 訂正符号が配置されている 参照 https://www.keyence.co.jp/ss/products/autoid/codereader/basic2d_qr.jsp

Slide 20

Slide 20 text

ロゴ重ねQRコードを作ってみた

Slide 21

Slide 21 text

QR Code Generator https://u7f32phomuw7xbv434d2oqfqf40jadkk.lambda-url.ap-northeast-1.on.aws/ GitHub: https://github.com/meihei3/qr-create-page ● Bref + Lambda Function URLs で実行 ● Slim + Twig で HTML を返す ● endroid/qr-code でQRコードを生成 ● Google Favicon API(正式名称ではない) ○ https://www.google.com/s2/favicons ?domain=your_url

Slide 22

Slide 22 text

仕組み ● endroid/qr-code で生成した QR コードに、CSS で favicon を乗っけているだけ

Slide 23

Slide 23 text

Lambdaで動かす時の注意 ● 基本的に Bref で動かす ○ php-84-fpm は al2 なので、来年にはランタイムを 更新する必要がある ● GDライブラリを使うのが面倒 ○ 使わないで済む方法を選ぶ ■ SVGのQRコードを生成(SVGはXMLなので) ■ ロゴ入りの画像を生成するのではなく、HTML+CSS でロゴを重ねる。

Slide 24

Slide 24 text

【おまけ】このアプリを作った生成AI ● Claude Code ○ 今使うならこれが一番かな ● Gemini-cli ○ 無料枠の gemini 2.5 pro が使えなくなると終わる ● Junie (JetBrains AI) ○ Big Love♡ ● Warp ○ かなり好き ○ https://app.warp.dev/referral/W9DDKN

Slide 25

Slide 25 text

まとめ

Slide 26

Slide 26 text

まとめ

Slide 27

Slide 27 text

著作権表記 ● 本スライドで使用しとる一部の画像の著作権 は KEYENCE CORPORATION、情報処理学会、 KDDI CORPORATION が保有しとります © 2025 KEYENCE CORPORATION. All Rights Reserved. © 2022 Information Processing Society of Japan. All Rights Reserved. © 2019–2022 KDDI CORPORATION. All Rights Reserved.