kintoneで添付ファイルをルックアップ？する方法（その１）

今回は、kintone で添付ファイルをルックアップするように呼び出してみよう！という方法です。
ファイルはコピーせずに、ファイルを保存しているアプリから情報を取り出して表示するというアプリです。

出来上がりイメージ

アプリの準備

ファイルを保存しているアプリのフィールド

フィールド種類	フィールドコード	備考
添付ファイル	添付ファイル
文字列(1行)	説明

👀ルックアップで呼び出す側のアプリ

フィールド種類	フィールドコード	備考
ルックアップ	ルックアップ	設定は後述
数値	画像レコード番号
スペース	sp

👀ルックアップの設定

JavaScript

kintone REST API Clientを使います。
https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.min.js

初期表示

詳細画面、新規登録画面、編集画面表示後のイベントで、ファイルの初期表示します。
画像以外だと壊れますが、気になる方はなにか対策してください👀💦

// 初期表示
kintone.events.on(
  [
    "app.record.detail.show",
    "app.record.create.show",
    "app.record.edit.show",
  ],
  (event) => {
    // スペースフィールドに色々仕込む
    const sp = kintone.app.record.getSpaceElement("sp");
    const img = document.createElement("img");
    const brtag = document.createElement("br");
    const atag = document.createElement("a");
    img.id = "img";
    atag.id = "atag";
    img.style.width = "200px";

    sp?.appendChild(img);
    sp?.appendChild(brtag);
    sp?.appendChild(atag);

    // 画像表示
    showImg(event.record.画像レコード番号.value);

    return event;
  }
);

画像表示

kintone REST API Client を使って画像表示します。

// 画像を表示する
const showImg = async (rid) => {
  const appId = kintone.app.getLookupTargetAppId("ルックアップ");
  const client = new KintoneRestAPIClient();
  const res = await client.record.getRecord({
    app: appId,
    id: rid,
  });
  const data = await client.file.downloadFile({
    fileKey: res.record.添付ファイル.value[0].fileKey,
  });
  const img = document.getElementById("img");
  const atag = document.getElementById("atag");
  const b = new Blob([data]);

  img.src = URL.createObjectURL(b);
  atag.text = res.record.添付ファイル.value[0].name;
  atag.href = img.src;
  atag.download = res.record.添付ファイル.value[0].name;
};

ルックアップで選択しているファイルを変更した時

// ルックアップした時
kintone.events.on(
  [
    "app.record.edit.change.画像レコード番号",
    "app.record.create.change.画像レコード番号",
  ],
  (event) => {
    // ルックアップで取得し直した添付ファイルアプリ側のレコードID
    const rid = event.record.画像レコード番号.value;
    // 画像表示
    showImg(rid);
    return event;
  }
);

まとめ

画像を表示するだけでAPIを贅沢に2回使ってしまいますが、
本来ならルックアップできない画像がルックアップできているように見えてなんとなく便利そうな気もします。
別アプリに保存した画像を表示したいという方はお試しを👀