初めてのアプリを GitHub Spark ですばやく構築

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

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

基本的なアプリの初期バージョンをまず生成しましょう。このアプリの構築を後から継続できます。

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

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

   Text

   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] タブで、次のプロンプトを送信します。

   Text

   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. アプリが更新されたら、アクションの新しい機能を確認するために、もう 1 つのアプリを作成して解決します。

3. 創造性を発揮して、アプリを独自に改良してください。 行き詰った場合には、Spark がプロンプト テキスト ボックスの上に表示する提案の 1 つを選択します。 [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] を選択します。 既定では、spark は非公開としてデプロイされ、ご自身だけがアクセスできます。 他の GitHub ユーザーにアプリへのアクセスを許可するには、公開ドロップダウンの [Visibility] セクションで、 [All GitHub users] を選択します。 これで、GitHub アカウントを持つすべてのユーザーに spark へのアクセスを許可します。

   

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

次のステップ

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

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

参考資料

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