水曜日, 7月 9, 2025
水曜日, 7月 9, 2025
- Advertisment -
ホームニューステックニューススマホでアプリ開発! Cursorのウェブ・モバイル版を試してみた #cursor - Qiita

スマホでアプリ開発! Cursorのウェブ・モバイル版を試してみた #cursor – Qiita



スマホでアプリ開発! Cursorのウェブ・モバイル版を試してみた #cursor - Qiita

AIコードエディタとしてお馴染みのCursorがWebとモバイルブラウザに対応することがリリースされましたね。

これにより、これまでデスクトップアプリのみで使えていたCursorが、スマートフォンやタブレットからも利用可能に。さらに、PWAとしてインストールすれば、ネイティブアプリのような操作感で使えるとのことです。

Web・モバイル対応でできること

公式ブログによると、今回の対応で以下のようなことが可能になりました

  • バグ修正、新機能の開発、複雑なコードベースへの質問をバックグラウンドで実行
  • デスクトップ、タブレット、モバイルブラウザなどどこからでもアクセス可能
  • 差分のレビューやプルリク作成もWebから可能。チームでのコラボレーションがよりスムーズに
  • 複数のエージェントを並行実行して比較検討可能

動画でも紹介

YouTubeでもこのアップデートについて紹介されています。
Cursor Is Now Available on Web and Your Phone

約1分ほどの動画で、Web・モバイル版エージェントの使い方やUIがざっくり確認できるので、興味のある方はぜひチェックしてみてください。


今回はこの新しいモバイル対応版のCursorを実際に使ってみて、その使い勝手や可能性についてレビューしていきます!

前提

今回紹介するWeb・モバイル版のCursor Agentsは、GitHubリポジトリと連携して動作します。

そのため、本記事を執筆する前の私の状態を書いておきます

  • すでにデスクトップ版Cursor(VS Codeベース)を使用している
  • GitHubアカウントとの連携設定が済んでいる
  • 対象のリポジトリにアクセスできる権限を持っている

モバイル版Cursorのセットアップ手順(iOS Safari)

もちろんスマホでブラウザを開いて作業することも可能ですが、どうせならネイティブアプリのようにフルスクリーンで使いたいですよね? ということで公式ドキュメントを参考に、iOS(Safari)環境でのセットアップ方法を紹介します!

1. スマホのSafariでアクセス

まず、SafariでこちらのURLにアクセスします

2. ログイン画面が表示される

アクセスすると、以下のようなログイン画面が表示されます
IMG_0137 (1).png

私はここで Googleアカウントを使ってログインしました。GitHubアカウントなどでもログイン可能です。

3. ログイン後の画面

ログインが成功すると、次のようなエージェント操作画面に遷移します

IMG_0140 (1).png

4. PWAとしてホーム画面に追加する手順(iOS Safari)

CursorのWeb版は、PWAとしてインストールすることでネイティブアプリのように使用できます。以下に、iOS(Safari)での手順を紹介します。

共有ボタン(赤枠)をタップ

Cursorの画面を開いた状態で、画面下部中央の共有アイコンをタップします。

IMG_0140 (1).png


ホーム画面に追加を選択

表示されたメニューの中から、ホーム画面に追加を選びます(赤枠)。

IMG_0142 (1).png


ホーム画面にアイコンが追加される

「追加」をタップすれば、以下のようにホーム画面にCursorのアイコンが表示されます。これで、次回以降はネイティブアプリのようにすぐ起動できます。

IMG_0143 (1).png


これでPWAとしてのセットアップは完了です!以降はSafariを開かなくても、ホーム画面から直接Cursorを起動して、エージェント操作やリポジトリのタスクを行えます。

エージェントにPR作成を依頼してみた

ちょうど個人開発しているアプリのリポジトリがあったので、これを使ってPull Request作成までお願いしてみました。

1. リポジトリを選択

画面上の「Select repository」から、すでにGitHub連携済みのリポジトリを選択します。

2. モデルの選択

Cursorでは複数のモデルが選べますが、今回はとりあえずClaude 4 Sonnetを使用しました。今回は単一モデルで試しますが、複数のモデルを選択し、出力結果を比較することもできるようです。

3. 指示内容の入力

今回はシンプルに以下のように指示しました

このアプリの概要を説明するファイルを追加してください

実際の入力画面は以下の通りです

IMG_0146 (1).png

4. エージェントが処理を開始

指示を送信すると、エージェントがバックグラウンドで処理を開始します。ステータスは「thinking」と表示され、進行中であることがわかります。

IMG_0147 (1).png


5. 概要ファイルが生成された!

数分ほどで処理が完了し、「アプリ概要.md」というファイルが生成されました。内容もいい感じそうです。

IMG_0151 (1).png


6. ファイルの中身を確認

生成されたファイルの中身は以下の通り。マークダウン形式で、アプリの目的や主な機能が丁寧に整理されています。

IMG_0152 (1).png

 ※今回は出力の精度自体について詳しく検討することは省略しますが、基本的には普段のCursorと同等の精度が得られると考えています。


7. PR作成もワンクリックで!

そのまま右上の「Create PR」ボタンを押せば、Pull Requestの作成も可能です。
しかも自動でブランチを作成し、コミットとプッシュまで済ませてくれます。

IMG_0148 (1).png

8. マージまでその場で完了!

PRが作成されたあとは、画面上でそのままマージ操作まで行うことができます。
右上の「Squash merge」ボタンを押すだけで、GitHubにアクセスせずともマージ完了!

IMG_0150 (1).png

もちろん差分(Diff)も確認できるので、不安があれば内容をチェックしたり、後でゆっくりPCでレビューすることも可能です。


以上が、スマホだけで完結できるCursorエージェントによるPR作成の一連の流れです。
ブランチの作成からファイル生成、コミット、PR作成、マージまでを完全にモバイルブラウザ上だけで完了できるのは、驚きの体験でした。

Slackとの連携も可能に!

公式ブログでは軽く触れられている程度ですが、Slackとの連携はチーム開発において非常に大きな利点があると考えています。

日常のコミュニケーションの中から直接エージェントを呼び出し、タスクの依頼や進捗確認ができるため、特に非同期の開発スタイルにおいては、こうした仕組みがあるだけでチーム全体の生産性が大きく向上する可能性があります。


Slack連携の設定と使い方

Slack連携の詳しい方法は公式ドキュメントにしっかりまとめられています。以下にインストール方法と使い方の一部を紹介しますが、ぜひ公式のドキュメントもご確認ください

1. インストール手順

  1. CursorのIntegrationsページにアクセス
  2. 「Slack」の横にあるConnectボタンをクリック、または直接インストールページへアクセス
  3. Slackの画面が表示されるので、Cursorアプリを自分のワークスペースにインストール
  4. インストールが完了すると、Cursorに自動的にリダイレクトされます
  5. 次に以下の設定を行います
    • GitHubと連携(未接続の場合)
    • Usage-based pricingの有効化
    • プライバシー設定の確認

これで準備完了です。
あとはSlack上で @Cursor とメンションするだけで、Background Agentを呼び出せます。

2. 基本的な使い方

Slackのチャンネルやスレッドで @Cursor をメンションし、自然言語で依頼するだけです。

例:@ Cursor fix login bug
すると、エージェントがその会話の文脈を読み取り、タスクを自動で実行してくれます。

3. 通知・共有機能

  • エージェントの処理状況はSlack上でリアルタイムに通知
  • PRが作成されると、リンクと概要を自動で投稿
  • チームメンバーがすぐに内容を確認・レビューできる

4. 高度なカスタマイズ

Slackでの @Cursor コマンドは、以下のようにオプションを使って細かくカスタマイズすることができます
@ Cursor [branch=main, model=o3, repo=owner/repo, autopr=false] Fix the login bug
上記のような ブラケット形式 または以下のような インライン形式 もサポートされています
@ Cursor branch=main model=o3 repo=owner/repo autopr=false Fix the login bug

指定可能な主なオプションは以下の通りです

オプション 説明
branch ベースブランチを指定 branch=main
model 使用するAIモデルを指定 model=o3
repo 対象のGitHubリポジトリを指定 repo=owner/repo
autopr PRの自動作成をON/OFF autopr=false
  • オプションはメッセージ内のどこに書いても機能する
  • 明示的に指定した値が、デフォルト設定より優先される
  • スレッド内では文脈を維持しながら継続的な指示のやりとりが可能

また、現在使えるコマンドの一覧は、Slack内で @Cursor help と入力すると確認できるようです。

SlackとCursorの連携により、Slackでのやり取り → 自動でPR生成 → そのままチームで共有という一連の開発フローがスムーズに実現できます。
特にチーム開発やリモートワークの現場では、こうした機能をうまく使えれば大きな武器になるのでは、と思いました

おわりに

今回は、CursorのWeb・モバイル対応によって、どれだけ手軽にエージェントを使って開発作業ができるのかを試してみました。

  • GitHubリポジトリ・使用モデルの選択
  • 指示の送信
  • ファイル生成 → PR作成 → マージ

これら全てをスマホで完結できることに加え、Slackとの連携をすればチーム開発もかなり便利になる気がしています。
今後さらにエージェントの精度が上がったり、複数リポジトリを横断した操作が可能になれば、PCがなくても十分開発できるようになるかもしれません。





Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -