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

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

[kintoneで添付ファイルをルックアップ？する方法（その１）](https://qiita.com/juri_don/private/c8f0fd3f60cfe8a43a6e)の続きです。

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

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

出来上がりイメージ

<iframe width="480" height="360" src="https://www.youtube.com/embed/2M_5awFytXE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

## ファイルを保存する側

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e209b399-5114-8f43-2b38-2cf597e9c4a9.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e6088717-9591-f45d-be57-963b27c24cd8.png)

### ルックアップの設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/0691a377-927f-4ed2-de0e-3004def9e6d7.png)

# JavaScript

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

## ファイルを保存する側

```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;
};

```

## ルックアップ呼び出す側

```js
// 表示後イベント
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を編集するため、容量用法を守ってお使いください＾＾；