面倒解決エンジニアの森田ユウゴです。
台湾からお届けする「#kintone100日チャレンジ」の61日目。
これまでnoteやzenn、はてなブログなどでも投稿してきましたが、ココナラのブログ機能の存在を知ったので使てみます。
本日は、訪問営業担当者やEC事業者の方向けの「商品AR確認プラグイン for iPhone Safari」を開発しました！
「商品AR確認プラグイン for iPhone Safari」について
🎯 なぜ開発したか？（現場の課題とベネフィット）
現場の「不」: 商品のサイズ感やデザインの細部は、写真やテキストだけではなかなか顧客に伝わりません。かといって、全種類のサンプルを訪問営業で持ち歩くのは物理的に不可能で、大きな無駄や機会損失が発生しています。
導入後の世界（ベネフィット）: スマホ（iPhone）のkintoneアプリからワンタップで、目の前の空間に商品の3Dモデル（実寸大）を出現させられます！重いカタログやサンプルを持ち歩く時間を削減し、提案の説得力を劇的に向上させます。
✨ これで出来ること（機能概要）
まずはこちらをご覧ください。
モバイル詳細画面へのAR起動カード生成: モバイル版kintoneの詳細画面を開くと、指定したスペース要素にAR起動用のカードUIが自動表示されます。商品名や説明文も合わせて表示可能です。
3D対応ファイルのみを自動抽出: 添付ファイルフィールドから、AR Quick Lookに対応した拡張子（.usdz または .reality）のファイルのみを自動的にフィルタリングして一覧表示します。
ワンタップでAR Quick Lookをシームレスに起動: リストをタップすると、対象のファイルをAPI経由で取得し、iPhone Safariの標準機能である「AR Quick Look」を直接立ち上げます。
課題
現時点では下記のような課題が残っています。
動的URL生成に関するガイドラインとのトレードオフ
kintoneのセキュアコーディングガイドラインでは、XSS対策として「出力するURLは『http://』または 『https://』で始まるURLだけにする」と定められています[cite: 11]。しかし本機能では、取得した3DモデルデータをSafariのAR機能に渡すため、やむを得ず URL.createObjectURL を用いて blob: から始まるURLを動的に生成し、隠しリンクの href に設定しています。
ファイル取得APIにおけるユーザーエージェント未設定
コーディングガイドラインには、大量リクエストの監視や判別のために「適切なユーザーエージェント（「User-Agent」ヘッダー）を設定してください」と記載されています。今回はJavaScriptの fetch APIを利用して /k/v1/file.json エンドポイントからファイルを取得していますが、ブラウザのセキュリティ制限上 User-Agent ヘッダーを任意に書き換えることができないため、実装を見送っています。
さいごに
#kintone100日チャレンジ として、2026年4月から毎日プラグインをバイブコーディングしています。明日もお楽しみに！
私森田ユウゴはココナラでkintoneに関する各種サービスを出品しております。
SIerの中でもインフラSEとして約10年、特に「運用保守」にはベンダーとして深く携わってきました。
作りっぱなしにしない導入やカスタマイズのご提案が可能です。
お気軽にご相談をくださいませ
→森田ユウゴのプロフィールはこちら👇
