【DX実例】WebアプリケーションとMetabase、AsanaのAPI連携で、シームレスな業務フローの実現

DXゴリラ

こんにちは、はじめまして。DXゴリラです。
私はプログラマー暦10年超の経験を持ち、これまで社外CTOとして多数のDXプロジェクトに携わってきました。

Twitterアカウントはこちら👇
https://twitter.com/dxsoudan

今回は、WebアプリケーションとMetabase、AsanaのAPI連携によるDXの実現について、より具体的にお話しします。
これらのツールを連携させることで、どのようにシームレスな業務フローが実現できるのか、イメージを湧きやすくしていきましょう。

システム構成の全体像

まず、システムの全体像を簡単に説明します。

  1. カスタムWebアプリケーション：顧客対応や受発注などの基幹業務を管理

  2. Asana：プロジェクト管理、タスク管理、CRM機能を提供

  3. Metabase：データの可視化と分析を担当

  4. API連携：これら3つのシステムをAPIで連携し、データをシームレスに連携

API連携の具体例

それでは、これらのシステムがどのように連携しているか、具体的な例を見ていきましょう。

1. Webアプリケーション → Asana連携

受注状況の自動タスク化

  1. Webアプリケーションで新規受注が入力される

  2. WebアプリケーションがAsanaのAPIを呼び出し、新規タスクを作成

  3. 受注情報（顧客名、金額、納期など）がAsanaのタスクのカスタムフィールドに自動入力される

  4. 担当者にAsanaで通知が飛び、すぐに対応を開始できる

import { Client as AsanaClient } from 'asana';

interface Order {
  id: string;
  customerName: string;
  amount: number;
  deliveryDate: Date;
}

async function createAsanaTask(order: Order): Promise<any> {
  const asanaClient = AsanaClient.create().useAccessToken(process.env.ASANA_ACCESS_TOKEN);

  try {
    const task = await asanaClient.tasks.create({
      workspace: process.env.ASANA_WORKSPACE_ID,
      projects: [process.env.ASANA_PROJECT_ID],
      name: `受注処理: ${order.customerName}`,
      custom_fields: {
        customer_name: order.customerName,
        order_amount: order.amount,
        due_date: order.deliveryDate.toISOString()
      }
    });
    return task;
  } catch (error) {
    console.error('Asanaタスク作成エラー:', error);
    throw error;
  }
}

2. Asana → Webアプリケーション連携

タスク状況の自動反映

  1. Asanaでタスクのステータスが更新される（例：「処理中」→「完了」）

  2. AsanaのWebhookが設定されており、ステータス変更を検知

  3. WebアプリケーションのAPIがコールされ、対応する受注情報のステータスが更新される

import express, { Request, Response } from 'express';
import { Client as AsanaClient } from 'asana';

const app = express();
app.use(express.json());

const asanaClient = AsanaClient.create().useAccessToken(process.env.ASANA_ACCESS_TOKEN);

interface AsanaWebhookEvent {
  events: Array<{
    resource: {
      gid: string;
    };
  }>;
}

app.post('/asana_webhook', async (req: Request, res: Response) => {
  const data = req.body as AsanaWebhookEvent;
  const taskId = data.events[0].resource.gid;

  try {
    const task = await asanaClient.tasks.findById(taskId);
    const orderId = task.custom_fields['order_id'] as string;
    const newStatus = task.custom_fields['status'] as string;

    await updateOrderStatus(orderId, newStatus);
    res.sendStatus(200);
  } catch (error) {
    console.error('Asanaウェブフックエラー:', error);
    res.sendStatus(500);
  }
});

async function updateOrderStatus(orderId: string, status: string): Promise<void> {
  // データベース更新ロジックをここに実装
}

3. Webアプリケーション・Asana → Metabase連携

リアルタイムデータ分析

  1. WebアプリケーションとAsanaのデータが定期的にデータベースに同期される

  2. Metabaseが各種データベースに接続し、リアルタイムでデータを取得・分析

  3. 経営ダッシュボードに最新の情報が表示される

-- Metabaseでの分析クエリ例
SELECT 
    DATE_TRUNC('day', wa.order_date) as date,
    COUNT(wa.id) as total_orders,
    SUM(wa.amount) as total_amount,
    AVG(EXTRACT(EPOCH FROM (a.completed_at - a.created_at))/3600) as avg_processing_time
FROM 
    web_app_orders wa
JOIN 
    asana_tasks a ON wa.id = a.custom_fields->>'order_id'
WHERE 
    wa.order_date >= CURRENT_DATE - INTERVAL '30 days'
GROUP BY 
    DATE_TRUNC('day', wa.order_date)
ORDER BY 
    date

4. Metabase → Asana連携

分析結果に基づくタスク自動作成

  1. Metabaseで特定の条件（例：売上が目標の80%を下回った）を検知

  2. MetabaseのアラートをWebアプリケーションで受信

  3. WebアプリケーションからAsana APIを呼び出し、対応タスクを自動作成

import express, { Request, Response } from 'express';
import { Client as AsanaClient } from 'asana';

const app = express();
app.use(express.json());

const asanaClient = AsanaClient.create().useAccessToken(process.env.ASANA_ACCESS_TOKEN);

interface MetabaseAlert {
  alertCondition: string;
  currentSales: number;
  targetSales: number;
}

app.post('/metabase_alert', async (req: Request, res: Response) => {
  const data = req.body as MetabaseAlert;

  if (data.alertCondition === 'sales_below_target') {
    try {
      await createAsanaTask({
        name: '売上目標未達対応',
        notes: `現在の売上: ${data.currentSales}、目標: ${data.targetSales}`,
        projects: [process.env.ASANA_SALES_PROJECT_ID as string]
      });
      res.sendStatus(200);
    } catch (error) {
      console.error('Asanaタスク作成エラー:', error);
      res.sendStatus(500);
    }
  } else {
    res.sendStatus(400);
  }
});

interface AsanaTaskCreate {
  name: string;
  notes: string;
  projects: string[];
}

async function createAsanaTask(taskData: AsanaTaskCreate): Promise<void> {
  await asanaClient.tasks.create({
    workspace: process.env.ASANA_WORKSPACE_ID,
    ...taskData
  });
}

この連携による効果

1. 情報の瞬時化

受注情報が即座にタスク化され、担当者がすぐに対応可能です。

2. 業務の効率化

タスクのステータス更新が自動的に基幹システムに反映され、二重管理がなくなります。

3. リアルタイム分析

最新のデータがMetabaseに集約され、任意のタイミングで柔軟な分析が可能となります。

4. 能動的な業務改善

分析結果を即座にアクションに繋げることができます。

まとめ：API連携がもたらすDXの可能性

このようなAPI連携により、各ツールの強みを最大限に活かしつつ、シームレスな業務フローを実現することができます。
重要なポイントは以下の通りです。

  1. リアルタイム性：情報が瞬時に関連システムに伝達されること。

  2. 自動化：人手を介さずにデータやタスクが更新されること。

  3. データの一元管理：全てのデータが整合性を保ちながら管理されること。

  4. 柔軟性：新たな要件や分析ニーズに応じて、連携内容を柔軟に拡張できること。

WebアプリケーションとMetabase、AsanaのようなツールをAPI連携することで、単なる業務のデジタル化を超えた、部門横断的なデジタルトランスフォーメーションを実現することができるのです。

さいごに

お読みいただきありがとうございました。
次回もまた、具体的なDXのすすめかたについて説明していきます。

さて、さいごに宣伝させてください。
読者の中には、
「ゴリラの言っていることが全然わからんのだが・・・？」
「そんなDX人材身近にいないんだけど・・・？」
という方もいるかもしれません。

そんな方に、ゴリラが無料で相談に乗りたいと思います。
これからDXをはじめようとしている方、
DXをはじめたけど行き詰まっている方、
DXがそもそも何か分からない方、
どんな方でも歓迎です。

Xで気軽にDMいただければと思います。
この記事が何かあなたのお役に立てると嬉しいです。
それでは。

この記事が気に入ったらサポートをしてみませんか？