TECHNOLOGY
- FRONT END

2024.12.07

ノーコードでWebGLが作れるUnicorn.studio、サイトにWebGLを埋め込む

こちらは、Mavs Advent Calendar 2024 7日目の記事です🐺！

🌲🌲🌲

ハコザキです！
今回はUnicorn.studioで作成した表現を、実際のサイトに埋め込む方法について解説します！！

はじめに

Unicorn.studioについてや、実際の制作例などについては、
↓の記事で紹介しております！！

ノーコードでWebGLが作れるUnicorn.studioとは？実際にWebGL作ってみました
https://ma-vericks.com/blog/nocode-webgl-tool-unicornstudio

結論

Unicorn.studioを埋め込む方法は以下の方法があります。

iframe埋め込み
シンプルにコード埋め込み
SDKを使う
ノーコードツール「Framer」「Webflow」への連携

注意：無料版はロゴが表示される

プロ版のサブスクに加入しないと添付画像のMade with unicorn.studioのロゴは非表示になりません。

その1 iframe埋め込み

Unicorn.studioの編集画面右側にある、 Embed Codeの中身をそのままコピペするだけで表示されます！

<iframe src="https://unicorn.studio/embed/Unicorn.studioのProjectID" width="693px" height="433px" loading="lazy"></iframe>

その2 コード埋め込み（シンプルなHTMLサイト向け）

こちらもUnicorn.studioの編集画面右側にある、
Embed Codeの中身をそのままコピペするだけで表示されます！
インラインスタイルでwidth, heightが指定されていますので、大きさを変更したい場合はこちらを変更すると反映されます。

その3 SDK（例：Astro）

モダンなWebアプリケーションへのUnicorn.studio製WebGLの埋め込みには、公式で提供しているSDKを使用して簡単に埋め込むことができます。

今回はサンプルとしてAstroに埋め込んでみます！
※少し脱線しますが、Astro周りの整備を行います。

準備

Astroとは?

Astroは静的サイト生成に特化した、現代のWeb制作ではよく使われているWebフレームワークです。

シンプルな記述が特徴で、ビルド時にjsをなるべく取り除いて必要な部分だけJavaScriptを残すため、ページを開いてから表示されるまでの速度がかなり速いです…！

当たり前ですが、Next.jsの場合はReact.js、Nuxtの場合はVue.jsをプロジェクト単位で入れる必要があります。 AstroはReactやVueをコンポーネント単位で利用することができます。（1プロジェクト内で分けて書くことはあまりないと思いますが…！）

Astro独自の記述でも実装することはできますが、より複雑な実装が必要になった際には ReactやVueなどで実装したコンポーネントも利用できるといったこともできます。
また、Astroはアイランドアーキテクチャを採用していることも大きな特徴です。
公式サイトでわかりやすく解説してますので興味のある方はどうぞ！

Astro公式サイト

Astro初期構築

npm create astro@latest

以下のような設定で初期構築を行います。

npm create astro@latest

> npx
> create-astro


 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro-webgl-unicornstudio

  tmpl   How would you like to start your new project?
         Include sample files

    ts   Do you plan to write TypeScript?
         No
      ◼  No worries! TypeScript is supported in Astro by default,
         but you are free to continue writing JavaScript instead.

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro-webgl-unicornstudio
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

※今回はTypeScriptは使用しません

cd astro-webgl-unicornstudio/
npm run dev

Astroの初期画面が表示されていればokです！

src/layouts/Layout.astroにスクリプトタグを記載します。
is:inlineディレクティブを含めることが重要で、
Astroによるバンドル処理をスキップするようにします。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
    <!-- ↓追加 -->
    <script
      is:inline
      src="https://cdn.unicorn.studio/v1.3.2/unicornStudio.umd.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>

続いて、src/components/TopMv.astroを作成し以下を記載します。

<div data-us-project="Unicorn.studioのProjectID" style="width: 100%; height: 100%">
</div>

<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>

ProjectIDは、data-us-projectにUnicorn.studioの編集画面右側にあるProject IDの値を入れます。

これだけで表示されるようになります！

その他、divタグに以下のデータ属性を付与することでカスタマイズできます！

data-us-scale … レンダリングのスケールを指定します。値を小さくするとパフォーマンスが向上します（例: 0.25〜1）
data-us-dpi … ピクセル比（DPI: dots per inch）を設定します。高い値に設定すると高解像度のレンダリングになります
data-us-lazyload … trueにすると要素がスクロールしてビューに入るまでシーンが初期化されません
data-us-disableMobile … trueにするとモバイルデバイスでシーンの読み込みを無効にします
data-us-alttext … SEO（検索エンジン最適化）のための代替テキストを指定します。これは <canvas> タグ内に設定されます
data-us-arialabel … aria-label 属性に設定するテキストを指定します

画像や動画での出力にも対応

また、画像や動画としてダウンロードすることも可能です。

画像出力形式

サイズ・比率、PNG, JPG, WEBPなどの拡張子を指定して出力することができます。

動画出力形式

また、動画にも対応しており、Framerateなどの指定ができます。

もちろんですが、画像や動画の場合はマウスイベントやスクロールイベントは動作しませんのでご注意を…！

おわり

今回はUnicorn.studioで作成したWebGLを、
実際のサイトに埋め込む方法についてご紹介しました。

紹介した方法の他にも、ノーコードツールへの埋め込みもUnicorn.studio公式が提供しています。
Framer製のサイトには、Framer Componentという形で、 Webflowでもスクリプトタグをそのまま埋め込むことで簡単に表示ができるみたいです。
Framerについてはチュートリアル動画もありましたのでご紹介します！！
https://youtu.be/eUcbPbnvnrU?si=qda3bQU4Q9gzLna8