More than 1 year has passed since last update.

OSSのノーコード・ローコード開発ツール「プリザンター」Advent Calendar 2023

@pierusan2010in

株式会社インプリム

サーバースクリプトのHttpClientでプリザンターとGitHub Issuesを連携する

Last updated at 2023-12-10Posted at 2023-12-10

本記事は、OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2023 の11日目の記事です。

サーバースクリプトで外部サービスと連携する

プリザンターのサーバースクリプトには、任意のHTTPリクエストを発行するHttpClientの機能があります。
これにより、REST APIなどを利用した外部サービスとの連携を簡単に行うことができます。

下記記事の「他システムのAPIをサーバスクリプトで操作」のパターンですね。

サーバースクリプトのHttpClientに関する詳細は下記マニュアルをご確認ください。

サンプル

という事で今回は、HttpClientの機能を使って下記の機能を実現するサンプルを紹介いたします。

1. GitHub IssesでOpen中のIssueをプリザンターのテーブルに取り込む

GitHub APIで取得したIssueをプリザンターの「課題管理」テーブルに取り込みます。

2. 取りこんだプリザンター側のレコードからGitHub Issueのclose/reopenを行う

プリザンター側に取り込んだレコードを開き、「状況」を「完了」または「保留」にして更新したタイミングでGitHub側の対応するIssueがCloseされるようにします。また逆に、上記以外の「状況」に変更した場合に再Openされるようにします。

準備

本サンプルではGitHub APIのアクセストークンが必要になりますので、事前に作成・取得しておきます（Issueの読み書き権限だけあればOKです）。

個人用アクセストークンを管理する

1. GitHub IssesでOpen中のIssueをプリザンターのテーブルに取り込む

1.1 取得したIssueを取りこむテーブルを用意する

Issue登録用に下記のようなテーブルを作成しておきます。

テーブル名「課題管理」

項目名	項目種別	用途
タイトル	Title	取得したIssueのタイトルを格納
内容	Body	取得したIssueの内容を格納
状況	Status	Issueのステータス(open/close)との連携用
GitHub Issue No.	NumA	取得したIssueの番号を格納
GitHub Issue URL	ClassA	取得したIssueへのリンクURLを格納

1.2 API実行用のレコードを作成する

API実行用にテーブルを１つ用意し、レコードを１つ作成しておきます。

テーブル名「GitHub連携」

項目名	項目種別	用途
タイトル	Title	"GitHub Issue取得"
実行結果	Body	APIの実行結果表示用

1.3 GitHub APIを実行するサーバースクリプトを作成する

「GitHub連携」の「テーブルの管理」画面を開き「サーバースクリプト」タブで下記サーバースクリプトを登録します。

Issue一覧の取得には GitHub API:List repository issuesd を使います。
また、取得先のリポジトリはサンプル用にImplem.Pleasanterリポジトリをforkしたものを利用しています。

//ID=1のプロセスボタンが押されたときのみ処理する。
if (context.ControlId === 'Process_1') {
    const targetSiteId = 61838;　//取得したIssueを登録するサイトのID
    const accessToken = {your accessd token}; 　//あらかじめ作成しておいたアクセストークン
    //リクエストURL。Open中のIssueのみを取得するためにstate=openのパラメータ追加しています。
    const url = "https://api.github.com/repos/pierre3/Implem.Pleasanter/issues?state=open";
    
    //HttpClientの設定
    httpClient.RequestHeaders.Add('User-Agent', 'Implem'); //User-Agentが無いとエラーになります。
    httpClient.RequestHeaders.Add('Authorization', 'Bearer ' + {your access token});
    httpClient.RequestUri = url;
    
    //GET: https://api.github.com/repos/pierre3/Implem.Pleasanter/issues?state=open 
    let response = httpClient.Get();
    
    if (httpClient.IsSuccess) {
        model.Body = 'Success!';
        var githubIssues = JSON.parse(response);
        //取得したIssue一覧をループ処理
        githubIssues.forEach(item => {
            //「GitHub Issue No.（NumA）」をキーにUpsert
            let data = {
                Keys: ["NumA"],
                Title: item.title,
                Body: item.body,
                NumHash: {
                    NumA: item.number
                },
                ClassHash: {
                    ClassA: item.html_url,
                }
            };
            let ret = items.Upsert(targetSiteId, JSON.stringify(data));
            if (ret === false) {
                model.Body = model.Body + '\nレコードの登録に失敗しました！　IssueNum:' + item.number + '\n';
            }
        });

    } else {
        //エラーの内容を「実行結果」に設定
        model.Body = 'Error: (' + httpClient.StatusCode + ')' + response;
    }
}

GitHub APIにリクエストを投げる際には、リクエストヘッダにUser-Agentが含まれている必要があります。（値は任意の文字列で問題なさそうです）

「スクリプト」欄に上記コードを設定します。条件は「更新前」のみチェックしておきます。

1.4 「プロセス」機能を使ってAPI実行用のボタンを追加する

ID：1(自動割り当て)
名称：GitHub Issue取得
画面種別：編集
現在の状況：*
変更後の状況：*
実行種別：追加したボタン
アクション種別：保存

上記設定でプロセスを作成すると、下記の様に「GitHub連携」テーブルのレコード編集画面に「GitHub Issue取得」のボタンが作成されます。

追加したボタンのControlIDについて：
プロセス機能で追加したボタンには、ControlIDとしてProcess_{n}が割り当てられます。({n}はプロセスのID)
サーバースクリプトでは、このControlIDを利用してどのボタンが押されたかを確認できます。

例えば、今回のサーバースクリプトでは条件を「更新前」としていますので、通常の「更新」ボタン押下時やAPIでレコードが更新されたタイミングなどでもスクリプトが実行されてしまいます。しかし、以下のようなコードを追加することで「GitHub Issue取得」ボタンが押された場合のみ実行されるように設定できます。

if(context.ControlId === 'Process_1'){
  //ID=1のプロセスボタンが押された場合だけ実行する
}

1.5 実行してみる

これでIssueを取りこむ準備ができました。さっそく実行してみましょう。

実行結果

今、対象のリポジトリにはOpen中のIssueが５件あります。

「GitHub取得」てコードを開き、「GitHub Issue取得」ボタンをクリックします。

実行結果欄に「Success！」と表示されたのを確認し、レコードが取りこまれたはずの「課題管理」テーブルを開いてみます。

無事、Issueの内容が取りこまれているのが確認できます。

2. 取りこんだプリザンター側のレコードからGitHub Issueのclose/reopenを行う

下記のような仕様で、プリザンターからGitHub IssueのClose/Reopen処理を行うよう実装します。
Issue Close時にはCloseの理由(statr_reason: 'compleded' or 'not_planned')を指定するようにします。

Issueを取りこんだ「課題管理」テーブルで、レコードを開く
状況欄を「完了」に変更後、「Issueステータス更新」ボタンをクリックする
対応するGitHub IssueがCloseされる（Close理由 - completed）
状況欄を「実行中」に変更後、「Issueステータス更新」ボタンをクリックする
対応するGitHub IssueがReopenされる
状況欄を「保留」に変更後、「Issueステータス更新」ボタンをクリックする
対応するGitHub IssueがCloseされる（Close理由 - no-planned）

2.1 GitHub Issue更新APIを実行するサーバースクリプトを作成する

今度は、「課題管理」テーブル側でサーバースクリプトの設定を行います。
「テーブルの管理」画面の「サーバースクリプト」タブでサーバースクリプトを追加し、下記のスクリプトを設定します。

Issueの更新はGitHub API: Update an issue を使います。
また、取得先のリポジトリはサンプル用にImplem.Pleasanterリポジトリをforkしたものを利用します。

//ID=2のプロセスのボタンが押された場合のみ実行する
if (context.ControlId === 'Process_2') {
    const token = {your access token};
    const url = "https://api.github.com/repos/pierre3/Implem.Pleasanter/issues/" + model.NumA;
    //HttpClient設定
    httpClient.RequestHeaders.Add('User-Agent', 'Implem');
    httpClient.RequestHeaders.Add('Authorization', 'Bearer ' + token);
    httpClient.RequestUri = url;
    //更新データの設定
    let data = {};
    if (model.Status === 900){
        data = { state: 'closed' }; //状況：完了時
    }else if (model.Status > 900) {
        data = { state: 'closed', state_reason: 'not_planned' }; //状況: 保留時
    }else{
        data = { state: 'open' }; //上記以外
    }
    httpClient.Content = JSON.stringify(data);
    //PATCH: https://api.github.com/repos/pierre3/Implem.Pleasanter/issues/{issueNumber}
    let response = httpClient.Patch();
    //実行結果をClassBに格納
    if (httpClient.IsSuccess) {
        model.ClassB = response;
    } else {
        model.ClassB = 'Error: (' + httpClient.StatusCode + ')' + response;
    }
}