ForePaaSでデータを活用したサービス開発をしてみる

こんにちは。事業管理本部サービス開発部でサービス開発を担当している星です。

みなさんは、ForePaaSという製品をご存じでしょうか。

ForePaaSは2021年6月に三菱総合研究所がリリースしたデータ利活用プラットフォームです。

長年コンサルティング/データ分析/AIモデルを提供してきた三菱総合研究所が「業務への適用までを完走させること」をDXの重要なポイントと位置づけ、それを実現するためにリリースしたのが、このForePaaSです。

今回はこのForePaaSのサービス開発についてご紹介したいと思います。

forepaas.mri.co.jp

ForePaaSについて
- よくあるDXの課題
- ForePaaSのメリット
ForePaaSのWEBアプリカスタマイズ
外部API(OpenAI)に蓄積データを渡してみる
さいごに

ForePaaSについて

ForePaaSはデータの収集/蓄積/加工/AIモデル開発といった、基本的なデータ活用の機能を持つWEBサービスです。

よくあるDXの課題

DX時代における現代において、データの有効活用は長年多くの企業が目指して対応しているかと思います。だからこそDXにおける課題は押さえていきたいですよね。

大きな枠組みで考えると、データ分析は１．データ分析基盤２．データ分析３．業務適用といった流れになると考えています。

ですが、「データ分析」まで頑張ったものの「業務適用」で止まってしまう、といった声もよく聞こえてきます。実際に、こんな悩みを持っている方は多いのではないでしょうか。

PoCを繰り返してもその先に進めずPoC疲れが起きている
分析アイデアはあるけれど業務適用のための環境の検討が難しい
何かDX/AIといった取り組みをしたいけれどそのための環境構築には踏み込めない
データ分析に必要な各ツールの学習コストが高く作業が進まない

費用対効果を気にしてなかなかDXに踏み出せなかったり、業務にうまく適用できず試しに分析したものが散乱していないでしょうか。

ForePaaSのメリット

そんな場面でForePaaSは大活躍してくれます。

ForePaaSのメリットの代表的なものを挙げると以下になります。

ワンプラットフォームなWEBサービス
高速なサービス開発プラットフォーム

ワンプラットフォームなWEBサービス

ForePaaSはデータ分析で必要なプロセスをすべて持っています。

もちろん、分析までではなく、業務適用までを意識した機能が揃っています。

「各プロセスにおけるツールの連携コストや学習コストでDXに踏み込めない」、「分析基盤を構築してしまうと分析がうまくいかなかったときにコストだけかかってしまうことが不安」、といった悩みはなくなります。

すぐに利用する事が出来て、必要なければ解約する事も可能、機能は一通りそろっている、というのはすごく魅力的ですね。

さらに、このシームレスに作業ができるというのが後述の「高速」な開発につながります。

高速なサービス開発プラットフォーム

ForePaaSには、ローコードや高度なコーディングにも対応しているアプリ開発の機能があります。３．の業務適用のフェーズで役立つ機能です。

これが他のデータ活用プラットフォームには無い特徴で、使ってみると非常に便利な機能だと思います。分析してグラフを表示して満足するのではなく、WEBサービスとしてデータをビジネスに活かすことができます。

例えば、既存のデータをアップロードし、そのまますぐにデジタルサービスを構築する、といった事が可能です。

これまで、意外にもそういったツールは少なく、データを保管する製品とアプリ開発の製品を組み合せる必要がありました。

これらにより、以下のようなデータに関する様々なシナリオでForePaaSをご利用いただくことが可能です。

DXをスタートさせる環境として利用する
データ分析基盤として利用する
サービス開発ツールとして利用する

サービス開発ツールとしてのForePaaS

ForePaaSは基本的な分析機能に加えて、高速なWEBアプリ開発の機能が備わっています。

蓄積したデータや分析結果を活用して即座にWEBアプリとして公開することができるので、業務適用できていないデータや分析結果をForePaaSに蓄積してデジタルサービスを作る事になります。

まさに「DXを完走させる」に特化したサービスですね。

今回は、そんなForePaaSのWEBアプリ開発のカスタマイズにも少し触れたいと思います。

ForePaaSのWEBアプリカスタマイズ

使用するデータ

今回、ForePaaSのデータウェアハウス（加工して構造化されたデータを蓄積しておく場所）には以下のデータを蓄積しています。

国税及び地方税の累年データ
国民所得に対する国税及び地方税負担率の累年データ
国と地方の歳出規模のデータ

※ 総務省の公開しているデータ(令和5年度　地方税に関する参考計数資料 (soumu.go.jp))をダウンロードしてForePaaSに入れています。

これらのデータを使ったWEBアプリを開発してみました。

GUIとカスタマイズアプリ

ForePaaSでは以下のようにGUIでダッシュボードを構築することができますが、

今回はJavaScriptを書ける方向けのカスタマイズアプリの構築を紹介します。

ForePaaSのアプリは以下のような構造で構成された、Reactフレームワークを使ったWEBアプリとなっています。

WEBアプリで出来ることはなんでも出来るため、好きな機能、デザイン、外部連携を実装したサービスを自由に作る事が可能です。

開発の流れ

開発の主な流れは以下のイメージです。

１．jsonファイルを更新し画面全体と各パネルのレイアウトを定義する

２．yarn generateコマンドでコンポーネントを追加する

３．追加したコンポーネントとコンポーネントで利用したいデータについてjsonファイルで定義する

４．あとはコンポーネントを好きなように開発する

上記を繰り返すだけで、ForePaaSに蓄積されたデータに対するリクエストや認証機能の実装などを特に意識せずにサービス開発を行うことができます。

お好みのライブラリを使った開発

WEBアプリを開発されている方であれば、任意のライブラリを使った機能実装やUI実装をしたい方もいるかと思います。

ForePaaSのアプリではyarnを使ってライブラリを管理することができようになっています。

今回は私がよく使っているchart.jsを追加してグラフを表示しました。

jsxファイル

import {
  Chart as ChartJS,
  LinearScale,
  CategoryScale,
  BarElement,
  PointElement,
  LineElement,
  Legend,
  Tooltip,
  LineController,
  BarController,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

<div>
      <Typography variant="h6" component="h6">
        ■国民所得に対する国税及び地方税負担率の累年比較
      </Typography>
      <Line data={graphData} options={graphOption} height={110}/>
      <TextField
          id="answer"
          label="AI解析"
          fullWidth
          multiline
          value={answer}
          size="small"
          sx={{ mt: 2 }}
        />
</div>

画面イメージ

ドキュメントには開発ノウハウが公開

ForePaaSの公開ドキュメントには、各機能の仕様が記載されています。

また、今回のようなカスタマイズアプリに必要なコードなどもサンプルがたくさん用意されています。

ドキュメントは非常に充実しているので、データとアプリの連携について迷うことなく開発できそうです。

例えばjsxファイルでForePaaSのデータを扱いやすくする関数が紹介されています。

ForePaaSチュートリアル

const flattenChartResults = results => {
  let flattenedChartResults = ;
  results.forEach(result => {
    let fieldEntries = ;
    Object.entries(result.data).forEach*1
      .then((json) => { 
        // 取得内容を表示
        setAnswer(json.choices[0].message.content);
      })
      .catch((error) => {
        console.error('Error:', error.code + ': ' + error.message)
      })
    };

ちなみに、このアプリの開発期間は2日です。データの収集や連携などの業務適用に直接関係しない難しい処理を意識せずにアプリ開発ができることで、「データをどう使うか、どう見せるか」に集中できるため、とても早くサービス開発ができます！

外部API(OpenAI)に蓄積データを渡してみる

作成したカスタムアプリから、流行りのOpenAIにデータを渡してコメントを返してもらいます。

Azure OpenAIリソースを作成し、jsxファイル内で任意のタイミングでAzure OpenAIへのAPI要求をリクエストします。

const propmtBody = `あなたは経済科学者です。
  このデータは年度ごとの国民所得に対する国税と地方税の負担額をあらわしたCSVデータです。
  このデータを解析して、税金負担額がどのように推移してきたかその理由と合わせて80文字以内で答えてください。元データを返信しないでください。

  ■CSVデータ
  ${csv_string}`

const fetchOpenAI = () => {
      fetch(endpoint,{
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'api-key': key
        },
        body: JSON.stringify(chatGptBody)
      })
      .then*1
      .then((json) => { 
        // 取得内容を表示
        setAnswer(json.choices[0].message.content);
      })
      .catch((error) => {
        console.error('Error:', error.code + ': ' + error.message)
      })
    };