- Claude Artifacts は、HTML、CSS、JavaScript を使ってインタラクティブなシングルページアプリを生成し、Claude インターフェース内で結果を確認しながらさらに改善できる機能。
- 最近の Claude の活動履歴を SQLite に変換して分析したところ、先週は予想以上に Claude Artifacts を多用していたことが分かった。
- この機能は、問題を自力で解決したりプロトタイプを作ったりするのに役立つツールとして活用している。
[Claude Artifactsで作ったプロジェクト]
URL to Markdown with Jina Reader 活用
- Jina Reader API を呼び出して Web ページ全体のテキストを Markdown に変換する Web UI を開発
- URL 入力 → Jina Reader API で Markdown を生成 → Markdown を出力し、"Copy" ボタンを提供
- モバイル Safari でページ全体のテキストを LLM にコピー＆ペーストしづらかった問題を解決
SQLite in WASM デモ
- SQLite の WASM ビルドに関する Hacker News の議論をきっかけに、NPM の @sqlite.org/sqlite-wasm パッケージを発見
- シンプルなインタラクティブデモを開発して動作を確認
URL 抽出ツール
- Web ページのテキストからリンクされた URL を抽出したかった
- Artifacts を作成し、rich-text HTML の貼り付けを受け付けて HTML パーサーでリンクを抽出
クリップボードビューア
- ブラウザーの Clipboard API を使い、さまざまな種類のコンテンツの貼り付けや情報確認のためのデバッグツールを開発
- プレーンテキスト、rich text、ファイル、画像などをコピー＆ペーストして、ブラウザーで利用可能な情報を確認
Pyodide REPL
写真カメラ設定シミュレーター
- JavaScript でカメラ設定のシミュレーションが可能か気になっていたが、バグがあり結果も印象的ではなかった
- Fabric.js ライブラリを発見
LLM 価格計算機
- Google Gemini を使った動画スクレイピング実験の一環として価格計算機を開発
- Gemini の安価な価格について自分の計算に自信が持てず開発
YAML to JSON 変換器
- YAML 構文の特定の側面を思い出すため、YAML を入力すると JSON にリアルタイム変換してくれるツールを開発
OpenAI Audio
- OpenAI の新しい Audio API を探索
- マイクへのアクセス権を要求し、音声を録音して base64 エンコード後に OpenAI API に送信する Web ページを開発
- Claude Artifacts は外部ホストへ直接 API リクエストを送れないが、動作するバージョンを開発した後に別のホスティングへ移して完成させることは可能
QR コードデコーダー
- QR コードが含まれたスライドを見た会議で、QR コードを通常の URL に変換する方法が必要だった
- Claude Artifacts を使って QR コードデコーダーを素早く開発
画像変換器とページダウンローダー
- Hacker News で、誰かが写真をページにドロップすると base64 URL として埋め込み、"HTML として保存" すればギャラリー付きの自己完結型ページを得られるツールのアイデアを提示
- モバイル端末で "HTML として保存" できない場合に便利な "ダウンロードリンク" 機能の追加を提案し、プロトタイプを開発
HTML Entity Escaper
- 携帯電話でテキストチャンクの HTML エンティティをエスケープする必要があったため、Claude にツール作成を依頼
text-wrap-balance-nav
- Terence Eden に着想を得て、text-wrap: balance CSS プロパティを実験
- スライダーとチェックボックス付きの nav bar の例を Claude に作成依頼
ARES フォネティックアルファベット変換器
- HAM 無線通信の運用ボランティアをしている際、フォネティックアルファベットの使い方を間違えそうで心配だったため、Claude にツール作成を依頼
[Claude Artifactsの利点と限界]
- 筆者は 1 週間で 14 個のプロジェクトを作るほど Artifacts を大量活用中
- 6 月 20 日のリリース以来使い続けており、現在は毎日複数回、新しいインタラクティブ Artifacts を作成
- Claude Artifacts は好奇心を満たし、高速なプロトタイピングや問題解決のためのツールとして有用
- ほとんどのツールは 5 分以内に作成可能
- より複雑な OpenAI Audio ツールでも、最初のバージョンに 12 分、2 回目の反復に 9 分と、合計 21 分しかかからなかった
- ただし、API 呼び出し、フォーム送信、外部ページへのリンクなどの機能が制限されており、その限界には失望している
- 学んだことをもとに、独自の Artifacts 代替の制作を計画中
- 結論として Artifacts の利用を勧める
- Artifacts を使っていないなら、この文章を通じてその理由が分かることを願っている
- 自分にとって Artifacts は、現在もっとも気に入っている LLM ベースのツールの 1 つ
1件のコメント
Hacker Newsの意見
既存のコードベースにツールを統合するのは難しい、という意見がある。独立したページとして作ることはできるが、既存のコードベースと互換性を持たせるためのコードレビューや修正に多くの時間がかかる。自分で直接コードを書くほうがよい選択だ。
2000年代初頭にWeb開発をやめてWebビジネスに集中していたが、今ではLAMPを使って創造的な作業ができるようになり、うれしい。たとえば、望むマーケティングサイトを20分以内にデプロイできる。
ローカルのコードベースと一緒にLLMを使う最善の方法についてのブログ記事や「ベストプラクティス」を探している。コミュニティにおすすめの資料があることを期待している。
今の時代は驚くべきものだ、という意見。週末にRustを学び始め、ChatGPT 4がリアルタイムで支援してくれるすばらしい教師の役割を果たしている。
AnthropicはWeChatのようなスーパーアプリの状態に近づいている。公開されたArtifactsを簡単にサイドバーへ表示できる方法が必要だ。Elonがこのモデルに強い関心を持っているので、xAIがClaudeの機能を備えるなら、その方向へ進むだろう。
Anthropicが紹介した新しいパラダイムは、コンテンツがホスティングされる点にある。LLMの出力が、消費者が利用できるセルフホスト型アプリになる。これは個人サイトを構築することと大きくは変わらない。