WarpcastのFramesの作成方法
Warpcastのフレームの作成方法と動作方法について。NFTフレーム、トランザクションフレームなど、概要を説明します。MatchaやFarcasterの広範な0xコミュニティが作成した例もあります。フレームはWarpcastソーシャルメディアフィード内に埋め込まれたネイティブなWeb3アプリケーションです。フレームは今年2月に初めてリリースされ、Farcasterのアクティブユーザー数を20倍に増加させました！今すぐWarpcastに登録してください！多くの初期ユーザーがフレームに続いてWarpcastに戻ってきただけでなく、フィード内に暗号通貨のネイティブな機能があるイノベーションにより、数万人の新規ユーザーも獲得しました。
では、Frameは何がそんなに面白いのか、Frameは発売以来どのように改良されてきたのか、Warpcast Frameはどうやって作るのか？この記事では、FarcasterのFrameの使い方や作り方について、Matchaや幅広い0xコミュニティが作成した例を交えてご紹介します。
Warpcastフレームとは？
Frameとは、Farcasterのポスト内で動作するhtmlベースのマイクロアプリケーションです。Frameにアクセスすると、あなたのFarcaster IDとリンクされたウォレットアドレスが、あなたの体験をカスタマイズするためのメタデータとして使用されます。
あなたのFarcasterとのやりとりやオンチェーン取引に関するデータを取得することで、Warpcaster Framesはどのような基準があなたに当てはまるかを確認し、あなたに特化した旅を作り上げることができる。
初期のフレームは機能が限られていた。最初の使用例は以下の通り：
NFTコレクションなどのデータを取得し、ミントページへのリンクとともに表示するイメージギャラリー。
閲覧者がナビゲートできる複数のスライドによるプレゼンテーション。
ユーザーの入力を取得し、回答の概要を生成する投票。
フレームはより洗練されたものへと急速に発展し、やがて次のような複雑な機能を追加していった：
ワープを使ってフレーム内に直接NFTを作成。
フレームを使ったNFTのカスタマイズ。
FrameとリンクされたNFTを使ったインタラクティブなジェネレーティブ・ジャーニー（ベースクエスト参照）
エンドユーザーとしては、Frameは静止画が表示され、それをインタラクティブに操作する方法が限られているため、まだシンプルに感じるかもしれませんが、開発者にとっては、Farcasterのデータやオンチェインの履歴に基づいてFrameをカスタマイズする方法がたくさんあります。例えば、Matcha Autoを使用してスワップしたユーザーに報酬を与えるフレームを作成し、1つのアカウントから繰り返し請求されるのを防ぐことができる。
さまざまな使用ケースに対応するFramesの作成
抹茶と0xは、Framesを立ち上げて以来、Framesの様々な用途を探求することに忙しくしてきた。ここでは、私たちが作成したFramesの例や、Warpcastコミュニティからの他の興味深いプロジェクトを紹介しながら、Framesのユースケースをいくつか取り上げます。
ウォレット・アクティビティ Frames
DEXアグリゲーターとして、Matchaを使うことはスマートコントラクトのインタラクションに依存し、それはオンチェーンで記録される。そのため、Matchaで取引を行ったFarcasterユーザーに、ワンクリックで請求できるトークンをプレゼントするFramesを構築することができます。
Matcha Autoを使用して50ドル以上取引した場合、OPトークンを請求する。
フレームをクリックすると、接続されているウォレットアドレス（EOA、つまり外部所有口座）をチェックし、Matcha swapスマートコントラクトと相互作用しているかどうかを確認します。そうでない場合は、資格を得るために必要なことを教えてくれます。
私たちは当初、Matcha Auto on Baseを使って5ドル以上のスワップをした人を対象にこのフレームを立ち上げ、最終的に150万デゲン（～1万ドル）以上をフォロワーにプレゼントしました！その後、WETHやWBTCのスワップ請求など、他のチェーン用のバリエーションを作成し、最近ではOptimismでスワップしたユーザーにOPトークンをプレゼントしました。
トークン価格フレーム
0xフレームは、0x Warpcastアカウントによって投稿された懸賞金申請（下記のBountycasterセクションを参照）に応じて、Farcasterコミュニティ内の開発者によって作成されました。
0xを使ってトークンの価格を取得する。
バウンティ受賞者の一人は、トークンの価格をチェックするこのフレームを提出し、その後、インフィード取引も利用できるように取り組んでいます。
Bountycasterフレーム
Bountycasterは、ユーザーが@bountybotをタグ付けしてCastを送信すると、ボットがそれを処理し、達成基準の報酬額などの重要な情報を抽出し、バウンティーのリストに追加します。
バウンティはbountycaster.xyzにあります。
バウンティは自動的にフレームとしてレンダリングされ、ユーザーはバウンティを管理したり、報酬プールにより多くの資金を拠出したり、完了したバウンティのトランザクションを確認したりすることができます。
NFT Mintフレーム
NFTフレームは最初の実験後すぐに登場し、進化を続けています。フレーム内のNFTは、NFTの迅速な共有と造幣の手段として最も一般的に利用されています。このフレームは、NFTグラフィックのプレビューと、それを購入できるマーケットプレイスへのリンクを提供します。さらに最近の機能では、Warpを使用してフィード内で直接NFTを造幣することができます。
Baseでのガスレススワップを記念するフレーム
0xのこのフレームは、Tx Relay API経由でBase上でガスレストランザクションが開始された記念に、Zoraミントを使用してNFTを鋳造することができます。NFTフレームは最も人気のあるフレームタイプで、自分の作品を視聴者と直接共有したいクリエイターにとって、ほとんどの摩擦を取り除くことができます。
カスタマイズ可能なNFT
単にNFTを鋳造するよりもエキサイティングなのは、フレーム内でカスタムNFTプロフィール画像を作成できることです。まだ4つのボタンに制限されていますが、これはジェネレーティブアートワークを探求し、造幣局の成果物を得るための楽しい方法です。
各スライドでは、髪型、服装、アクセサリーなどの新しい要素を追加し、完成したら一定の金額でミントすることができます。mykboisやcustompunksなどがその例です。
フレームとグラフィックNFT（アニメーションGIFを含む）は非常に相性が良い。Framesの開発が進むにつれ、これは明らかな次のステップのように思えるが、エンジニアリングの課題は当然より複雑であり、Farcasterのストレージ制限が障害になるかもしれない。
ソーシャルエンゲージメントフレーム
Framesの利点の1つは、特定のユーザーからのインタラクションのみを許可するようにゲーティングできることである。これにより、ユーザーが投稿に「いいね！」やリキャストをしたり、キャスターをフォローしなければ先に進めないようなエンゲージメントゲーティングが可能になる。
このような要件の多用は、間違いなく全体的なユーザーエクスペリエンスを少し低下させるが、インセンティブを通じてフォロワーを増やしたいブランドやインフルエンサーにとっては、大きな利点となる。
投票と登録
フレームのより一般的なタイプの1つは、投票フレームです。これは、複数の選択肢から回答を選ぶシンプルな質問で、ユーザーは希望する選択肢に対応するボタンを選択し、過去の投稿の集計を示す回答を受け取ります。
登録フレームは、テキスト入力フィールドを利用し、ユーザーからのフォームのようなレスポンス収集を可能にします。
フレームを使った暗号取引
Farcaster貢献者の継続的なエンジニアリング努力により、Onchain暗号トランザクションがWarpcast Frameから直接行えるようになりました。つまり、Frameとやりとりするだけで、フィードから直接トークンを交換できるのだ。この体験は少し型破りだが、うまくいく！
0xを使ってトークンを交換するフレーム。
トランザクションフレームはトークンの交換に使用されてきたが、最近では予測マーケットで強力なユーザーベースを発見した。
Warpcastフレームの作り方
フレームはHTMLと特別なメタタグを使って作られる。Frameの機能はFarcasterエコシステム特有のものです。
フレームを作るには2つの方法がある：ゼロからコーディングする方法と、コンポーネントをカスタマイズするだけのフレーム・ビルダーを使う方法だ。ここでは後者の方法を中心に説明し、上級者向けにさらに詳しい情報へのリンクを提供する。
コード不要のフレームビルダーを使う
フレームビルダーを使ってフレームを作成するのは、技術的な知識がなくても簡単に始められる方法です。Neynar、Thirdweb、Pinataなど、ノー・コードやロー・コードでFrameを作成し、バックエンドの作業を代行してくれるウェブサイトがいくつかありますが、洗練されたフル機能のアプリを期待するにはまだ少し早いようです。
Farcasterは猛烈なスピードで開発されているので、多くの変化が期待できる。最近のアップデートでは、Zoraでミントへのリンクを共有すると、自動的にフレームが作成されるようになった。
Neynarフレームスタジオ
NeynarはFarcasterを構築するために特別に作られたツールキットで、FarcasteログインやFarcasterボットなどのソリューションがあります。
Framesの立ち上げ以来、NeynarはFrame Studioを立ち上げ、ビルダー体験を合理化し、Vercelへの依存を置き換えるために、月額9ドル（フィアットまたは暗号）のサブスクリプションでノーコードのFramesを可能にし、より高いティアでは追加のサポートとコンピュートを提供している。
Neynarは、複数のステップを持つフレームを作成したい非開発者のための良いオプションです。少し計画を立てれば、かなり魅力的なフレームジャーニーを作成することができ、オーディエンスがフィードで直接ミントをすることもできる。
ゼロから始めることも、テンプレートを使ってイメージギャラリー、ミーム、リンクツリー型名刺、eshopチェックアウト、ミントにつながるNFTストーリーなどを作成することもできます。
フレームスタジオ
Frame Studioビルダーを使えば、ボタン、テキスト入力、登録など、ほとんどのニーズに合ったFrameを作成できますが、高度なFrameを作成するにはコーディングのスキルが必要です。Mintボタンは現在、Ethereum、Base、Zoraネットワーク上のZora、Manifold、HypersubへのMintリンクにのみ対応しています。
Glass
Glassはプライベートベータ版の有料Frame構築アプリだ。様々なフレーム・タイプをカバーし、それぞれにインタラクションやゲーティングの仕組みがあり、様々なユースケースに合わせて選択することができる。
現時点では、Glass FrameはプレビューFrameとインタラクションに続くレスポンスFrameのみを表示する。
モバイルでガラスフレームを作成
サブスクリプションは6.99ドルで、フィアットまたは暗号で支払う（支払い方法には、Base、Optimism、またはEthereumメインネット上のいくつかのトークンが含まれる）。Glassはモバイルでも動作するので、外出中のクリエイターには便利かもしれない。
QuestCaster
このフレームビルダーは、Base L3 Syndicate Frame Chainをベースに構築された、かなり簡素化されたアルファ版だ。アップロードしたNFTを鋳造するために、ユーザーがいいね！を押すか、フォローするか、トークン保有者になる必要があるゲート型NFT鋳造を作成するためのものだ。テストでは、このツールはリンクの生成に失敗し、ミントを行うことができませんでした。あなたのセットアップではうまくいくかもしれませんし、開発が一時停止しているかもしれません。
高度なコードなしフレーム
Framesisの可能性は飛躍的に伸びているので、すべての可能性を本当に活用するためには、少し専門的な知識が必要です。
より高度なFrameを作りたい読者で、アプリ開発の基本的な知識はあるが、本格的なコーディングの専門知識はないという方は、Andrew ChuがBubbleで実演したコードなしのウォークスルーが役に立つかもしれない。
あるいは、ChatGPTで使えるフレーム作成GPTでAIに頼ることもできます。試行錯誤しながら、理想のフレームを開発することができるでしょう。
フレームのテスト
Frameを作ったら、それが動くかどうか確認してください！Warpcastには、Frameを公開する前にテストできるFrameバリデーターが内蔵されています。warpcast.com/~/developers/framesにアクセスして、あなたのFrameのURLを入力して試してみてください。
開発者としてFrameをコーディングする
プロの開発者にとって、ゼロからFrameを作るには複数の方法があります。他の場所に掲載されているすべての情報を網羅しようとするのではなく、ここではあなたが始めるのに役立つリソースをいくつか紹介します：
フレームとデザーシャルの未来
Farcasterは、イーサリアム空間における数多くの非ソーシャル（分散型ソーシャルメディア）アプリの一つに過ぎない。多くの競合が存在する中、Framesはユーザーを1つのチャンネルに統合し、ソーシャル・ネットワークの火付け役となるために必要なイノベーションである。