入力値で動的に変化するQRコードを生成してみよう

2017年3月11日(土)OSC東京2017 Springにて、jQueryを使った入力値によって動的に変化するQRコードについてBitcoinアドレスのQRコードを例に話させていただきました。

Transcript

1. 入力値で動的に変化するQR コードを生成してみよう OSC東京2017 Spring LT大会 2017年3月11日 関西フロントエンドUG 小渕 周 Shu Kobuchi
2. 自己紹介 !  小渕 周（Shu Kobuchi） !  3月までシステムエンジニア@大阪 !  転勤で４月からブロックチェーンを中心にR&D @東京 !  兵庫県宝塚市民 → 埼玉県さいたま市民 !  関西フロントエンドUsers Group メンバー !  Facebook：　shu.kobuchi !  Twitter：　　　@shu_kob
3. 静的QRコード生成 !  <img src="http://api.qrserver.com/v1/create-qr- code/?size=200x200&data=Sample" alt="QRコード"/ > !  例えば、APIを使って !  普通は静的。誰も動的なんて使わんww
4. そもそもなぜ動的に？ !  要るん？
5. そもそもなぜ動的に？ !  Bitcoinウォレットアプリケーションで必要やからやw！
6. BitcoinにQRコードは不可欠 !  アドレス：　1ZpMxPYvMu1TNnS9Cn1EbfRJF4Nt1t5yN !  アドレスを手入力するには非現実的 !  アドレスをQRコードで生成 !  https://blockchain.info/ja/wallet/
7. BitcoinアドレスのQRコード !  アドレスのみ： bitcoin:1ZpMxPYvMu1TNnS9Cn1EbfRJF4Nt1t5yN !  送金額を含める： bitcoin:1ZpMxPYvMu1TNnS9Cn1EbfRJF4Nt1t5yN? amount=0.001 <img src="http://api.qrserver.com/v1/create-qr- code/?size=200x200&data=bitcoin: 1ZpMxPYvMu1TNnS9Cn1EbfRJF4Nt1t5yN" alt="ビッ トコインアドレス"/>
8. 動的QRコード生成をAPIで !  入力値で変化する動的QRコードならAPIで生成するとネッ トワークが途切れた時が・・・
9. jquery.qrcode.js !  http://jeromeetienne.github.io/jquery-qrcode/ !  jQueryのQRコードライブラリでネットワーク切断時でも動的 変化するQRコード作成可 <script type="text/javascript" src="jquery.qrcode.min.js"></script> <div id=“qrcode”></div> 　　jquery("#qrcode").qrcode("this plugin is great");
10. デモ !  http://blockchain.xn--tckwe/demo.html !  0より大きな値を入力したら、URIにamountが入る
11. BitcoinでOSSの収益化？ !  サイトにBitcoinアドレスを貼ってみよう！ !  寄付受付の場合は、送金額指定不要なので、静的QRコー ドでも可能 !  画像化して貼り付けるのもアリ