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

はじめに

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

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

このチュートリアルでは、Spark を使ったアプリの構築とデプロイを見ていきながら、その機能を調べます。

前提条件

• GitHub アカウントと Copilot Pro+。

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

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

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

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

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

   Text

   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.
   

   ヒント

   • 最善の結果を得るには、具体的に、できるだけ多くの詳細を指定します。 Copilot Chat を使って、最初のプロンプトの調整や、改善の提案を行うことができます。
   • または、Markdown ドキュメントを入力フィールドにドロップして、構築したいものに関する詳細なコンテキストを Spark に提供します。

3. 必要に応じて画像をアップロードし、Spark にアプリの表示の参考になるものを提供します。 モック、スケッチ、またはスクリーンショットはすべて、Spark に構築するもののアイデアを提供するのに役立ちます。

4. をクリックしてアプリを構築します。

   メモ

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

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

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

1. 自然言語を使ってアプリを変更するには、左側のサイドバーの [Iterate] タブのメイン入力フィールドに指示を入力して、送信します。
2. 必要に応じて、[Iterate] タブの入力フィールドのすぐ上にある [Suggestions] のいずれかをクリックして、アプリを開発します。
3. Spark は、検出されたエラーを自動的に警告します。 エラーを修正するには、[Iterate] タブの入力フィールドの上にある [Fix All] をクリックします。
4. 必要に応じて、 [Code] をクリックして、基になるコードを表示および編集します。 コード編集パネルには、Copilot のコード補完が組み込まれています。
5. アプリの特定の要素に絞って変更を行うには、右上隅にあるターゲット アイコンをクリックし、ライブ プレビュー ウィンドウで要素をポイントして選びます。

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

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

1. アプリの全体的な外観を変更します。

   • [Theme] タブをクリックして、書体、色、境界線の半径、間隔、その他のビジュアル要素を調整します。
   • アプリの全体的なスタイルを簡単に更新するには、事前に生成されているテーマから選びます。

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

3. 必要に応じて、コードでスタイルを編集します。

   • クリックしてコード エディターを開きます。

   • 細かい制御 (パディング、感覚、フォント、色など) のために CSS、Tailwind CSS、またはカスタム変数を変更します。

     ヒント

     カスタム フォント (Google フォントなど) をインポートしたり、Spark コード エディターで高度なスタイルを直接追加したりできます。 スタイルの構文に慣れていない場合は、Copilot Chat に詳しい手順を尋ねます。

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

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

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

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

このマーケティング アプリでは、ユーザーがお気に入りのマーケティング コピーを保存し、後でもう一度簡単にアクセスできるように、データ ストレージを追加しましょう。

1. [Iterate] タブで次の指示を使って Spark に伝えます。

   Text

   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] タブをクリックします。
2. アプリで使われている各 AI 機能を活用するために Spark が生成したプロンプトを確認します。
   • このマーケティング アプリでは、Spark は 3 つの異なるプロンプトを自動的に生成しました (マーケティング コピーの生成、視覚的戦略の推奨、対象者の推奨)。
3. 各プロンプトをクリックすると、コードに移動しないで表示および編集できます。 ユース ケースに合わせて調整を行います。
4. アプリをテストし、更新された結果を確認します。

ステップ 6: コードと Copilot を使用して編集およびデバッグする

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

1. Spark でコードを編集するには:
   • [Code] をクリックします。
   • エディターで Copilot のコード補完にアクセスし、ファイル ツリー内を移動して、編集を行います。 変更は、ライブ プレビュー ウィンドウにすぐに反映されます。
2. さらに高度な編集を行うには:
   • 右上隅の をクリックしてから、 [Open codespace] (フル機能のクラウド IDE) をクリックして、新しいブラウザー タブで codespace を起動します。
   • codespace 内に入ったら、 をクリックして Copilot を開き、より高度な変更を行います。
     • プロンプト ボックスで [Agent] モードを選ぶと、Copilot は自律的にコードを構築、レビュー、トラブルシューティングできます。
     • Copilot で [Edit] モードを選ぶと、アプリのコードがレビューされて、改善と修正が提案されます。
     • Copilot で [Ask] モードを選ぶと、Spark で示されるコードやエラーについて説明されて、理解するのに役立ちます。
   • Codespace で行った変更は、Spark に自動的に同期されます。

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

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

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

2. Spark は既定ではプライベートであり、自分だけがアクセスできます。 [Visibility] で、Spark をプライベートのままにするか、すべての GitHub ユーザーが使用できるようにするかを選びます。

   

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

   メモ

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

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

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

機能するアプリのデプロイが済んだので、GitHub リポジトリを作成して Spark にリンクし、他の GitHub プロジェクトと同じ方法で、アプリの構築と共同作業を続けることができます。

1. 右上隅の をクリックしてから、 [Create repository] をクリックします。
2. ダイアログ ボックスが開いたら、[Create] をクリックします。

GitHub の個人用アカウントに、Spark の名前に基づくリポジトリの名前を使って、新しいプライベート リポジトリが作成されます。

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

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

また、ユーザーはリポジトリで issue を作成し、それを Copilot コーディング エージェント に割り当てて、修正と改善のための pull request のドラフトを作成することもできます。

次のステップ

Spark を使って実現できる他のアイデアを調べます。

• 新しいアイデアのプロトタイプをすばやく作成する: 機能やアプリの具体的なアイデアがある場合は、Spark にモックアップ、スケッチ、スクリーンショットをアップロードしたり、Markdown ドキュメントを貼り付けたりして、Spark にアイデアを作るよう指示します。
• 自分用やチーム用の内部ツールを構築する: 現在はドキュメントやスプレッドシートで行っている一般的なワークフローまたはプロセスがある場合は、Spark にワークフローまたはプロセスを説明すると、Spark はそれを対話型の Web アプリに変換できます。

参考資料

• GitHub Spark の責任ある使用
• GitHub Spark の課金について
• GitHub プレリリース ライセンス条項