Riveの新しいCLIを使うと、コーディングエージェントはプロジェクトファイルを通じてインタラクティブなグラフィックを扱える。エージェントはRive Markup Language（RML）、Luauスクリプト、シェーダーを書き、CLIにコンパイル、検査、テスト、描画を依頼できる。人間はローカルプレビューを見ながらデザインを修正できる。RiveのスタッフはこのCLIを9月11日にテクニカルプレビューとして公開した。Riveのダウンロードページを9月27日に確認したところ、Early Accessの項目に掲載されていた。

このチェックリストはRiveのドキュメントに沿っている。BIG CHANGEが確認したのはドキュメントのみで、CLIのインストール、ファイル作成、エージェントが生成したグラフィックのテストは行っていない。Riveの動画チュートリアルでは、人間とエージェントが協働する想定の手順を紹介している。

大きな変化

  • 何が変わったか：Riveのシーンに、コーディングエージェントが使えるテキストベースの制作経路が加わった。エージェントはプロジェクトフォルダー内のRMLを編集し、CLIは.rivをランタイム向けに出力し、.revをEditorでさらに作業するためのファイルとして出力できる。
  • なぜ重要か：デザイナー、フロントエンド開発者、ゲーム開発者は、ほかのプロジェクトファイルと並べてソースの変更を確認し、反復作業中にCLIのチェックを利用できる。それでも、製品に組み込む前に、描画されたデザインと操作性を人間が評価する必要がある。
  • 今後の注目点：ローカルの試作をWebに移すかは別の判断だ。スクリプトを含むファイルには署名済みの--publishビルドが必要だ。クリーンな.rivビルドにもアカウントファイルとの紐付けとCadet以上のワークスペースが必要になる。デプロイ前に条件を確認し、完成したグラフィックも点検すること。

ドキュメントに沿った作業チェックリスト

  1. アクセス権を確認してインストールする。Riveがサポート対象として挙げるのはApple Silicon搭載Mac、Linux x86_64、Windowsだ。Getting StartedガイドにはWindows用とmacOS・Linux用の個別インストール手順がある。ページ内の最新のWindows手順を使う。インストール後にrive doctorを実行する。コマンドリファレンスにはrive --versionも記載されている。プレビュー版なので、実際にインストールしたバージョンを記録しておこう。Riveは9月11日の発表で、プレビュー期間中のCLIは制限なく無料だと述べた。プレビュー期間中という当時の説明はCLIの恒久的な価格を示すものではない。現在のプラン一覧はRiveアカウントと組み込みEditor Agentを対象としている。公開前に最新の利用条件を確認する。
  2. テキスト形式のプロジェクトを作り、プレビューを開く。 rive create myprojectでプロジェクトを作成し、scene.rml、rive.yaml、エージェント向けの指示をAGENTS.mdとCLAUDE.md、.gitignoreを用意する。次にrive myprojectを1つのターミナルで実行する。Riveによると、CLIはフォルダーを監視し、保存時に再ビルドして出力先はmyproject/build/myproject.rivである。ひな型のシーンにはアートボード、タイムライン、ステートマシンが含まれるが、描画内容はまだない。最初のプレビューは暗い四角形になる。
  3. コーディングエージェントにプロジェクトフォルダーと具体的なデザイン課題を渡す。RiveのAI AgentsガイドはClaude Code、Cursorなど、ファイルを読み書きしてシェルコマンドを実行できるエージェントを挙げる。生成される指示ファイルには、対応オブジェクトやプロパティを調べるためのrive docsとrive schemaを使う方法が記される。RMLはXML形式で、要素がRiveの型、属性がプロパティを表し、入れ子構造でオブジェクト同士をつなぐ。エージェントは.luauスクリプトや.wgslシェーダー、プロジェクトのアセットも編集できる。プレビューを見ながらレイアウトや挙動を調整できるよう、段階を分けて作業させよう。
  4. ビルドとその内容を確認する。エージェントにrive myproject --verifyを実行させる。コンパイルは行うが、.rivを書き出さず、rive inspect myproject --summaryを実行すると問題点やオブジェクト数が報告される。解決後のシーン全体についてはrive inspect myproject --jsonが案内されている。プレビューを開かずに配布可能なローカルファイルを作る場合はrive myproject --onceを使って未署名の.rivを書き出す。これらのチェックでコンパイルエラーや、シーン内のオブジェクトの不足・想定外を見つけられる。RiveのRMLガイドは、ビルドが成功してもグラフィックが意図どおりに見えたり動いたりするとは限らないと注意している。
  5. 重要な状態をキャプチャする。 rive myproject --screenshot=out.pngはウィンドウを開かずにPNGを描画する。Riveのサンプルでは、--advance=1sでアニメーション開始後のフレームを指定する。--viewport=390x844で画面サイズを指定し、バインドデータには--data=battery/level=100を指定する。模擬クリックには--pointer=click@120,60 --advance=20を使う。値や座標は自分のシーンに合わせて選ぶ。状態やビューポート寸法を変えて画像を比較し、自分でも確認しよう。アニメーション進行を指定しない場合、--advanceは作成時の静止ポーズを表示するもので、必ずしもアニメーションの開始フレームではない。
  6. プロジェクトにある場合はスクリプトテストを実行する。 rive myproject --testはプロジェクト内のLuauのTestsテストスクリプトを実行する。Riveは自動チェック用に--verify --format=jsonと--test --format=jsonを案内している。ビルドやテストに失敗すると終了コードは0以外になる。エージェントは結果を使ってソースを修正できる。テストは記述されたアサーションだけを対象とするため、テストされない操作も確認しよう。
  7. ローカルの試作ができたら、アカウントを使う手順を選ぶ。ランタイム用の.rivは実行時のアセットで、.revはRive Editorで編集するファイルだ。Riveによると、ローカルでの作成、プレビュー、検証、テスト、スクリーンショット撮影はサインアウト状態でもオフラインでもできる。rive loginを実行する必要があるのは：--publish、--rev、rive push、rive pullとリモートアカウントファイルのインポート。Editorから書き出したバックアップで始める場合はrive create myproject --from-rev=myfile.revを使えばログインせずに取り込める。アカウントファイルから始める場合はrive create myproject --from-remote-fileをログイン後に実行する。後者ではプロジェクトがそのファイルに紐付く：rive push myprojectはリビジョンをアップロードし、rive pull myprojectを実行するとEditor側の変更を取り込み、確認後にローカルのシーン、スクリプト、アセットを上書きする。pullの前にローカルの変更を確認すること。
  8. 公開前に署名と書き出し制限を確認する。 rive myproject --publishは署名済みの.rivを書き出し、ログインを必要とする。Riveによると、Webランタイムと同社CDNは未署名のスクリプトを拒否するため、Web用スクリプトを含むファイルにはこの手順が必要だ。--publishでは透かしが入る場合がある。Riveのコマンドリファレンスによると、透かしのない.rivを作るには、rive pushでプロジェクトをアカウントファイルに紐付け、そのファイルをCadet以上のワークスペースに置く必要がある。シーンにスクリプトがなくても透かしの条件は適用される。--rev=<path>もログインが必要で、--onceまたは--publishを併用できる。ただし、これはEditor用ファイルの書き出しであり、ランタイム用ファイルの代わりにはならない。デプロイ前に現在のアカウントプランと実際の書き出し結果を確認しよう。

RiveにはEditorに組み込まれたAI Agentもある。Editorのサイドバーから開き、EditorのプランとAIクレジット条件が適用される。このガイドのフォルダーとターミナルを使う方法は、CLIと組み合わせる外部コーディングエージェントの手順だ。両者はインターフェースも料金体系も異なる。

出典・関連資料