Editor
Squadbaseコードエディターの使用
Editorとは
EditorはSquadbaseのAI統合型コードエディタです。Squadbase AIを活用しながら、コードの編集、プレビュー、デプロイメントまでを一つの画面で完結できます。
主な特徴
- AI支援: Squadbase AIがコーディングをサポート
- リアルタイムプレビュー: コード変更を即座に確認
- 統合環境: 編集、プレビュー、デプロイを一つの画面で
- スレッド管理: AI会話の履歴を保持・再利用
- AI Credits管理: AI使用量を視覚的に確認
Editorを開く
画面構成
ヘッダー部分
左側:
- 組織名: クリックで組織画面に戻る
- プロジェクト名: クリックでプロジェクト詳細画面に戻る
中央:
- タブ: 機能を切り替えるタブ
右側:
- AI Credits: AI使用状況を表示するプログレスバー
- 設定ボタン: エディタ設定
- その他のボタン: ブランチ・環境設定と再起動ボタン
- Publish ボタン: デプロイメントを作成
メインエリア
画面は大きく2つのセクションに分かれています。
左: プレビューとコード確認
タブで切り替え:
- Preview: アプリケーションプレビュー
- Code: コード確認
Previewタブ:
- ナビゲーションボタン: 戻る、進む、再読み込み
- URLバー: プレビューするページのURLを入力
- プレビューエリア: アプリケーションをリアルタイム表示
右: AI チャット
スレッド管理:
- 「New thread」ドロップダウンで新規会話または過去の会話を選択
操作ボタン:
- Prompt: プロンプト入力支援
- Tasks: 事前定義されたタスクを起動できます。ダッシュボード構築に便利な機能が用意されています。
Ask Squadbase AI:
- テキストボックスにAIへの質問やコマンドを入力
- マルチライン対応（改行可能）
- 送信ボタンで実行
Squadbase AIの活用
Squadbase AIはコード生成、デバッグ、説明など、さまざまな支援が可能です。いつでも気軽に質問や依頼をしてください！
Ask Squadbase AI
画面下部のテキストボックスから、AIにさまざまな支援を依頼できます。
スレッド管理
新規スレッド:
- 「New thread」を選択して新しい会話を開始
過去のスレッド:
- ドロップダウンから過去の会話を選択
- 以前の文脈を引き継いで質問できる
おすすめの使い方:
- 機能ごとにスレッドを分ける
- 複雑なタスクは一つのスレッドで継続
AI Credits
表示内容:
- ヘッダーのプログレスバーでAI使用量を確認
- パーセンテージで残量を表示
注意:
- Creditsが不足すると、AI機能が制限される場合があります
- Usageボタンから詳細を確認
デプロイメントの作成
Publishを実行すると、デプロイメントが作成され、GitHub連携がある場合はリポジトリにも変更がプッシュされます。
Publishボタンをクリック
コード編集が完了したら、ヘッダーの**「Publish」**ボタンをクリックします。
コミットメッセージを入力
変更内容を説明するコミットメッセージを入力します（オプション）。
確認してPublish
「Publish」をクリックしてデプロイメントを作成します。
実行後の効果:
- 新しいデプロイメントが作成されます
- Deploymentsタブで履歴を確認可能
- GitHub連携がある場合は、GitHubにも変更がプッシュされます
Tips & よくある質問
Q: Editorで変更したコードは自動保存されますか？
A: 自動保存機能があります。ただし、重要な変更は定期的にPublishすることをおすすめします。
Q: AI Creditsはどうやって補充しますか？
A: Usageボタンまたはプラン設定から、AI Creditsを追加購入できます。詳細はプラン管理画面を確認してください。
Q: プレビューが更新されません
A: 以下を試してみてください。
- 再読み込みボタンをクリック
- キャッシュをクリア
- ページをリフレッシュ
Q: 複数人で同時に編集できますか？
A: プロジェクトメンバーはそれぞれEditorを開けますが、リアルタイムコラボレーション機能の有無は確認が必要です。
Q: GitHubと同期していますか？
A:
- GitHubからインポートしたプロジェクトの場合、Publishボタンを使うことでGitHubに変更がプッシュされる可能性があります。Git Repository設定を確認してください。
- GitHub連携なしで作成したダッシュボードも、あとからGithubにリポジトリを作ってバックアップすることができます。
おすすめの使い方
- AIを積極的に活用:
- わからないことはすぐにAIに質問
- Tasksから、便利な事前定義処理を活用
- スレッドを使って文脈を保持/分離
- プレビューで即座確認:
- UI変更したら必ずプレビューで確認
- 異なるページも確認
- 定期的にPublish:
- 重要な変更はこまめにPublish
- AI Creditsを管理:
- 定期的に使用量を確認
- 不足する前に補充
まとめ
EditorはSquadbaseの中心的な開発環境です。AI支援により、初心者でも効率的にコーディングでき、経験豊富な開発者はさらに生産性を向上できます。
プレビュー機能とデプロイメント機能を活用することで、ダッシュボードの構築から公開までをシームレスに行えます。
不明な点がある場合は、画面右下の「Help」または「Documentation」リンクから、さらに詳しい情報を参照してください。また、Editorの「Ask Squadbase AI」でも質問できます。