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

今回は、ファイルをルックアップ？するアプリを作ってみたいと思います。

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

ファイルを保存する側ではkintone REST API を使用しますが、
ルックアップで呼び出す側ではファイルはコピーせず、またkintone REST APIを使用せず、無理やりファイルのリンクを持ってきて、それをルックアップしてきたかのように見せるという技です。

ファイルを保存する側、ファイルをルックアップで呼び出す側どちらにもJSカスタマイズが必要です。
無理やりなURL編集をしますので容量用法を守ってお試しください。
※複数ファイルには対応していません😋

出来上がりイメージ

アプリの準備

ファイルを保存する側、ファイルをルックアップで呼び出す側２つ作っていきましょう。

ファイルを保存する側

フィールド種類	フィールドコード	備考
文字列(1行)	ファイルの説明	重複禁止。べつになくてもいいかも。代わりにファイル名重複禁止でもいいかもしれない
添付ファイル	添付ファイル
文字列(1行)	ファイル名	グループで隠してみました
文字列(1行)	url	グループで隠してみました

ファイルをルックアップで呼び出す側

フィールド種類	フィールドコード	備考
ルックアップ	ルックアップ	設定は後述
スペース	sp
文字列(1行)	ファイル名
文字列(1行)	url

ルックアップの設定

ファイルを保存する側のアプリ名：テスト的なファイル置き場

JavaScript

ファイルを保存する側では
kintone REST API Clientをつかいます。使用回数は1保存につき1回。
https://js.cybozu.com/kintone-rest-api-client/2.0.16/KintoneRestAPIClient.min.js

ファイルを保存する側

kintone.events.on(["app.record.detail.show"], async (event) => {
  // 保存後に開いた時ファイルは添付されているのにurlが空っぽの場合うごく
  if (event.record.添付ファイル.value.length > 0 && !event.record.url.value) {
    const client = new KintoneRestAPIClient();
    const rec = {
      url: {
        value: getFileUrl(), // ファイルのurlを取得
      },
      ファイル名: {
        value: event.record.添付ファイル.value[0].name,
      },
    };
    const res = await client.record.updateRecord({
      app: kintone.app.getId(),
      id: kintone.app.record.getId(),
      record: rec,
    });
    location.reload();
  }
  return event;
});

// ファイルのurlを取得
const getFileUrl = () => {
  // 画像ファイルの場合
  let url_0 = document.getElementsByClassName("file-image-container-gaia")[0]
    .children[0].src;
  // 画像以外
  if (!url_0) {
    url_0 = document.getElementsByClassName("file-image-container-gaia")[0]
      .children[0].href;
  }
  // それでもなんかおかしい場合はerrorかえしとく。
  if (!url_0) {
    return "error";
  }

  // 更新されるとファイルのurlのrevisionが上がるので先に無理やり上げとく。(正規表現得意な方、キレイに書いてください)
  const url_1 = url_0.split("revision=");
  const url_1_0 = url_1[0];
  let url_1_1 = url_1[1];
  const url_2 = url_1_1.split("&");
  url_2[0] = Number(url_2[0]) + 1;
  url_1_1 = url_2.join("&");
  const url = url_1_0 + "revision=" + url_1_1;

  return url;
};

ルックアップ呼び出す側

// 表示後イベント
kintone.events.on(
  [
    "app.record.detail.show",
    "app.record.edit.show",
    "app.record.create.show",
  ],
  async (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";
    img.src = event.record.url.value;

    // ダウンロードリンク
    atag.id = "atag";
    atag.text = event.record.ファイル名.value;
    atag.href = event.record.url.value;

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

    return event;
  }
);

// ルックアップでurlが変化したら表示画像やファイル名も変える
kintone.events.on(
  ["app.record.edit.change.url", "app.record.create.change.url"],
  (event) => {
    const img = document.getElementById("img");
    img.src = event.record.url.value;
    const atag = document.getElementById("atag");
    atag.text = event.record.ファイル名.value;
    atag.href = event.record.url.value;
    return event;
  }
);

まとめ

無理やりファイルのURLを編集するため、容量用法を守ってお使いください＾＾；