コンシューマー向けweb3企画を送り出すプロダクトスタジオ「Senspace」でCTOをしているりょーまです。この記事では2024年2月にユーザーが爆発的に増えたweb3 Social NetworkであるFarcasterの特徴的な機能であるFramesについて紹介し、開発時のTipsやウケるFramesの要素まで深ぼっていきたいとおもいます。
Framesの概要
FramesはFarcasterのクライアントアプリ上に実装されている機能のひとつで、SNSのタイムライン上で任意のミニアプリを実装できます。例えば、ミニゲームをプレーしたり、買い物をしたり、ミーム画像をつくったり、募金したり、まだできることは限られていますがさまざまな用途に使えます。
Frames機能に対応するかどうかは、クライアントアプリによって違うのですべてのアプリで使えるわけではありません。本記事では、Farcasterチームが開発しており、Farcasterエコシステムで一番利用されているWarpcastを前提に進めていきます。
Framesの例
これまで、Framesをつかったアプリケーションをリリースしたなかで得られた開発にあたっての知見やFramesと相性の良いプロダクトについて具体的に見ていきたいと思います。
トランプカードNFTを使ったゲームFrames
カードNFTを引いて、互いに場にカードを出して勝負する2人で行うゲームです。カードのドローから勝負、結果通知までのすべてのゲーム体験がFramesで完結しています。
ミーム画像をつくってNFTとしてMintするFrames
あらかじめ用意されたテンプレートに、文字を入れてミーム画像をつくることができます。つくった画像はシェアだけでなく、NFTとしてミントすることもできます。
俳句からAIアートを生成してNFTとしてMintするFrames
俳句を入力すると、それをLLM (llama2) が解釈し、それをもとにStableDiffusionが画像を生成してくれます。生成した画像はシェアだけでなく、NFTとしてミントすることができます。
クッキーを購入するFrames
4種類のなかから欲しいものをカートにいれて、購入サイトにいくことができます。リリース当初は外部サイトで決済が行われていましたが、Framesに新しく実装されたFrames Transactionをつかえばタイムラインから直接購入もできるとおもいます。
ミームコインのエアドロップ枠確認とClaimができるFrames
MintClubというトークン発行・トークンエアドロップができるサービスと連携し、エアドロップのEligibility確認とそのClaimができます。コミュニティが肝になるミームコインとSNSタイムラインから直接トークンの受け取りができる体験は相性が良いとおもいます。
Farcaster Framesの事例をいくつか紹介しましたが、なんとなく感覚をつかめたでしょうか？
SNSのタイムラインから直接トラザクションを投げたり、サービスを使う体験は想像以上になめらかです。既存のサイトをFrames対応させることも比較的容易なのでぜひ使ってみてください。
Framesの実装について
FramesはOGP(Open Graph Protocol)でつくられています。フロントエンド開発者はおなじみのFacebookやXでリンク共有したときに出るあれですね。
基本的には画像とタイトルを入れますが、Framesにはボタンやテキスト入力欄、ボタンを押したときの挙動を設定することができます。
特徴的なのが、ウォレットでのトランザクションリクエストに対応しているところです。Ethereum、Base、Arbitrum、Degen、Gnosis、Optimism、Zoraに対応しています。またテスト・開発環境として、Sepolia、Arbitrum Sepolia、Base Sepolia、Optimism Sepoliaのテストネットが使えます。
スマホではCoinbase Walletのみですが、SNSのタイムラインからそのままトランザクションを送れます。体験したらわかりますが、このUXは革命的な滑らかさです。
おすすめライブラリ
frog
Framesの開発に特化したHonoベースのライブラリで、ReactのみならずNextなどにも対応しています。すこし実装にクセがあるところもありますが、デバッグ用の確認画面を自動で生成してくれたりかなり便利です。
onchainkit
Coinbaseが出しているフレームワークでReactのコンポーネントやHooksなどが揃っています。既存のプロジェクト場合はこれがおすすめです。
開発Tipsと開発環境
Framesのレスポンスタイムは5秒まで（描画は別）
Framesの仕様でサーバーからのレスポンスが5秒以上かかるとタイムアウトしてしまうのであまり重い処理はできません。タイムライン上での利用がメインなのでそもそも時間がかかるのはUXとしても良くないので早いレスポンスを心がけましょう。
ただし、画像（fc:frame:imageメタタグに入れるもの）の描画にはレスポンスタイムの期限はないのでどうしても時間がかかってしまうものについては、画像の描画処理のほうに入れるのも一つの手です。
また、メタトランザクションの実行をまったり、生成AIのレスポンスをまったりするなど明らかな待ち時間が必要になるユースケースではローディングFrameを入れるのがよいとおもいます。
Framesのトップ画像はキャッシュコントロールできる
画像のレスポンスヘッダーに'Cache-Control': 'max-age=300'のように入れることで、一度CastしたFramesの画像をあとから変えることができます。この例では最後の描画から5分以上たっているものについては、再度サーバーに画像を取りにいって更新するようになります。
例えば、対戦ゲームで対戦相手を探すためにキャストするユースケースで、対戦が終わって結果が出たものは結果を表示したいときに使うことができます。
Framesそのもののレスポンスヘッダーではなく、Framesの画像のレスポンスヘッダーにいれることに注意が必要です。
Cast Intent URLs でユーザーのキャストを促す
Warpcastではリンクから直接キャストできるようにする導線がつくれます。例えば、Framesでつくったものをシェアしてもらうときに使えます。
埋め込みやメンションはもちろん、チャンネルへの投稿やリプライとしての投稿もできるようになっています。シェア導線はSNSアプリケーションをつくるには必須の機能になるのでぜひ活用しましょう。
Programmable DC(Direct Cast)でWarpcastから通知する
Farcasterユーザーをメインターゲットにしたプロダクトでユーザーの注目を集めるためにはDirect Castはとても有効で、フィードに投稿するとはまた違った効果があります。特定のユーザーに関する情報やアプリケーションの新機能などを伝えることに特に有効です。
Farcasterにはシステムから自動でDCをおくることができるProgrammable DCが実装されています。誰でも使えるので試してみてください。
デバッグツール
Framesのデバッグを行うにはいくつか方法がありますが、おすすめは以下の2つです。
1. Frog DevTool
Frogを開発モードで立ち上げて該当URLの最後に/devをつけるとすぐに確認することができます。画像のパスやステートなど開発に必要な情報を見ながらテストできます。
2. Warpcast DevTool
実際のWarpcast環境でテストできます。描画時の条件分岐にFarcasterアカウントを取得する処理を入れているときなど実際にどのように動くかを確認するときに使うことができます。また、画像のキャッシュクリアが効いているかどうかなど本番を想定したテストはこちらで行うことをおすすめします。
ウケるユースケース
これまでたくさんのFramesをつくってきましたが、それぞれユーザーからの反応は明らかに異なりました。いまの仮説としては、アクション、オンチェーンアクション、NFTとしてのミント、シェアなどの要素があるFramesが人気なようです。
これまでつくってきたものは以下のようなものです。
- フラッシュ暗算に回答して正解したら難易度に応じたNFTがミントされる。
- Farcasterのあるチャンネルへの投稿内容から生成したAIアートを閲覧できるギャラリー。
- framesの中で俳句を書いて送るとAIアートが生成されて、NFTとしてミントしたりシェアしたりできるおもちゃ。
- ミームコインのエアドロップ対象かを確認し、Frames Transactionでタイムライン上からClaimできる便利ツール。
- ガチャガチャを引いてポイントを稼ぎ、宝くじを当てるゲーム。Framesにはリーダーボードやフリーミント、コレクション閲覧などを実装しました。
- カードNFTで対戦し賞金を稼ぐゲーム。カードのドロー、ゲーム進行、リワード確認、ユーザー招待などすべての体験をFramesで完結させました。
ウケた順でいうと6、5、4、3、1、2でした。がちゃがちゃとカードのゲームはコンテンツとしてもかなり充実しているので他と単純に比べるのは難しいですが、何かアクションした結果をNFTとしてミントできたり、タイムラインにシェアできたりする導線をつくることがとても重要だとわかりました。
また、トークン残高が確認できるframesが流行っていたりするので、すでにあるトークンとの掛け合わせではまた違うニーズがあると思います。
この仮説もまだ検証しがいのあるものですが、とりあえず半年ほど試した結果が以上です。
これから試したいと思っているのは既存のサービスにFramesを付け加えるところです。これまで試したユースケースは新しくFramesを前提につくったアプリケーションなので、すでに価値を提供しているサービスをFrames対応させてみたいと思っています。Frames自体はOGPの応用なので対応は比較的簡単なのでどなたか一緒にやってみたいという方は声かけていただいたらお手伝いします。
Farcasterは毎週のように大型、中型のアップデートがあり目まぐるしく変化していきますが、これからも面白いアップデートがでてきたら記事化、日本語化していきたいと思います。
もしよければ、X、Farcasterのフォローお願いします！
Discussion
非常に面白い記事でした！！
また、Unchainで勉強会開催して欲しいです！！