🦦

非開発者も簡単!日本語でAI機能付きアプリを作れるGitHub Sparkで色々作ってみた

2024/12/05に公開

なんでもCopilotでGitHub Copilotについて登壇させていただいた内容の中の、GitHub Sparkにフォーカスした記事となります。
https://nandemo.connpass.com/event/336399/

https://www.docswell.com/s/yuma/KL1Q6P-2024-11-20-nandemocopilot

はじめに

こんにちは、非開発者もしくは開発者のみなさま!

日々生活していて、「あーこういうアプリあったらいいのに」「このアプリのここだけだったらなあ」と思うことはありませんか?

非開発者の方は「じゃあ作ってみよう!」とはならないと思いますが、開発者であってもなかなか「じゃあ作ってみよう!」とまではいかないと思います。

そんな皆様に朗報です!

GitHubから、自然言語だけでアプリを作ることができる GitHub Spark が発表されました🎉
これを使えば「こういうアプリないかな…じゃあ作ってみよう!」と気軽にアプリを作ることができるようになります。

GitHubではGitHub CopilotというAIコーディングアシスタントも提供していますが、GitHub Sparkはアシスタントを超えた先、コーディングはすべてAIに任せるという機能です。

GitHub Sparkとは

どんなもの?

  • 自然言語のみでアプリを作成できる(日本語でおk)
    • AI機能も搭載できる
  • Unix哲学に基づく「マイクロアプリ」を作成できる
    • 1つのことをうまくやるアプリ
    • 複雑な機能は作れない
  • 作ったアプリはすぐに共有できる
  • スマホからも作成したり表示したりできる

さらに詳しく知りたい方はこちらの公式サイトをご覧ください。

https://githubnext.com/projects/github-spark/

どうすれば使えるの?

現在テクニカルプレビュー中なので、こちらのWaitlistに登録して招待をお待ちください。

https://github.com/github_spark_waitlist_signup/join

テクニカルプレビュー段階なので正式リリース時のお値段などはまだ公開されていません。(2024/12/5現在)

具体的な使い方は?

こちらの記事が画像付きでわかりやすいです↓

https://aadojo.alterbooth.com/entry/2024/12/05/144952

この数週間でUIが大きく変わったり、カスタマイズ可能な個所が増えたり(フォントや色の数など)しているので、これからも大きめの変更が入ってくるかもしれません。楽しみです。

更新を見守りたい方はこちら↓
github-spark-user-manual/CHANGELOG.md at main · githubnext/github-spark-user-manual

使い方はご紹介した記事にお任せして、この記事ではどんなものができるかお見せしていこうと思います。

GitHub Sparkで色々つくってみた

それではお待ちかね、色々作っていきます!
GitHub Sparkのいいところは、日本語で即アプリを作れるところ。
大変なところは、完全にアイディア勝負なところです。眠い&アドカレ締め切りまで時間がない中でアイディアを絞り出していきたいと思います!

指定した時間で終わる進捗バー

登壇時に使えそう。

timer

プロンプト

プロンプト1つごとに動作確認をして、期待したものと違う場合はさらにプロンプトを入力して修正していきます。

  • 15分で終わる進捗バー
  • 時間を好きに変えられるようにする
  • 入力された時間に合わせて時間のカウントを変更
  • 見た目をかわいくして

AI機能を組み込んだ進捗バー

timer-prompt-ikezaki

プロンプト

上記で作成したものに、追加のプロンプトを入力して修正しました。

  • 残り50秒でAIから応援メッセージが表示される

timer-prompt

プロンプトが自動生成されてセットされていたので、手動で書き換えました。

あなたはサンシャイン池崎です。残り50秒のユーザーを応援するハイテンションな短いメッセージを日本語で提供してください。回答はメッセージのみで、他の情報は含めないでください。

心拍数表示アプリ

登壇時に使えそう。聞き手の注意をそらしたいプレゼン時におすすめ(偽の心拍数を表示)。

heartrate

プロンプト

  • リアルタイムで心拍数を表示するアプリ

Bluetooth接続する機能を作れるらしいので、端末があれば本当の心拍数を表示できるかもしれません。(うまくいかなかった)

日常タスク管理アプリ

AIにアドバイスさせる。プロンプトで指示すれば項目もすぐ追加できるので、自分専用のタスク管理アプリが作れる。

task

プロンプト

  • 日常タスク管理アプリ
  • 期日を追加する
  • タスクを見てAIで一言アドバイスを生成するボタンを追加

自動生成されていたAIアドバイス用プロンプト

以下はあなたのタスク一覧です。これを見て、一言アドバイスをしてください。
${taskList}
アドバイスは1文でお願いします。

以下はタスク一覧です。これを見て、一言アドバイスとダジャレを取り入れたユニークな応援をしてください。
${taskList}
アドバイスは1文でお願いします。

に変更。

日常タスク管理アプリ(見た目変更)

「楽しい見た目にして」と追加で指示を出した結果です。
なんだかふよふよきらきらしていて楽しい気がします。「楽しい」と書いてありますし。

task-joy

何を書いたかAIに当ててもらうアプリ

一人遊びを極められます。「りんご」って言ってもらえない…

drow

プロンプト

  • ユーザーが描いた絵が何かをAIが推測して答えるゲーム
  • 絵の分析と、分析をしたAIのモデル名を表示して
  • もっと絵をかきやすいエディタにして

そのほか

執筆時点でWeb MIDI、Web Bluetooth、WebUSBなどのWeb APIにも対応しているので、思った以上に機能を持たせたアプリも作れると思われます。

MIDIを利用して音楽を生成するアプリを作成している人もいました。

こういうのできるかやってみて、みたいなコメントお待ちしています。

おわりに

非開発者がGitHub Sparkを使ってアプリを作る
→ もっといいモノを作りたくてコードをいじり始める

という流れでバリバリコードを書く開発者が増えるのを期待しています!

GitHub Sparkはコードをいじってすぐに変更を確認できるようになっているのが、開発沼への入り口な気がします。

code

Discussion