🚀

FramerのCode ComponentsでWebGLをレンダリングする

2025/01/20に公開

はじめに

StudioやFramerなどのノーコードWebビルダーでWebGL演出を導入する大きな価値は、コンポーネントがプロジェクトに疎結合で、外部アセット化される点にあると考えています。
WebGLのような複雑な演出は、アプリケーションと密結合になりやすく、保守性の低下やバグの温床になりがちです。しかし、外部アセットとして切り離して管理できるようにすれば、保守性が向上し、不具合のリスクも軽減できます。
ただし、演出コンポーネントを切り離すことで、DOMと連動した演出やステートフルな演出が難しくなる場合もあります。そのような高度な演出を実装したい場合は、フルスクラッチで構築するのが適切でしょう。

現時点でノーコードWebビルダーにWebGLを組み込む方法としては、主に以下の2つが考えられます。

  • iframe化する
  • FramerのCode Componentsとして実装する

たとえば、splineunicorn.studioなどのツールも上記の方法を採用しているはずです。

また、Framerにはコンポーネントの共有機能も充実しており、最近ではFramerThingsのようなプラットフォームも登場しています。今後はsplineやunicorn.studioといったビルダーとの相性もさらに高まり、ノーコードWebビルダー向けのコンポーネントマーケットプレイスがどんどん登場するんじゃないかと思っています。そうしたプラットフォームの充実によって、Web制作環境は大きく変化していくかもしれません。

今回は、FramerのCode ComponentsでWebGLをレンダリングする方法を説明します。公式のDocにより詳細があるので、そちらを参照してください。

Code Componentsを作成する

新しいコード コンポーネントを作成するには、アセットパネルに移動して 「コード」を選択します。次に、「コード ファイルの作成」をクリックします。単一の React コンポーネントをエクスポートする新しいコードファイルが表示されます。

WebGLのレンダリングにはr3fを利用しました。外部ライブラリは
import { Canvas, useFrame, useThree } from "@react-three/fiber"
するだけでOKでした。

あとはLayersにドロップするだけです。

共有する

Framerのすべてのコンポーネントは、ESモジュール上に構築されています。つまり、すべてのコードコンポーネントには、以下のような共有可能な一意のURLがあります。

https://framer.com/m/hogehoge.js@hogehogehogeho

コンポーネントにはpropsを渡すことも可能で、unicorn.studioのcomponentを見てみると、以下のように設定に必要な様々なpropsが追加されています。

ちなみに、コンポーネントは単一で、projectIDを渡すことによってレンダリング結果を変えているようですね。コンポーネント内で、projectIDでデータをfetchしてるという感じじゃないでしょうか。

まとめ

Framerは、すべてのコンポーネントがESモジュール上に構築されていることで、コンポーネントの共有がしやすい設計になっています。サードパーティのコンポーネントライブラリや、マーケットプレイスがどんどん誕生していきそうな気がしています。

今回できたdemo

Discussion