なぜ作ったか
セキュリティ要件をクリアしつつ日常の変換作業を最短化するため、外部サービスへのデータ送信を行わない「ブラウザ完結型」のツールを考案しました。新たなソフトを導入せず既存のGoogle Workspace環境を活用するアプローチが、実際の現場の制約下で機能するかをNAYUTA Laboとして検証する。
どう作ったか
使用したAI・制作環境：Gemini / Google Apps Script
要件を整理 → Geminiへ初期指示 → MVPを実装 → 実データで操作確認 → Error / Fixを記録 → Complete / Resultを撮影
今回の検証
ブラウザ内で完結する最小構成のQRコード生成
今回の実験では、Google Apps Script（GAS）のWebアプリケーション機能と軽量なフロントエンド描画スクリプトを組み合わせ、URLを貼り付けるだけで即座にQRコードを描画・ダウンロードできる最小限の画面を構築しました。
Webページを読み込んだ後は、入力されたURL情報がサーバー側に送信・蓄積されることなく、利用者のブラウザ（クライアントサイド）上で画像データとして生成されます。余計な設定や登録を挟まず、URL入力からPNG保存までの手数を最小化することを狙いとしています。
- 入力欄にURLを貼り付けてボタンを押すだけのシンプルな操作画面
- ブラウザのJavaScript処理によってその場でQRコードを即時描画
- 生成されたコードをワンクリックでPNG画像ファイルとしてダウンロード保存
入力検証と状態通知による誤操作防止
単に変換するだけでなく、日常の業務で手戻りを防ぐための基本的なUIガードを実装しています。
プロトコル（httpまたはhttps）を含まない不完全な文字列が入力された場合は警告を表示し、入力ミスにその場で気づけるように設計しました。また、生成状態やエラー時のメッセージ表示を明確に分けることで、迷わず使える配慮を加えています。
- http/https形式を判定する簡易バリデーションで無効入力を防止
- 入力クリアボタンや生成待機中の表示を設け、視覚的なフィードバックを確保
- ダウンロード前に生成された画像と対象URLを目視確認できるプレビュー領域
検証状況と利用にあたっての前提条件
本ツールは現在「検証中（IN_VERIFICATION）」のステータスにあり、基本的な生成ロジックと画面構成の初期確認を行った段階です。実際の業務フローに耐えうるか、表示速度や取り扱うURLの文字数制限などの観点から継続検証を予定しています。
なお、本ツールは初期表示時にCDN経由でスタイル定義や描画用ライブラリをブラウザへ読み込む仕様です。完全なオフライン環境や、外部スクリプトの取得が遮断されているネットワークでは動作しない点にご留意ください。
- 初期検証段階のため、長大なURLや特殊なパラメータにおける挙動は継続確認中
- 画面読み込み時に外部CDNへのアクセスが発生するため社内ネットワーク規則の確認が必要
- 生成される画像サイズは180x180ピクセル（誤り訂正レベルM）のMVP仕様
実際の操作画面
Before
Prompt
