一括QRコード作成を改善：確実なZIP出力とロゴの一括更新

本日、無料の一括QRコード作成ツールをアップデートしました。今回の目的は明確です。数十件、数百件のQRコードを作成するときも、プレビュー、デザイン設定、ダウンロードしたファイルのすべてを安心して使える状態にすることです。

今回の更新では、従来の一括作成フローにあった2つの重大な不具合を修正し、カスタマイズ操作も改善しました。作成したQRコードが結果表に確実に表示され、ZIP内のSVGファイルにも正しいデータが保存されます。さらに、一括作成ページ上でSVG・PNG・JPGを選べるようになりました。ロゴ選択の仕組みも見直し、選んだ画像がすべてのQRコードへ正しく反映されます。

プレビューとZIPを確実に生成

以前は、一括でQRコードを生成を押しても結果表が空のままになることがありました。ZIP自体はダウンロードできても、中のSVGファイルが0バイトになる場合もありました。操作を受け付けたように見える一方、確認や印刷に使える成果物がないという分かりにくい状態でした。

現在は、各QRコードを一つの共通データモデルで作成しています。画面上のプレビューとZIP出力は、どちらも同じデータを参照します。これにより、表示内容とダウンロード内容がずれる原因となっていたタイミングの問題を解消しました。

出力する画像データの検証も追加しています。空または不正な画像が、そのままZIP内のファイルになることはありません。同じ入力内容が複数あっても上書きされないようファイル名に連番を付け、content.csvには入力した内容と各画像の対応関係を記録します。

ページ内でSVG・PNG・JPGを選択

以前はダウンロード形式を変更するために、いったん通常の作成画面へ戻る必要がありました。一括作業の途中で画面を移動させる設計は効率的ではありません。

現在は、結果エリアの上部で形式を選択できます。

SVG：印刷、ラベル、拡大縮小が必要なレイアウトに適した標準形式です。
PNG：プレゼンテーション、文書、一般的な画像編集ツールで扱いやすい形式です。
JPG：一般的な写真形式だけを受け付けるシステムで利用できます。

選んだ形式は、ZIP内のすべての画像に適用されます。QRコードの内容やデザイン設定は、形式を変えても維持されます。

選んだロゴをそのまま反映

以前のロゴ選択画面では、ボタンの選択表示と実際のQRコード設定が別々に管理されていました。そのため、ロゴに選択枠が付いていても、生成側には設定が届いていないことがありました。画像変換に失敗した場合は、選択画面が処理中のまま止まる問題もありました。

現在は、選択状態を一つに統一しています。Twitter、YouTubeなどの内蔵ロゴを選ぶと、その設定がすぐに反映されます。アップロード画像も、ブラウザでファイルを読み込んだ後は同じ仕組みで処理されます。

また、内蔵ロゴは画像データとしてSVG内へ直接埋め込むようにしました。QRコード本体はSVGのdata URLとして表示・保存されるため、/logo/twitter.svgのような相対パスだけでは、別の環境でロゴを読み込めない可能性があります。画像を内包することで、ダウンロードしたSVG単体でも正しく表示できるようになります。

作成後もデザインを一括更新

一括作成したQRコードは、ダウンロード前に確認することが一般的です。100件を作成した後で、別のロゴのほうが見やすいと気付くこともあります。そのたびに生成ボタンを押し直し、新旧の結果が混ざっていないか確認するのは余計な手間です。

今回の更新により、一度作成した後でも、ロゴ、前景色、背景色、透過設定、フレーム、画像サイズを変更すると、表示中のQRコードがまとめて自動更新されます。入力した一覧はそのまま維持され、すべての結果が同時に新しい設定へ切り替わります。

非同期処理の競合にも対応しました。生成中に別のデザインを選んだ場合、先に開始した古い処理結果が最新の選択を上書きすることはありません。

新しい一括作成の流れ

操作手順は次のとおりです。

1行につき1件のURLまたはテキストを貼り付けます。
サイズ、色、背景、ロゴ、フレームを設定します。
一括でQRコードを生成を一度押します。
結果表ですべてのQRコードを確認します。
必要に応じてデザインを調整します。結果は自動で一括更新されます。
SVG・PNG・JPGから形式を選び、ZIPをダウンロードします。

処理はすべてブラウザ内で行われます。貼り付けた一覧や作成したQRコードが、当サイトのサーバーへアップロードされることはありません。生成されるのは静的QRコードで、内容は画像内に直接保存されます。アカウントや転送サービスへの依存もありません。

リリース前の確認

事前にロゴを選んだ状態での生成、作成済み一覧のロゴ一括変更、古い非同期処理の破棄、内蔵ロゴの画像埋め込み、空ではないZIP出力について自動テストを追加しました。ブラウザ上でも一連の操作を確認し、ダウンロードしたSVGを展開して、選択したロゴのデータが実際に含まれていることを検証しています。

この記事は、新しく開設したプロダクトブログの第1回です。今後も、重要な改善内容やQRコードを活用する際の判断材料を、分かりやすくお伝えします。目指すのは、動作が明確で、出力ファイルを自由に持ち運べて、利用者自身が管理できるツールです。