PCで文字列からQRコードを生成してスマホのカメラで読み取るのが便利なので、QRコード生成アプリをAIさんに作ってもらった
2025.06.28こんにちは。きんくまです。
今回はQRコードを生成できるWebアプリをAIさんに作ってもらいました。
QRコードって？
あらためて機能を簡単にいうと、任意の文字列を2次元バーコードにすることができます。
ちなみに今回QRコードの特許関連を調べたところ、標準QRコードであれば使用料は特にいらないそうです。
ただし、QRコードの名称自体は登録商標なので、ひとこと記載が必要とのこと
「QRコードは株式会社デンソーウェーブの登録商標です」
FAQはこちらから確認できます
今回作ったものの利用場面
- PCで、スマホで入力するのが面倒な文字列を入力します（長い文字列とかパスワードとか）
- QRコードを生成します
- スマホのカメラで2を読み取ります
- するとスマホで1の文字列を取得できます
私はモバイルアプリ開発を行っているので、スマホで手打ちするのが面倒な文字列をQRコードを使って転送しています。
作ったもの
- ブラウザでindex.htmlを開きます
- 文字列を入力するとリアルタイムでQRコードが生成されます
- 必要があれば、画像をpngでダウンロードできます
ソースコード
使用したJSライブラリ
こちらのライブラリを使用させていただきました。ありがとうございます。
qrcodejs
参考）本体の方のソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QRコードジェネレーター</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>QRコードジェネレーター</h1>
</header>
<main>
<div class="two-column-layout">
<div class="left-column">
<div class="input-section">
<label for="text-input">QRコードに変換するテキスト:</label>
<textarea
id="text-input"
placeholder="ここにテキストを入力してください... 複数行に対応しています"
rows="12"
></textarea>
<div class="button-container">
<button id="generate-btn" class="btn-primary">
手動でQRコードを生成
</button>
</div>
</div>
</div>
<div class="right-column">
<div class="output-section">
<div id="qr-container" class="qr-container">
<canvas id="qr-canvas" style="display: none;"></canvas>
<div id="placeholder" class="placeholder">
<p>左のテキストエリアに内容を入力すると<br>リアルタイムでQRコードが生成されます</p>
</div>
</div>
<button id="download-btn" class="btn-primary" style="display: none;">
画像をダウンロード
</button>
</div>
</div>
</div>
</main>
</div>
<!-- QRコード生成ライブラリをローカルから読み込み -->
<script src="qrcode.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
// DOM要素の取得
const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn');
const downloadBtn = document.getElementById('download-btn');
const qrCanvas = document.getElementById('qr-canvas');
const placeholder = document.getElementById('placeholder');
const qrContainer = document.getElementById('qr-container');
// QRコードインスタンス
let qrCodeInstance = null;
let debounceTimer = null;
// リアルタイムQRコード生成関数（デバウンス付き）
function generateQRCodeRealtime() {
const text = textInput.value.trim();
// 空のテキストの場合はプレースホルダーを表示
if (!text) {
showPlaceholder();
return;
}
try {
// 既存のQRコードをクリア
if (qrCodeInstance) {
qrCodeInstance.clear();
}
// QRコードのオプション設定
const options = {
text: text,
width: 300,
height: 300,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
};
// プレースホルダーを非表示にしてコンテナをクリア
placeholder.style.display = 'none';
qrContainer.innerHTML = '';
// 新しいQRコードを生成
qrCodeInstance = new QRCode(qrContainer, options);
// ダウンロードボタンを表示
downloadBtn.style.display = 'inline-block';
console.log('QRコードがリアルタイムで生成されました');
} catch (error) {
console.error('QRコード生成エラー:', error);
// エラー時はプレースホルダーを再表示
showPlaceholder();
}
}
// デバウンス付きリアルタイム生成
function debouncedGenerateQRCode() {
// 既存のタイマーをクリア
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// テキストがある場合は軽いローディング表示
const text = textInput.value.trim();
if (text) {
// 軽いローディング表示（点滅効果）
qrContainer.style.opacity = '0.7';
}
// 500ms後に実行（入力が止まったら生成）
debounceTimer = setTimeout(() => {
generateQRCodeRealtime();
// 生成後に透明度を戻す
qrContainer.style.opacity = '1';
}, 500);
}
// QRコード生成関数
function generateQRCode() {
const text = textInput.value.trim();
// テキストが空の場合は警告
if (!text) {
alert('QRコードに変換するテキストを入力してください。');
return;
}
try {
// ローディング表示
showLoading();
// 既存のQRコードをクリア
if (qrCodeInstance) {
qrCodeInstance.clear();
}
// QRコードのオプション設定
const options = {
text: text,
width: 300,
height: 300,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
};
// プレースホルダーを非表示にしてコンテナをクリア
placeholder.style.display = 'none';
qrContainer.innerHTML = '';
// 新しいQRコードを生成
qrCodeInstance = new QRCode(qrContainer, options);
// ダウンロードボタンを表示
downloadBtn.style.display = 'inline-block';
console.log('QRコードが正常に生成されました');
} catch (error) {
console.error('QRコード生成エラー:', error);
alert('QRコードの生成に失敗しました。テキストの内容を確認してください。');
// エラー時はプレースホルダーを再表示
showPlaceholder();
}
}
// ローディング表示
function showLoading() {
qrContainer.innerHTML = '<div class="loading"></div>';
}
// プレースホルダー再表示
function showPlaceholder() {
qrContainer.innerHTML = `
<div id="placeholder" class="placeholder">
<p>左のテキストエリアに内容を入力すると<br>リアルタイムでQRコードが生成されます</p>
</div>
`;
downloadBtn.style.display = 'none';
qrCodeInstance = null;
}
// 画像ダウンロード関数
function downloadQRCode() {
try {
// QRコードが生成されているかチェック
if (!qrCodeInstance) {
alert('まずQRコードを生成してください。');
return;
}
// qrcode.jsライブラリが生成したCanvas要素を取得
const canvas = qrContainer.querySelector('canvas');
if (!canvas) {
alert('Canvas要素が見つかりません。');
return;
}
// CanvasからデータURLを取得
const dataURL = canvas.toDataURL('image/png');
// ダウンロード用のリンクを作成
const link = document.createElement('a');
link.download = `qrcode_${new Date().getTime()}.png`;
link.href = dataURL;
// ダウンロードを実行
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
console.log('QRコード画像がダウンロードされました');
} catch (error) {
console.error('ダウンロードエラー:', error);
alert('画像のダウンロードに失敗しました。');
}
}
// イベントリスナーの設定
generateBtn.addEventListener('click', generateQRCode);
downloadBtn.addEventListener('click', downloadQRCode);
// リアルタイムQRコード生成（テキスト入力時）
textInput.addEventListener('input', debouncedGenerateQRCode);
// Enterキーでの生成（Ctrl+EnterまたはCmd+Enter）
textInput.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
generateQRCode();
}
});
// テキスト入力時のリアルタイム文字数表示（オプション）
textInput.addEventListener('input', () => {
const length = textInput.value.length;
if (length > 1000) {
console.warn('テキストが長すぎる可能性があります:', length, '文字');
}
});
// 初期化処理
document.addEventListener('DOMContentLoaded', () => {
console.log('QRコードジェネレーターが初期化されました');
// フォーカスをテキストエリアに設定
textInput.focus();
});
制作メモ
最初に以下の要件を書いて、それをAIさん（GitHub Copilot Agent）に作ってもらいました
## QRコード画像を生成するWebアプリ
## 要件
- ローカルで動かせる。サーバーは必要なし
- Webブラウザ上で動作する
- QRコードの内容は、テキスト入力で行う
- テキスト入力は複数行に対応するから、textareaを使用すること
- 生成ボタンを押すとQRコード画像が生成される
- 生成されたQRコード画像は、画面上に表示される
- 生成されたQRコード画像は、ダウンロードできるようにする。このときCanvasから画像生成する
- html / javascript / cssで実装
- 必要なnpmパッケージは探してインストールすること
- 画像自体はCanvasで生成する
- npmパッケージはinstruction.mdと同じディレクトリに保存すること
- アプリ本体はappディレクトリの中に作成する
1度作ってもらったあとに、サーバーを立てずにブラウザローカルで動かすので、npm使えないことに気がつきました。
なので、npm使わないようにお願いしたら、AIさんがQRコードライブラリを見つけられなかったので、そこは自分で探してきてダウンロードしました。
またリアルタイム入力とか、2カラムのレイアウトとかは、一度作られたあとに追加でお願いしました
JSは一切書かなかったのですが、見た目部分のcssを少しだけ細かく手動で調整しました。
感想とか
もともとはmacで、とあるQRコード生成アプリをずっと使っていました。
ですが、OSをアップデートしたせいかアプリを立ち上げられずアプリが落ちてしまい、使えない状況になっていました。
確認したところ、作者様がAppStoreからもアプリを非公開にされてしまっていたので、困ってしました。
なので今回自分で作ってみることにしました。
こういうWebの便利ツールは以前は自分でよく作っていたのですが、今回AIさんに作ってもらいました。
確かに早いし、便利だなーと思いました。
