QRコード ARデモ生成ツール

広告エリア

ℹ️QRコード ARデモについて

3DモデルURLを入力してQRコードを生成します
QRコードを読み取るとARデモページが開きます（黄色いボックスが表示されます）
Hiroマーカーをカメラに向けるとAR表示されます
※実際の3Dモデル読み込みには専用サーバーが必要です

3DモデルURL（GLB/GLTF形式）

※ CORS対応サーバーに配置された3Dモデルファイルを指定してください

モデルサイズ

QRコードがここに表示されます

📚 生成履歴

まだ履歴がありません

広告エリア

📖 QRコード ARデモ生成ツールの使い方

QRコード ARデモの基本操作

3DモデルのURLを入力（またはサンプルから選択）
モデルサイズを選択
「QRコード生成」ボタンをクリック
生成されたQRコードをダウンロード

ARデモの体験方法

Hiroマーカーを印刷または画面表示で準備
スマートフォンでQRコードを読み取る
カメラアクセスを許可
Hiroマーカーにカメラを向けると黄色いボックスが表示

サンプルモデルの活用

4種類のサンプル3DモデルURL（アヒル、ボックス、アボカド、ラジカセ）を用意しています。これらを選択して、すぐにARデモQRコードを生成できます。

❓ QRコード ARデモのよくある質問

Q: なぜ黄色いボックスしか表示されないのですか？

A: このツールはARの仕組みを体験するデモ版です。実際の3DモデルをARで表示するには、HTTPS対応の専用サーバーとCORS設定が必要になります。

Q: Hiroマーカーとは何ですか？

A: Hiroマーカーは、AR.jsで標準的に使用される認識用マーカー画像です。黒枠の中に「HIRO」の文字が描かれたパターンで、これをカメラで認識することでARオブジェクトを表示します。

Q: 自分の3Dモデルを表示するには？

A: GLB/GLTF形式の3DモデルをCORS対応サーバーにアップロードし、専用のARビューアページを構築する必要があります。GitHubやCloudinaryなどのサービスが利用可能です。

'+''+''+''+''+''+''+''+''+''+''+''+'

'+'Hiroマーカーに向けてください'+'

'+'';const base64Html=btoa(unescape(encodeURIComponent(arHtml)));const dataUri='data:text/html;base64,'+base64Html;const qrDisplay=document.querySelector('.tp-qr-display');qrDisplay.innerHTML='';const qrContainer=document.createElement('div');qrContainer.id='qrcode-'+Date.now();qrDisplay.appendChild(qrContainer);const qrcode=new QRCode(qrContainer,{text:dataUri,width:280,height:280,colorDark:'#111827',colorLight:'#FFFFFF',correctLevel:0});currentQRCode={modelUrl:modelUrl,scale:modelScale,dataUri:dataUri,timestamp:Date.now()};addToHistory(modelUrl,modelScale);document.querySelector('.tp-qr-actions').style.display='flex';const infoDiv=document.createElement('div');infoDiv.style.cssText='margin-top:10px;padding:10px;background:#FEF3C7;border-radius:6px;font-size:12px;color:#92400E;';infoDiv.innerHTML='ℹ️ デモ版
'+'QRコードを読み取ると、ARデモ（黄色いボックス）が表示されます。
'+'実際の3Dモデル表示には専用サーバーが必要です。';qrDisplay.appendChild(infoDiv);ui.showSuccess('QRコード（ARデモ）を生成しました')}catch(error){console.error('エラー:',error);ui.showError('QRコードの生成に失敗しました')}finally{ui.hideLoading(button)}}function addToHistory(modelUrl,scale){const item={modelUrl:modelUrl,scale:scale,timestamp:Date.now()};const exists=history.some(h=>h.modelUrl===modelUrl);if(!exists){history.unshift(item);if(history.length>10){history=history.slice(0,10)}renderHistory()}}function renderHistory(){const historyList=document.querySelector('.tp-history-list');if(history.length===0){historyList.innerHTML='

まだ履歴がありません

';return}historyList.innerHTML=history.map((item,index)=>{const urlDisplay=item.modelUrl.length>40?item.modelUrl.substring(0,40)+'...':item.modelUrl;return'

'+escapeHtml(urlDisplay)+'

'}).join('')}window.loadFromHistory=function(index){const item=history[index];if(item){document.getElementById('modelUrl').value=item.modelUrl;document.getElementById('modelScale').value=item.scale;generateQRCode()}};function downloadQRCode(){const img=document.querySelector('.tp-qr-display img');if(!img){ui.showError('QRコードが生成されていません');return}const imgSrc=img.src;fetch(imgSrc).then(res=>res.blob()).then(blob=>{const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='ToolPalette_AR_QR_'+Date.now()+'.png';a.click();URL.revokeObjectURL(url);ui.showSuccess('QRコードをダウンロードしました')}).catch(error=>{console.error('ダウンロードエラー:',error);ui.showError('QRコードのダウンロードに失敗しました')})}function testARViewer(){if(!currentQRCode){ui.showError('QRコードが生成されていません');return}window.open(currentQRCode.dataUri,'_blank');ui.showSuccess('ARデモページを開きました')}function saveData(){const data={history:history,currentSettings:{modelUrl:document.getElementById('modelUrl').value,scale:document.getElementById('modelScale').value},timestamp:Date.now()};if(storage.save(data)){ui.showSuccess('保存しました')}else{ui.showError('保存に失敗しました')}}function clearAll(){if(!confirm('すべてのデータをクリアしますか？')){return}document.getElementById('modelUrl').value='';document.getElementById('modelScale').value='1';document.querySelector('.tp-qr-display').innerHTML='

QRコードがここに表示されます

';document.querySelector('.tp-qr-actions').style.display='none';currentQRCode=null;history=[];renderHistory();storage.clear();ui.showSuccess('クリアしました')}function handleShare(){if(!confirm('このデータを共有しますか？n※個人情報や機密情報が含まれる場合はご注意ください。')){return}if(window.ToolPaletteShareManager){ToolPaletteShareManager.open({toolId:CONFIG.toolId,toolName:CONFIG.toolName})}else{const api=window.ToolPaletteAPI[CONFIG.toolId];if(api){const data=api.getShareData();const json=JSON.stringify(data,null,2);const blob=new Blob([json],{type:'application/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='ToolPalette_share_'+CONFIG.toolId+'.json';a.click();URL.revokeObjectURL(url)}}}window.ToolPaletteAPI=window.ToolPaletteAPI||{};window.ToolPaletteAPI[CONFIG.toolId]={getShareData:()=>({version:"1.0",toolId:CONFIG.toolId,toolName:CONFIG.toolName,category:CONFIG.category,data:storage.load()||{},settings:{modelUrl:document.getElementById('modelUrl').value,scale:document.getElementById('modelScale').value},timestamp:Date.now(),dataType:CONFIG.dataType}),setShareData:(shareData)=>{if(shareData&&shareData.data){storage.save(shareData.data);if(shareData.settings){document.getElementById('modelUrl').value=shareData.settings.modelUrl||'';document.getElementById('modelScale').value=shareData.settings.scale||'1'}setTimeout(()=>location.reload(),100)}},toolInfo:{name:CONFIG.toolName,toolId:CONFIG.toolId,category:CONFIG.category,version:CONFIG.version,dataType:CONFIG.dataType,hasMultipleData:true}};function loadSharedDataOnInit(){const hash=location.hash;if(hash.startsWith('#share=')){try{const encoded=hash.substring(7);const decoded=decodeURIComponent(escape(atob(encoded)));const sharePackage=JSON.parse(decoded);if(sharePackage.metadata){if(sharePackage.metadata.expiresAt&&Date.now()>sharePackage.metadata.expiresAt){ui.showError(ERROR_MESSAGES.SHARE_EXPIRED);location.hash='';return}if(sharePackage.metadata.hasPassword){console.log('パスワード保護されたデータです。共有ツールをご利用ください。');location.hash='';return}}const shareData=sharePackage.data||sharePackage;if(shareData.toolId===CONFIG.toolId){location.hash='';window.ToolPaletteAPI[CONFIG.toolId].setShareData(shareData)}}catch(e){console.error('共有データ読み込みエラー:',e);location.hash=''}}}function initialize(){if(!window.localStorage){ui.showError(ERROR_MESSAGES.BROWSER_NOT_SUPPORTED);return}document.querySelector('.tp-generate').addEventListener('click',generateQRCode);document.querySelector('.tp-save').addEventListener('click',saveData);document.querySelector('.tp-clear').addEventListener('click',clearAll);document.querySelector('.tp-share').addEventListener('click',handleShare);document.querySelector('.tp-download').addEventListener('click',downloadQRCode);document.querySelector('.tp-test').addEventListener('click',testARViewer);document.querySelectorAll('.tp-sample-btn').forEach(btn=>{btn.addEventListener('click',function(){const url=this.dataset.url;document.getElementById('modelUrl').value=url;ui.showSuccess('サンプルモデルを設定しました')})});document.getElementById('modelUrl').addEventListener('keypress',(e)=>{if(e.key==='Enter'){generateQRCode()}});document.addEventListener('keydown',(e)=>{if(e.ctrlKey&&e.key==='Enter'){generateQRCode()}if(e.ctrlKey&&e.key==='s'){e.preventDefault();saveData()}});const savedData=storage.load();if(savedData){if(savedData.history){history=savedData.history;renderHistory()}if(savedData.currentSettings){document.getElementById('modelUrl').value=savedData.currentSettings.modelUrl||'';document.getElementById('modelScale').value=savedData.currentSettings.scale||'1'}}}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>{loadSharedDataOnInit();initialize()})}else{loadSharedDataOnInit();initialize()}})();

📊