screencli について
screencliは、AIによるブラウザー操作を録画するコマンドラインツールで、Webアプリのデモや操作説明動画の作成に使えます。プロンプトに沿ってページを操作し、自動ズームやクリック強調を加え、録画をアップロードして共有できます。
主な機能
- 01プロンプトに基づいて対象ページを操作
- 02ブラウザーの操作動画を録画・加工
- 03グラデーション背景、自動ズーム、クリック強調を追加
- 04ログイン状態を保存して再利用
- 05プラットフォーム別プリセットで動画やGIFを出力
- 06クラウドへアップロード、またはローカル保存
活用シーン
- 01Webアプリの機能デモを作成する
- 02ログインが必要なアプリの操作を録画する
- 03README、PR、ドキュメント用の動画を作る
- 04SNS向けサイズの動画やGIFを出力する
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/screencliを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.txtreferences/cli-reference.mdeffects.md詳細
できること
screencli は AI 駆動のブラウザーセッションを記録し、グラデーション背景、自動ズーム、クリックのハイライト、カーソルの軌跡を加えた、完成度の高い MP4 を作成します。AI エージェントがプロンプトの指示に従って対象の URL を操作し、録画にエフェクトを適用して screencli.sh に自動アップロードします。共有可能なリンクも取得できます。動画編集は不要です。
このスキルを使用する場面
ユーザーから次のような依頼があった場合に、このスキルを使用します。
- ウェブアプリ、機能、ワークフローのデモや操作手順を録画する
- ブラウザーでの操作を紹介するスクリーンキャストや動画を作成する
- 画面録画の共有可能なリンクを作成する
- README、PR、ドキュメント、SNS 用の GIF や動画を作成する
- UI の変更やバグ修正を示す 変更前／変更後の様子を録画する
- デプロイ環境やステージング環境を視覚的にデモする
次の場合は このスキルを使用しないでください。
- スクリーンショット（代わりにスクリーンショットツールを使用してください）
- ブラウザー以外のタスク（ターミナルの録画、デスクトップアプリ）
- 既存の動画の編集
クイックスタート
screencli をセットアップします（初回のみ）。
npx screencli init
screencli.sh へのサインイン（無料クレジット、デフォルト）または独自の Anthropic API キーの貼り付けを求められます。また、コーディングエージェント向けの screencli スキルのインストールも提案されます。
デモを録画して共有可能なリンクを取得します。
npx screencli record https://example.com -p "Click the Sign Up button, fill in the form with test data, and submit"
AI エージェントがページを操作し、録画にエフェクトが適用されてアップロードされると、共有可能な URL が取得できます。
録画
コマンド
npx screencli record [url] -p "<prompt>" [options]
URL とプロンプトは必須です。省略すると、CLI が対話形式で入力を求めます。
主なオプション
| フラグ | デフォルト | 説明 |
|---|---|---|
-p, --prompt <text> | (required) | AI エージェントへの指示 |
--background <name> | auto | グラデーションを上書きします：midnight、ember、forest、nebula、slate、copper |
--viewport <WxH> | 1920x1080 | ブラウザーのビューポートのサイズ |
--login | off | AI が操作を引き継ぐ前に、手動ログイン用のブラウザーを開きます |
--auth <name> | — | 名前を指定して認証状態を保存／読み込みします |
--local | off | クラウドへのアップロードをスキップします |
--unlisted | off | 限定公開としてアップロードします（公開プロフィールには表示されません） |
--max-steps <n> | 50 | エージェントの最大反復回数 |
--padding <percent> | 8 | 背景の余白（0～50%） |
--corner-radius <px> | 12 | 動画の角の丸み |
--no-shadow | off | ドロップシャドウを無効にします |
-m, --model <model> | claude-sonnet-4-20250514 | 使用する Claude モデル |
--slow-mo <ms> | 0 | 操作間に追加する遅延 |
-o, --output <dir> | ./recordings | 出力ディレクトリ |
-v, --verbose | off | デバッグログを有効にします |
使用例
シンプル — 公開ページを録画する：
npx screencli record https://myapp.com -p "Navigate to the pricing page and compare the Free and Pro plans"
認証付き — 先に非公開アプリにログインする：
# First run: human logs in, auth state saved
npx screencli record https://app.internal.com -p "Show the dashboard metrics" --login --auth myapp
# Next runs: reuses saved session
npx screencli record https://app.internal.com -p "Export the monthly report" --auth myapp
エクスポート
プラットフォーム別のプリセットを使用して録画をエクスポートします。
npx screencli export <recording-dir> --preset <name>
プリセット
| プリセット | 解像度 | 縦横比 | 形式 | 最大時間 |
|---|---|---|---|---|
youtube | 1920x1080 | 16:9 | mp4 | — |
twitter | 1280x720 | 16:9 | mp4 | 140s |
instagram | 1080x1920 | 9:16 | mp4 | 90s |
tiktok | 1080x1920 | 9:16 | mp4 | — |
linkedin | 1080x1080 | 1:1 | mp4 | — |
github-gif | 800x450 | 16:9 | gif | 12s |
使用例
npx screencli export ./recordings/abc123 --preset twitter
エクスポートでは、--background、--padding、--corner-radius、--no-shadow、--no-zoom、--no-highlight、--no-cursor も指定できます。
非公開アプリの認証
ログインが必要な環境を録画するには、初回実行時に --login と --auth を一緒に使用します。
npx screencli record https://app.example.com -p "..." --login --auth myapp
手動でログインするためのブラウザーが開きます。完了すると、AI エージェントが操作を引き継ぎ、認証状態が ~/.screencli/auth/myapp.json に保存されます。
次回以降の実行では、--auth だけを指定します。
npx screencli record https://app.example.com -p "..." --auth myapp
セッションの有効期限が切れた場合は、--login --auth <name> を指定して再実行し、認証状態を更新してください。
クラウド
録画はデフォルトで screencli.sh に自動アップロードされます。--local を指定するとスキップできます。
コマンド
| コマンド | 説明 |
|---|---|
npx screencli login | screencli cloud にサインインします |
npx screencli logout | サインアウトします |
npx screencli whoami | 現在のユーザー、プラン、クレジットを表示します |
npx screencli recordings | リンク付きで録画の一覧を表示します |
npx screencli upload <dir> | ローカルの録画をクラウドにアップロードします |
npx screencli delete <id> | クラウドの録画を削除します |
npx screencli render <id> | 背景やプリセットを変更してクラウド上で再レンダリングします |
クレジット
1 クレジット = エージェントのステップ 10 回分です。無料プランには月 15 クレジットが含まれます。
録画をアップロードすると、CLI に使用済みクレジットと残りのクレジットが表示されます。
エフェクト
すべての録画には、自動的に後処理が行われます。
- グラデーション背景 — 自動で選択されます（
--background <name>で上書きできます） - 自動トリミング — 操作間のアイドル時間を削除します
- 自動ズーム — インタラクション中にアクティブな領域をズームします
- クリックのハイライト — クリックのたびに視覚的なパルスを表示します
- カーソルの軌跡 — カーソルの滑らかな動きを重ねて表示します
--no-zoom、--no-highlight、--no-cursor で個別のエフェクトを無効にできます。
グラデーションの色とエフェクトの全処理パイプラインについては、references/effects.md を参照してください。
トラブルシューティング
| 問題 | 対処方法 |
|---|---|
| ログインしていない | npx screencli init を実行してサインインするか、API キーを設定します |
| FFmpeg が見つからない | brew install ffmpeg（macOS）を実行するか、ffmpeg.org を参照してください |
| 認証の有効期限が切れた | --login --auth <name> を付けて再実行します |
| エージェントが停止またはループしている | プロンプトを調整し、--max-steps の値を下げます |
| 録画が長すぎる | --max-steps で制限するか、プロンプトをより具体的にします |
| アップロードに失敗した | npx screencli whoami でクレジットを確認し、npx screencli upload <dir> で再試行します |
参考資料
- CLI リファレンス — すべてのコマンドとフラグ
- エフェクトのリファレンス — グラデーション、背景、エフェクトの処理パイプライン