全然大した話ではないが、最近のちょっと困ったことをClaudeのArtifactを活用して解決した話
Claude Artifact
Claude Artifactについては他に解説記事はたくさんあるので詳しい解説は書かないが主に下記のようなことができる
- 対話的に成果物を生成できる
- 画像や図表、Reactコンポーネントの生成ができる
- 生成されたコンテンツを
Publishして外部共有可能
背景
GitHub ActionsでAnsibleを使っているがJobが失敗したときにエラー出力の内容を読んで手がかりとしたい
しかしながら、デフォルトの表示だとそもそもかなり見づらいのと、ターミナルで色付きの出力がされる場合、ANSIエスケープ文字列も入ってきてさらに読みづらいという状況だった
こんなかんじ
Ansible自体に出力を見やすくするためのオプション(ansible.cfgのstdout_callback = yaml)もあるが適用しても見づらい
ANSIエスケープ文字が付与された状態で出力されている
ClaudeでComponento生成
できれば色付きでみたいなーと思って雑にClaudeに聞いて、何回かやりとりしたらおおむね期待通りに動くReactコンポーネントが生成された
これで終わっても良かったんだけど
今後も使いそうだなー
リンク覚えておくならどこかにメモしておかないとなー、でも忘れそうだなー
どうせなら自身が管理しているtoolsに取り込んでしまうかー
ということで一部修正して取り込んでみた
実際に出力を貼り付けて変換してみた例を下記に載せる
JSONエスケープされた出力の変換
素のエスケープ文字列出力の変換
実際にターミナル上で出力される内容と同じ内容になった
所感
Claude Artifactを使って簡単なWebツールのコンポーネントを作ってみた
中身読むと、正直自分の好みのコードではなかったが、 こんなに簡単に実現してくるんだな…と感じた
今回のケースだと別にシェルでも解決できるよねって話でもあるけど、せっかくなのでコンポーネント化したものを活用させてもらった
身の回りのちょっとかゆいところに手が届くフロントエンドで収まる簡単なツールであれば、さっとClaudeに聞いて、 作ってもらうのは良さそう
実際に厳密に運用していくとかそういうレベルの話ではないのでね…
ClaudeのArtifact機能は確か制限あるけど無料枠でも使えたはずなので興味があれば使ってみてください
