私のお気に入りの Linux アプリは Windows には存在しなかったので、Claude と一緒により良いアプリを構築しました

今、誰もが AI コーディング ツールについて話していますが、Web ベースのオペレーティング システム、DOOM クローン、ポートフォリオ Web サイトなど、ほとんどの例は抽象的だと感じます。それらはクールですが、日常生活の本当の問題を解決するものではありません。最近、Linux で利用しているツールの一部が Windows に存在せず、またその逆というイライラするアプリのギャップに遭遇しています。この切断によりワークフローが遅くなったので、そこから抜け出す方法をバイブコーディングすることにしました。

Windows 上でどうしても欲しい Linux アプリ

これは単純な画像注釈アプリですが、私のワークフローにとって重要です

Windows 上で同等のものが見つからなかった Linux アプリは、KDE ​​プラズマベースの Linux ディストリビューションのデフォルトの画像ビューアである Gwenview でした。

テクノロジー ライターとして、私は記事に注釈付きのスクリーンショットを多数追加します。ボタンを指す矢印、特定の設定の周囲のボックス、何かを説明するテキスト ボックスなどです。Gwenview のおかげで、そのワークフローが信じられないほど高速かつ便利になりました。確かに、GIMP (Linux と Windows の両方で動作します) のような専用の画像エディターでも技術的には同じことを実行できますが、不必要なオーバーヘッドが追加されます。すぐに起動して、ポイントアンドクリックで高速編集できるものが必要でした。

残念ながら、Windows 上で同様のアプリを見つけるのは困難でした。 Windows 11 に組み込まれているフォト アプリはまともですが、Gwenview ではなく、矢印やテキストなどの基本的な注釈ツールがありません。確かに、サードパーティ製の代替品はたくさんありますが、無料のもののほとんどはバグが多く、優れたものは有料でした。

Linux 用 Windows サブシステム経由で Gwenview を実行してみたところ、技術的には機能しましたが、エクスペリエンスは不安定でした。画像を開くのに問題があり、インターフェイスに遅れがあり、編集内容を適切に保存できませんでした。そのため、しばらくの間、私は Windows でスクリーンショットを撮り、Kubuntu を実行している VM を開いて、そこで画像を編集してから Windows に戻していました。

言うまでもなく、これは最もスムーズなワークフローではありませんでした。最終的に、私は自分でアプリをバイブコーディングできるかどうかを確認することにしました。

これが私のバイブコード化された画像エディターです

とても良いです – ミューズに取って代わるほどです

アプリの動作を示す簡単なビデオは次のとおりです。

動画が読み込まれない場合は、広告ブロッカーによって再生が妨げられている可能性があります。

ご覧のとおり、Gwenview のようなデスクトップ アプリではなく、Web アプリとして構築することにしました。私がこの方法を選択したのは、デスクトップ アプリケーションとしてパッケージ化することによる余分な複雑さを避けたかったためです。つまり、より多くのトークンを消費することになります。

現在の形式では、システム上に存在する単なる HTML ファイルであり、どのブラウザでも開くことができます。画像のトリミング、テキスト オーバーレイの追加、矢印の描画、カウンターの配置、特定の領域のぼかしまたはピクセル化、スクリーンショットの領域のハイライト、画像の一部の拡大を行うことができます。画像のフォルダーを一括アップロードし、作業したい画像を選択して編集することもできます。

複製ボタンもあるので、同じ画像を複数編集する必要がある場合は、単一ファイルの変更を何度も元に戻したりやり直したりするのではなく、まずコピーを作成して各バージョンを個別に編集できます。すべては PNG または JPG としてエクスポートされ、バッチでエクスポートする場合は、ファイルが自動的に圧縮されます。

本当に完璧に動作します。本番環境に対応したと言えるものが完成するとは予想していませんでしたが、まさにその通りになりました。実際、私は現在、Linux 上でメインの画像編集ツールとしてもそれを使用しています。

Claude を使用してアプリを構築した方法

計画は最も重要な部分です

アプリに何をさせたいかについては大まかなアイデアはありましたが、単に要件のリストをクロードに渡してビルドを依頼するだけではありませんでした。これは、AI における典型的なガベージイン、ガベージアウトの問題であり、弱いプロンプトでは通常、弱い結果が得られます。そこで、要件を書き出した後、それを 2 番目の Claude インスタンスが動作するための適切なビルド プロンプトに変換するようにクロードに依頼しました。

最初のパスでは、私が当初提供したものよりもはるかに詳細な情報が返されました。スタック全体 (React with Vite と TypeScript、キャンバス レイヤーの Konva.js、スタイル設定の Tailwind CSS、アイコンの Lucide) が選択されました。私はこれらの決定を自分で行うほどフロントエンド ツールについて十分な知識がないため、どれも指定していませんでした。

また、アプリのアーキテクチャを図示し、各機能が内部でどのように機能するかについても説明しました。そのおかげで、私が実際に望んでいることと照らし合わせて計画の健全性をチェックし、引き渡す前に微調整する機会が得られました。何かがおかしい場合は、アプリがすでに構築された後ではなく、ここで見つけることができます。

プロンプトがしっかりしたものになったら、それを 2 番目の Claude インスタンスに渡すと、やり取りをほとんど行わずにアプリが構築されました。プロンプト自体に組み込まれた 1 つの意図的なチェックポイントを含む、合計でおそらく 5 ～ 6 つの明確な質問が行われました。インターフェイスをレイアウトした後、ただしツールを接続する前に、一時停止して、すべてが正しく見えるかどうかを尋ねました。確認すると、残りのツールが構築され、アプリは正常に動作しました。

Web アプリではなく、Claude Code または Cowork を使用することを忘れないでください。

これには、Cowork モードと Code モードにアクセスできる Claude デスクトップ アプリを使用しました。ローカル ファイル システムに直接アクセスできるため、Web バージョンの代わりにデスクトップ アプリを使用することをお勧めします。

つまり、記述されたコードは、適切なフォルダー構造内の実際のファイルとしてコンピューター上に作成されます。私の場合、Claude は「snapmark」というプロジェクト フォルダーを作成し、その実行方法を説明する README も追加しました。

代わりに Web アプリでこれを実行しようとすると、おそらくコード スニペットの壁ができあがり、手動でファイルにコピーして整理する必要があります。プログラマーでない場合は、これは大変な経験です。 Claude Cowork または Code を使用している場合は、それがすべて処理してくれます。

いくらかかりましたか

食べたトークンの数と、それにかかる時間

プロジェクト全体には約 500,000 トークンが必要でした。このプロジェクトでは、月額 20 ドルの Claude Pro プランを使用しました。ご存知かもしれませんが、Claude では、ローリング セッション制限が短縮されるとともに、週ごとの使用量の上限が設けられています。始めたとき、セッションの 1 つをすでに約 80% 完了していたので、すぐに上限に達してしまいました。

しかし、幸運だったのは、次のセッション ウィンドウがわずか数分後にリセットされたため、停止して待つ必要がなくなり、事実上 2 セッション分の作業を連続して実行できたことです。

2 回目のセッション中に、プロジェクトは利用可能な制限の約 90% を使い切りました。合計すると、このアプリの構築には、標準的なクロード セッションの約 110% に相当する時間が使用されたことになります。また、Anthropic は通常のセッション制限を 2 倍にする一時的なプロモーションを実行していたことにも言及しておく必要があります。そのため、通常の条件下では、これは標準セッションの 220% に近かったでしょう。つまり、終了するまでに少なくとも 3 回の個別のリセットを待たなければならなかったでしょう。

待つと言っても、クロードに指示して 1 分後に完成したアプリを入手するというわけではありません。最初のスケルトン ビルドを生成するのに約 15 分かかりましたが、まだどの機能も動作していませんでした。さらに、コア機能を備えた使用可能なバージョンを取得するのにさらに 1 時間ほどかかりました。追加機能のための余分なやりとりをすべて考慮すると、プロセス全体の開始から終了までおよそ 2 時間かかりました。

---

求めなさい、そうすればあなたは受け取るでしょう

私たちは、あなたが想像できるほとんどすべてのものをあなたのために構築できるという奇妙な瞬間にいるように感じます。それでも、AI エージェントがタスクを完全に失敗したと不満を言う人をたくさん見るでしょう。このギャップは主に、リクエストがどのように構成されているかに起因すると思います。何を求めているかを正確に把握する必要があります。また、クロードにプロジェクトを実際に理解し、構築できるとどの程度自信があるかを尋ねることも役立ちます。