3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

enebular CLIがリリースされました! Antigravityとenebularを使ってバイブコーディングにチャレンジ

3
Posted at

最近、仕事での開発もAIエージェントによる補助の割合が増えてきて、開発スピードが格段に上がってきています。特にコーディングはほとんど人の介入が不要になってきたので、コーディング向けのAIエージェントの性能が半年前に比べて格段に上がってきたと思います。AIエージェントの性能だけではなく、使い方のノウハウも溜まってきているので、それも大きな要因となっています。

Googleのコーディング向けAIエージェントツール「Antigravity」

仕事では使ったことなかったのですが、GoogleのAntigravityを使ってデバイスの開発を行ったら、感動して勢いで本を書くほどだったので、クラウド上の環境を提供しているenebularとAntigravityを使えば、ささっと便利なアプリを作れるのではないかと思いました。

Antigravityのインストールと設定は簡単です。GoogleアカウントでサインインすればAIはGeminiを使ってくれるので、特に細かい設定は不要です。初期設定もデフォルトの選択肢のまま進めればOKです。

今回は、お試しとしてAntigravityにToDoアプリを作ってもらいます。
enebularのクラウド実行環境でフロントエンドの配信とバックエンド、ToDoの保存にはデータストアを使用します。
ここでAIに、お願いする前にenebularの新機能の紹介と準備手順、enebularでの実装方法を紹介します。

enebular CLI

これも最近の話ですが、enebularでCLIをリリースしました。
コマンドラインからenebularの操作ができるツールで、以下のことが行えます。

  • ファイルアセット登録
  • ファイルアセット更新
  • ファイルアセットのコピー
  • プライベートノードアセットのコピー
  • フローアセットのコピー
  • フローのバージョン作成
  • プライベートノードアセットのバージョン作成
  • ファイルアセットのバージョン作成
  • クラウド実行環境の一括設定変更
  • クラウド実行環境へのデプロイ

enebularのWebページで行っていた操作をコマンドでできるということで、AIエージェントとの相性はばっちりだと思いました。

インストール方法

環境の準備もAIにお願いしても良いですが、簡単なので手動でやりました。
Node.js v22以上の環境をPCに準備して、以下のコマンドでCLIをインストールできます。

npm install -g @uhuru/enebular-cli

インストール出来たらenebularのダッシュボードの右上のプルダウンリスト①からアカウント設定②を開きます。
image.png

アカウント設定の中にアクセスキー/シークレットキー項があるので、作成するアクセスキーの説明③(ここでは自分用アプリの開発用に使うのでそう入力しています)を入力し、作成④をクリックします。
image.png
するとアクセスキーとシークレットキーが表示されるので、コピーボタンからコピーしてメモしておくか、CSVとしてダウンロード⑤しておきます。いずれかの方法で、記録しておかないと2度と表示されないので注意してください。終わったらOK⑥をクリックします。
image.png

アクセスキーとシークレットキーは、PCの環境変数として設定しておくか、設定ファイルを所定の場所に置けばenebular CLIはそれを参照します。詳しくは、こちらの認証項を見てください。

enebular ZIPファイルデプロイ

enebularといえば、Node-REDでアプリを実装するイメージが強いかもしれませんが、Node.jsもしくは、Pythonで実装したアプリもZIPファイルにまとめてデプロイできます。
AIに開発してもらう場合、Node-REDのフローよりもコードで実装した方が早いし、効率的です。
そのため、今回は個人的にも使い慣れているNode.jsでアプリを作ってもらうことにしました。

AIに開発してもらった流れ

Antigravityでは、AIモデルをGemini、Claude、GPTの中から選べます。今回はGoogleの無料アカウントでサインインしているので、軽量で高速なGemini 3 Flashを使用しました。(たぶんこれで十分)

1.計画の作成

最初にお願いしたのは、計画の作成です。
enebularの情報は、ググってもらうよりも事前に必要な情報が記載されているページを共有しています。

enebularのクラウド実行環境とデータストアを使って、ToDoリストを作りたい。
まずは、日本語で開発計画を作ってください。
クラウド実行環境の開発は、Node.jsを使用して、ZIPファイルデプロイする方法を取ってください。

次のURLは、関連するenebularのドキュメントです。参考にしてください。
- https://docs.enebular.com/ja/executionenvironment/overview
- https://docs.enebular.com/ja/GetStarted/ZIPFileDeployment.html
- https://docs.enebular.com/ja/datastore/overview
- https://docs.enebular.com/ja/EnebularCli/
- https://www.npmjs.com/package/@uhuru/enebular-cli
- https://www.npmjs.com/package/@uhuru/enebular-sdk

すると次のような計画が作成されました。
image.png
image.png
image.png

この中で、ユーザーレビューが必要な項目として、データストアの準備とenebular CLIの設定でした。
enebular CLIの設定は済んでいるので、データストアの準備を行います。
そもそもenebularのプロジェクトの作成もまだでしたので、プロジェクトの作成とデータストアの準備を行いました。

2.enebularのプロジェクト作成とデータストアの準備

今回、フローは使わないので、デフォルトのプライベートノードの利用はOFFにしました。
image.png

プロジェクトの作成が終わったらデータストアのテーブルを作ります。
カスタム設定の方を選び、計画に記載されているメインキーとサブキーを設定します。
image.png
image.png

テーブルの作成が終わったら設定タブを開き、テーブルIDをメモしておきます。

3.計画を進めてもらう

計画の内容的に良さそうだったので、そのまま承認して進めてもらいます。
実装が進み、途中でenebularのプロジェクトIDとデータストアのテーブルIDを求められたので、それを教えてあげます。
(enebularのプロジェクトIDはプロジェクトの左のメニューから設定で確認できます)
途中途中で、コマンドの利用許可などが求められるので、許可していきます。

しばらくするとアプリの実装とenebular CLIを使ったファイルアセットの追加まで終わってました。
クラウド実行環境の作成は、CLIで行えないようなので、手動で作成します。

4.クラウド実行環境の作成

クラウド実行環境は、ZIPファイルアーカイブのデプロイにチェックを入れ、ランタイムとアーキテクチャは計画と使用しているPCに合わせて作成しました。

image.png

5.デプロイして動作確認

作成したクラウド実行環境の設定タブから実行環境IDをメモして、AIに教えてあげます。
するとZIPファイルの作成とファイルアセットの更新、クラウド実行環境へのデプロイを一連の流れでやってくれるスクリプトを作ってくれました。
これで、修正してデプロイする一連の流れをやってくれそうです。

デプロイまでが完了して、APIの動作確認の手順が提示されました。
image.png

この時点で、クラウド実行環境の設定が終わっていなかったので、それとテストも次のようにお願いしました。

クラウド実行環境の設定とテストを実施してください。

しばらくすると設定が終わりましたがテストがいつまで経っても終わりません。
どうやらHTTPトリガーのURLを知るためにいろいろWebページを調べ始めてました。
CLIでは取得できそうにないため、ここは中断して直接教えてあげます。

ついでにAPIのテストと共にフロントエンドも作ってもらいます。

クラウド実行環境のHTTPトリガーのURLは以下です。
- {クラウド実行環境の設定で確認できるHTTPトリガーのURL}/

APIのテストが終わった後にフロントエンドも実装してほしい。

APIのテストを繰り返し行い、修正版のデプロイを数回した後に同じクラウド実行環境で、フロントエンドの配信も追加され、ToDoアプリが完成しました。

6.理想の形へ

誰からでも見られるブラウザから自由にToDoリストを追加、閲覧できる状態では使いにくいですし、リマインド機能も欲しいと思いました。
そこで、LINE公式アプリと連動する形にできないかと思ったので、それの改修をお願いしました。

LINE公式アカウントからToDoリストの追加、閲覧、リマインドをできるようにしたいので、改修を計画してください。

すると計画は次のように表示され、特に問題が無かったため、そのまま進めます。
image.png

LINE公式アカウントの準備が必要なため、それは別途手動で準備しました。
(この操作は手慣れていため、すんなりできましたが、細かい手順はAIに聞けば答えてくれます)

開発を進めてもらうにあたって、デプロイしてテストというサイクルは自動的に回してくれるのですが、なかなか解決されない時があります。これは、AIからクラウド実行環境の入り口と最終的な出口でしか状況が見られないことに原因があると思います。
そのため、こうなったときはいったん止めて、クラウド実行環境のログからエラーが出ている箇所を中心にコピーして、AIに渡してあげることで解決していました。
本当は、CLI経由でログを取得できればスムーズに回ると思うので、これはアップデートに期待したいと思います。

こうして、何度かデバッグが繰り返され、最初に出来上がったのは、LINEからToDoリストに追加するのに「追加 牛乳を買う 2026/05/04 12:00」のようにスペース区切りでコマンド、タスク、日付、時間を書かなければいけないので、非常に手間でした。
IMG_1678.jpg

そのため、以下のようにお願いして修正してもらいます。

スペース区切りで追加、内容、日付と入力するのが手間です。
他に良い方法がありませんか?

すると次のように提案してくれたので、この仕様で進めてもらいました。

「追加 [内容] [日付]」と手入力するのは確かに大変ですよね。LINE Botならではの**「日時選択カレンダー(Datetime picker)」**を使うと、タップだけで直感的に期限を設定できるようになります。

提案する新しい操作フロー
ユーザー: 「牛乳を買う」とだけ送信(「追加」や日付は不要)
Bot: 「『牛乳を買う』の期限を選んでください」というメッセージと**「日時を選択」ボタン**を返信
ユーザー: ボタンを押すとカレンダーが開くので、日時を選んで「選択」をタップ
Bot: タスクを登録!
これなら入力の手間が大幅に減ります。

実装の修正方針
メッセージの自動判別: 「一覧」以外のテキストが送られてきたら、それを「タスクの内容」と見なして日時選択ボタンを表示します。
ポストバック(Postback)イベントの処理: ユーザーがカレンダーで選んだ日時を受け取って、データストアに保存する処理を追加します。
この「カレンダー選択方式」にアップデートしてもよろしいでしょうか?よろしければすぐにコードを書き換えます!

最終的に入力は楽になり、時間になったらリマインドもされるようになりました!
IMG_1679.jpg

ここらへんで、Geminiの無料プランのクオータを使い切ったため、ここまでとしました。
この状態でも使えるため、しばらく使用してみたいと思います。

最後に

AIを使えば、自分で利用する便利アプリであれば、思い付きでいろいろ作れそうですね。
実は今回作った、同じようなアプリをすべて手実装でも作ってみたのですが、それなりに時間がかかりました。
しかし、今回AIに作ってもらった時間は、1時間ほどであっという間に作ってくれたという印象です。
最初に実装されたソースコードの完成度はちょっと低いものの、動かしてあっという間に原因を分析し、修正をかける周期が早いというのが、特徴的でした。
今回は、enebular CLIでAIからenebularの環境を操作できるようになったのも大きいですね。
世間的には、AIをうまく扱うための「ハーネスエンジニアリング」という言葉も出てきているので、もうちょっと環境を整えてあげれば、もっと短時間で効率的に開発できると思いますので、理想的な手順が出来たら紹介したいと思います。

最後の最後に

冒頭で、書いたAntigravityでデバイス(M5Stack)を開発するための手順を記載した書籍を出版したので、ご興味ある方はぜひ!

表紙.jpg

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?