Crawl4AI

Scrape Any Website for FREE Using DeepSeek & Crawl4AI

https://www.youtube.com/watch?v=Osl4NgAXvRk

Crawl4AI（クロール・フォー・エーアイ）は、WebサイトのコンテンツをAIが利用しやすい形式でクロール・取得するための新しい規格、プロトコル、または概念です。

これは、従来の検索エンジンのクローラー（Googlebotなど）がWebサイトをインデックスするために情報を取得するのとは異なり、生成AI（Generative AI）モデルの学習データとして最適化された形でコンテンツを収集することを目的としています。

Crawl4AIの背景と目的

生成AIモデル、特に大規模言語モデル（LLM）は、インターネット上の膨大なテキストデータから学習しています。しかし、従来のWebコンテンツは人間が読むことを前提に作られており、AIが学習しやすい構造になっているとは限りません。

Crawl4AIは、このような課題を解決するために以下のような目的を持っています。

  1. AI学習用データの最適化:

    • Webサイトの作成者が、AIに提供したいコンテンツ（高品質な記事、データ、事実など）と、提供したくないコンテンツ（広告、重複コンテンツ、個人情報など）を明示的に指定できるようにする。
    • HTMLの構造だけでなく、コンテンツの意味的な関連性や階層構造をAIが理解しやすいようにメタデータやセマンティックタグでマークアップする。

  2. クロール効率の向上:

    • AIが本当に必要とするデータのみを効率的にクロールすることで、リソースの無駄を省き、クロール速度を向上させる。

  3. 著作権と利用規約の明確化:

    • Webサイトの所有者が、そのコンテンツがAI学習に利用されることを許可するかどうか、またどのような条件で利用できるかを明示できるようにする（例: robots.txt の拡張版や新しいメタデータ）。
    • AIプロバイダー側も、どのコンテンツがAI学習に利用可能であるかを正確に判断できるようになる。

  4. 倫理的配慮と透明性:

    • AIが学習するデータの出所をより明確にし、透明性を高める。
    • 偏見や誤情報を含むデータの学習を避けるための仕組みを提供する。

どのように実現されるか？

Crawl4AIはまだ発展途上の概念ですが、実現のためには以下のようなアプローチが考えられます。

  • robots.txt の拡張: Allow や Disallow に加えて、AIの学習用途に対する許可/不許可を制御する新しいディレクティブ。
  • HTMLの新しいメタタグやセマンティックタグ: コンテンツの目的（例: <article data-purpose="ai-training">）、信頼性、情報源などをAIに伝えるためのタグ。
  • JSON-LDなどの構造化データ: コンテンツの意味をより詳細に記述し、AIが理解しやすい形式で提供する。
  • API連携: Webサイトが直接AIプロバイダーにコンテンツを提供するAPIを公開する。

現状と今後の展望

Crawl4AIは、Googleのような大手テクノロジー企業や、AI研究者、Web標準のコミュニティなどで議論されているテーマです。まだ統一された標準や広く採用されたプロトコルがあるわけではありませんが、AIの進化に伴い、WebコンテンツとAIの関係性をより効率的、倫理的、かつ透明性の高いものにするための重要な取り組みとして注目されています。

この概念が普及することで、Webサイトの作成者はAIにコンテンツを「提供する」という意識が高まり、AI側もより高品質で目的に合ったデータを学習できるようになることが期待されます。

GitHub Pages

GitHub Pages は、GitHub が提供するサービスで、GitHub リポジトリにホストされているコードから静的なウェブサイトを公開できます。完全に無料で利用でき、ブログ、プロジェクトのドキュメント、個人サイトなどに広く使われています。

ここでは、GitHub Pages の基本的な使い方を、最も一般的な方法である「ユーザー/組織サイト」と「プロジェクトサイト」に分けて説明します。

1. 準備：GitHub アカウントとリポジトリ

GitHub Pages を利用するには、まず GitHub アカウントが必要です。そして、ウェブサイトのコードを保存するリポジトリを作成します。

2. GitHub Pages の2つの主要なタイプ

GitHub Pages には主に2つのタイプがあります。

A. ユーザーサイト / 組織サイト (User/Organization Site)

  • 特徴: あなたの GitHub ユーザー名（または組織名）に紐づくサイトで、https://<ユーザー名>.github.io の形式のURLになります。
  • リポジトリ名: 特定のリポジトリ名 (<ユーザー名>.github.io または <組織名>.github.io) にする必要があります。
  • 内容: このリポジトリの main ブランチのコンテンツがサイトとして公開されます。

B. プロジェクトサイト (Project Site)

  • 特徴: 既存のプロジェクトリポジトリのサブディレクトリまたは別のブランチから公開するサイトです。URL は https://<ユーザー名>.github.io/<リポジトリ名> の形式になります。
  • リポジトリ名: 任意のリポジトリ名で構いません。
  • 内容: 設定により、main ブランチの /docs フォルダー、または gh-pages ブランチのコンテンツがサイトとして公開されます。

3. 各タイプの具体的な設定方法

A. ユーザーサイト / 組織サイトの作成方法

  1. リポジトリの作成:

    • GitHub にログインし、新しいリポジトリを作成します。
    • リポジトリ名を あなたのユーザー名.github.io に設定します。（例: your-username.github.io）
    • 「Public」を選択し、必要であれば README を追加します。
    • 「Create repository」をクリックします。

  2. ファイルの追加:

Replit

Replit (リプリット) は GitHub のリポジトリを読み込むことができます。

Replitには**「Import from GitHub」**という機能があり、GitHubリポジトリのURLを入力するだけで、そのプロジェクトをReplit上にインポート（取り込み）できます。

💻 主な連携機能

  • リポジトリのインポート: GitHubの既存のプロジェクトをReplitのワークスペースとして簡単に取り込めます。
  • コードの同期とプッシュ: Replitでコードを編集した後、内蔵のGit機能を使って直接 GitHub にコミットやプッシュが可能です。
  • チームでの共同作業: プルリクエストやマージの操作もReplit内で直接行うことができ、チーム開発を効率化できます。

🔒 プライベートリポジトリについて

プライベートリポジトリをインポートしたい場合は、通常、Replitの有料プラン（例: Replit Core）への加入が必要となることが多いです。無料アカウントでは、基本的に公開（Public）リポジトリのインポートが可能です。

Vite

Cloudflare PagesでViteプロジェクトのデプロイが「Failed: error occurred while running deploy command」というメッセージで失敗する場合、これはビルド自体は成功しているものの、その後のデプロイ（Cloudflare WorkersやCloudflare Pagesへのファイルのアップロード・公開）の段階でエラーが発生していることを示しています。

Wrangler（Cloudflare WorkersをデプロイするためのCLIツール）に関するメッセージが出ていることから、Workers機能との連携や、その設定に問題がある可能性が高いです。

いくつか考えられる原因と、その解決策を提示します。

1. Wranglerの設定ミス、または不適切な使用

  • 原因: Cloudflare Pagesで通常のViteプロジェクト（静的サイト）をデプロイする場合、通常はWranglerを直接使用する必要はありません。このメッセージが出ているということは、ビルドコマンドやデプロイコマンドにWranglerを呼び出す設定が入っている可能性があります。
  • 例:
    • package.jsonのscriptsにwrangler deployのようなコマンドが入っている。
    • Cloudflare Pagesの「Build command」に直接wrangler deployを設定している。
  • 解決策:
    1. Cloudflare Pagesの「Build command」を確認: Viteの静的サイトデプロイの場合、ビルドコマンドは通常 npm run build または yarn build であるべきです。ここにwrangler関連のコマンドが入っていないか確認してください。
    2. package.jsonのscriptsを確認: もしnpm run buildが内部でwranglerコマンドを呼び出すように設定されている場合、それを修正する必要があります。通常のViteプロジェクトであれば、buildスクリプトはvite buildとなっているはずです。
    3. Wranglerの設定ファイル (wrangler.toml) の確認: プロジェクトのルートにwrangler.tomlファイルが存在するか確認してください。もし静的サイトのみをデプロイしているのであれば、このファイルは不要な場合があります。存在する場合は、その設定がCloudflare Pagesでのデプロイに適しているか見直す必要があります。特にtype = "javascript"のようなWorkersのタイプが指定されていると、Pagesのデプロイとは異なる振る舞いをしようとします。

2. Cloudflare Workersのデプロイ権限や設定の問題

  • 原因: もしViteプロジェクトがCloudflare Workers（Functions）を利用している場合、WranglerはそのWorkersをデプロイしようとします。その際に、必要な権限がなかったり、Workersのルーティングや名前が競合していたり、Workersのコード自体にエラーがある場合に失敗します。
  • 解決策:
    1. APIトークンの確認: Cloudflare Pagesのプロジェクト設定で、WorkersをデプロイするためのCloudflare APIトークンが正しく設定され、必要な権限（Workersへの編集権限など）が付与されているか確認します。
    2. Workersの名前の競合: デプロイしようとしているWorkersの名前が、Cloudflareアカウント内で既に存在している他のWorkersと競合していないか確認します。
    3. Workersのコードのエラー: もしViteでCloudflare FunctionsなどのWorkersコードをバンドルしてデプロイしようとしている場合、そのWorkersコード自体に構文エラーやランタイムエラーがないか確認します。

3. デプロイのタイムアウト、または容量制限

  • 原因: デプロイされるファイルのサイズが非常に大きい場合や、デプロイプロセスが長時間かかりすぎると、タイムアウトで失敗することがあります。
  • 解決策:
    1. 不要なファイルの削除: ビルドプロセスで不要なファイルが出力されていないか確認し、distディレクトリが最小限のサイズになるように最適化します。
    2. vite.config.jsの確認: ビルド設定で、バンドルサイズを小さくするための設定（コード分割、アセットの最適化など）が適切に行われているか確認します。

4. Cloudflare Pagesの内部的な問題（稀）

  • 原因: Cloudflare側のシステムで一時的な問題が発生している可能性もゼロではありません。
  • 解決策:
    • しばらく待ってから、もう一度デプロイを試みる。
    • Cloudflareのステータスページを確認し、障害情報がないか確認する。
    • Cloudflareサポートに問い合わせる。

優先的に確認すべきこと

まずは、Cloudflare Pagesのデプロイ設定で、**「Build command」とpackage.jsonのscripts**の内容を確認し、Wranglerを直接呼び出すような記述がないかチェックしてください。

ビルドの速さ

「ビルドの速さ」は、プロジェクトの規模、使用するプラグイン、マシンのスペックなどによって大きく変動するため、一概にランキングすることは難しいですが、一般的に高速で知られている静的サイトジェネレータ（SSG）や、ビルドプロセスが効率的とされるフレームワークを挙げることはできます。

特に言及されることが多いのは、以下の順序でしょう。

  1. Hugo
  2. Eleventy (11ty)
  3. Astro

これらのフレームワークは、特に大規模なサイトでも高速なビルド時間を実現することで知られています。

ここからは、それぞれの特徴と一般的な傾向を説明します。

  1. Hugo

    • 特徴: Go言語で書かれており、非常に高速なビルドが最大の特長です。数千ページ規模のサイトでも、ミリ秒単位でビルドが完了することが珍しくありません。プラグインシステムが比較的シンプルで、依存関係が少ないことも高速化に寄与しています。
    • 得意なこと: ブログ、ドキュメントサイト、比較的シンプルな構造のコンテンツサイト。

  2. Eleventy (11ty)

    • 特徴: Node.jsベースでありながら、依存関係が少なく、柔軟性が高いのが特徴です。様々なテンプレート言語（Nunjucks, Liquid, Handlebars, Pugなど）に対応しており、パフォーマンスと開発のしやすさのバランスが良いと評価されています。小規模から中規模のサイトであれば、非常に高速なビルドが期待できます。
    • 得意なこと: カスタム性の高いブログ、ポートフォリオ、実験的なサイト。

  3. Astro

    • 特徴: アイランドアーキテクチャを採用しており、デフォルトでJavaScriptの送信量を最小限に抑えるように設計されています。これは、ビルド速度だけでなく、実行時のパフォーマンス（ロード速度など）にも寄与します。ビルドシステム自体も高速化に注力されており、モダンなツールチェーン（Viteなど）を使用しているため、比較的速いです。
    • 得意なこと: コンテンツファーストのウェブサイト、ブログ、Eコマースサイト（静的パート）、ランディングページ。

その他のフレームワーク:

  • Next.js (SSGモード) / Nuxt.js (静的生成モード):

    • これらのフレームワークは、ReactやVueの強力なエコシステムと開発体験を提供しますが、大規模なサイトでは上記3つに比べてビルド時間が長くなる傾向があります。これは、JavaScriptのバンドルサイズが大きいことや、豊富な機能を持つツールチェーンが関与するためです。ただし、増分ビルド（Incremental Static Regeneration/Generation）などの機能で、デプロイ後の更新は高速化できます。

  • Gatsby:

    • GatsbyはGraphQLを使用してデータレイヤーを構築するため、データの量が多いとビルド時間が長くなることがあります。画像の最適化など、非常に多くの処理をビルド時に行うため、初回ビルドは時間がかかる傾向にありますが、その後はキャッシュを活用して効率化されます。

  • Jekyll:

    • Rubyベースで、設定やテーマの管理が容易ですが、大規模なサイトではビルド速度が他のモダンなSSGに比べて遅くなることがあります。GitHub Pagesでの自動ビルドは便利ですが、ローカルでの開発体験では少しもたつきを感じるかもしれません。

まとめ:

もし純粋なビルド速度を最優先するのであれば、Hugoが頭一つ抜けていることが多いです。 次いで、EleventyやAstroがパフォーマンスと開発体験のバランスが良い選択肢となります。

サイトの要件（動的な機能の必要性、使用したいライブラリ、開発チームのスキルセットなど）とビルド速度のバランスを考慮して選ぶことが重要です。

牛乳の乳糖を減らす

牛乳の乳糖を減らすための対策としては、主に摂取方法の工夫や乳糖が少ない乳製品を選ぶことが挙げられます。

ご自宅などで簡単にできる工夫と、市販品を選ぶ場合のポイントをまとめます。

🥛 摂取方法の工夫（ご自宅で試せること）

乳糖の分解酵素（ラクターゼ）の働きを助けたり、腸への刺激を和らげたりする方法です。

  • 数回に分けて少量ずつ飲む
    • 一度に大量に飲むのを避け、少量ずつに分けることで、乳糖が分解されやすくなります。
  • 温めてゆっくり飲む
    • 牛乳を温める（ホットミルクやカフェオレ、ココアなどにする）ことで、腸への刺激が弱まります。また、消化酵素であるラクターゼの働きも活発になりやすくなります。
  • 他の食品と一緒に摂取する
    • 空腹時を避け、パンや食事など他の食品と一緒に摂ることで、消化が緩やかになります。
  • 毎日少しずつ飲む習慣をつける
    • 毎日少量ずつ摂取し続けることで、乳糖を分解できる腸内細菌が増加し、乳糖不耐症が改善される可能性があるとされています。

🛒 乳糖の少ない乳製品を選ぶ

もともと乳糖が少ない、または分解されている製品を選ぶ方法です。

  • 乳糖をカットした市販の乳飲料を選ぶ
    • 市販には、乳糖を約80%分解・カットした「乳飲料」が販売されています。これは乳糖不耐症の方でも安心して飲めるように加工されたものです。
  • ヨーグルトやチーズを代わりに食べる
    • ヨーグルト：乳酸菌の発酵によって乳糖が20～40%ほど分解されています。
    • チーズ：製造過程で乳糖の大部分が取り除かれています。

💊 補助食品について

  • 乳糖を分解する酵素である**ラクターゼのサプリメント（補助剤）**も市販されています。これを牛乳などと一緒に摂取することで、体内で乳糖の分解を助けることができます。

⚠️注意点

牛乳を飲んでお腹の不調を感じる場合、その原因は乳糖不耐症（乳糖を分解する酵素が不足していること）の可能性が高いですが、まれに牛乳アレルギーや過敏性腸症候群など、乳糖とは別の原因である場合もあります。

症状が強い場合や、心配な場合は、一度医療機関に相談することをおすすめします。

牛乳の乳糖を分解する酵素であるラクターゼを主成分とする製品には、主に医療用医薬品と、**サプリメント（補助食品）**があります。

1. 医療用医薬品

医師の処方箋が必要な薬で、乳糖不耐症の治療補助などに使われます。

  • ミルラクト細粒50％（一般名：β-ガラクトシダーゼ（ペニシリウム））
    • これは純粋な乳糖分解酵素剤であり、医療機関で処方されるものです。

2. 市販のサプリメント・健康食品

ドラッグストアやオンラインショップで購入できる、ラクターゼ（乳糖分解酵素）を配合したサプリメントもあります。これらは「健康食品」や「栄養補助食品」に分類されます。

  • 具体的な製品名はメーカーによってさまざまですが、海外製品や、国内メーカーの「ラクターゼエンザイム」といった名称の製品が検索結果でも見られます。
  • 多くの場合、乳製品を摂取する直前に飲むことで、体内で乳糖の分解を助けることを目的としています。

3. 整腸薬に含まれる消化酵素

一部の整腸薬や消化薬には、乳酸菌や納豆菌、そして複合消化酵素が含まれています。複合消化酵素はデンプンやタンパク質を分解しますが、製品によってはラクターゼ（乳糖を分解する酵素）は含まれていないか、別の種類の消化酵素（例：ビオヂアスターゼ）が含まれている場合があります。

  • ビオラクターゼ、新ビオラクターゼS錠
    • これらの製品は主に乳酸菌や糖化菌、ビオヂアスターゼなどの複合消化酵素を主成分とする整腸消化薬や整腸薬として販売されています。これらは腸内環境を整えたり、一般的な消化を助けたりする目的の製品で、ラクターゼ（乳糖分解酵素）そのものとは少し目的が異なります。

⚠️ご注意ください

医療用医薬品の**「ミルラクト」**は医師の処方箋が必要です。

市販のサプリメントは、乳糖不耐症の症状を和らげる補助として利用されますが、効能効果を謳う医薬品ではありません。購入する際は、パッケージの成分表示をよく確認し、「ラクターゼ」や「乳糖分解酵素」が主成分として含まれているか確認してください。

もし、症状について心配な場合は、薬剤師や登録販売者、または医師にご相談されることをお勧めします。

ClaudeのProjects機能

Projects機能は、Claude 3モデルを搭載した有料プラン（ProおよびTeam）で利用できる機能で、以下のような特徴があります。

主な機能とメリット

  • ワークスペースの整理: 複数のチャットやファイルをテーマごとに整理し、プロジェクトとして管理できます。例えば、あるクライアントとのやり取りをすべて1つのプロジェクトにまとめたり、特定の研究テーマに関する情報を集約したりできます。
  • 文脈の維持: プロジェクト内のすべてのチャットやファイルは共通の文脈を共有します。これにより、Claudeは過去の会話やアップロードされたファイルの内容を理解し、より一貫性のある、関連性の高い回答を生成できます。
  • 複数ファイルのアップロード: 複数のファイルを一度にアップロードし、それらを組み合わせて分析させることができます。例えば、複数のドキュメントを比較させたり、データセットとレポートを組み合わせて分析させたりすることが可能です。
  • 長期的な記憶: プロジェクト内の情報はClaudeの「長期記憶」として機能し、時間が経っても参照されます。これにより、以前の会話内容を繰り返し説明する必要がなくなります。

基本的な使い方

  1. 新しいプロジェクトの作成:

    • Claudeのインターフェースで「New Project」ボタンを探してクリックします。
    • プロジェクト名を入力します。例えば、「マーケティング戦略」「新規事業企画」など、プロジェクトの内容が分かりやすい名前にしましょう。
    • 必要であれば、プロジェクトの説明を追加します。

  2. ファイルのアップロード:

    • プロジェクト内で「Upload Files」ボタンをクリックし、Claudeに分析させたいドキュメント、データ、画像などをアップロードします。
    • 複数のファイルを一度に選択してアップロードすることも可能です。

  3. チャットの開始:

    • プロジェクト内で通常通りClaudeとのチャットを開始します。
    • Claudeはアップロードされたファイルやプロジェクト内の過去の会話履歴をすべて考慮して応答します。
    • 例えば、「これらのドキュメントを要約してください」「このデータセットに基づいてレポートを作成してください」といった指示が可能です。

  4. 既存チャットのプロジェクトへの追加:

    • すでに進行中のチャットを特定のプロジェクトに移動させることもできます。チャットのオプションメニューから「Move to Project」のような選択肢を探してください。

  5. プロジェクトの管理:

    • サイドバーやメニューから、作成したプロジェクトの一覧を確認・管理できます。
    • プロジェクト名の変更や削除なども可能です。

活用例

  • 研究プロジェクト: 複数の論文や調査データをアップロードし、Claudeに要約、比較、分析を依頼します。
  • コンテンツ作成: 企画書、競合分析データ、ターゲットオーディエンスの情報をアップロードし、ブログ記事やSNS投稿のアイデア出し、ドラフト作成に活用します。
  • ソフトウェア開発: コードファイル、仕様書、バグレポートをアップロードし、コードのレビュー、デバッグ支援、ドキュメント生成に利用します。
  • 法的文書の分析: 複数の契約書や判例をアップロードし、特定の条項に関する情報を抽出したり、リスク分析を依頼したりします。

注意点

  • Projects機能は現在、Claude 3モデルを利用できる有料プラン（ProおよびTeam）でのみ利用可能です。
  • アップロードできるファイルのサイズや数には制限がある場合がありますので、詳細はClaudeの公式ドキュメントでご確認ください。

具体的な例を見てみましょう。

例えば、新しいマーケティングキャンペーンを計画しているとします。

  1. 「新マーケティングキャンペーン」という名前でプロジェクトを作成します。
  2. 以下のファイルをアップロードします。
    • 競合他社のマーケティング戦略レポート（PDF）
    • 前回のキャンペーンのパフォーマンスデータ（CSV）
    • ターゲットオーディエンスのデモグラフィック情報（TXT）
    • ブランドガイドライン（DOCX）
  3. Claudeに次のように質問します。
    • 「アップロードした競合レポートと過去のキャンペーンデータを踏まえ、新しいキャンペーンでターゲットとすべき主要な顧客層と、彼らに響くであろうメッセージのアイデアをいくつか提案してください。」
    • 「提案されたメッセージがブランドガイドラインに合致しているか確認し、必要であれば修正案を提示してください。」

このように、Projects機能を使うことで、関連する情報を一箇所に集約し、Claudeがそれらの情報を横断的に理解して、より質の高い、文脈に沿った支援を提供できるようになります。

CodeSandboxとGitHubを連携する

CodeSandboxとGitHubを連携する方法はいくつかあります。主な連携方法は以下の通りです。

1. GitHubリポジトリからサンドボックスを作成する

CodeSandboxは、既存のGitHubリポジトリをインポートして、すぐに開発可能なサンドボックス環境として開くことができます。

  1. CodeSandboxを開く: CodeSandboxのウェブサイトにアクセスします。
  2. 「Import Project」または「Create Sandbox」から選択:
    • ダッシュボードの左側にある「Create Sandbox」をクリックし、「Import GitHub Project」を選択します。
    • または、新しいサンドボックスを作成する際のオプションとして「Import from GitHub」を選択します。
  3. GitHubリポジトリのURLを入力: インポートしたいGitHubリポジトリのURL（例: https://github.com/your-username/your-repo）を入力し、「Import」をクリックします。
  4. サンドボックスとして開かれる: リポジトリがCodeSandboxにインポートされ、開発環境としてすぐに利用できるようになります。

2. サンドボックスをGitHubリポジトリにエクスポートする（新規作成）

CodeSandboxで作成したサンドボックスを、新しいGitHubリポジトリとしてエクスポートすることができます。

  1. CodeSandboxでサンドボックスを開く: エクスポートしたいサンドボックスを開きます。
  2. 「File」メニューから「Export to GitHub」を選択: エディタ画面の左上にある「File」メニューをクリックし、「Export to GitHub」を選択します。
  3. GitHubアカウントの認証: まだ認証していない場合は、CodeSandboxがGitHubアカウントへのアクセスを要求します。指示に従って認証します。
  4. リポジトリ情報の入力: 新しく作成するGitHubリポジトリの名前、説明、プライベート/パブリックの選択などを行い、「Create Repository」をクリックします。
  5. リポジトリが作成される: サンドボックスの内容が指定したGitHubリポジトリにプッシュされ、新しいリポジトリが作成されます。

3. サンドボックスを既存のGitHubリポジトリにプッシュする（更新）

既にGitHubに存在するリポジトリに、CodeSandboxで加えた変更をプッシュすることができます。これは、GitHubリポジトリからサンドボックスを作成した場合に特に便利です。

  1. CodeSandboxでサンドボックスを開く: GitHubリポジトリからインポートしたサンドボックス、または後でGitHubにリンクしたサンドボックスを開きます。
  2. 変更を加える: サンドボックス内でコードを変更します。
  3. 「Source Control」パネルを開く: エディタの左側にある「Source Control」（Gitアイコン）をクリックします。
  4. 変更をコミットしてプッシュ:
    • 変更されたファイルが表示されます。コミットメッセージを入力します。
    • 「Commit & Push」ボタンをクリックします。
    • （初めての場合や設定によっては）GitHubアカウントへの認証が再度求められることがあります。
    • 変更が元のGitHubリポジトリにプッシュされます。

4. GitHub Gistとの連携

CodeSandboxはGitHub Gistとの連携もサポートしています。

  • サンドボックスをGistに保存: 作成したサンドボックスをGitHub Gistとして保存できます。
  • Gistからサンドボックスを作成: 既存のGistをCodeSandboxにインポートしてサンドボックスとして開くことも可能です。

連携のメリット

  • 素早い開発環境の立ち上げ: GitHub上のプロジェクトをすぐに開発可能な状態で開ける。
  • 共有とコラボレーション: CodeSandboxでの作業をGitHubを通じてチームメンバーと共有し、バージョン管理できる。
  • プロトタイピングとデモ: アイデアをCodeSandboxで素早く形にし、GitHubに保存して共有する。
  • 学習と実験: GitHub上のコードを安全なサンドボックス環境で自由に試すことができる。

CodeSandboxは開発ワークフローを効率化し、ブラウザ上での開発体験を向上させる強力なツールですので、GitHubとの連携をぜひ活用してみてください。

GitHub CopilotとGemini Code Assist

GitHub CopilotとGemini Code Assistは、どちらもAIを活用したコーディング支援ツールですが、いくつかの違いがあります。

GitHub Copilot

  • 概要: OpenAI Codexをベースにしており、コードの自動補完、提案、テスト生成、ドキュメント生成などを行います。
  • 強み:
    • 広範な言語とフレームワークのサポート: 多くのプログラミング言語とフレームワークに対応しています。
    • 豊富なトレーニングデータ: GitHub上の膨大な公開コードで学習しており、多様なコーディングパターンに対応できます。
    • IDEとの統合: Visual Studio Code、JetBrains IDEs、Neovimなど、主要なIDEと深く統合されています。
  • 特徴:
    • コメントからコードを生成する能力に優れています。
    • 既存のコードに基づいて、次の行のコードや関数全体を提案します。
    • 特定のタスクに対する複数の解決策を提案することもあります。

Gemini Code Assist (旧Duet AI in Google Cloud)

  • 概要: Googleの生成AIモデル「Gemini」をベースにしており、Google Cloud環境での開発に特化したAIアシスタントです。コード生成、デバッグ支援、セキュリティ脆弱性の特定、Google Cloudプロダクトとの連携などが主な機能です。
  • 強み:
    • Google Cloudとの深い統合: Google Cloudのサービス（Compute Engine, Cloud Functions, Cloud Runなど）に関するコード生成や設定支援に強みがあります。
    • セキュリティとベストプラクティス: Googleのセキュリティ専門知識を活用し、脆弱性の特定やベストプラクティスに基づいたコードを提案します。
    • チャットインターフェース: 自然言語で質問し、コードや解決策を得ることができます。
  • 特徴:
    • Google CloudのAPIやSDKを使用する際のコード生成に特に役立ちます。
    • エラーメッセージの解決策を提案したり、デバッグの手助けをします。
    • Google Cloudのセキュリティ基準に沿ったコードレビューや提案を行います。

主な比較ポイント

特徴 GitHub Copilot Gemini Code Assist
ベースAI OpenAI Codex Google Gemini
主な対象 汎用的なプログラミング作業 Google Cloud環境での開発、Google Cloudサービスとの連携
強み 広範な言語・フレームワーク、豊富なコード補完・生成 Google Cloudとの深い統合、セキュリティ、デバッグ支援
統合IDE Visual Studio Code, JetBrains IDEs, Neovimなど Cloud Workstations, Cloud Shell Editor, VS Code (プラグイン)など
主なユースケース コード補完、関数・クラス生成、テスト生成、ドキュメント生成 Google Cloud APIのコード生成、デバッグ、セキュリティチェック、Google Cloudリソース設定

どちらを選ぶべきか？