More than 5 years have passed since last update.

簡単なサービスならQuestetraですぐに作って提供できる（API利用フロー）

Last updated at 2019-06-19Posted at 2019-06-19

🔷 はじめに

「○○ができるサービスを作ってください。」

処理で言うと、「あるAPIにリクエストを投げる」というだけのサービスなのに、業務で使うとなると、サービスとしてキッチリしたものを求められます。

ログイン機能、ユーザー管理、権限管理、etc、これらを自分で作るとなると結構な手間になります。

しかし、Questetra BPM Suiteを使えば簡単なサービスをすぐに作る事ができます。

🔶 Questetra BPM Suite

Questetra BPM Suite は、クラウド型の業務プロセス管理システム (SaaS BPMS) です。
様々な業務システム（ワークフローアプリ）をノンプログラミングで開発・運用・監視できます。日常業務のデジタル化・自動化を推進できます。（DX 支援ツール、ワークフローオートメーションツール）

Questetra BPM Suite（以下、Questetra）はノンプログラミングでワークフローアプリを作れるサービスです。
メインはワークフロー機能ですが、付随してログイン機能、ユーザー管理、権限管理、etc、様々な機能が用意されています。

しかも、プランも無料からあります。
（ただし、無料のプランは2週間ログインが無いと削除されます）

🔷 今回作るもの

今回作るのは、「業務処理を開始するAPI」にリクエストを投げて、APIで業務処理が終わったら完了を伝えるアプリです。
その中で、実際に作る部分は業務フローとAPIです。

上図フローのオブジェクトの説明

フロー開始を、担当者が確認する。
6のオブジェクトにあるwebhookの、URLを生成する。
業務処理を行う外部APIにリクエストを投げる。
今回はAPI Gatewayでリクエストを受ける。
業務処理をLambdaで行い、処理が終わった合図として、Questetraのwebhookにリクエストを投げる。
外部APIから、業務処理完了の合図のリクエストを受ける。
フロー完了を、担当者が確認する。

🔷 業務フローの作成

🔶 準備

最初に、Questetraのスタータープランの申込みを行います。
これは無料で使えるプランで、申込み後、すぐに試せる環境の案内がメールで送られます。

案内メールの中に、ログインURL、ID、PWが記載されているので、管理者としてログインします。

この時点で、ログイン機能が実現できている事が分かります。
今回は詳しく触れませんが、このQuestetraの環境に対して、ユーザー追加したり、組織構造を定義して、権限を付与する事が可能です。

🔶 アプリの作成

Questetraのアプリの作り方は、オフィシャルサポートサイトでも紹介されています。
今回は以下を参考にアプリを作ります。

ただ、Quetetraは一般的な製品マニュアルのような、製品について1から10まで全て記載したドキュメントはまだ無く、ブログやユースケースの紹介のような形のドキュメントしかありません。
初めて触る人には情報が足りないところもあるので、補足しながら説明します。

✅ アプリの新規作成

Questetraにログインしたら、右上のユーザー名をクリックして、[アプリ設定] → [アプリ一覧] → [アプリ新規作成] をクリック。

アプリ新規作成画面に遷移したら、アプリ名等を入力して、[新規作成]ボタンをクリックします。

ワークフロー作成画面に遷移します。
（Adobe Flashは有効にしないと起動しません）

✅ データ項目の作成

まずは、このワークフローで使用するデータ項目を、あらかじめ設定しておきます。

画面上部の[データ項目]タブをクリックします。
画面左エリアの[追加]プルダウンをクリックして、データ項目を追加します。

追加するデータ項目は以下の通りです。
何に使うかは後ほど説明します。

データ項名	フィールド名	データタイプ	初期値
件名	`title`	文字、単一行	"確認イベント"
リクエスト時エラー格納用変数	`q_error`	文字、複数行	（なし）
APIキー	`q_api_key`	文字、複数行	（なし）
callback用 Webhook url	`q_callback_url`	文字、単一行	（なし）
リクエストボディ	`q_req_body`	文字、複数行	（なし）
レスポンス格納用変数	`q_response`	文字、複数行	（なし）
外部API	`q_api_endpoint`	文字、単一行	(リクエストする外部APIのURL)
※フィールド名は"q_"で開始するように命名すること

✅ ワークフローの作成

[ワークフロー図]タブをクリックして、最初の画面に戻ります。

左エリアの[advance]タブをクリックします。
細かい設定は後にして、まずは以下のようにオブジェクトを配置します。
配置も矢印の接続も、ドラッグ＆ドロップでできます。

個別にオブジェクトをダブルクリックして、以下のように設定します。

⬛開始
（デフォルト設定）

⬛処理開始の確認
（デフォルト設定）

⬛分岐
（デフォルト設定）

⬛webhook url 生成
QuestetraのwebhookオブジェクトのURLを生成します。
webhookのURLが固定であれば問題ないのですが、URLの一部は、フローを実行する度に動的に生成される値であるため、フローの中で生成します。

設定項目	設定値	備考
値もしくは式の評価を保存するデータ項目	callback用 Webhook url	設定した左記のデータ項目を選択します。
値もしくは式	${var[applicationRoot]}System/ReceiveTask/Http/4/14/#{processInstanceId}/#{#q_api_key}/receive	フロー処理の中で、「callback用 Webhook url」に本URLがセットされます。

上記で使用されている特別なパラメータの意味は以下の通りです・
- ${var[applicationRoot]}：本フローの実行環境のベースURLがセットされます。
- #{processInstanceId}：フロー処理が開始される度に生成される、プロセスIDがセットされます。
- #{#q_api_key}：先程設定した、フロー処理が開始される度に生成される、「APIキー」の値がセットされます。

⬛APIリクエスト処理
外部APIにリクエスト投げるオブジェクトです。

[通信設定]タブで、リクエスト先のAPIの情報を設定します。

設定項目	設定値	備考
アクセスURL	#{#q_api_endpoint}	[データの参照を挿入する...]プルダウンをクリックして、先程設定した左記のデータ項目を選択します。
HTTP Mthod	GET	今回の外部APIはGETメソッドのAPIなので、「GET」を選択します。
エラー内容を保存するデータ項目（文字複数行）	APIリクエスト時エラー格納用変数	設定した左記のデータ項目を選択します。

[送信パラメータ]タブで、リクエスト時のクエリストリングを設定します。

設定項目	設定値	備考
パラメータ名	param	任意の名称を設定します。
値	callback用 Webhook url	設定した左記のデータ項目を選択します。

この設定で、「https://(外部API)?param=https://(webhookのURL)」のようなリクエストパスになり、webhookのURLを外部APIに渡せるようにします。

[レスポンス]タブで、レスポンスの格納先を設定します。

設定項目	設定値	備考
レスポンスを保存する	チェック	（なし）
レスポンスを保存するデータ項目（文字複数行/ファイル）	レスポンス格納用変数	設定した左記のデータ項目を選択します。

フロー処理上は使用しないですが、レスポンスの格納先として、データ項目の「レスポンス格納用変数」を選択します。

⬛終了（上）
　→ デフォルト設定でOK

⬛トリガー用webhook
外部APIで業務処理が完了したら、完了の合図としてのリクエストを受けるwebhookのオブジェクトです。

[リクエスト]タブで、webhookを設定します。

設定項目	設定値	備考
受信するHTTPリクエストのメソッド	GET	（なし）
受信するHTTPリクエストのContent-Type	application-json	（なし）
リクエストボディ保存先の文字型データ項目	リクエストボディ	設定した左記のデータ項目を選択します。

フロー処理上は使用しないですが、リクエストボディの格納先として、データ項目の「リクエストボディ」を選択します。

[レスポンス]タブで、外部APIに返すレスポンスを設定します。

設定項目	設定値	備考
HTTPレスポンスのContent-Type	application-json;charset=UTF-8	（なし）
HTTPレスポンスの内容	{"result": "Request to webhook is successful !"}	（なし）

[APIキー]タブで、APIキーの格納場所を設定します。

設定項目	設定値	備考
APIキーの値を指定する文字型データ項目	APIキー	設定した左記のデータ項目を選択します。

外部APIが、webhookへのリクエスト時に含めるAPIキーと突き合わせる、正解となるAPIキーの格納先として、データ項目の「APIキー」を選択します。

⬛処理完了の確認
　→ デフォルト設定でOK

⬛終了（下）
　→ デフォルト設定でOK

設定が完了したら、画面右上の[保存]ボタンをクリックして保存し、[閉じる]ボタンをクリックして閉じます。

アプリ詳細画面に遷移するので、最後に[開発中のバージョン1のリリース]ボタンをクリックします。

これで、作成したフローが実行できるようになります。

🔷 APIの作成

業務処理役のAPIを作成します。
今回は、API GatewayでQuestetraからのリクエストを受け取り、Lambdaで業務処理を行ったとして、処理の中でwebhookにGETリクエストを投げます。

webhookのURLは、リクエストのクエリストリングにセットされているものを使います。

Lambdaのサンプルソースは以下になります。

index.js

const https = require ('https');
const url = require('url');

exports.handler = async (event) => {
  let webhookUrl;
  if('param' in event.queryStringParameters) {
    webhookUrl = event.queryStringParameters.param; // クエリストリングparamの値を取得
    await requestToAPI(webhookUrl);
  }
  
  // リクエスト元へ返すレスポンス
  const response = {
    statusCode: 200,
    body: JSON.stringify(
      {
        "result":"Work is complete!",
        "webhook":String(webhookUrl)
      }),
  };
  return response;
};

function requestToAPI(webhookUrl) {
  console.log(`■□■□ requestToAPI : Questetraの受信Webhookにリクエストする処理 ■□■□`);

  return new Promise(
    (resolve, reject) => { 
      // TODO implement
      const parser = url.parse(webhookUrl);
      let req, body = '';
    
      const options = {
        host : parser.host,
        port : 443,
        path : parser.path,
        method : 'GET',
        headers : {
          'Content-Type' : 'application/json'
        }
      };
    
      /* webhookへのリクエスト */
      req = https.request(options, (res) => {
        res.setEncoding('utf8');
        /* レスポンスボディのデータ読み込み処理（dataイベント発生）*/
        res.on('data', (chunk) => {
          body += chunk;
        });
        /* 読み込むデータが無くなった時の処理（endイベント発生） */
        res.on('end', () => {
          if(res.statusCode == 200) {
            console.log('■□■□ レスポンス情報 ');
            console.log(body);
          } else {
            console.log('■□■□ レスポンス情報なし ');
          }
          resolve(body);
        });
      });
    
      req.on('error', (e) => {
        console.error(`problem with request: ${e.message}`);
        reject(body);
      });
      req.end();
  });
}

🔷 テスト

1. アプリを実行します。

ヘッダーメニューの[ワークフロー]をクリックします。

ブラウザの別タブに、ワークフロー画面が開かれます。

左メニューの[新規開始]をクリックすると、実行可能なアプリが一覧表示されます。
作成した「外部API利用サンプル」の実行ボタンをクリックして、アプリを実行します。

2. 「処理開始の確認」タスクを完了させます。

業務フローの開始と共に、「処理開始の確認」というタスク画面が表示されます。
画面下部の[「処理開始の確認」処理完了]ボタンをクリックして、本タスクを完了させます。

これは、業務フローの以下のタスクに当たります。

3. 外部APIで業務処理が完了するのを待ちます。

業務フローでは、「APIリクエスト処理」タスクで外部APIにリクエストを投げ、「トリガー用webook」タスクで、外部APIから送られて来る、処理完了の合図のリクエストを待っているところです。

4. 「処理完了の確認」タスクを完了させます。

業務処理が終わるまで少し待ってから、左メニューの[マイタスク]をクリックすると、対応すべきタスクが一覧表示されます。
「処理完了の確認」タスクの実行ボタンをクリックして、タスクを実行します。

[「処理完了の確認」処理完了]ボタンをクリックして、タスクを完了します。

🔷 まとめ

このようにQuestetraを使えば、ちょっとした処理を行うだけの、シンプルなサービスをすぐに作成する事ができます。
他にも、標準でユーザー管理、権限管理、ダッシュボードによる利用状況管理、等が揃っているので、アプリとしての提供もすぐに可能です。

また、業務フローツールなので、タスク割当、ファイル読み込み、PDF生成、等の様々な処理が可能で、さらにアドオンを使えば、Googleサービス、Line、Paypal、等の外部サービスとの連携も容易に実現できます。

かっちりしたマニュアル無いので、ちょいちょい詰まる所もありますが、参考になる業務フローのテンプレートも豊富ですし、無料プランでもサポートに問い合わせれば回答してくれるので、気軽に使い始められます。

色々なタスクを試して、便利のフローを作って見てください。

🔷 参考

Questetra Support
BPMNアイコン

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up