こんにちは！ GitHub Universe波にまだまだ乗っていきたい、めゆです！🌊
先日、GitHub Sparkが自分の環境で使えるようになったので、GitHub Sparkを利用してTodoアプリを作成してみました。
GitHub Sparkとは？
GitHub Sparkとは簡単に言うと、自然言語のみでコーディングなしに、アプリを作れるツールです。 GitHub Sparkに関しての詳細は下記をご覧ください。
GitHub Sparkの始め方
GitHub Sparkは現在テクニカルプレビューのため下記のWaitリストに登録し、通過するまで待つ必要があります。通過するとメールが届き、Waitリストに登録したアカウントでGitHub Sparkが使用可能となります。
使用可能になった後は下記のユーザーマニュアルを参考に進めていきます。
では早速アプリを作成していきます！
アプリ作成
上記のURLにアクセスし、GitHub Sparkを始めます。 まず作りたいアプリの内容を入力します。この時、アプリ作成に使用するLLMを選択することができます。選択可能なLLMは、下記の4つです。
- Claude Sonnet 3.5
- GPT-4o
- o1-preview
- o1-mini
今回はClaude Sonnet 3.5を使用してアプリを作成してみます。
作りたいアプリの内容を自然言語で伝え、「Go」を押すとアプリの作成を開始します。作成が終わると下記の画面のように作成されたアプリが表示されます。
実際にアプリを触ってみます。
新しいToDoを追加することができました。また、完了したTodoにマークをつけることもできました。
アプリの追加開発
それでは、こちらにTodoの削除機能と、更新機能をつけたいと思います。アプリを修正したいときはサイドバーにある「Iterate」のところにどのように修正したいかを書き込み、送信します。
鉛筆のマークとゴミ箱のマークが追加され、更新と削除ができるようになりました。
AIをアプリに取り入れる
次は、作成したToDoに対してAIに優先度をつけてもらうようにします。
ちなみにアプリ内で簡単にAIの機能が使える理由としては、GItHub SparkのランタイムにGitHub Modelsが統合されているからだそうです。下記の記事に記載がありました。
複数の提案を受ける
次は、作成したTodoの期限をカレンダーで管理するための機能を追加してもらいます。今回は紙飛行機が二つのボタンを押してみます。
こちらのボタンでは３つのパターンを一度に生成してもらい、気に入ったものを適用することができるようになっています。
下記のように、ToDoの期限を追加できるようになり、その期限をカレンダーで確認できるようになっていました。
サイドバーの紹介
見た目もサイドバーから簡単に変えることができます。
また、アプリに使用しているデータはサイドバーの「Data」から確認することが可能で、直接編集したり削除することも可能になっています。
先ほど使用したAIの機能についてもサイドバーの「Prompts」からプロンプトを確認することができ、こちらも編集が可能となっています。
また、ToDoのCRUD操作を行った時に、ログを残すようにしたいと考えたので、下記のように指示しました。
するとサイドバーに「Logs」が追加され、CRUD履歴が表示できるようになりました。
アプリの作成の履歴を遡って確認することが可能です。また、選んだ地点から再度アプリ開発を行うことも可能です。
アプリケーションの共有
アプリケーションを共有したいときは、右上の共有ボタンからリンクをコピーすることができ、読み取りアクセスか、書き込みアクセスかを選択し、ほかの人に共有することができます。
コードの確認
作成したアプリのコードは右上の<>のマークを押すと確認することができます。
スマホから簡単にアクセス
また、https://spark.githubnext.com/のリンクをスマートフォンでホームスクリーンに追加すると、スマホアプリのように開くことができるようになります。作成したアプリを選択すると、あたかもスマホアプリのように動かすことができます。 また、スマホ上でもアプリを編集することができます。GitHub Sparkさえあれば、スマホ一つで、自然言語のみで簡単にアプリ作成ができるのです。
まとめ
GitHub Sparkを使って、自然言語のみでアプリを簡単に作成することができました。
自然言語のみで開発ができる、というのは大きなポイントなのですが、AIを取り入れたアプリをコーディングなしで作成できるというのが個人的にはとても衝撃的でした。 今後もGitHub Sparkに注目していきたいと思います！
サービス一覧 www.alterbooth.com www.alterbooth.com www.alterbooth.com
