kintoneの情報を取得したら、リストに反映してステータスを進める

今日も、「URLのテキストを元にQRコードをブラウザに表示してみる」に関連して、ちょっとやりたいことの準備のためのお試し実行をした内容を書きます。

kintoneアプリの承認済対象レコードを掲載したら、掲載済にプロセスを進めたい

kintoneに情報を登録すると、GitHub Actions のワークフローでQRコード付きのリンク集のページが更新できたらいいなという野望に向けての準備その４（再挑戦）です。kintoneのレコードはプロセス管理して、ステータスが「承認済」のレコードがあれば掲載対象として表示用リストに追加して、追加できたらレコードのステータスを「掲載済」に変更して、kintoneの掲載対象レコードに変更がなければ、表示情報は更新しないようにしたいと思います（野望）

前回は、ステータス更新まで進まなかったので、kintoneアプリの承認済レコードをすべて取得して、取得できたレコードのステータスを「掲載済」に更新します。

条件に合うレコードを読んで、表示用リストファイルに追加後、対象レコードのステータスを更新する

GitHub Actions のワークフローで呼び出すjobの中で、読みだしたレコードを表示用のファイルに反映します。表示対象のレコードをリスト表示用のjsファイルに出力するため、取得対象のステータスを承認済と公開済に変更しています。

      // リクエストパラメータの設定
      const APP_ID = 2;
      const query_string = 'ステータス="accepted" or ステータス="published" order by $id';
      const params = {
        app: APP_ID,
        fields:['$id', 'ステータス', 'title', 'URL', 'descriptions'],
        query: query_string
      };
      
      // レコードの取得
      const resp = await client.record.getRecords(params);

ここで、kintoneアプリの設定でURL重複も禁止にしておきます。
念のため確認。

URLの重複登録禁止にしておきます

kintoneレコードを読んでステータスを更新するjob の作成

今回実行したいのは、kintoneアプリの「承認済」ステータスのレコード読み出して、取得できたレコードのステータスを「掲載済」に進めて次回の更新対象に含まれないようにする。です。
レコードの取得と、ステータスの更新は、使うメソッドが違います。対象レコードのフィールドを更新するのではなく、updateRecordStatus()メソッドを使って、プロセス更新のためのactionを実行するイメージです。

            // 取得レコードのステータス更新
            if(jrec.ステータス.value === "accepted"){
              client.record.updateRecordStatus( {action:'公開する', app:APP_ID, id:jrec.$id.value})
            }

最初に試したReactアプリは、クライアントからREST APIを呼び出していましたが、今回はGitHub Actionsでリスト部分を更新する方式にしました。
レコードから取得して、表示リスト部分を更新すると画面に反映されるようにしています。

      const arrayOfLists = resp.records.map(
          (record, index) => {
            // 取得データ→JSON→オブジェクト
            const srcData = JSON.stringify(record);
            const jrec = JSON.parse(srcData);
            const urllist = `<li><div>${jrec.title.value}<div><img src=\"${getQRCodeUrl(jrec.URL.value)}\" alt=\"${jrec.URL.value}\" title=\"${jrec.title.value}\" /><div>${jrec.descriptions.value}</div></div></div></li>\n`;
            // 取得データを表示対象リストに追加する
            fs.appendFile(LIST_PATH, urllist + '\n', err => {
              if( err ){
                console.log(err.message);
              } else {
                console.log(`appendFile id=${jrec.$id.value}`);
                if(index === resp.records.length-1){
                  // 取得データを表示用のオブジェクトとして整える
                  fs.appendFile(LIST_PATH, "</ul>\n);\n}", err => {
                    if( err ){
                      console.log(err.message);
                    } else {
                      console.log(`appendFile closetag`);
                    }
                  }); 
                }
              }
            }); 

            // 取得レコードのステータス更新
            if(jrec.ステータス.value === "accepted"){
              client.record.updateRecordStatus( {action:'公開する', app:APP_ID, id:jrec.$id.value})
            }
          });
 
    } catch (err) {
      console.log(err);
    }

画面表示部分は、まずは、ワークフローで生成した表示リストをそのまま表示するだけにします。

import {UrlList} from "./url_list.js";

function App() {
  return(
    <div>
      <h1>kintoneアプリから取得したURLのリスト</h1>
      <UrlList />
  </div>
  );
 };

export default App;

出力されたリスト部のurl_list.jsは、こんな感じ。

export function UrlList() { 
	 return ( <ul>
<li><div>テスト資料<div><img src="http://api.qrserver.com/v1/create-qr-code/?data=https://exsample.com/&size=100x100" alt="https://exsample.com/" title="テスト資料" /><div>テスト用のデータ</div></div></div></li>

<li><div>Cybozu Inside Out<div><img src="http://api.qrserver.com/v1/create-qr-code/?data=https://blog.cybozu.io/&size=100x100" alt="https://blog.cybozu.io/" title="Cybozu Inside Out" /><div>Cybozu Inside Out　は、
サイボウズの開発本部、運用本部、サイボウズ・ラボのエンジニアのブログです。</div></div></div></li>

<li><div>Cybozu Tech<div><img src="http://api.qrserver.com/v1/create-qr-code/?data=https://tech.cybozu.io&size=100x100" alt="https://tech.cybozu.io" title="Cybozu Tech" /><div>テスト用のURL登録</div></div></div></li>

</ul>
);
}

画面にも反映されました🎉

表示結果

表示済のレコードのステータスも確認します。
あれれ？
ステータスが更新されていません。

ステータスが更新されていない(T_T)

ちなみに、ローカルで実行すると、ステータスが更新されました。ということは、処理自体は合っている模様です。

ローカル実行は成功している

これは調査が必要ですが、今日はここまでにします。

まとめ

今週は、一気に処理後のステータス更新とQRコード付きリスト表示への反映まで実装してみました。まだ、バグがありますし見た目も雑なので、ここから手直ししていきたいと思います。GitHub Actions少し慣れてきましたが、まだまだ理解が不足しているので、引き続き精進します💪