【ITニュース解説】Image Flow Editor

このニュース記事は、「Image Flow Editor」という新しい画像編集ツールの開発について解説している。これは「KendoReact Free Components Challenge」というコンテスト向けに作成されたもので、開発者が日頃感じていた簡単な画像編集における不満を解消するために生まれたプロジェクトだ。

開発者は、自身をデザイナーや画像編集の専門家ではなく「カジュアルな画像編集者」と位置づけている。彼は、画像の背景除去や明るさ調整といった簡単な作業を時々行うが、そのたびにGoogleで検索したり、Figmaのような多機能なツールを使ったりしている。Figmaのようなツールは非常に高性能で便利だが、簡単な作業のために複雑な機能を学ぶのは時間と労力がかかりすぎると感じていた。特に、月に数回しか使わない機能のために多くの時間を費やすのは非効率だという認識がある。多くのオプションがあることで、かえってユーザーは迷ってしまい、シンプルなタスクが不必要に複雑になってしまうことがあると彼は指摘している。例えば、背景除去と枠線の追加という簡単な作業のために、無数のプラグインの中から適切なものを探し、いくつものサービスに登録してAPIキーを取得するといった、本来3分で終わるはずの作業が一日がかりになってしまうような状況を経験したことがあるという。

このような問題意識から、開発者は「Image Flow Editor」のコンセプトを考案した。これは、自分自身が主要なエンドユーザーであると仮定し、「数回のクリックで、必要な作業がすぐにできる」という究極のシンプルさを追求したものだ。具体的な使い方としては、ユーザーが複数の画像をアップロードし、背景除去や明るさ調整といった編集タスクをドラッグ＆ドロップで追加する。そして、最後に「コンパイル」や「実行」ボタンを押すだけで、必要な編集が施された画像ファイルをプレビューしたり、個別にダウンロードしたり、まとめてダウンロードしたりできるという、直感的な流れを目指している。

この「Image Flow Editor」の開発には、KendoReactというUI（ユーザーインターフェース）コンポーネントライブラリが使用された。UIコンポーネントとは、ウェブサイトやアプリケーションの見た目や操作性を構成する部品のことで、ボタン、入力フォーム、ドロップダウンメニュー、ダイアログボックス、レイアウト部品など、多岐にわたる。KendoReactは、これらの部品を効率的に開発するためのツールセットであり、記事では「kendo-react-common」「kendo-react-buttons」「kendo-react-inputs」など多数のコンポーネントがプロジェクトで使われたことが列挙されている。これにより、開発者はゼロからすべての部品を作る手間を省き、機能の実装に集中できる。

今回の開発はコンテスト向けであり、短い期間でアイデアを形にする必要があったため、開発者はAIアシスタントを積極的に活用した。これは近年流行している「Vibe Coding」や「Coding Assistants」といったAIを使った開発手法の一環だ。しかし、このアプローチには様々な課題が伴った。AIアシスタントは一般的なコード生成には優れているものの、KendoReactのような特定のライブラリやフレームワークを使った開発では苦戦することが多かったという。Google AI Studio BuildやZEDといった複数のAIツールを試したが、AIがエラーを修正できなかったり、開発者の意図しないコードを生成してしまったり、既存のコードベースを破壊してしまうこともあったという。また、APIキーの呼び出し制限に引っかかるなど、AIツール側の制約にも悩まされた。

開発者は、最終的にAI StudioとローカルのZEDエディタを併用しながら開発を進めた。AI StudioはKendo MCP（KendoReactのライブラリやドキュメントに関する深い知識を持つシステムと推測される）の設定を適用したことで、最新のドキュメントにアクセスし、より的確なプロンプト（指示）に応答できるようになり、開発効率が向上したという。特に、プレミアム機能のライセンスに関する問題が発生した際には、AI StudioがKendo MCPの知識を活用して解決策を提案し、ライセンス表示（「ライセンスストリップ」と呼ばれる、有料機能であることを示す表示）を消すことができたというエピソードが紹介されている。

開発者は当初、Kendo UI（KendoReactの基盤となるライブラリ）が得意とするダッシュボード機能も組み込もうと考えていた。前職での経験から、データグリッドやグラフ、エディタなどを活用したダッシュボード構築が非常に効率的であることを知っていたためだ。しかし、タイリングレイアウトやデータグリッドといったコンポーネントを試すと、これらは無料版では利用できないプレミアム機能であるため、ライセンスストリップが表示されてしまうことが判明した。今回のコンテストは無料コンポーネントのみを使用するという制約があったため、これらの機能は最終的にプロジェクトから削除された。

プロジェクトはVercelというプラットフォームにデプロイされ、公開されている。開発者は、利用者が自分のGemini APIキーを設定できるようにすることで、自分自身の利用クレジットを気にすることなく、より多くの人がアプリを使えるように工夫した。しかし、ここでもライセンスストリップの問題が再燃した。API設定ダイアログで再びライセンスストリップが表示されてしまい、開発者は困惑した。Claudeや他のAIアシスタントでは解決できず、最終的にGitHub Copilot経由でChatGPT 5 miniというAIモデルに、Kendo MCPを使ってこの問題を調査するよう指示した。このAIモデルは、KendoReactのプレミアムコンポーネントと無料コンポーネントのリストを要求し、問題解決のための具体的な計画を提案した。その計画を実行した結果、ついにライセンスストリップを完全に消すことに成功したという。これは、AIが特定のライブラリの深い知識と連携することで、複雑な開発課題を解決できる可能性を示している。

開発者は、このプロジェクトを最初は楽しみのために始めたが、約5日間を費やしたことで、今後もさらに機能強化を続けていく計画だ。プロジェクトのリポジトリのREADMEファイルには、すでに今後のタスクリストが追加されている。コンテストでの評価がどうなるかを見守りつつ、この「Image Flow Editor」をさらに発展させていく意欲を示している。