GitHub Spark を使用した AI を利用したアプリの構築とデプロイ

はじめに

GitHub Spark を使うと、望むことを自然言語で記述し、データ ストレージ、AI 機能、GitHub 認証が組み込まれたフルスタックの Web アプリを取得できます。 プロンプト、ビジュアル ツール、またはコードを使って反復処理した後、クリックしてフル マネージド ランタイムにデプロイできます。

Spark は GitHub とシームレスに統合されているため、同期された GitHub codespace と高度な編集用の Copilot を使って、Spark を開発できます。 チーム コラボレーション用のリポジトリを作成したり、GitHub のツールと統合のエコシステムを活用したりすることもできます。

このチュートリアルでは、 Spark を使用してアプリを構築およびデプロイし、その機能を探索する完全なライフサイクルについて説明します。

前提条件

•         GitHubまたはCopilot Pro+ ライセンスを持つCopilot Enterprise アカウント。
  

ステップ 1: Web アプリを作成する

このチュートリアルでは、次のような簡単なマーケティング ツール アプリを作成します。

• ユーザーは、販売する製品の説明を入力します。
• アプリはマーケティング コピーを生成し、視覚的な戦略と対象ユーザーを推奨します。

1.        https://github.com/spark に移動します。
   

2. 入力フィールドに、アプリの説明を入力します。 次に例を示します。

   Copilot prompt

   Build an app called "AI-Powered Marketing Assistant."
   
   The app should allow users to input a brief description of a product or service. When the user submits their brief, send this information to a generative AI model with a prompt that asks the AI to return the following:
      - Persuasive and engaging marketing copy for the product or service.
      - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood).
      - A recommendation for the ideal target audience.
   The app should display these three elements clearly and in an organized manner.  The app should look modern, fresh and engaging.
   

   ヒント

   • 最善の結果を得るには、具体的に、できるだけ多くの詳細を指定します。 コパイロットチャット に対して、最初のプロンプトの改善を調整または提案するように依頼できます。
   • または、マークダウン ドキュメントを入力フィールドにドロップして、ビルドする内容に関するより多くのコンテキストを Spark に提供します。

3. 必要に応じて、画像をアップロードして、アプリの視覚的な参照を Spark に提供します。 モック、スケッチ、またはスクリーンショットはすべて、何を構築するかのアイデアを Spark に提供するために機能します。

4. [ ] をクリックしてアプリをビルドします。

   メモ

          Spark は常に Typescript と React アプリを生成します。
   

ステップ 2: アプリを修正して拡張する

          Sparkアプリの生成が完了したら、ライブ プレビュー ウィンドウでテストできます。 ここから、自然言語、ビジュアル編集コントロール、またはコードを使用して、アプリを反復処理および拡張できます。

1. 自然言語を使ってアプリを変更するには、左側のサイドバーの [Iterate] タブのメイン入力フィールドに指示を入力して、送信します。

1. 必要に応じて、[Iterate] タブの入力フィールドのすぐ上にある [Suggestions] のいずれかをクリックして、アプリを開発します。

2.        Spark は、検出されたエラーを自動的に警告します。 エラーを修正するには、[Iterate] タブの入力フィールドの上にある **[Fix All]** をクリックします。
   

3. 必要に応じて、コード をクリックして、基になるコードを表示および編集します。 コード編集パネルには、インライン検索候補 Copilot 組み込まれています。
4. アプリの特定の要素に絞って変更を行うには、右上隅にあるターゲット アイコンをクリックし、ライブ プレビュー ウィンドウで要素をポイントして選びます。

ステップ 3: アプリのスタイルをカスタマイズする

次に、 Sparkの組み込みツールを使用して、アプリのスタイルを変更してみましょう。 または、コードを直接編集することもできます。

1. アプリの全体的な外観を変更します。 * [Theme] タブをクリックして、書体、色、境界線の半径、間隔、その他のビジュアル要素を調整します。

   • アプリの全体的なスタイルを簡単に更新するには、事前に生成されているテーマから選びます。

2. 特定のコンポーネントを対象にビジュアルを編集するには、ターゲット アイコンをクリックし、プレビュー ペインでアプリの要素を選びます。 その特定の要素に関連するスタイル コントロールが左側のサイドバーに表示されます。

3. 必要に応じて、コードでスタイルを編集します。 * ** **をクリックしてコード エディターを開きます。

   • CSS、Tailwind CSS、またはカスタム変数を変更して、パディング、間隔、フォント、色などの細かい制御を可能にします。

     ヒント

     カスタム フォント (Google フォントなど) をインポートしたり、Spark コード エディターで高度なスタイルを直接追加したりできます。 スタイル構文に慣れていない場合は、 コパイロットチャット に詳細なガイダンスを確認してください。

4.        **Assets** タブをクリックして、アプリに表示するアセットをアップロードします。
   

   • 画像、ロゴ、ビデオ、ドキュメント、またはその他のアセットを追加して、アプリをカスタマイズします。
   • アップロードしたら、 Spark これらの資産をアプリに組み込む方法を [反復処理] タブで指示します。

ステップ 4: データを格納して管理する

          Sparkアプリにデータを格納する必要が検出されると、キーと値のストアを使用して自動的にデータ ストレージが設定されます。

マーケティングアプリにストレージを追加し、ユーザーが好きなマーケティングコピーを保存し、後で簡単に再アクセスできるようにしましょう。

1. [反復処理] タブで次の手順を使用して、 Sparkをガイドします。

   Copilot prompt

   Add a "Favorites" page where users can save and view their favorite marketing copy results.
   

2. 生成が済んだら、アプリと対話してお気に入りの保存と取得をテストします。

3. [Data] タブを調べて、格納されている値を表示および編集します。

4.        **
          **で明示的にデータを保存Spark場合は、Sparkに "ローカルにデータを保存する" または "データを保持しない" ことを依頼してください。
   

ステップ 5: AI の機能を修正する

次に、 GitHub Modelsを利用して、アプリに含まれる AI 機能を反復処理してみましょう。

          Spark は、アプリの機能に AI が必要なタイミングを自動的に検出します。 ユーザーに代わって、各 AI 機能に対するプロンプトの自動生成、最適なモデルとの統合、API の統合と LLM の推論の管理を行います。

1. [Prompts] タブをクリックします。

1. 生成されたプロンプト Spark 確認して、アプリで使用される各 AI 機能を活用します。
   • マーケティング アプリの場合、 Spark が生成した 3 つの個別のプロンプト (マーケティング コピーの生成、ビジュアル戦略の推奨事項、ターゲットユーザーの推奨事項) があります。
2. 各プロンプトをクリックすると、コードに移動しないで表示および編集できます。 ユース ケースに合わせて調整を行います。
3. アプリをテストし、更新された結果を確認します。

手順 6: コードを使用して編集とデバッグを行う Copilot

          Sparkで直接、または同期されたGitHubコード空間を使用して、アプリのコードを表示または編集できます。

          **外部ライブラリを追加する**ことはできますが、互換性は保証されないので、十分にテストする必要があります。

• React コードを直接編集すると、有効な構文と**** のフレームワークに従っている限り、Sparkできます。

1.        Sparkでコードを編集するには:
   

   * コード をクリックする。
   • ファイルツリーを移動し、エディターでCopilotのインライン提案にアクセスして編集を行います。 変更は、ライブ プレビュー ウィンドウにすぐに反映されます。
2. さらに高度な編集を行うには:
   • 右上隅の [] をクリックし、[] (フル機能のクラウド IDE) **** クリックして、新しいブラウザー タブでコード空間を起動します。
   • コードスペース内に入ったら、 をクリックして Copilot を開き、より高度な変更を加えます。
     • プロンプト ボックスで エージェント モードを 選択して、 Copilot がコードを自律的にビルド、確認、トラブルシューティングできるようにします。

     •   **
         **のCopilotモードを選択してアプリのコードを確認し、改善と修正を提案します。
       

     •   **
         **の [Copilotモード] を選択して、コードやSparkに表示されるエラーを理解しやすくします。
       

   • コードスペースで行った変更は、自動的に Sparkに同期されます。

ステップ 7: アプリをデプロイして共有する

          Spark には、ワンクリックでアプリをデプロイできる完全に統合されたランタイム環境が付属しています。

1. 右上隅の [Publish] をクリックします。

2. Spark は既定ではプライベートであり、自分だけがアクセスできます。 [可視性] で、Spark をプライベートのままにするか、 GitHub上の特定の組織のメンバーまたはすべての GitHub ユーザーが Spark を使用できるようにするかを選択します。

   

3. [データアクセス] で、他のユーザーにアプリへの読み取り専用アクセスまたは書き込みアクセスを付与するかどうかを選択します。

   他のユーザーにアプリの閲覧を許可しても、コンテンツの作成、編集、削除は許可しない場合は、[read-only] を選びます。

   たとえば、家族のカレンダー アプリを作成し、ユーザーにアプリの閲覧は許可しても、イベントの作成、編集、削除は許可しない場合は、[read-only] を選び、ユーザーが Spark のデータ ストアを変更できないようにします。

4.        **[Visit site]** をクリックして、稼働中のデプロイ済みアプリに移動します。 サイトの URL をコピーして他のユーザーと共有します。
   

   アプリを発行すると、 Spark には、統合ランタイムの一部としてアプリケーションが使用するためのクラウドベースのストレージと LLM 推論が自動的に含まれます。

   Spark の URL は、Spark の名前に基づいて生成されます。 アプリの名前を編集できます。 Spark は、古い URL から最新の URL への再ルーティングを自動的に管理します。

ステップ 8: リポジトリを使用してコラボレーターを招待する

機能的でデプロイされたアプリが作成されたので、GitHub リポジトリを作成して Spark にリンクすることで、他のGitHub プロジェクトと同じ方法でアプリのビルドと共同作業を続けることができます。

1. 右上隅にある [] をクリックし、[リポジトリの作成] クリックします。

2. ダイアログ ボックスが開いたら、[Create] をクリックします。

          GitHubのあなたの個人アカウントに、スパークの名前に基づいて命名された新しいプライベートリポジトリが作成されます。
   

リポジトリの作成前に Spark に対して行った変更はすべてリポジトリに追加されるため、作成後に Spark に対して行われたすべての変更とコミットの完全な記録が得られます。

Spark とリポジトリの間には双方向の同期があるため、 Spark またはリポジトリのメイン ブランチで行われた変更は、両方の場所に自動的に反映されます。

リポジトリに問題を作成し、それらを Copilot クラウドエージェント に割り当てて、修正と改善のための pull request を下書きできるようにすることもできます。

次のステップ

          Sparkを使用して構築できるその他のアイデアを調べる:

* 新しいアイデアをすばやくプロトタイプ化する: 機能やアプリの特定のアイデアがある場合は、モックアップ、スケッチ、スクリーンショットをアップロードするか、マークダウンドキュメントを Spark に貼り付けて、 Spark にアイデアを構築するように依頼します。 * 自分とチームの内部ツールを構築する: ドキュメントまたはスプレッドシートに現在配置されている一般的なワークフローまたはプロセスがある場合は、ワークフローまたはプロセスを説明して Spark し、 Spark 対話型 Web アプリに変換できます。

参考資料

•         [AUTOTITLE](/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)
  

•         [AUTOTITLE](/copilot/concepts/copilot-billing/about-billing-for-github-spark)
  

•         [AUTOTITLE](/free-pro-team@latest/site-policy/github-terms/github-pre-release-license-terms)