VSCodeのGitHubCopilotに画像レイアウトを指定してアプリ作成を依頼する

VisualStudioCodeのGitHubCopilot

VisualStudioCodeのGitHubCopilotはAIによるコードの自動生成や説明の生成など、様々な機能を提供します。
利用手順の詳細は以下の記事を参照ください。
bluebirdofoz.hatenablog.com

今回はGitHubCopilotを使って画像レイアウトを指定してそろばん学習アプリの作成を依頼してみたので結果を記事にします。

サンプルとなる画像レイアウトを作成する

事前にアプリの画面レイアウトを画像で作成しておきます。
今回は以下の記事で紹介したMiroを使ったレイアウトの作成方法を利用しました。
bluebirdofoz.hatenablog.com

以下の通り、6つのアプリ画面のサンプルをMiro上で作成し、画像ファイルとして出力しました。

画像レイアウトを指定してアプリ作成を依頼する

VSCodeを起動し、GitHubPagesで公開するリポジトリのトップフォルダを開きました。
[Toggle Chat]アイコンをクリックして、GitHubCopilotのチャットビューを開きます。

チャットビューに作成した画像をドロップして読み込ませます。

合わせて以下の作成するアプリの概要を記述して実行してみました。

GitHub Pagesで公開できる「そろばん学習」のWebページを作成してください。
「そろばん学習」のWebページはそろばん計算のやり方を問題を解きながら学習することができるアプリです。
MicrosoftEdge、GoogleChrome、Safariのブラウザ環境で利用できるようにしてください。

アプリページを開くと、最初にタイトル画面が開きます。
タイトル画面にはそろばん計算を始める「スタート」ボタンと、難易度の設定変更を行う「カスタマイズ」ボタンがあります。
ページ下部には現在の難易度の設定が表示されます。
難易度の設定では問題の数や計算式の桁数、計算式の種類などを変更できます。

タイトル画面から「スタート」を押すと、そろばん計算画面が開きます。
表示された計算式にしたがって、そろばんのたまをクリックして、計算式の結果とそろばんの結果が合えばゲームクリアになります。
結果画面ではスタートからゲームクリアまでかかった時間と回答した問題の数が表示されます。

タイトル画面から「カスタマイズ」を押すと、設定変更画面が開きます。
設定変更画面では問題の数や計算式の桁数、計算式の種類などを選択して変更できます。
変更した後「タイトルに戻る」でタイトル画面に戻ると変更した設定内容が表示されます。
この状態で「スタート」を押すと、そろばん計算に設定が反映されます。

画面レイアウトは添付の画像を参考にしてください。
01_タイトル画面.jpg：タイトル画面
02_そろばん画面01.jpg：そろばん計算画面（開始時）
03_そろばん画面02.jpg：そろばん計算画面（１つめの数字入力成功時）
04_そろばん画面03.jpg：そろばん計算画面（すべての数字入力成功時）
05_そろばん画面04.jpg：そろばん計算画面（結果画面）
06_設定画面.jpg：設定変更画面

実行が完了すると以下のファイルが生成されました。
・index.html
・script.js
・styles.css
・README.md

作成したアプリを試す

index.htmlをブラウザで開くと以下の通り、凡そ指定した画像レイアウトに従ったWebアプリが動作しました。

Webページで公開する

以下のURLから本記事で自動生成したそろばん学習アプリを試すことができます。
holoadventure.github.io

GitHub Pagesで公開できるように作成依頼しているので、以下の手順でリポジトリをWebページとして公開するだけで誰でもアクセスして遊ぶことができます。
bluebirdofoz.hatenablog.com

作成したアプリを改修する

もし作成したアプリの動作が想定と異なる場合はチャットビューで続けて改修の指示を行うことができます。