Web・UI・CSS
URLを整理して、配布用QRコードを作りたい
使うツール
チラシのQRコードが読み取れても、開く先が間違っていたら目的は果たせません。逆にURLが正しくても、余白を切り詰めたり小さく印刷しすぎたりすると読めないことがあります。URLの内容確認と、QR画像としての読み取り確認を分けると、どの段階で直すべきかが分かりやすくなります。まず架空のexample.comを使い、リンクへアクセスせず文字列を調べるところから始めます。
URLを分けて、送り先を確認する
URL分解・クエリ編集へ次の例を入力します。hostnameはexample.com、portは8443、pathは/catalogです。?以降のクエリーと#以降のfragmentは、それぞれ別に表示されます。長いURLの中からドメインを目で探すより、構成要素として分けると見落としを減らせます。ツールは入力URLへ接続しないため、そのサーバーが存在するか、証明書が正しいか、ページが公開済みかは確認していません。
https://example.com:8443/catalog?tag=book&tag=gift&q=red+bag#detailshttps://example.com@other.example/pathのような表記では、@より前はユーザー情報で、接続先hostnameはother.exampleです。文字列の先頭に見慣れた名前があるだけで、送り先を判断しないでください。QRにするURLへユーザー名、パスワード、秘密の認証値を含めることも避けます。コードを印刷すれば、その文字列を読み取れる人へ配ることになります。
同じ名前のクエリーを、勝手に一つへまとめない
例にはtagが二回あり、bookとgiftをこの順番で持っています。URL分解では重複と順序を確認できます。追加操作は同じキーを増やし、設定操作はそのキーの値を置き換えるため、目的に合わせて使い分けます。受信先が最初だけ読むか、最後だけ読むか、全部を配列として読むかはサービス側の仕様です。ツールが一つの正解を推測するわけではありません。
q=red+bagは、フォーム形式のクエリーとして読むとred bagになります。実際のプラス記号を値に含めたい場合は%2Bとの違いを確認します。編集後の再構成ではエンコード表記が変わる場合もあります。意味が同じでも文字列が変わるため、署名付きURLを軽い気持ちで正規化・並べ替えしないでください。変更前後のURLを確認してからQRへ渡します。
生成できたことと、読めることを分ける
確認したURLをQRコード生成へ渡し、まずサイズ320、誤り訂正M、余白4で試します。ここでもURL先へアクセスせず、入力文字列を画像へ変換します。生成できたから安全なサイトだという判定ではありません。読み取り機器で確認するときは、可能なら表示されたURL文字列を開く前に確認し、ドメイン、パス、クエリーが意図したものかを見ます。
QRの周囲の余白は、模様と周囲を区別するための領域です。余白4は四つのモジュール幅を指し、画像全体の四ピクセルという意味ではありません。画像編集で余白を切り落としたり、枠線を密着させたりすると、生成時と条件が変わります。レイアウトへ置いた後も余白を保ち、ページの背景や周囲の印刷物と混ざらないようにします。
長いURLほど、同じサイズでは細かくなる
URLへ長いパラメーターを足すと、必要なデータ量が増えます。同じ画像幅の中に多くのモジュールが入れば、一つ一つは小さくなります。誤り訂正を高くすると常に読みやすくなるとも限らず、必要な領域が増える場合があります。まず不要な情報をURLへ入れていないかを確認し、必要な内容を保ったうえで、画像サイズと実際の使用条件を調整します。
画面で拡大して読めたことだけでは、紙に印刷した小さなコードの確認にはなりません。最終的な大きさ、印刷品質、距離、照明、読み取り端末で試します。SVGは拡大縮小に向いていますが、配置時に変形したり、周囲を削ったりすれば別の問題が起きます。ロゴを重ねても大丈夫と誤り訂正へ期待するのではなく、まず装飾しない状態で確実に読めるかを確認します。
配布前に、文字列と画像の両方を残す
確認用には元のURL、QRの設定、最終的に配置した画像を一組で扱います。生成後に別のURLへ変更したのに古い画像を使っていないか、校正用URLが残っていないかを見ます。画像だけ渡されると、どの文字列から作ったかを見落としやすくなります。短縮URLを使う場合も、その管理権限や将来の転送先変更は別の運用課題であり、このツールが保証するものではありません。
実サイトの公開確認が必要なら、権限のある通常のブラウザー操作として別に実施します。URL分解とQR生成は通信せず準備する道具、公開先の到達性と内容確認は別の作業です。この区別を守ると、入力しただけで知らないサイトへアクセスせずに、リンクの構造と配布物の読み取り品質を順に確認できます。
QRを読めた後に、どのURLが表示されたかも確認する
QRの生成が成功し、読み取り端末が反応しても、目的のURLが入っているとは限りません。入力時のパスの誤字やQueryの不足も、そのまま正しくQRへ保存されます。読み取り結果をいったん文字列として確認し、ホスト、パス、必要なパラメーターを元の案と照合します。いきなり移動するのではなく、URLそのものを確認できる読み取り方法が役立ちます。SheepDevの生成はリンク先へアクセスしないため、リンク先の公開状態や権限まで確認済みという意味ではありません。
紙へ配布するなら、画面で拡大して読めた結果だけでは足りません。実際に使う大きさで印刷し、余白が切れていないか、光の反射やぼけがないかを確認します。誤り訂正を強くするほど何でも読めるわけではなく、データ量や模様の細かさとの関係があります。必要以上に長いURLを入れて小さく印刷すると、一つ一つの模様が細かくなります。入力を短くする場合も、未知の短縮サービスを足すのではなく、管理できる正しいURLを選ぶという判断が先です。
一度印刷したQRの内容は、リンク先を変えたいからといって画像の中で自動更新されません。配布後に行き先を管理したい場合は、その運用を別途設計する必要があり、このツールが転送用URLを発行するわけではありません。配布物には人が読める案内やURLも必要に応じて添えると、QRを使えない人にも入口を用意できます。作成元の文字列、画像、実物での読み取り確認をそろえてから配布すると、後から違う版の画像を混ぜる失敗も防ぎやすくなります。