日々進化の速度を上げる生成AI、その活用方法も多様な分野に広がっています。例えば、カスタマーサポートにおけるチャットボットの自動応答システムや、工場での画像検査など、既に多くの現場で成果を上げています。アプリケーションの開発においても、コードの作成支援や、テスト、コード分析といったことが行える生成AIを用いた機能が急速に普及してきています。
その中でも注目を集めているのが、VSCodeの拡張機能としてオープンソースとして公開されているAIエージェント「Cline」です。今回は、このClineを活用して、「ActiveReportsJS(アクティブレポートJS)」を用いたWeb帳票アプリケーションの開発方法についてご紹介します。
目次
Clineとは?
Cline(旧Claude Dev)は、VSCodeの拡張機能として公開されているAIエージェントで、初版が2024年7月にリリースされ、2025年1月現在のバージョンは「3.1.0」と非常に速いスピードで開発が行われています。このエージェントの特長はなんといっても、コードの自動生成が行えることです。ユーザーはチャット形式で指示を入力することができ、その指示に基づいて、指定されたフォルダ内のファイルを確認しその内容を元にコード生成が行えるほか、ディレクトリの作成、ライブラリのインストールなどアプリケーション開発において、開発者が行う、コマンドライン操作もエージェントで実行可能です。このエージェントを利用することで、開発者の作業効率は各段に向上することが予測されます。
Clineのインストール
では早速、ClineをVSCodeにインストールしていきます。次のようにVSCode内の拡張機能のタブから「Cline」を入力して、インストールを行います。

VSCode内からのインストールのほか、以下のMarketplaceからもインストール可能です。
AIモデル(LLM)API Provider設定
続いて、使用するLLMのAPI Providerの設定を行います。Clineをインストールすると以下のようにサイドバー上にClineのアイコンが表示され選択するとチャット入力欄が表示されます。続いて右上部の設定アイコンを押して、API Providerを行います。

設定画面には、次のように設定可能なAPI Porviderが選択できます。今回はAzure OpenAI上にデプロイした、「gpt-4o」モデルを利用する為、以下のように設定しています。API Porviderの設定は利用可能なAPIに合わせ適宜設定してください。
また、「Custom Instructions」の項目では、LLMに対して事前定義を行うことが可能です。今回は使用する言語や、OS、PowerShellのコマンドラインの接続記号、CurlコマンドではなくPowerShellコマンドを使用することなどを日本語で設定しています。

Custom Instructions事前定義
使用言語:日本語,ユーザーとのやり取りは必ず日本語で行う。
使用OS:Windows。PowerShellでは'&&'の代わりに';'を使用してコマンドを連結する。
Curlコマンドは使用せず、PowerShellコマンドを使用する。
Clineの動作確認
ここまでの設定で、Clineが利用できるようになりましたので、動作確認をしてみたいと思います。この後アプリケーションの作成も行うため、任意のフォルダを作成し、そのフォルダ上でVSCodeを開いて動作確認を行います。
「今日の日付を教えて」というプロンプトに対して、PowerShellのGet-Date
コマンドを実行したうえで、チャット上の応答として今日の日付を返してくれました。LLMのモデルは、現在の日付のような情報は持っていない為、通常のプロンプトでは正しく回答できませんが、AIエージェントであるClineでは、PowerShellのコマンドといった他の機能を利用して正しい応答を返してくれることが分かりました。
ActiveReportsJSの帳票Webアプリケーションの作成
Clineの動作も正しく行えていることがわかりましたので、続いてActiveReportsJSの帳票Webアプリケーションを作成していきたいと思います。
今回はより正確に、帳票Webアプリケーションを作成するために、ActiveReportsJSのヘルプで公開されているクイックスタートをMarkDown形式のファイルにしてフォルダに格納し、そのファイルの情報を参照して作成したいと思います。
クイックスタートのMarkDown形式化
Webページをマークダウンファイルにする機能は、いろいろな方法がありますが、今回は以下ChromeとEdgeに対応しているブラウザの拡張機能「MarkDownload」を利用しました。
MarkDownloadでは、以下のように、MarkDownファイルにしたいページを全てタブで開いておき、コンテキストメニューから「Download All Tabs Markdown」を選択すると、全てのページがMarkDown形式のファイルとしてダウンロードされます。

ダウンロードされたファイルは、VSCode上で開いているフォルダの内に新たに「quickstart-markdown」というフォルダを作成して格納します。これでアプリケーション作成の準備は終了です。

実行プロンプト
それでは、いよいよアプリケーション作成を行いたいと思います。今回は先ほど作成したクイックスタートの内容を参照し、JavaScriptアプリケーションを作成させます。また、帳票レイアウトに関しては、以下のGitHubリポジトリに公開されているレイアウトファイルを利用します。
実行プロンプトは次のようにしています。
#前提条件
{クイックスタートフォルダ}: C:\WORK\50_blog\activereportsjs-cline\quickstart-markdown
{プロジェクトフォルダ}:C:\WORK\50_blog\activereportsjs-cline\
{レポートパス}: https://github.com/MESCIUSJP/ActiveReportsJS-Invoice-Sample/blob/master/reports/Invoice_green.rdlx-json
#指示
以下の手順に従い、ActiveReportsJSを使用したJavaScriptWeb帳票アプリケーションを作成してください。
#アプリケーション作成手順
1.{クイックスタートフォルダ}内の該当するMarkdownファイルを参照し、アプリケーションの作成手順を確認する。
2.必要なレポートファイル(rdlx-json)は、{レポートパス}から取得して利用する。
3.アプリケーションが完成したら、Microsoft Edgeブラウザで動作をテストを実施。
必要なフォルダの作成とレポートファイルの取得
プロンプトを実行すると、まず作成方法を参照する為、指定のフォルダを参照します。その後はアプリケーションに必要なフォルダ作成および、GitHubリポジトリからレポートファイルの取得を行います。
パッケージのインストール
続けて、作成方法にもとづいて必要となるパッケージをインストールします。
コード実装
続いて、ActiveReportsJSのJavaScriptアプリケーションのコードを実装し、その後Node.js上で動作する「Express」サーバーのコードも実装しています。
サーバー起動
最後に、作成した「Express」サーバーを起動します。この際、事前にインストールが必要であった、「Express」をインストールしていないため、エラーが発生していますが、このエラーに対してもエージェント自身がエラーを理解し、インストールを行っています。
ブラウザで動作確認
サーバーの起動を確認した後、ブラウザ上でアプリケーションを起動します。次の動画のように正しく表示されることを確認できます。
Clineを使用したActiveReportsJSWeb帳票アプリの一連の動作は以下のようになります。
さいごに
今回は、今話題のAIエージェント「Cline」を利用して、ActiveReportsJSのWeb帳票アプリケーションを作成してみました。あらかじめ用意したファイルを参照することで、ほとんど自動でアプリケーションを作成することができました。使用するLLMや指示するプロンプトによっては、一度ですべてを行うことができない場合もありますが、チャット形式で対話的にアプリケーション作成を行うことも可能ですので、これからの開発作業においても強力なツールになると思われます。ぜひ本記事を参考に、「Cline」を利用した、ActiveReportsJSのWeb帳票アプリケーションの作成をお試しください。
製品サイトでは、今回ご紹介したActiveReportsJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。