こんにちは、MIZUTANIKIRIN (@mizutanikirin)です！XR開発を手がけるデザイニウムでエンジニアをしています。普段は主にUnityを用いてアプリ開発を行っていますが、今回はLens Studioに初挑戦しました。

Camera Kit Webを使用してWebAR※アプリを作成した経験をもとに、本記事をまとめました。Camera Kit Web初心者目線で、開発時に注意すべきポイントを中心に紹介します。
※スマートフォンやタブレットなどのブラウザを通して拡張現実（AR）体験を提供する技術。

「Lens Studio開発で注意すべきポイント」も別記事にまとめていますので、よかったら合わせてそちらもご覧いただけると幸いです。

[開発環境]
Windows 10 / Lens Studio v4.55.1 / Camera Kit Web 0.12.0

1. Camera Kit Webとは？

そもそもCamera Kit Webとは何なのか簡単に説明します。Camera Kit Webはウェブサイト上でAR体験を簡単に統合（埋め込み）ができるように設計されたツールキットです。開発者はウェブページにSnapchatのカメラ技術を組み込むことができ、ユーザーはブラウザで直接ARフィルターやエフェクトを体験できます。

開発はLens Studioで可能で、テンプレートを使用すると簡単にWebARアプリを作成することができます。

2. アクセス権要求コードサンプル

前後カメラの切り替えなど、Camera Kit Web内で制御できないコードについては、「GUIDES > Web Customization」に記載があります。ただ1点重要な情報が欠けているため、補足をします。このフォーラム投稿に軽く記載されていますが、iOSで空間系Webアプリ(テンプレでいう「Look Around」や「Animated Object (2021)」)を表示する際は、Device MotionとDevice Orientationのアクセス権を要求する必要があります。これらの許可がないと空間系の機能が動作せず、モデルが画面に対して固定された位置に留まるなどの問題が生じます。

これらの許可を得るためには、ユーザーのアクション（例えば、ボタンをタップするなど）が必要で、自動で許可を得ることはできません。
以下に、トップページからapp-btnを押すとWebアプリ(app1.html)に遷移する際に、これらの許可を求めるコード例を書きましたので参考にしてください。

document.getElementById("app-btn").addEventListener("click", function(event) {
    RequestPermsAndGo('./app/app1.html');
});

function RequestPermsAndGo(pagePath){
    Promise.all([
        (typeof DeviceMotionEvent.requestPermission === 'function') ? DeviceMotionEvent.requestPermission() : Promise.resolve('granted'),
        (typeof DeviceOrientationEvent.requestPermission === 'function') ? DeviceOrientationEvent.requestPermission() : Promise.resolve('granted')
    ])
    .then(results => {
        const allPermissionsGranted = results.every(result => result === 'granted');
        if (allPermissionsGranted) {
            window.location.href = pagePath;
        } else {
            if (results[0] === 'granted') {
                window.addEventListener('devicemotion', handleMotion);
            }
            if (results[1] === 'granted') {
                window.addEventListener('deviceorientation', handleOrientation);
            }
        }
    })
    .catch(console.error);
}

function handleOrientation(event) {
    // オリエンテーションイベントの処理
    console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
}

function handleMotion(event) {
    // モーションイベントの処理
    console.log(`Acceleration: ${event.acceleration.x}, ${event.acceleration.y}, ${event.acceleration.z}`);
}

3. 開発中の注意点

3.1. Camera Kit Web関連

• Camera Kit Webの動作は基本的に重い
  重さはどの機能を使うかにもよります。例えば自分が試した範囲では顔認識系(テンプレでいうSunglasses等)は重いことはなかったです。何が重いかというと空間系とImage Markerが重かったです。
  開発初期段階ではSnapChat用とWebAR用アプリは同じアプリとして作成していました。しかしWebで確認するとかなり動作が重かったため、SnapChat用とWebAR用でアプリを2つ分けWebARでは重くならないように機能などを制限しました。
  

• メモリが最も大事な要素？
  使用する機能によるかもしれませんが、対応機種を選ぶ上でメモリは最も重要な要素の一つのようです。例えば、最新機種でもメモリ容量が少ないと、Image Markerは、快適に動作しないことがありました。自分の作成したアプリの場合、Image Markerに関してはテストの結果、少なくとも6MB以上のメモリが必要でした。それ以下の場合、プレイが快適にできないほどの画面のカクつき(見た感じ5fps以下ぐらい)になります。
  

• Camera Kit Webで使える機能が明確ではない
  「Unsupported Lens Features」に対応していない機能のリストがありますが、これ以外の機能でも使用できないことがあります。例えば、リストには含まれていない「World Mesh」(テンプレの「World Mesh」や「Simple World Mesh」)の機能について問い合わせたところ、使用不可能との回答を受けました。
  アプリ企画時にはこのページの情報だけを頼りにするのではなく、実際に必要とする機能が使えるかどうかを先にテストすることが重要です。使用したい機能が動作しない場合は、サポートに問い合わせることをお勧めします。
  

3.2. CameraKit Production申請関連

Camera Kit WebのアプリをリリースするにはAPP Previewに申請して、承認後に発行されるProduction Token KeyをWebシステムに組み込む必要があります。その申請の際のつまずきポイントをまとめました。

• Demo Videosのどこかに「同意ウィンドウ」が映っていないといけない
  Demo Videosに提出する動画にはこの「同意ウィンドウ」が映っていないといけません。初めてアクセスしたときにのみ表示されるウィンドウなので、ビデオキャプチャ前に一旦ブラウザのキャッシュをクリアしないといけないので注意が必要です。

• Demo Videosには「Powerted by [Snapロゴ]」も映っていないといけない
  英語の表現がよくわからなかったのですが、「Design Guidelines and Recommendations」に書いてあるように、「Powerted by [Snapロゴ]」をWebアプリに表示して、提出動画にそれが映っている必須があります。
  

• Reject理由が表示されない事があった
  Developer Portal > Versions > [リリースしたいバージョン]で「Submit for Review」をして申請した後にRejectedされた事がありました。
  Rejectされると下の画像のように「SNAP KIT TEAM」欄に拒否理由が表示されるはずですが、いくら経っても「Loading rejection reasons…」が表示されて理由がわからない状態になった事がありました。
  サポートに問い合わせましたが、リリース日が近かったのもあり、返信を待つまでにマニュアルを再度見直し、修正をして再度Reviewを申し込んだら申請が通りました。(この際は提出動画内に「同意ウィンドウ」が映っていなかったためにRejectされていたようです。)
  App Reviewで申請した後も更新申請はできるので、初めの申請は早めにした方が良いです。

• Staging Token Keyを使っていてもアプリにウォーターマークが表示されない
  つまずきポイントというわけではないのかもですが、Releasing Your Camera Kit App > Using the Production API Token には「Staging Token Keyを使っているときはアプリにウォーターマークが表示される」と書いてありますが、表示されませんでした。
  だとするとProduction Token Keyを使わなくても良いのかなと思っていましたが、上に書いたようにProduction Token Keyを使う必要はあるとのことです。

まとめ

Camera Kit Web開発を行って、特に気をつけるべきだと強く感じたのは以下3点です。

1. 申請を早めにする

2. 使いたい機能が使えるかテストする

3. 動作が重い機能がないかテストする
   
   Camera Kit Webを使ったWebARアプリ作成の際にこの記事が役立つと嬉しいです。頑張ってください。

エンジニア募集中！

デザイニウムはWebAR ができるウェブエンジニア を募集中です💻話題のApple Vision Pro向けアプリをはじめとした、多彩なXRコンテンツの開発に携われる刺激的な環境です🤩✨テーマを持ってR&Dに取り組むことも歓迎しています。就業はフルリモートなので、全国どこからでも応募できます🏢

www.wantedly.com 案件増加！webARで次世代のデジタル体験を作りたいウェブエンジニアを募集 - 株式会社デザイニウムのWebエンジニアの採用 - Wantedly

募集要項をみる

カジュアル面談も大歓迎です。ぜひご応募お待ちしています👍