GitHub Copilot CLIを使って画面モックをリッチなデザインにしてみた
GitHub Copilotは、OpenAIの技術を活用したAIコード補完・支援ツールで、コマンドラインベース(CLI、Command Line Interface)も利用できる。
今回は、GitHub Copilot CLIを使って、画面モックをリッチなデザインに変更してみたので、その手順を共有する。
前提条件
下記記事の「GitHub Copilot CLIのインストールと起動」まで完了していること。
また、Windows端末上で操作すること。
GitHub Copilot CLIによる画面モック修正
GitHub Copilot CLIで、対話形式で指示を出していくことによって、画面モックをリッチなデザインに変更できる。その修正例は、以下の通り。
1) 以下のように、修正前のHTMLファイルを配置する。
2) 1)のフォルダ上でGitHub Copilot CLIを起動する。
3) 修正前の「list.html」は以下の通り。
4)「list.html」のデザイン変更の指示を出し、「Enter」キーを押下する。
5) Copilotから修正案を提示されるため、「1.Yes」を選択した状態のまま、Enterキーを押下する。以下同様に、修正案は「1.Yes」を選択していくものとする。
6) GitHub Copilot CLIで「list.html」を修正し、完了すると、以下のようなメッセージが表示される。
7) Copilot修正後の「list.html」の画面レイアウトは以下の通りで、リッチなデザインに変更されているのが確認できる。
8)「list.html」の一覧に、いくつかデータを追加するよう指示を出し、「Enter」キーを押下する。
9) Copilot修正後の「list.html」の画面レイアウトは以下の通りで、サンプルデータが一覧に追加されているのが確認できる。
10)「list.html」の一覧先頭空白行と「データがありません」という文言を削除するよう指示を出し、「Enter」キーを押下する。
11) Copilot修正後の「list.html」の画面レイアウトは以下の通りで、指示通りに一覧が修正されているのが確認できる。
12) 他のHTMLファイルのデザインも変更するよう指示を出し、「Enter」キーを押下する。
13) Copilot修正後の「complete.html」は、以下の通り。
14) Copilot修正後の「input.html」は以下の通りで、デザインは変更されたものの、プルダウン（月・日）やラジオボタン（性別）の設定値は空になっていることが確認できる。
15)「input.html」のプルダウン（月・日）やラジオボタン（性別）の設定値を追加するよう指示を出し、「Enter」キーを押下する。
16) Copilot修正後の「input.html」は以下の通りで、プルダウン（月・日）やラジオボタン（性別）の設定値が追加されていることが確認できる。
17)「list.html」の「データ追加」ボタンを押下した時の画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
18) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移ができていることが確認できる。
19)「list.html」の「更新」ボタンを押下した時の画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
20) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移・値設定ができていることが確認できる。
21)「list.html」の「削除」ボタンを押下した時の画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
22) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移・値設定ができていることが確認できる。
23)「input.html」で「確認」ボタンを押下した時の画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
24) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移・値設定ができていることが確認できる。
25)「complete.html」に遷移する画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
26) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移ができていることが確認できる。
●「confirm.html」からの遷移
●「confirm_delete.html」からの遷移
27)「complete.html」で「一覧に戻る」ボタンを押下した際の画面遷移を追加するよう指示を出し、「Enter」キーを押下する。
28) Copilot修正後の画面遷移結果は以下の通りで、指定した画面遷移ができていることが確認できる。
29) HTMLファイルのCSS定義を「common.css」に抜き出すよう指示を出し、「Enter」キーを押下する。
30) 期待通りのレイアウトでなかった場合は、修正するよう指示を出し「Enter」キーを押下すれば、 Copilot側で修正してくれる。
31) 修正が終わり、お礼の言葉を伝えれば、 Copilot側から応答を返してくれる。
32) 今回の修正前後のMockは、以下を参照のこと。
●修正前
https://github.com/purin-it/copilot/tree/master/mock-design-github-copilot-cli/before
●修正後
https://github.com/purin-it/copilot/tree/master/mock-design-github-copilot-cli/after
要点まとめ
- GitHub Copilot CLIは、OpenAIの技術を活用したAIコード補完・支援ツールで、コマンドラインベース(CLI、Command Line Interface)も利用できる。
- GitHub Copilot CLIを使うと、画面モックをリッチなデザインに変更できる。
