本動画は、GoogleのAntiGravityをスマートフォンに導入し、ビーチからモバイルデバイスでウェブサイトをコーディングし、GitHubを通じてリアルタイムで公開する実践的なワークフローを解説するものである。Diego SouzaによるOmni AntiGravity Remote Chatプロジェクトを活用し、モバイルからAntiGravityを遠隔操作しながらGemini 3 Flashで生成したコードをGitHub Pagesへ自動デプロイする仕組みを、認証設定からCI/CDパイプラインまで段階的に紹介している。特に、ファイングレイントークンによるセキュアな権限管理、静的サイトホスティングの無料活用、そして開発・本番環境の分離といったベストプラクティスにも触れながら、AI支援によるリモート開発の可能性を実証する内容となっている。
スマホでビーチからウェブサイトを作った話
皆さん、このウェブサイトは私がビーチにいる間にスマートフォンとOpen Cloudを使って作ったものなんです。今回の動画では、AntiGravityを使って同じことをする方法をお見せします。基本的には同じプロセスなんですが、AntiGravityをスマホに入れて使うんですね。
面白いのは、ビーチにいる間に撮った写真をどんどんサイトに追加するよう指示していったんです。それだけじゃなくて、このサイトはリアルタイムでオンライン公開されているんですよ。GitHubを使った完全無料でのリアルタイム公開方法も紹介していきます。料金は一切かかりません。では何が起きているのか理解していきましょう。
チャンネルサポートへの感謝
いつもいいねを押してくれる皆さん、チャンネル登録してくれる皆さん、ありがとうございます。この人工知能チャンネルをスポンサーしてくれているメンバーの皆さんには特別な感謝を。メンバーの方々は、WhatsApp、MCP、PDF読み取りなどの統合を含むインテリジェントエージェントに関する限定動画や、その他の限定コンテンツにアクセスできます。
前提知識について
まず最初に言っておきたいのは、GitHubや開発について既に詳しい方にとっては、これからやることは特に目新しいものではないかもしれません。でも最近プログラミングを始めた方が多いので、このツールについて説明する必要があります。これは本当に重要なことですから。
Omni AntiGravity Remote Chatの紹介
今日使う最初のプロジェクトは、Remote ChatのOmni AntiGravityです。これはDiego Souzaが作ったもので、彼は以前の動画でも紹介したOmnioutの作者でもあります。Omnioutはすべてをすべてに接続するシステムですね。でも今日はOmni AntiGravityについて話します。これはGoogleのAntiGravityと接続するものです。
この写真を見てください。スマホで人工知能とチャットしていて、AIがAntiGravityを操作してくれているんです。
GitHubの基本設定
まずGitHub内で知っておくべきことは、まだアカウントを作っていなければ作れますが、GitHub内にはサイトをアップロードできる機能があるということです。このサイトは私たちが静的サイトと呼ぶシンプルなサイトである必要があります。
静的サイトを簡単に説明すると、基本的に表示するための画面が一つだけあるサイトです。お店の宣伝をしたいとか、ウェブデザイナーが自分の作品を紹介したいとか、そういった用途に最適なんです。情報を置いてリンクを張って、InstagramやLinkedInに人を誘導するようなものですね。とてもシンプルなページで、ログインとか統合とか複雑なバックエンドはありません。これは表示専用のページで特別なことは何もないので、無料なんです。
GitHubに入って新しいリポジトリを作ります。私のプロジェクトは「video celular」という名前にします。説明は「スマホでプログラミングして動画を公開する方法」とします。きちんと設定できていますね。公開設定は必ずパブリックにしてください。プライベートにするとサイトが表示されず、設定もできません。それ以外は何もする必要はありません。readmeのignoreも不要です。ライセンスを追加したければ選べますが、問題ありません。リポジトリを作成をクリックすると、空のリポジトリが作られます。
今のところ問題ありませんね。必要なのはこれだけです。このアドレスもコピーしておく必要があります。github.com/inteligencia/video_celularですね。皆さんの場合は違うものになります。プロジェクト名とGitHubアカウント名が入ります。
Omni AntiGravity Remote Chatのセットアップ
Omni AntiGravity Remote Chatのリポジトリに来ると、実行するコマンドがあります。npx antigravity-remote-chatです。Node.jsのインストールとこの設定を行います。私が追加で行った設定もいくつかあります。Ngrockのトンネルを有効にするというものです。これでビーチからアクセスできるアドレスが取得できました。私の場合がそうでしたね。
要約すると、AntiGravityが開発モードで動作し、Diegoが作ったこのサーバーと通信します。私たちはスマホからこのサーバー上のページにアクセスするわけです。
AntiGravityを実行するには、このコマンドを実行する必要があります。antigravity –remote-debug –import 7800です。既にAntiGravityを開いている場合は閉じて、この特定のコマンドで開き直す必要があります。そうしないと接続できません。
私の場合は、scripts内にある特定のスクリプトを使っています。Windows WSL Remoteというものです。特にWSLとWindowsの接続を行うブリッジを作れない人向けです。私の場合はできなかったので、自分で作ったこのスクリプトを使いました。Diegoに送ったら、彼がここに追加して動くようにしてくれました。
皆さんの場合は、AntiGravityフォルダに入ってこのコマンドを入力すれば、AntiGravityが動き始めます。別のウィンドウを開いてnpx antigravity-remote-chatをクリックすると通信が確立されます。分かりましたか? AntiGravityを起動してからサーバーに接続するんです。私の場合はこのスクリプトを実行します。
このスクリプトが全プロセスを実行してくれます。自動的にAntiGravityを起動してサーバーを立ち上げます。しばらくすると、すべて準備完了で動作していると表示されます。
ほら、AntiGravityがちゃんと起動しました。正しいフォルダに配置しました。video antigravity celularというフォルダでテストを行います。Omni antigravityのウィンドウには、すべて動作していて設定済み、接続済みと表示されています。素晴らしいですね。
皆さんの場合、Omniを開いたときに接続できれば、完璧です。うまく動いています。私の場合はNgrockを使っているので、既にアカウントがあって登録済みです。この動画を録画するためにウェブアドレスにアクセスしますが、スマホから直接アクセスしても同じように動作します。
パスワードが設定されているので、接続すると、もう完璧にAntiGravity内に入れます。この画面で、たとえばモデルを選択できます。Gemini 3 Flashにしてみます。そして「Matrixスタイルのペットショップサイトを作って」と入力します。
送信すると、面白いことに、私のAntiGravityが動き始めます。ここで起きていることが両側に反映され始めます。スマホで見ていたら、スマホにも表示され始めるわけです。ただしこの場合、AntiGravityはスマホから遠隔操作されているので、使われている画面では何も起きていないように見えます。何も見えないんです。
Gitのインストールと設定
サイト生成の間に、インストールする必要があるプログラムがこのGitです。GitはGitHubとAntiGravityの通信を行います。おそらくAntiGravityには既にデフォルトでインストールされているか、使おうとするとインストールを促してくれると思います。私の場合は既にコンピューターにインストールされていたので、インストールは不要でした。
私の設定では、常に承認を求めるようにしています。assetsのディレクトリを作りたいと言っているので、問題なく作成してもいいと伝えます。生成された画像がいくつかあって、なかなか面白そうです。assetsを作り始めて、その画像をassetsフォルダにコピーしています。
GitHubトークンの設定
ここで重要なポイントです。GitHubアカウント内でSettingsに行って、サイトをリモートで更新できるように設定します。一番下までスクロールするとDeveloper settingsが表示されます。ここで設定を行います。
認証方法の一つはリモート認証を行うことで、これはGitHubのすべてにアクセスできる興味深いソリューションです。でも今回の場合は、fine-grained tokensを使います。特定のページだけを操作するための特定のトークンを作成します。
この部分が重要なのは、GitHub全体を操作する権限を与えないようにするためです。作業中のプロジェクトだけに限定します。リモートで作業しているわけですし、AIツールがどんなものか分かりますよね。何か変なことをしたがるものです。
トークン名は「video antigravity」とします。video celularだけを選択します。これだけが必要です。content のread and writeの権限を与えます。読み書きができるようにするわけです。これでトークンが生成されます。このトークンは後で必要になるので保存しておいてください。
ちなみに、30日後とか7日後とか、有効期限を設定できます。
完璧です。このプロジェクトのこの時点で、初期生成が完了しました。最初のページを作りました。皆さんの場合はプロジェクトを続けることになりますが、私の場合はここで止めます。
すべてうまくいっていれば、index.htmlをクリックすると、このindexというファイル名が表示されるはずです。このファイル名は標準的な公式ファイル名で、これを初期化しようとするんです。
サイトの初回確認とGitHub連携
テストでクリックしてみると、ほら、「目覚める動物」、赤い薬、青い薬、退出と表示されて、サイトが既に動いています。画像もいくつか配置されていて、ちゃんとしています。面白いですね。エフェクトまで作ってくれています。かっこいいでしょう。このエフェクトを見てください。素晴らしいですね。画像生成も頼んでいないのに既に生成してくれています。
ここでCommitというボタンが表示されます。これはGitHubにアップロードするためのものです。英語でデフォルトのフレーズを入力しますが、私たちは独自のフレーズを書きます。「このプロジェクトをcommitしてリポジトリにアップロード」と、先ほど作成したリンク、私の場合はvideo celularを入力します。
プロジェクトを送信すると、設定を行い、プロジェクトのアップロードを試みて、いくつかの承認を求めてきます。アップロードの際に認証されていないと言われて問題が発生するので、キーの入力を求められます。そこで生成したトークンを入力します。
この認証の段階では、初めてなのでいろいろうまくいかないことがあります。最初の試行で動作しなければ、AIと会話して認証を機能させてください。一度認証できれば、すべて完璧で、スムーズに進みます。
私の場合は設定済みです。これからpushを行ってこの大きなプロジェクトをアップロードします。「今pushして」と伝えます。
アップロードを試みます。認証は完了していて、トークンも設定済みです。これからは楽しいだけです。成功したと表示されました。Gitが更新されて、すべて完璧です。
GitHub Pagesの設定
次に何をする必要があるか? GitHubに行ってコードが更新されたかどうか確認します。
これは設定されていないGitHubの画面で、pushもされていません。F5を押してコードで更新されるか見てみましょう。この素晴らしいコードが表示されるはずです。
ここからは設定だけです。サイトは既にアップロードされています。Settingsをクリックします。Settingsの後、Pagesに行って、mainに設定します。古いバージョンだとmasterになっていることもありますが、一般的に今日の標準バージョンはmainです。保存をクリックします。
そしてActionsに来ます。Actionsにこれが表示されます。Pages Build and Deployment。ページを今オンラインに配置しているところです。この茶色い表示が消えたら、ページが既に動作しているということです。Matrixのサイトが既にオンラインです。
これには少し時間がかかりますが、そんなに長くはありません。この時点で検証エラーが出る可能性があります。何か修正が必要だと言われるかもしれません。コードに何か失敗やエラーがあると、このテストを通過せず、サイトがアップロードされません。でもこの時点が、サイトが機能するかどうかを見る最も重要な瞬間です。
緑のチェックマークが出ました。ページが既にオンラインになっているということです。Pagesに戻ってF5を押すと、何が表示されるか見てみましょう。inteligencia1000.github.io/video_celularです。Unpublishというボタンがあって、サイトを非公開にしたい場合に使えます。クリックすると、オンラインで私たちのサイト、目覚める動物を見ることができます。
リアルタイム更新のテスト
これからは、修正を依頼するたびに、Actionsを見ていれば、修正が完了次第サイトが更新されます。分かりますか? 自動化されたんです。認証が設定されて、すべて設定済みです。何か修正したら、サイトが自動的にアップロードされます。
とてもシンプルな修正を依頼してみます。「赤い薬」と書いてあるところ、ボタンを赤くしてくださいと言います。そして「青い薬」のところは、ボタンを青くしてくださいと。
簡潔に書くと、「メインページで赤い薬のボタンを赤色に、青い薬のボタンを青色にしてpushして」となります。
通常はこんなやり方はしませんよね。普通はpushしてアップロードする前にテストして、物事が機能するか確認して、検証して、ローカルテストを行います。でも今回は無茶をしているので、皆さんにテストしてもらって物事が機能するか見てもらいたいので、すべてを一度に送って、承認させて、アップロードさせて、終わりです。
期待しているのは、すぐに確認を求められることです。そして、一度設定されて承認されれば、ここに表示されるはずなのは、新しいActionが現れることです。
ほら、もう表示されました。自動的に表示されましたね。分かりますか? 更新して、commitして、pushしたら、ページが既に更新を始めています。そしてすぐに、ここが緑になったら、サイトに入るとボタンが既に赤と青になっているはずです。
注意点と今後の展開
言ったように、これが最終プロジェクトや本格的なプロジェクトだったら、このやり方はしません。これはかなり安全ではないんです。機能するかどうかも確認していない更新を送っているわけですから。
ほら、既に承認されました。サイトに入ってみましょう。F5を押せば、ここに表示されるはずです。変わりました。
全部青くなってしまいましたね。基本的に私が言った通りです。検証せずに修正を行ったので、両方のボタンが青くなってしまいました。
でも今後は、スマホで直接やっていることすべて、少し時間を待てばサイトで更新されます。
Open Cloudでも全く同じことができます。Open Cloudと会話しながらこの認証プロセスを行うんです。Open CloudにはGitHub専用のスキルがあります。そのGitHubスキルを設定して、キーを入力すれば、Telegram経由でもWhatsApp経由でも、どこからでも同じことができます。
ただし違いは、AntiGravityを使わないということです。Open Cloudを使うことになります。でも正直に言うと、AntiGravityの方がプログラミングが優れています。
下のコメント欄に、皆さんの考えを書いてください。
このプロジェクトの最大の強みは、プロジェクトのアップロード、セキュリティ検証、コード検証といったプロセス全体を自動化できることを理解し始めることです。
私たちがスキップしたすべてのステップ、機能するか確認するためのテストをしただけでしたが、次回プロジェクトを行うときは、これらすべてを考慮する必要があります。重要な情報の漏洩がないか検証するエージェントを作ったり、適当にアップロードする前に他のさまざまな検証を行ったり、何より最も重要なのは、開発バージョンと本番バージョンを作って、開発バージョンで既に承認されたものだけを本番にアップロードすることです。
これらすべてのステップ、すべてのプロセス、起きていることすべてを、もっと詳細に説明します。既にDiegoと話していて、トレーニングコースを作って、この自動化をステップバイステップで説明する方法について議論しています。下のコメント欄に、このトレーニングに参加したいかどうか書いてください。そうすればクラス全体を編成できるかどうか分かります。
このような動画を見続けるためにチャンネルをサポートしたい方は、メンバーになってください。メンバーは、インテリジェントエージェントに関する限定動画や先行公開動画にアクセスできます。
いいねを押してください。ありがとうございました。
コメント