アグリゲートQR

Symbolブロックチェーンでは、アグリゲートトランザクションを利用してオフライン署名を実現することができます。

例えば、SNS上などで未承認トランザクションを共有してユーザー同士が署名をしあうことで、「交換を業とする第三者」を完全に必要としない価値交換を実現することができます。

一般的にDEXと呼ばれる分散型価値交換はスマートコントラクトを使用することで第三者を必要としない価値交換を実現しているように見えますが、ユーザーとの接続部分については専用のアプリケーションに依存していて、この部分が制度次第で規制の対象となる可能性があり、ブロックチェーンを活用した事業の安定性に大きな不安要素を残すことになります。

ただし、このSNS上での価値交換には課題があります。
複数人のトランザクションを集約させる場合は最低でもこれぐらいのデータサイズになります。

'D80200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX00000000036841410045010000000000E9A0EE0323000000DD4111A22B6A4CDD95CB04C73451193941B0CC629774B84932447443AAC942FB30020000000000005000000000000000XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX000000000168544168C2C82C4C78743B827C2667FCAE5885720770A1567AE8DB0000000000000000600000000000000088F44BBD37BE0F98A7F06B6D958E0A8807F05A9A14F5DE408012E2AA6E2A84DE0000000001685441681C05EE602E6DC993621E7B5DF753E24E6A915C5121D9490000010000000000F23A4DA503CEC34A0045010000000000790100000000000088F44BBD37BE0F98A7F06B6D958E0A8807F05A9A14F5DE408012E2AA6E2A84DE000000000168544168E5AC45A655D1F08C4D13825DA9D9822C89080F5ADCAAD12901000000000000007B2267656F6A736F6E223A7B2274797065223A2246656174757265436F6C6C656374696F6E222C226665617475726573223A5B7B2274797065223A2246656174757265222C2270726F70657274696573223A7B7D2C2267656F6D65747279223A7B22636F6F7264696E61746573223A5B3133352E353130373632383633323038372C33342E3731303835303833393630383632355D2C2274797065223A22506F696E74227D7D5D7D2C22757267656E6379223A2233686F757273222C22696E666F54797065223A22756E737065636966696564222C226465736372697074696F6E223A22303143453231454634373642394338363237303638414636363131323942374539454333374130443831453839383332433537423442313431353636393444393337227D00000000000000'

Xの場合、1ポストに収まりません。
QRコードに変換して画像にした場合もかなり読み取りにくい細かさになってしまいます。

というわけでペイロードを複数のQRコードに分割するツールを作成しました。

1チャンクの長さは250ぐらいがちょうどよいかと思います。
QR生成ボタンをクリックすると下の画像のように分割QRコードが表示されます。

これをX等のSNSに貼り付けることで価値交換の提案が完了です。

Symbolブロックチェーンは交換相手や交換するトークンを後で差し替えることはできません。事前に交換する相手とチャット等で交渉しておく必要があります。

次にこのQRコードをストレスなく読み込むツールを開発しました。

スマートフォンで開く場合はこのQRコードを読み取ってください。

このような画面が表示されます。

開始ボタンをクリックすることでWebカメラが起動し、QRコードを連続スキャンすることができます。
スキャンする順番は問いません。必要なQRコードをすべてスキャンすると、読み取ったデータが自動結合されて出力されます。スキャン済みのQRコードはオレンジ色マークで検知されて重複取り込みを防いでくれます。上記250文字区切りでQRコードを分割しておくと最大3x3=9個のQRコードを同時にスキャンできます。

以下にQR分割ツールとQR連続リーダーについての機能詳細をAIで出力したものを記載しておきます。

QR分割ツール機能詳細

🔍 全体概要

このツールはブラウザ上で動作する テキスト分割型 QR コード生成アプリであり、入力テキストを Base64URL エンコードし、指定文字数ごとに分割し、それぞれを QR コード化します。
各 QR にはチャンク番号やメッセージIDが付与されるため、後から復元できる構造化データとして扱えます。

🧩 主な機能一覧

① テキスト入力

• ユーザーが入力した任意テキストを対象に処理
• textarea に入力

② Base64URL 変換

• Unicode → UTF-8 → Base64 → Base64URL
• URL安全形式へ置換（+ → -, / → _）

③ チャンク分割

• Base64URL 化データを指定長で分割
• デフォルト値：800文字／チャンク

④ Message ID（識別子）生成

• 任意入力
• 未指定時はランダム生成
• crypto.randomUUID() に対応

⑤ チャンク構造の生成

書式：

QRCHUNK|v1|<messageId>|<index>/<total>|<data>

例：

QRCHUNK|v1|8fa3b2|0/5|AbCdEf....

⑥ QR コード生成

• qrcode.js を使用
• 1行ごとに1個生成
• ECC レベル：M
• サイズ：200px
• 余白多め

⑦ 生成結果一覧表示

• Grid UI
• チャンク番号・データ長を表示

⑧ PNG ダウンロード

• QR を余白つきで PNG 化
• 一括保存対応

⑨ ZIP ダウンロード（未実装）

• JSZip を組み込めば拡張可能

⑩ リセット機能

• 入力／ID／QR／状態 表示クリア

⑪ 状態表示

• 完了 / エラー / 処理中 表示

---

🧱 内部データ設計の特徴

Base64URL の採用

• QR データを URL 安全に統一
• UTF-8 → 日本語対応

チャンク構造

<ヘッダー> | <バージョン> | <MessageID> | <進行情報> | <チャンクデータ>

要素	役割
QRCHUNK	種別識別
v1	フォーマットバージョン
MID	複合元のバインディングID
i/total	復元順序
data	塊データ

---

✨ 特徴的なポイント

処理信頼性

• 余白多めの QR 生成 → 読取性能強化

構造化保存

• messageId によるチャンク同期保証

大容量対応

• 1枚に入らないデータも連番QRで伝送可能
  → オフライン向けの特性が強い

🎯 まとめ（機能要点）

機能	内容
入力	任意テキスト
エンコード	Base64URL
分割	任意長（デフォルト 800）
ID付与	messageId 付与
QR生成	チャンク単位
ダウンロード	PNG一括保存
ZIP	拡張可
UI	表示・リセット・状態通知

QR連続リーダー機能詳細

🔍 全体概要

このプログラムは ブラウザカメラを用いて大量の QR コードを連続読み取りし、分割チャンクを自動結合して元データを復元するツールです。
前回のチャンク生成ツールと対になっており、QRCHUNK|v1|... 形式の構造化データを認識・統合し、進捗 UI をリアルタイム更新しながら復元します。

特徴：

• 連続スキャン
• 自動重複排除
• 自動チャンク結合
• 進捗表示
• 読取位置検出可視化
• 完成時トースト通知
• jsQR / BarcodeDetector 両対応
• スマホ向け UI 最適化

🧩 主な機能一覧

① カメラ映像取り込み

• getUserMedia() でリアルタイム映像取得
• 背面カメラ優先 (facingMode: environment)
• 解像度指定（1280×720）

② QR 自動検出

• 可能なら BarcodeDetector を使用
• 非対応環境では自動的に jsQR にフォールバック

③ 連続読み取り処理

• 毎フレーム canvas に映像描画
• 毎フレーム検出処理実行
• 読み取った QR を自動解析

④ 重複排除

• messageId + index をキーとした Set 管理
• 既読チャンクを除外し効率化

⑤ チャンク構造解析

QR 内容書式：

QRCHUNK|v1|<messageId>|<index>/<total>|<b64url>

解析結果：

要素	説明
prefix	形式識別子
version	データバージョン
messageId	論理結合ID
index	チャンク番号
total	総チャンク数
b64url	Base64URL データ

⑥ 自動結合

受信 Map 構造：

session = {
  messageId,
  total,
  received: Map(index → b64url)
}

全チャンク完了時に結合：

fullB64 = join(received)
decode → text

⑦ 進捗 UI

• プログレスバー
• 受信カウント
• 完成判定
• メッセージ表示
• 完成時トースト通知

⑧ 視覚フィードバック

• QR 中央位置を検知点として表示
• 新規 → 緑
• 既知 → オレンジ
• 直近検知をロック管理

⑨ サウンド通知

• 新規チャンク発見時に効果音再生

⑩ コピー機能

• 復元データをワンクリックでコピー可能

⑪ リセット機能

• 受信チャンク／出力／進捗をクリア

🧱 内部データ設計の特徴

Base64URL 復元

QR データを Base64URL → UTF-8 に復元する処理：

• padding 調整
• URL 置換撤回
• atob()
• TextDecoder()

→ Unicode・日本語完全対応

ロック制御

連続検出防止のための時間ロック：

LOCK_MS = 600ms

• 短期的な連続読み取りは新規扱い
• 視覚的に追跡可能

Canvas 読取

• hidden canvas へ高速転送
• willReadFrequently: true で最適化

✨ UI／体験設計の特徴

スマホ／タブレット最適化

• レスポンシブ
• UI縮小
• landscape対応
• タップ操作向け調整

明確な使用状態

• 「未開始」「スキャン中」「停止」
• ステータス表示
• プログレス視覚化

読取位置 overlay

• 中央表示
• サイズ補正
• object-fit: cover対応

🎯 まとめ（機能要点）

機能カテゴリ	内容
入力	カメラ映像
認識	QR自動検出（fallback付き）
再構築	Base64URL のチャンク結合
UI	進捗／通知／可視化
操作	開始／停止／コピー／リセット
最適化	読取位置／重複排除／短期ロック