メインコンテンツまでスキップ

Snapchat Web Lens

Snapchat Web Lensは、Snapchatの中でLensとして動作するWebアプリです。iOSとAndroidで、全画面かつ縦向きで実行されます。ビルドのzipをMy Lensesからアップロードし、審査に通ると、プレイヤーは名前で検索するかSnapcodeをスキャンしてゲームを見つけられます。

Web LensはどのPlayCanvas製品でも構築できます。このページでは、create-playcanvasのweb-lensスターターから始められるEngine、React、Web Componentsのコードプロジェクトと、Editorで構築したプロジェクトについて説明します。

Web Lensはベータ版のため、以下の制限の一部はSnapによって変更される可能性があります。最新のルールは、SnapのPlatform requirementsとCapabilities and restrictionsのページを参照してください。

Lens向けに設計する​

要件ゲームへの影響
縦向きLensは全画面の縦向きで実行されるため、9:16の画面向けに設計します。横向きには対応していません。
セーフエリアSnapchatはLensの上部に独自のコントロールを描画します。ヘッドアップディスプレイ（HUD）はenv(safe-area-inset-*)のインセット内に収めます。インセットを使用するには、viewportメタタグにviewport-fit=coverが必要です。
ネットワークなしLensは自身のzip内のファイルしか読み込めないため、すべてのスクリプト、モデル、テクスチャ、フォント、サウンドを同梱します。
相対URLビルド内のすべてのURLは、./assets/game.jsのような相対パスにする必要があります。/assets/game.jsのようなルートからの絶対パスでは、画面が真っ白になります。
サイズzipは最大8 MBで、そのルートに最大1 MBのindex.htmlを置きます。
永続化localStorageとIndexedDBはLensを開くたびに空の状態から始まるため、進行状況はWeb Lens APIのストレージに保存します。

多くのスマートフォンは120 Hzで動作するため、動きは経過時間に合わせてスケールします。また、オーディオはタップをきっかけに開始し、ページが非表示になったらゲームを一時停止します。詳しくは、SnapのRuntime environmentガイドを参照してください。

Web Lensスターターから始める​

Engine、React、またはWeb Componentsのコードプロジェクトでは、create-playcanvasのweb-lensスターターから始めます。

npm create playcanvas@latest my-lens -- --starter web-lens

このスターターは、上記の要件をすでに満たした小さな縦向きのゲームです。

  • src/lens.cssは、スマートフォンでは画面全体を使い、幅の広いブラウザーでは9:16の列を表示し、HUDをSnapchatのコントロールから離して配置します。スマートフォンのブラウザーは自身のノッチしか報告しないため、開発サーバーではそれらのコントロールが占める領域を表示します。
  • vite.config.tsは、ビルド内のすべてのURLを相対パスにします。
  • src/lens.tsは、Web Lens APIを通じてゲームをSnapchatに接続します。各プレイのスコアをリーダーボードに送信し、プレイヤーのベストスコアをSnapchatのストレージに保存し、プレイヤーのBitmojiを表示します。

自分のゲームにするには、src/dodge-game.tsのゲームを置き換え、それ以外はそのまま残します。プロジェクトのREADMEに置き換えるファイルと残すファイルが記載されているため、AIコーディングエージェントにも役立ちます。

スマートフォンでゲームを試すには、npm run dev -- --hostを実行し、表示されたネットワークURLを開きます。

Web Lens APIを使用する​

Web Lens APIを使用すると、リーダーボード、プレイヤーのBitmoji、起動をまたいで保持されるストレージをゲームで利用できます。Snapchatの外では、組み込みのスタブが固定のデータで応答するため、どのブラウザーでも開発できます。

  • コードプロジェクトでは、npm install @snap/web-lens-apiでインストールします。スターターにはすでに含まれています。
  • Editorでは、パッケージのdistフォルダーにあるsnap-api.jsをスクリプトアセットとしてプロジェクトにコピーし、Loading TypeをBefore Engineに設定します。これにより、APIがwindow.snapchatとしてインストールされます。APIはzipに同梱する必要があるため、Settings > External Scriptsには追加しないでください。

起動時にinit()を一度呼び出し、各機能を使用する前にサポートされているかを確認します。サポートされていない場合でも、ゲームをプレイできる状態に保ちます。

import snapchat from '@snap/web-lens-api';

await snapchat.init();

if (snapchat.isSupported('leaderboards')) {
    await snapchat.leaderboards.submitScore({ score: 42 });
}

ビルドをパッケージ化する​

スターターから作成したプロジェクトでは、次のコマンドを実行します。

npm run package

このコマンドはゲームをビルドし、アップロードのルールに照らしてビルドを確認し、dist/にzipを書き出します。zipが8 MBを超える場合やindex.htmlが1 MBを超える場合、ビルドが自身のファイルをルートからの絶対パスで参照している場合、別のホストから何かを読み込む場合、または<iframe>などLensのサンドボックスがブロックするものを使用している場合は、zipを書き出しません。報告される問題には、それぞれ修正するファイルが示されます。

npm run startは、同じ制限のもとでプロダクションビルドを配信します。そのため、ビルドの外にあるファイルへのリクエストは、Snapchatと同じようにブラウザーのコンソールでエラーになります。

Editorのプロジェクトでは、Publishダイアログからビルドをダウンロードし、index.htmlがzipのルートに来るように、ビルドフォルダーの中身をzipにします。Windowsでは、相対パスを壊すバックスラッシュを書き込むPowerShellのCompress-Archiveは使用しないでください。unzip -lでzipを確認し、8 MB以下であることを確かめます。

Snapchatにアップロードする​

  1. My Lensesにサインインし、新しいLensを作成してWeb Lensのオプションを選び、zipをアップロードします。
  2. Lensに名前、512 × 512のPNGアイコン、5秒の720 × 1280のプレビュー動画を設定します。
  3. 審査に提出します。承認されると、プレイヤーは名前で検索するかSnapcodeをスキャンしてゲームを見つけられます。

チェックリストの全体は、SnapのPublishingガイドを参照してください。