初めての Spark

すばらしいアプリのアイデアを思い付いたのに、構築するツールがなかったということはありませんか。 今や、AI の助けを借りて、自然言語だけを使ってあっという間にアプリのアイデアを形にすることができます。 この記事では、GitHub Spark を使用し、自身ではコードを 1 行も記述せずに、単語検索アプリの構築、改良、共有を行います。

アプリのプロトタイプの作成

まず、後から改良できるような、基本的なアプリの初期バージョンを生成しましょう。

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

2. 次のプロンプトを送信して、アプリの最初の反復を生成します。

   Copilot Chat prompt

   Please create a word search game. The game should take in a set of words from the user, then create a word search puzzle containing those words, as well as a word bank listing the words. Words in the puzzle can be horizontal, vertical, diagonal, forwards, and backwards, and are "found" when the user clicks and drags their mouse across them. Once all words are found, give the user the option to create a new puzzle.
   

3. Spark によるリアルタイムのアプリ構築を見てみましょう。 プレビューが表示されたら、アプリの生成は完了です。

4. アプリをテストするには、プレビューを使用してパズルを作成し、解きます。

アプリの改良

このとおり、機能するアプリができました。 ただし、まだ調整が必要です。 Spark にさらにプロンプトを送信して、プロジェクトを改善しましょう。

1. ページの左側の [Iterate] タブで、次のプロンプトを送信します。

   Copilot Chat prompt

   Please add a leaderboard and a timer to the game. The timer should start when the user generates a new puzzle, then stop when all words are found. The user should then be able to enter their name, and their name, time, and the number of words in their puzzle should be displayed on the leaderboard. The leaderboard should be sortable in ascending and descending order by each of the three categories.
   

2. アプリが更新されたら、アクションの新しい機能を確認するために、別のパズルを作成して解きます。

3. 創造性を発揮して、アプリを独自に改良してください。 行き詰った場合には、Spark のプロンプト テキスト ボックスの上に表示された提案のいずれかを選びます。 [Theme]、[Data]、[Prompts] タブのビジュアル編集コントロールを使用して変更を加えることもできます。コードを記述する必要はありません。

アプリのデバッグ

アプリを構築しているときに、エラーが発生することがあります。 多くの場合、このような問題は Spark によって特定され、プロンプト テキスト ボックスの上の [Errors] ポップアップに一覧表示されます。 エラーを修正するには、[Fix all] をクリックします。

Spark によってフラグが設定されなかったエラーを見つけた場合は、修正するプロンプトを記述します。 最良の結果を得るには、エラーの詳しい説明だけでなく、修正後の理想的な状態も指定します。 たとえば、特定の文字数を超える単語を追加するとパズルが正しくレンダリングされないことに気が付いた場合は、次のプロンプトを送信します。

Please prevent users from entering words longer than the number of rows or columns in the puzzle. Additionally, add an option to change the size of a puzzle. If the user tries to enter a word that's longer than the current size of the puzzle, display an error message telling them that provided words must be less than or equal to the size of the puzzle.

Please prevent users from entering words longer than the number of rows or columns in the puzzle. Additionally, add an option to change the size of a puzzle. If the user tries to enter a word that's longer than the current size of the puzzle, display an error message telling them that provided words must be less than or equal to the size of the puzzle.

アプリの共有

アプリに満足できたら、デプロイして他のユーザーと共有しましょう。

1. ページの右上隅の [Publish] を選びます。

2. 既定では、spark は非公開としてデプロイされ、ご自身だけがアクセスできます。 他の GitHub ユーザーにアプリへのアクセスを許可するには、公開ドロップダウンの [Visibility] セクションで、 [All GitHub users] を選びます。 これで、GitHub アカウントを持つすべてのユーザーに spark へのアクセスが許可されます。

   

3. パブリケーション ドロップダウンの [Data Access] セクションで、アプリに対する読み取り専用または書き込みアクセス権限のどちらかを他のユーザーに付与します。

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

   たとえば、家族向けカレンダー アプリを作成して、アプリを表示したくても、カレンダーのイベントの作成、編集、削除は許可しない場合は、[read-only] を選びます。

4. [View site] をクリックして、デプロイしたアプリを表示し、それからアプリの URL をコピーして共有します。

次のステップ

今回は単語検索アプリを作成しましたが、Spark ではあらゆる種類の Web アプリを作成できます。 ご自分で新しいアプリを作成してみてください。 インスピレーションが必要な場合は、次のアイデアを参考にしてください。

• ニュース収集アプリやインテリジェント レシピ ジェネレーターを構築してみる。
• 予算の設定、支出一覧の取り込み、予算の合計残額の表示を行うことができる、予算管理を構築する。 各支出にカテゴリと日付を設定すると、さまざまなカテゴリごとに支出を並べ替えることができます。

参考資料

• GitHub Spark の責任ある使用
• GitHub Spark の課金について