コンシューマー向けweb3企画を送り出すプロダクトスタジオ「Senspace」でCTOをしているりょーまです。この記事では先月2月にユーザーが爆発的に増えたweb3 Social NetworkであるFarcasterのFramesについて紹介していきます。
これまで、3つほどFramesをつかったミニアプリをリリースしてみたので開発にあたっての知見やFramesと相性の良い企画について具体的に見ていきたいと思います。
Framesの概要
FramesはFarcasterのアプリ上に実装されている機能のひとつで、SNSのタイムライン上で任意のミニアプリを実装できます。例えば、買い物をしたり、ミーム画像をつくったり、募金したり、まだできることは限られていますがさまざまな用途に使えます。
Framesの例
ミーム画像をつくってNFTとしてMintするFrames
あらかじめ用意されたテンプレートに、文字を入れてミーム画像をつくることができます。つくった画像はシェアだけでなく、NFTとしてミントすることもできます。
俳句からAIアートを生成してNFTとしてMintするFrames
俳句を入力すると、それをLLM (llama2) が解釈し、それをもとにStableDiffusionが画像を生成してくれます。生成した画像はシェアだけでなく、NFTとしてミントすることができます。
クッキーを購入するFrames
4種類のなかから欲しいものをカートにいれて、購入サイトにいくことができます。リリース当初は外部サイトで決済が行われていましたが、Framesに新しく実装されたFrames Transactionをつかえばタイムラインから直接購入もできるとおもいます。
Farcaster Framesの事例をいくつか紹介しましたが、なんとなく感覚をつかめたでしょうか？
SNSのタイムラインから直接アクションをとれる体験は想像以上になめらかです。既存のサイトをFrames対応させることも比較的容易なのでぜひ使ってみてください。
Framesの実装について
FramesはOGP(Open Graph Protocol)でつくられています。フロントエンド開発者はおなじみのFacebookやXでリンク共有したときに出るあれですね。
基本的には画像とタイトルを入れますが、Framesにはボタンやボタンを押したときの挙動を設定することができます。
特徴的なのが、ウォレットでのトランザクションリクエストや署名も対応しているところです。いまはBaseやOptimismなど限られたチェーンのみかつ、スマホではCoinbase Walletのみですが、SNSのタイムラインからそのままセキュアにトランザクションを送れます。体験したらわかりますが、このUXは革命的な滑らかさです。
便利なライブラリ
frog
Framesの開発に特化したHonoベースのライブラリで、ReactのみならずNextなどにも対応しています。API Routeをつかい、少し実装にクセがありますが、デバッグ用の確認画面を自動で生成してくれたり便利です。
いまはベータ版ぽい。
onchainkit
Coinbaseが出している、半公式？ぽいフレームワークでReactのコンポーネントやHooksなどが揃っています。既存のプロジェクトに導入する場合はこれがおすすめな気がします。
開発環境やその他
Framesはまだ出たばかりでメインネット対応はしていましたが、つい最近Base Sepoliaのテストネットに対応したところです。テストするのにお金が必要だった…
そのため、いまはまだlocalhostのネットワークで実際にテストすることはできません。これはタイムラインに乗るframesからのトランザクションのセキュリティを考慮したものなので甘んじて受け入れる必要がありそうです。
また、サーバーからのレスポンスが5秒以上かかるとタイムアウトしてしまうのであまり重い処理はできません。タイムライン上での利用がメインなのでそもそも時間がかかるのはUXとしても良くないので早いレスポンスを心がけましょう。
ウケるユースケース
これまで私は3種類のFramesをつくってきましたが、ユーザーからの反応は明らかに異なりました。いまの仮説としては、アクション、ミント、シェアの3要素のあるFramesが人気なようです。
これまでつくったのは以下の3つです。
- フラッシュ暗算に回答して正解したら難易度に応じたNFTがミントされる。
- Farcasterのあるチャンネルへの投稿内容から生成したAIアートを閲覧できるギャラリー
- framesの中で俳句を書いて送るとAIアートが生成されて、NFTとしてミントしたりシェアしたりできるおもちゃ
ウケた順でいうと3、1、2でした。何かアクションした結果NFTがミントできたりシェアできたりすることが重要だとわかりました。
ただし、トークン残高が確認できるframesが1部界隈で流行っていたりするので、すでにあるトークンとの掛け合わせではまた違うニーズがあると思います。
この仮説もまだ検証しがいのあるものですが、とりあえず1ヶ月ほど試した結果が以上です。
これから試したいと思っているのは既存のサービスにFramesを付け加えるところです。これまで試した3つのユースケースは新しくFrames用につくったミニアプリなので、すでに価値を提供しているサービスをFrames対応させてみたいと思っています。Frames自体はOGPの応用なので対応は比較的簡単なのでどなたか一緒にやってみたいという方は声かけていただいたらお手伝いします。
Farcasterは毎週のように大型、中型のアップデートがあり目まぐるしく変化していきますが、これからも面白いアップデートがでてきたら記事化、日本語化していきたいと思います。
もしよければ、X、Farcasterのフォローお願いします！
Discussion
非常に面白い記事でした！！
また、Unchainで勉強会開催して欲しいです！！