初めての Spark

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

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

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

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

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

   Copilot 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 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 はこれらの問題を特定し、プロンプト テキスト ボックスの上にある [エラー] ポップアップに一覧表示します。 エラーを修正するには、[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.

アプリの共有

これでアプリに満足したので、他のユーザーと共有できるように公開しましょう。 また、Spark を [read-only] として共有することで、他のユーザーにアプリのコンテンツを閲覧することは許可しても、コンテンツの編集、ファイルやレコードの削除、新しいアイテムの作成は許可しないことができます。

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

2. 既定では、Spark はプライベートとして公開され、自分だけがアクセスできます。 他の GitHub ユーザーがアプリにアクセスできるようにするには、発行ドロップダウンの [表示] セクションで、[ 組織 ] を選択して、選択した組織のすべてのメンバーが Spark にアクセスできるようにするか、 すべての GitHub ユーザーにアクセスできるようにします。 これにより、 GitHub アカウントを持つすべてのユーザーが Spark にアクセスできます。

   

3. Spark を他のユーザー (プライベート以外の任意の設定) に表示する場合は、パブリケーションのドロップダウンに [データ アクセス] オプションが表示されます。 これにより、Spark 内のコンテンツとデータを編集するアクセス権を持つユーザーを制御するオプションが提供されます。

   

[読み取り専用] を選択すると、他のユーザーがコンテンツやデータを作成、編集、または削除することなく、アプリを表示できます。 [書き込みアクセス 選択すると、ユーザーは Spark 内のコンテンツとデータの編集と表示の両方を行えます。

たとえば、ファミリー カレンダー アプリを作成し、アプリを紹介したいが、ユーザーが予定表のイベントを作成、編集、または削除できないようにする場合は、[読み取り専用] を選択します。

1. [サイトの表示]をクリックしてデプロイしたアプリを表示し、アプリの URL をコピーして共有します。

次のステップ

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

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

参考資料

• GitHub Spark の責任ある使用
• GitHub Sparkの請求