必見！AIコーディング活用術！Calude × Copilot で爆速ツール開発
エンジニアのYです。
最近、AIが想像を超えてきてませんか？
今回、AIに作ってもらった！のがこちらです。
AIにコーディングを任せることで開発効率が上がる！
そんな未来が、現実になってきていますね。
Github Copilotを使い始めてAIの有用性をひしひしと感じています。
今回は、Claude、Copilotを使用してどこまで作れるのか、
AIを通したツール開発を紹介します。
はじめに：なぜAI？
ここ最近、コーディングにおいてもAIの進化は勢いがあります。
今年、また大きく進化していくのではと記事、Youtubeでもよく見かけます。
ここで大きな変化があるなら、しっかり波に乗っていきたい！
（だって楽しそうだから）
ということで、今のうちにAIに慣れていこうと
いろいろと触ってみています。
今回作ってみたのは
キューブパズルを使ったモザイク画の配置を画像から生成するツールです。
キューブパズルでモザイク画を作る
ルービックキューブに代表されるキューブパズルの楽しみ方の一つとして、
モザイク画を作って飾るというものがあります。
キューブの色を適宜併せて配置することで、
模様や絵を再現するような遊びです。
今回はこの、キューブの配置図を生成するツールを作成してみました。
ツール実装の計画を立てる
要件
キューブパズルでモザイク画を作るということで、
必要な作業を事前に出します。
元画像を選択して、
指定の6色で30×30の画像で出力します。
ここで、シンプルに最も近い色で出力すると
色数が少なすぎるため、元画像に近い印象となりません。
ディザリングをかける必要があります。
また、
今回はせっかくなのでGithub Pagesで公開もしたいなと思います。
となると、HTMLで作成するのがスムーズそうですね。
実装計画
ブラウザで動作するツールを作成する場合は特に、
Claudeで作成するのがお勧めです。
実際に動作するものを見て確認できるのが良い点です。
その後、ある程度動作するものを
Github Copilotで調整していきます。
これは、微調整をする際にGithubで管理したいからです。
ちょっとした更新をバージョン管理しておけると安心して変更できます。
AIでツールを作ってみる！
Claudeでベースを生成する
まずは、Claudeでアプリのひな型を作っていきます。
Free Plan で問題ありません。
Calude
https://claude.ai/
最初の指示は
添付した画像を、30×30の画像に変換したい
変換後、使用する色は、6色（白、青、赤、オレンジ、黄色、緑）とする
適切にディザリングして変換する機能を作成して
としました。
下記のように、ある程度動作するものが出来上がってきます。
悪くないですね！
詳細な指示を与えてClaudeで作っていくことも可能だと思います。
ただ、「ちょっとした失敗」はよく発生します。
「ちょっとした失敗」がいくつもあると修正指示が出しづらいかなと思うので
今回は少しずつ作っていきます。
Github Copilotで修正を加える
微修正をGithub Copilotで行っていきます。
Cursor を使用しても問題ないと思います。
また、こちらもFree Planで問題ありません。
Github
https://github.com/
VSCode
https://code.visualstudio.com/
Github Copilot
https://github.com/features/copilot/
必要に応じてリポジトリの準備を行っておきます。
ツールの改修
VSCodeでワークスペースを開き、
Claudeで生成したベースアプリのソースをダウンロードして
ワークスペースに配置します。
Copilotを開いて、Agentモードにしておきます。
最初の指示は
このファイルを起動して
でどうでしょうか。
VSCodeで開こうとし、ブラウザへの案内もしてくれるはずです。
これで準備はできました。
少しずつ、改修を進めていきます。
以下、私が行った指示が下記のようになります。
Copilotへの指示
ファイルを種類ごとに分割してください
1ファイルだったものをhtml、js、css に分割してくれました
color-palleteの色を、変更できるようにしてください
HTMLで、デフォルト6色の部分をカラーピッカーにしてくれました
画像を選択したときに、選択している画像を表示するようにしてください
画像アップロードしても表示されていなかったので、表示してもらいました
実行ボタンが押せなくなりました、修正してください
実行ボタンが押せるようになりましたが、ひとつ前の画像表示がなくなりました
画像を選択したときに、選択している画像を表示したうえで、実行ボタンを押せるようにしてください
画像表示と、実行ボタンが有効になりました
リザルトの左側、元画像が表示されていません
元画像としてサンプル表示している部分が表示されなくなっていたので修正してもらいました
30×30と指定している部分を、変更可能なようにしてください
サイズを調整できるようにしたかったので指示しました。数値の入力エリアを追加してくれました
テキストも指定した値と連動するとよいですね
アプリのボタン等で残っていた「30×30」の表現を、入力した数値で置き換えてくれました
ファイル名も変換してください
ファイル名が「30×30」を常に含んでいたので、修正を指示しました
いいえ、ファイル名は指定する必要はありません、入力欄は不要です。ダウンロードするファイル名に、サイズを表現してください
ファイル名を入力する欄を用意してくれましたが、指定数値で置き換えてほしかったので再度指示しました
実行するたびに、出力用の画像をクリアしてください
出力画像に上書きしていたので修正してもらいました
出力サイズに応じて、画像の対象範囲を選択できるようにしたい
元画像と出力サイズの比率があっていない場合にも対応したかったので、範囲を指定できるように指示しました
範囲選択を、選択した画像の右に配置してください。また、選択範囲の境界線を表示して、リセットボタンも付けてください
範囲選択の機能を、画面の左上に用意してくれたので、配置の修正指示
このあと、下においてくれましたが許容しました。
選択範囲が見えなかったので境界線の指示を出しました
選択範囲の幅と高さを、出力サイズに併せてスケーリングするようにして
選択範囲が幅×高さに依らず、自由に指定できていたので、併せるように指示しました
選択範囲の比率を、出力サイズの比率に従うようにして
比率があっていなかったので、再度指示
選択範囲の表示を、比率計算の後のものとしてください
比率があっていなかったので、再度指示、実行時のみ比率があうようになりました
選択範囲を編集しているときも常に選択範囲の表示を更新してください
いつ合わせるのか理解できていないようなので、タイミングを指定して指示しました
この時の選択範囲も、出力の比率に併せた状態で表示してください
また比率を保持しなくなったので、再度指示しました
元画像の欄には選択範囲のみを表示してください
元画像にはファイルの画像がそのまま載っていたので、選択範囲のみを載せるようにしてみました
元画像の比率が崩れてしまっています。表示の比率をキープしてください。
元画像部分の比率が1:1だったので修正を指示しました
元画像の欄には選択範囲のみを表示してください。
ファイル画像をそのまま載せてきたので再度指示
選択範囲の幅、高さの比率を保ってください
選択範囲を、また比率があわない状態で表示していたので、再度指示して解決しました
出力ファイルのサイズを、指定した幅と高さに会うようにして
出力ファイルが30×30のサイズの画像になっていたので、修正してもらいました
出力画像に置いて、透過は許容できません。透過部分は白の扱いとしてください
アルファ値を使用していたので、使用させないように指示しました
が、少しでも透過していたら白になってしまったので
該当部分を直接αブレンドに手で修正しました
最初の画像選択を行うたびに範囲選択が増えているようです,
範囲選択するエリアが増殖していたので、クリアしてもらいました
範囲選択を、スマートフォンでも操作しやすくできますか？
あまり変わりませんでした
READMEを記載してください
いい感じにREADMEを記載してくれました
返還後の表示用の拡大版に、ドットの罫線を追加して
ブロックを判別できるように罫線を引いてもらいました、気を利かせて点線でした
点線ではなく、直線にして
見づらかったので直線にしてもらいました
幅と、高さの表示部分にStyleを宛てて、いい感じの見た目にしてほしい
幅と高さの入力欄がちょっと格好悪かったので格好良くしてもらいました
ディザリング変換の上に、少しだけ隙間を入れて
レイアウトの調整指示
日本語と、英語の言語切り替えに対応して
切り替えボタンを配置して、切り替えできるようにしてくれました
リセットボタンも対応して
script.jsで生成しているボタンの対応が漏れていたので、対応を指示しました
ダウンロードの対象を表示用の拡大版画像にしてください
小さい画像より、こちらの方が便利そうだったので変更してもらいました
罫線を3列ごと、3行ごとに太線にしてください
実際にキューブは3×3ですので、判別しやすいように強調してもらいました
太線をもっと強調してほしい
目立っていなかったので、目立たせるよう指示しました
変換前にホワイトバランスを、スライダーで調整できるようにして
明度調整の機能を追加してもらいました、RGBに分けて作ってくれました
ホワイトバランスのスライダーは1つでOKです
RGBに分割する必要はないのでまとめてもらいます
次に、コントラスト調整のスライダーも追加してください
コントラストも追加してもらいました（少ないマス、色で表現するとき、調整ができると便利です）
ホワイトバランス、コントラストのスライダーにStyleを宛てていい感じにしてください
スライダー部分のルックの調整をしてもらいました
アプリを公開しよう！
GithubPagesで公開設定します。
この部分は蛇足です👍
GithubのリポジトリのSettings＞Pagesで
index.htmlを配置したブランチの指定、フォルダの指定をしてOKそうです。
記事の最初に添付したURLで動作OKでした。
まとめ
Claude、Copilotを使用したツール作成は想像以上に精度高く作ってくれました。
ビューをある程度含むツールでは、もしくは含まなくても効率はよいと言えそうです。
今回作ったものの精度では、ある程度AIとのやり取りが必要になります。
この時、エンジニア的な知識があると、よりスムーズに指示することができます。
私は今回のHTML、CSSの中身についてはほぼノータッチですが、
JSを見て変数の指定、修正方法の提案にわずかに影響しています。
現状だと、AIでの開発は非エンジニアでも余裕！
と言うには、部分的な諦めを含みそうです。
また、実装詳細を理解せず、コード設計を理解せず、で実装できたのは
この規模だからというのがあります。
大規模でこのやり方をするとなると、まずパンクするのは私だろうと思います。
プロジェクトのサイズよにって、やり方を決めておけるとよさそうです。
とはいえ、
ちょっとしたツール開発で使う分には
エンジニアでも楽できそうですし、
非エンジニアでも可能な範囲は拡がってきていますね。
半年後にはまた状況は変わっているかもしれません。
今の、ビッグウェーブの波を感じていきたいですね！
今回作ったモザイク画は「ビビッド・ビート・スプライト」から絵を頂きました。
面をそろえる方が、実装より若干早かったかな。
私が高速化され、面をそろえる方が早くなりました。
Discussion