Figma AI（Figma Make）で作成したプロトタイプをRovo Dev CLIに手伝ってもらいながらGoogle Apps Script（GAS）にデプロイしてみた

2025年10月20日

りっくま Rickma

記事一覧へ

りっくま

こんにちは、りっくまです。

今回は、Figma AI（Figma Make）で作成したプロトタイプを Rovo Dev CLIに手伝ってもらいながら Google Apps Script（GAS）にデプロイしてみた体験を共有します。

< 目次 >

何でやろうと思ったか
Figma Makeから GASまでの道のり
1. Figma Make
2. RovoDev CLI
RovoDev CLIのインストール
3. GASへのデプロイ
やってみた感想

何でやろうと思ったか

りっくまは社内アジャイル推進活動をしています。りっくまの会社では、社内からの「ITでこんなことを実現したい」という要望を Jira Product Discoveryにまとめています。リックソフトも似たような使い方しているクマね。　

▶ 社内の業務効率化を目指した AI活用ユースケース記事

研修を終えた新卒エンジニアに開発してもらうネタを探すのが楽になる！リックソフトの Jira Product Discoveryユースケース

要望リストの
「Gmail、Slack、Jira、Googleカレンダー、Teamsなど、日々のタスクや通知を一元管理できるダッシュボードが欲しい！」
というリクエストに対応するために着手しました。

とはいえ社内メンバーにいちからヒアリングをするのは単純な何もない状態での口頭や文章だけのインタビューやアンケートはコミュニケーションコストがかかるので、まずは「簡単なプロトタイプ作成して、インタビューやアンケートのインサイトデータを得たい」という声がチームから出ました。

そこで最近話題の生成AIコーディング（Figma Make/Figma AI、 Rovo Dev CLI）を使って、
「タスク管理画面」を作ってみました。

タスク管理画面の画面イメージ

Figma Makeから GASまでの道のり

1. Figma Make

Figma Makeを使って、左側チャットで指示をしながらプロトタイプを作成します。

「コードをダウンロード」でフォイルをローカルに落とします。

※Figma Make自体の解説や使い方は省きます

※2025年7月中旬時点では、Figma Makeは beta版で Reactベース（Next.jsっぽい構成）で書かれており、他の Figmaツールと連携できるとされています。そのままではローカルで動かせないので、ダウンロードしたファイルを RovoDev CLIでコードを書き換えてもらいます。

2. RovoDev CLI

コードの書き換えは Claude Codeや Gemini CLIでも可能ですが、今回は RovoDev CLIを使用します。

Geminiなどのチャットでコードを貼ってやり取りもできますが、全体のコードを見ながら反復してもらうのであればIDEなどで対話するものが良いです。

RovoDev CLIのインストール

まずは ACLIをインストールする（すでにACLIがインストールされている場合はバージョンに更新）今回は Windows版を利用します。
Atlassianプロファイルに移動し、APIトークンを作成を選択してスコープのない APIトークンを作成
ターミナルで、Atlassianアカウントで認証するために、次のコマンドを実行：

acli rovodev auth login
インタラクティブモード（IM）でRovo Devを開くために、このコマンドを実行します：

acli rovodev run
Vite 環境に書き直し
次世代の Web アプリケーションを支える超高速フロントエンドビルドツールの「Vite」の環境に書き直しました。
＜Figma Makeからダウンロードしたコード解凍、Vite 環境に移植＞
まずは localhostで Figma Makeで動いていたものが表示されるのを目指します。
指示としては「このコードをローカル環境で動かしたい」的なことを投げて対話しながらエラーを解消していきました。コードを解析してViteを提案してくれて pakege.jsonなどを書いてもらいました。
特に Figma Makeで落としたファイルはインポート文に @version など内部で使われるような特殊な記述されていたり、Nextjsで扱われるようなコードを自分の手書きなおすのは無理だったので大変有難く思います。
localhostで動くようになったら、それを社内の環境で共有できるようにします。
今回はホスト先として GASを選定し、さらに簡単に GASで展開しやすいように html一枚にまとめる形にするためのビルドを目指します。
自分の権限は社内環境で公開するにはモノが限られており、Google Workspaceの環境で利用できるGAS（Google Apps Script）を利用するにしました。通常は jsファイルで書くものですが、今回は簡単なデモアプリを単純に公開するためなので distで吐き出した静的ファイルをまとめて index.htmlで出力させました。
「vite-plugin-singlefile」プラグインや single HTMLなどの単語で RovoDev CLIに頼めば頑張ってくれます。作成された htmlファイルを開いて Figma Make/localhostと同様に動く htmlを確認します。

3. GASへのデプロイ

App Scriptでプロジェクト作成
動作するhtmlをファイルに追加
◦ ※GeminiのCanvasでインタラクティブで出力したHTMLも同様に貼ればGASで社内共有が可能です
コード.gs を全て消して、 doGet()関数とHtmlService Class のcreateHtmlOutputFromFileメソッドを使って、index.htmlを読み込ませて「デプロイ」を押してデプロイします。