Amazon Q Developer @windows 環境で利用するときに特別なツールやWLSを使わず画像からHTMLをおこしたい

画面をおこす際に画像からUIをおこす

普段画面をデザインし、フロントエンド担当者やデザイナがデザインをもとにHTMLやCSS/JSをおこす。
もちろん、Amazon Q Developer for CLI や　普段使うMacの環境であれば、いとも簡単に「画面.png を読み込んでHTMLに起こして」とすればHTMLが出来上がる。

ただしWindows環境においては　VSCodePlugin のみの場合、ファイルをアップロードする機能がなかったりします。後輩と話していたら便利な方法が見つかったので共有したいと思います。

画像や手書きイメージ（画像）をVSCodeプラグインでは利用することができない。

　　プラグインの裏ではLinux系コマンドでアップロードなどが動いているはずなので、WLS利用以外でも　以下の実装をフォーク追加してほしいけど以下のようなことで画像を解釈できるようになります。

######方法

• windows 標準コマンドで　base64変換を行い　CertutilというWindows標準のツールを使うと　Base64Encodeできます。以下プロンプトを実行

c:\certutil -encode input.txt output-b64.txt
入力長 = 578846
出力長 = 795972
CertUtil: -encode コマンドは正常に完了しました。

• その際に、変更後のouput-b64.txtの内容の先頭と末尾行を覗く2行目以降をマウスなどでコピーします。
  　　　　　以下2行は利用しないので選択から除外する
  　　　　　1行目「-----BEGIN CERTIFICATE-----」
  　　　　　末尾行「-----END CERTIFICATE-----」

- 次のBase64でエンコードしたデータは画像ファイルです。画像からHTMLファイルをおこしてほしいです。
 
```iVBORw0KGg　
　・・ここでは長いので省略します・・　
UVORK5C
YII=```

• プロンプトから　プロジェクトフォルダを開いて　html などの成果物を確認
  　※モデルの成果、うまく画面おこししたキャプチャが取れないので、こちらは　改善案として取り込んでほしいです。（ちょっと直します）

「画像をアップロードして、読み取る機能がないため不便。回避策がありました。」

例にする

阿部寛のホームページをキャプチャ

• 
  参考　https://abehiroshi.la.coocan.jp/

• 

• 

• 

• これでHTMLをQ　Developerで起こすことができます。
  他に画像の中に書かれた文字や、解釈などもできます。
  Base64ファイルから MimeType image/png を認識して解釈をしてくれます。すごいですね。

---

使ってみての改善やいいところとカイゼン案の評価

良い点：

• VSCodeをりようするため、VibeCodingや　ソースをフォルダごと解釈、説明させることは　初学者、内製化メンバの育成には大変有効である。
• Kiro仕様駆動開発を推進する前に、基礎的な「SPEC,STEERING,HOOK」を学ばせることもできる。
  　- IAM-IDC(すみません省略させてください)アカウントセットアップ、Chatによるシステムの開発ができる、
• context hooks などが利用可能、KIROの将来設計になれることができる。
  　- プログラマでない人ほど利用するべきだ。　プログラムの処理ルーチンを「自然言語で拡張、メンテ、改善」できること。
  　　利用者が以下のような構成を作り、機能を提供していく先に　内製化や保守をするのに　プログラムルーチンを改善するのではなく　RAGによるシステムプロンプト、プロンプト、ナレッジなどに　「自然言語で記載しメンテ、機能アップグレードができる」ことを実証した形になります。

カイゼンしてもらいたい案：

• 改善フィードバックしたい狙いはこちらです。
• VSCode Pluginでは　チャット開発ができる利点に反して、Windows環境では　ファイルのアップロード機能がない。
  　　　CLIやMac、Linux、（WLS環境ではできるかもしれない）
  　　　画像や手書きファイルを別に作りそのファイルを読み込ませて　UIやシステム構成図を開発できる（PNG画像ファイルからHTML/JS/CSS を起こす）ことができないのはもったいない。
  　　　→　Base64に画像をエンコード変換して、チャットに貼り付けVibeコーディングすることで回避は可能。
• ヘルプ：　Businessアカウントのドキュメントページがとっつきづらい。　IAM-IDCがわからないとBuilderIDログインほど簡単に利用ができない。
  • あるべきでいえば理解できない人は使うべきではないのがBusinessアカウントかもしれません。
    　　ただし　そのままやると　StartURLを入れてログイン（SSOログイン）したところで、権限や紐づきがなく画面に何の反応もなく　VSCodeにも戻らず沈黙してしまう。　
    　　　→　原因に考えられること：利用環境条件のほかではIDCに　BedrockなどのPolicyの付与や　デプロイのためのPolicy追加を設計する必要がある。
• こちらは、まず触ってみようとしてのサンプルPolicy　もしくは　AWSマネージドポリシが簡単にIDC側で追加できるような仕組みが欲しい。
  -（ログインと　デプロイなどはできなくてもいいので、Vibeコードでゲーム作ろうが始められる程度まで持っていけるとよい。もしくはSCPテンプレートがあるといい）
• 初心者達に各チームが自前で持つAwsアカウントにIamIdentityCenterと　StartUrlを入れた後に、Qでデプロイさせるまでの手順として共有してとても助けていただきました:)
  公式ページのQ マニュアルページではQだけによることができなかったり、参照ページが分散してたりしてWorkshopのように上から定義するわけにははいかないケースや対象に有効でございました。
• DeveloperのProライセンス使いたいものの Identity Centerの利用に壁を感じる人向けに入門記事が寄稿されています。わかりやすくていいと思いました。
  https://aws.amazon.com/jp/blogs/psa/getting-started-with-aws-iam-identity-center-for-amazon-q-developer-in-organizations/

皆様もぜひ使ってみてほしいです！