画像データの入力フィールドへの挿入方法について（ご質問）

[Legacy_Account2742 (44key（Legacy Account）)]

日報アプリの利用を想定し、下記のテストアプリを作成し動作を確認しております。
＜日報アプリのフィールド＞
名前（テキストフィールド、承認者自身の名前）
承認チェック（チェックボックス、ボタン一つを配置し承認の場合はチェック）
署名画像（添付ファイルやリッチテキスト等、チェックボックスがオンで署名画像を埋込む）

＜画像アプリのフィールド＞
名前（テキストフィールド）
署名画像（添付ファイル、署名データをpngフォーマットで登録）

実現したい処理の流れは以下の通りす。
１．日報アプリで承認者が、事前に名前フィールドに転記された自分の名前（例：A）の右横にあるチェックボックスに対し、承認時にチェックを付ける。
２．チェックボックスをチェック（オンに）すると、日報アプリの名前の値（例：A）を基にREST API（GET）で画像アプリの名前（例：A）に紐付く署名データを特定し、日報アプリの署名画像フィールドに転記する（埋め込む）。

しかし、日報アプリでチェックボックスをチェック（オンに）しても、日報アプリの署名画像フィールドには何も転記されません（埋め込まれません）。
ブラウザーのデベロッパーツールにもエラーは出ておりません。
Consoleタブのメッセージの一部を以下に示しますが、画像アプリからの取得はできている様です。
{records: Array(1), totalCount: null}
  records:Array(1)
    0: 
      signature: 
        type:“FILE”
        value:Array(1)
         0:
            contentType:“image/png”
            fileKey:“20221026092750142AA4B2993545FBA55E37FCC0EDBB72300”
            name:“test.png”
            size:“33997”

実行したコードは以下の通りとなります。
実現方法に関し不備等をご指摘いただけると助かります。

(() => {
  ‘use strict’;

  const events = [
    ‘app.record.create.change.check’,
    ‘app.record.edit.change.check’,
    ];

  kintone.events.on(events, (event) => {

    const record = event.record;
    var name = record.name.value;
    const app = 173;
    const body = {app: app, query: ‘name = "’ + name + ‘"’, fields: [‘signature’]};
  
    kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, body).then((resp) => {
    // success
      console.log(resp);
            const current = kintone.app.record.get();
            current.record.signature.value = resp.records[0].signature.value;
            kintone.app.record.set(current);
    }).catch((error) => {
      // error
      console.log(error);
    });

    return event;

  });

})();

以上

[Legacy_Account2742 (44key（Legacy Account）)]

 

|

mls-hashimoto様

下記内容のコメントを含むメールをcybozu developer networkより受信致しました。（当サイトには反映されていませんでした）
コメント有難うございました。
しかしながら、この辺りのコーディングは未経験なため、いろいろ試しましたが、進展がありません。
申し訳ございませんが、サンプルコード等ございましたら、ご提供頂けないでしょうか？
＜コメントいただいた内容＞
kintone.app.record.set()では添付ファイルを操作することができません（参考 ）。

同じことを行う場合、レコードの更新（PUT）のリクエストボディにfileKeyを含めて実行する必要があります。

ファイルアップロード
レコードの更新 

|

 

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

私の記載した情報が不完全で混乱を招くと思い削除しました。

正確には
①レコードの取得APIで添付ファイルフィールドのfileKeyを取得（ここで取得したfileKeyはレコードの更新には使用できず、ファイルダウンロードAPIのみ使用可能）
②取得したfileKeyを使ってファイルダウンロードAPI を実行しblobを作成
③作成したblobを使ってファイルアップロードAPI を実行し、API用のfileKeyを取得
④取得したfileKeyを使ってレコードの更新APIを実行

以上の手順を踏む必要があります。

最後にレコードの更新APIをする以上、create.changeイベントでは使用できないので、レコードIDができるcreate.submit.successイベントでの実行をする必要があります。

私も使ったことはありませんでしたが、以下を作成して動作の確認が取れました。

(() => {
    'use strict';

    let subdomain = '';
    let fileName = 'signature.png';

    /**
     * @return blob
     */
     let fileDownload = (fileKey) => {
        return new Promise((resolve, reject) => {
            let url = `https://${subdomain}.cybozu.com/k/v1/file.json?fileKey=${fileKey}`;
            let xhr = new XMLHttpRequest();

            xhr.open('GET', url);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.responseType = 'blob';
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve(new Blob([xhr.response]));
                } else {
                    reject(new Error(xhr.responseText));
                }
            }
            xhr.send();
        });
    };

    /**
     * @return fileKey
     */
    let fileUpload = (blob, fileName) => {
        return new Promise((resolve, reject) => {
            let formData = new FormData();

            formData.append(' __REQUEST_TOKEN__', kintone.getRequestToken());
            formData.append('file', blob, fileName);

            let url = `https://${subdomain}.cybozu.com/k/v1/file.json`;
            let xhr = new XMLHttpRequest();

            xhr.open('POST', url);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText).fileKey);
                } else {
                    reject(new Error(xhr.responseText));
                }
            };
            xhr.send(formData);
        });
    };

    kintone.events.on([
        'app.record.create.submit.success', 'app.record.edit.submit.success'
    ], async (event) => {
        let record = event.record, appId = event.appId, recordId = event.recordId;
        let getRecordsBody = {
            app: 173,
            query: `name = "${record['name'].value}"`,
            fields: ['signature']
        };
        let getRecords = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', getRecordsBody);

        if (!getRecords.records.length) return event;

        let blob = await fileDownload(getRecords.records[0]['signature'].value[0].fileKey);
        let fileKey = await fileUpload(blob, fileName);
        let updateRecordBody = {
            app: appId,
            id: recordId,
            record: {
                signature: {
                    value: [
                        {
                            fileKey: fileKey
                        }
                    ]
                }
            }
        };
        await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', updateRecordBody);

        return event;
    });
})();

追記：チェックボックスの値による条件は付けていないので、必要に応じてif文を足してください。

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様

ご提示頂きましたサンプルコードを基に（subdomain名の指定およびチェックボックスの判定を加え）、署名画像を埋め込むことができました。
fileDownloadおよびfileUploadにある構文については理解してきっておりませんが、blobやfilekeyの使い方等、勉強になりました。
お陰様で一つ課題をクリアすることができました。ご協力頂きまして誠に有難うございました。

 

 

 

[Legacy_Account2742 (44key（Legacy Account）)]

度々、申し訳ありません。
後で気が付いたのですが、JSEdit for kintoneでコードを表示する際、下記３か所で構文エラーが表示されます。

57行目
    ], async (event) => {
Expected ‘(’ and instead saw ‘{’.

58行目
        let record = event.record, appId = event.appId, recordId = event.recordId;
Expected an identifier and instead saw ‘let’ (a reserved word). 
Expected ‘)’ to match ‘{’ from line 57 and instead saw ‘record’.
Expected an identifier and instead saw ‘=’.
Expected ‘)’ and instead saw ‘event’.

86行目
    });
Unrecoverable syntax error. (98% scanned).

申し訳ございませんが、この構文エラーの内容とこれを解除するためのコード内容をご教示いただけないでしょうか。

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

こちらは警告文ですね。エラーではないので問題なく使えますが、どうやらasync functionを解釈できていないようです（asyncの削除でエラーが消えるのを確認し、アロー関数をfunction文に変更したところエラー内容の変更を確認しました）。

これはエディタの構文チェックが古いとしか言えないので、気になるのであればテキストエディタを別のものにする等が良いかと思います。

[Legacy_Account2742 (44key（Legacy Account）)]

ご教示頂きありがとうございました。
エディターが追い付いていないということで、Visual Studio Codeで確認するとエラーは表示されませんでした。
"（asyncの削除でエラーが消えるのを確認し、アロー関数をfunction文に変更したところエラー内容の変更を確認しました）"については、JSEdit for kintoneでエラーが消えることを確認しましたが、実行すると画像が反映されなくなりました（async, awaitの削除の影響？）。私の修正内容に誤りがあると思いますが、よろしければ、後学のため、修正内容をご教示いただけないでしょうか？

 

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

このコードをasync/awaitを使わないものに変換する必要がある場合、それぞれの処理をthenで繋げていくか、コールバックで記述する必要があります（私も実際に変更して確認したわけではありません）。

非同期関数やPromiseを理解する必要があるので、このあたり を参考にしていただければ良いかと思います。

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様
ご丁寧にアドバス頂きありがとうございました。
参考情報を読み理解するようにいたします。
本件に関するこれまでのアドバイス、誠に有難うございました。