ClaudeでAIコーディング初挑戦

目次

概要

巷で噂のAIコーディングをやってみましたので、少し感想など記したいと思います!
岡山大学の乃村先生からも紹介されており興味はあったので、業務の隙間を見つけてやってみました!

なお毎度の事ですが、紹介記事ですので、何か結果を保証するものではございませんので悪しからず。

ゴール

Claude AI (無料プラン)を使って、何らか動作するAndroidアプリを作る!

Github CopilotやGeminiなど、他にも選択肢はあるようですが、初めてなのでなんでもよく、乃村先生から紹介いただいたClaude(クロード)と言うAIを使ってみる事にしました。

https://claude.ai/new

そして現時点ではお試しレベルなので、無料版でチマチマと進めます。

使ってみた感じ、5~10回位プロンプトを入力するとそれ以上受け付けなくなり、4、5時間待つことになります。メインの業務進めながらなので、出来る範囲で進めていきます。その他アップロードするファイルの量・サイズ、回答速度などに制限があるようです。また有料版はローカル環境までAIに読み込ませることができ、そこも含めてコードを提案してくれると言う事なので、是非とも有用性をアピールして会社で料金払って貰おうと思います!

ちなみにローカルの環境ですが、Android Studio (Koala 2024.1.1) を使っています。数年前にセットアップしたまま使っておらず、今回アップデート。またKotlin自体も初めて触ります。

AIコーディング開始

まず何を作るかなんですが、バーコードスキャンアプリを作る事にしました。
当社の医療情報部門ではユーザー様環境にPCやネットワーク機器を納めており、機材管理業務が発生します。機材毎にS/Nを記録しておく必要があり、(既存のアプリより)使いやすい・当社運用に即したアプリを提供する、と言う事で進めていきたいと思います。

では早速AIコーディングを始めてみます。見せて貰おうか、AIコーディングの実力とやらを!

口を開いて待っているクロード君(Claude AI)に向かっておもむろに、
「androidで、カメラ内に映ったバーコードとQRコードを読み取るアプリ作りたい」
と、思いをそのまま打ち込みました。僕のAIコーディング初体験です。するとクロード君は一瞬考えたかと思うと、一気にコードをすらすらと書いてくれました!

当時、動画を撮るのを忘れておりましたので、執筆時に改めて実行し、動画に収めました。ご査収ください。

さらっとこんなコードを書いてくれます。初回はMainActivity.ktファイルにすべてを詰め込んだ形でしたが、動画撮影時は2ファイルに分かれていました。1ヶ月位は経過しているので、その間、学習が進んだんですかね。

またこの「コードを生成する時の見栄え」が良いですね。内部では提示する物がきちっと揃っていると思いますが、コードは上から順番にたらたら~~と出力されてきますので、あたかもAIが考えて書いているような見え方になっています。とてもよい演出に思います。

そして、コードの提示と説明はして貰ったのですが、Androidプロジェクトの初期設定が分からず、それもクロード君に聞いてみました。

プロジェクトの作り方も教えてくれますし、ファイルの配置の仕方、ビルドの仕方も分かりやすく教えてくれます。

僕はエミュレーターは使わず手元のAndroidスマホにUSB接続して動作確認しましたが、たったこれだけでサクッと動く物ができてしまいました。

あたかも、超優秀なプログラマーと対話している感じです。世界の事例を学習しているので、半端ない対応力なのです!

とにかくあまり深い事は考えず、やりたい事をクロード君に伝える、と言う事で、初回に動作するアプリは以下の機能で進めました。

  • アプリ起動したらカメラ撮影モード。
  • 撮影エリアにバーコードがあれば自動スキャンして結果を表示する。
  • 再撮影ボタン押下で最初に戻る

初回のプロンプト入力からこの形で動くようになるまで、ビルドエラーが出たのでその対処も含めて、5回のプロンプト入力で完成しました。
簡単なアプリだと、5回注文付けるだけで動く状態になるのって、すごくないですか?Kotlinの文法も撮影を可能にするライブラリが何なのかも、何も知らずにです。

以降の開発内容

初回動く物は作れたのですが、ただこれだとバーコードの写真内の位置調整もできず(撮影エリアに入り、バーコードだと認識した瞬間に読み取ってしまう為)、アプリの動作を定義しなおして、コードを修正して貰いました。

動作フローを変えたいです。自動検知機能は使わず、写真撮影し、静止画から検知する形です。
以下、動作フローを記載します。

1.最初は写真撮影モードで、使用可能なボタンはシャッター用の丸ボタンのみ。
  丸ボタン押下で写真を撮影し、静止画を表示する。

2.静止画表示時は、再撮影ボタン、検知ボタンが使用可能。スキャンボタンは使用不可。
  再撮影ボタン押下で1の写真撮影モードに戻る。
  検知ボタンは、表示された静止画の中からバーコードを探します。
   バーコードが見つかれば、緑枠を表示し、スキャンボタンを使用可能にする。
   バーコードが見つからなければ、バーコードが見つからなかったメッセージを表示する。

3.スキャンボタン押下で、検知エリアにあるバーコードを読み取り、結果を表示する。

4.結果が表示された状態で再撮影ボタンを押下すると、結果はクリアされ、1の写真撮影モードに戻る

このプロンプトを入力すると、「動作フローを完全に変更します。自動検知を削除して、シャッターボタンで撮影→検知→スキャンの流れに変更します。」と言って、コードが自動的に編集されだします。不要な箇所のコードがBackSpaceで消えていき、新しいコードがだだだだ~と表示されだします。すごい!

また上記の動作フローの変更以外に、以下の機能を加えました。この機能含めて正しく動作するようになるまで、53回のプロンプト入力を行いました。

  • 検知ボタンでバーコードを検知した際に、静止画上に検知した枠を表示する。
  • スキャン後に使える保存機能を追加。共有フォルダ/Download/アプリ名/年月日フォルダ/時分秒.jpg、時分秒.txtとして写真と読み取り結果を保存。

これだけだと何も問題なく進んでそうに見えるかも知れませんが、実際には不具合も結構でます。

  • 写真撮影モードで撮影した静止画が正しく表示されない
  • 枠線を表示した際に、静止画全体にノイズとして表示されてしまう
  • 検知したバーコードの枠が、90度回転した状態で表示されてしまう
  • ビルドエラーが出る
  • ファイル保存に失敗する。

人がやってもAIがやっても同じです!ですが、対話で状況を知らせると対策を提示してくれますし、対策が分からない場合はログ出力を埋め込んで、そこに何が出力されるのか教えてくれ、と、これまた人間がやってきた事と同じ手法で原因を探っていく様も見受けられます。思わずニヤニヤしてしまいました。

この状態で動作内容は確定しましたので、続いてリファクタリングに入ります。MainActivity.ktに全部詰め込んだ形ですので、クラスに分ける形にしました。出来上がったのが以下の形です。

com.example.barcodescanner/
├── MainActivity.kt
├── barcode/
│   └── BarcodeProcessor.kt
├── camera/
│   └── CameraManager.kt
├── storage/
│   └── ScanResultStorage.kt
└── ui/
    ├── BarcodeScannerScreen.kt
    └── components/
        ├── CameraPreviewArea.kt
        ├── CapturedImageArea.kt
        ├── ControlFooter.kt
        ├── ButtonArea.kt
        └── MessageArea.kt

そして、アプリ起動中のスクリーンショット。超シンプル。

  1. 起動時のカメラ使用許可
  2. 撮影モード、シャッターボタン
  3. 撮影結果表示、検知ボタン、再撮影ボタン
  4. 検知結果表示、スキャンボタン、再撮影ボタン
  5. スキャン結果表示、再撮影ボタン、スキャンボタン、保存ボタン
  6. 保存結果表示、再撮影ボタン、スキャンボタン

保存先は、「共有フォルダ\Download\BarcodeScanner\yyyyMMdd\」です。画像ファイルとテキストファイルを対で保存します。

パソコンにUSB接続して、パソコン側で内容を表示する、と言う形になっています。

ソースコードはGitHubにアップしました。
https://github.com/yamaken-systems/BarcodeScanner

残課題

一通り動き、使い勝手は悪くない状態にできたのですが、もう少し手を加えたいと思っています。

  1. テストコードを追加して、ユニットテスト可能な状態にする。(進行中)
  2. スキャン結果の確認方法を変更
  3. 1ショット内に複数バーコードがある場合の対応

1.について、折角自分以外にコーディングして貰っているので、テストコードも作って貰えば楽、と言うか実業務で使う場合の工数削減要素になり得る。これ大事です!

2.について、現在スマホの共有フォルダ内に画像とテキストをセットで配置し、パソコンから確認する事を前提としています。管理自体はパソコンや共有サーバーで行うのでパソコンから確認するのは良いと思いますが、1ファイルに1スキャン結果が入っており、対象が多いと結果確認が面倒だと思います。なので、当日分など、ある程度の量をまとめて一覧形式で表示できる形になると良いな、と思っています。

上記もう少し踏み込むと、HTMLで画像とテキストを一覧表示できると良いなと思っているのですが、Androidの共有フォルダはWindowsのファイル共有とは別のプロトコルになっているようで、Javascriptで読みに行く事ができません。なので今の所どう対処するのか未定です。使う人にも確認して検討します。

3.について、現状は任意に撮影し、その中からスキャン対象を検知させているのですが、複数のバーコードが映っていても、どれか一つしか対象になりません。プログラム側で自動選別されています。複数対象がある場合、複数個所スキャンできるようにするか、いずれかを選択させるの2択かなと思いますが、まだそこまで辿り着いていません。

まだまだやる事ありますね。

まとめ

今回初めてAIコーディングやってみましたが、ハッキリ言って凄すぎました!
何が凄いかって、中身何も分からない人でも、普段自分が話す言葉で伝えるだけで、アプリとしては想定している物ができてしまうんです!

AIも間違う事があるので、提示された内容を人間がチェックし、本来こうあるべき、と言う所に持って行くのがベストだと思いますが、その辺を気にしなくていい簡単なツールや、そこは完全に割り切ってしまうとすると、開発者でなくても十分動く物ができると言う事です。(良くはありませんが。)
これは革命的ではないかなと思います!

僕自身の現在の作業は、かなり古いシステムに機能追加や改修を行う事が多く、またコーディング以外の作業も多く、AIに仕事を奪われる…になるまでまだ暫く掛かるのではないかと思いますが、10年後はどうなっているか、分かりませんね。

と言う事で今回はここまで。残作業結果もどこかでアップしたいと思います。それではまた~!

よかったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!
目次