QRコード読み書きできるページ

ふだん，いろんなスマートフォンの端末で動作検証とかしているのだけど，その端末たちに気軽にURLを送る手段がない．ログイン済の端末ならSlackに貼ればいいけど，検証用の端末ではログインしていなかったりする．
iOSならAirDropでもいいけど，AndroidだとAirDrop使えない，一体どうすれば…と話していて，QRコードがよいのではと思った．

追加のアプリをインストールする必要がないこと
同一のページでURLからQRコード，QRコードからリンクへの変換ができ，URLを2つ覚える必要がない
検証に使うので，履歴が残っていて再度開けること

くらいの機能があれば便利だと思い，作ってみた．世の中には既存のものがたくさんあるけど，せっかくなので覚えやすいURLで自作したかった．

できたのがこれ．qr.sushi.moneyでアクセスできるのでそこそこ覚えやすいと思う．
qr.sushi.money

GenerateのタブでURLをQRコードに変換，Scanのタブでカメラで読んだQRコードをリンクに変換できる．お手元のノートパソコンとスマホとか，ノートパソコンとノートパソコンとか，2台用意すると遊べる．

土曜の昼くらいから作り始めて日曜の夜になんとなく動くようになって，週末に片手間にちょろっと作るものとしては良い規模感だった．

QRコードの生成や解析はすべてライブラリに丸投げしているので，UIを作ってひっつけたら完成した
Androidで動いてヤッターってiOSで見たらなぜか動かなかった(ライブラリにissueは立っている)
- iOSのカメラにはQRコードキャプチャ機能がついているので不要そう
ふだん個人でAWSあんまり使ってないので，react-create-appでなんか作ってAWSに置いてみるか，という練習も兼ねていた
- 最終的にはnpm run build && aws s3 sync ... で済むようになったので便利だけど，S3の設定，CloudFrontの設定，Route53の設定とかポチポチやるのがめんどうだった
- react-create-appは便利でコード書き始められるまでの時間が早い
cameras[0]とかして最初のカメラを使うようにしたら，スマホのインカムでQRコードの読み取りが開始してきびしかった
- cameras[cameras.length-1]とかして最後のカメラを使っているけど，カメラ切り替え機能があってもよさそう
レイアウトはvhで書いてみていて，画面の縦幅に応じて伸縮する
- 変なのでデザイン勉強したい
UIコンポーネントのサイズをどうやって決めたらよいものか測りかねている
- 変なのでデザイン勉強したい