【kintone】PDFプレビュー機能を作ってみた！

(($) => {
  "use strict";
	
  // 	添付ファイルフィールド取得
	const getFileFields = () => {
	  const fields = [];
	  const fieldList = cybozu.data.page.SCHEMA_DATA.table.fieldList;
	  for (const id in fieldList) {
	    if (fieldList[id].type != "FILE") continue;
	    fields.push(fieldList[id].var);
	  }
	  return fields;
	}
  
  // パラメータ取得
	const getParam = (link, key) => {
    const url = new URL(link);
    const params = url.searchParams;
    return params.get(key);
	};
  
  // ファイルダウンロード
  const download = async (fileKey) => {
		const fileUrl = `${kintone.api.url("/k/v1/file.json", true)}?fileKey=${fileKey}`;
		try {
			const headers = {
				"X-Requested-With": "XMLHttpRequest"
			};
			const resp = await fetch(fileUrl, {
				method: "GET",
				headers
			});
			const blob = await resp.blob();
			const url = window.URL || window.webkitURL;
			const blobUrl = url.createObjectURL(blob);
			return blobUrl;
		} catch (err) {
			console.log(err);
			return null;
		}
  };
  
  // プレビュー
  const preview = async (files) => {
    const $preview = $(`
      <div id="_preview">
        <div class="__preview_content">
          <div class="__preview_header">
            <div class="__name">${files[0].name}</div>
            <div class="__prev disabled"><i class="fa-solid fa-chevron-left"></i></div>
            <div class="__next"><i class="fa-solid fa-chevron-right"></i></div>
            <div class="__download"><i class="fa-solid fa-download"></i></div>
            <div class="__close"><i class="fa-regular fa-circle-xmark"></i></div>
          </div>
          <div class="__iframes"></div>
        </div>
        <div class="__background __close"></div>
      </div>
    `).appendTo(document.body);
  
    // 1ファイルの場合
    if (files.length == 1) {
      $preview.find(".__prev, .__next").remove();
    }
  
    // ファイル追加
    for (const [i, file] of files.entries()) {
      const url = await download(file.fileKey);
      const params = "#toolbar=0&navpanes=0";
      const $iframe = $(`<iframe data-index=${i}></iframe>`)
        .attr("src", `${url}${params}`)
        .attr("data-url", url)
        .attr("data-name", file.name)
        .appendTo($preview.find(".__iframes"));
      if (i != 0) $iframe.hide();
    }
  
    let index = 0;
    $preview.on("click", ".__next", (evt) => {
      // 次のファイル
      const max = files.length - 1;
      const nextIndex = index + 1;
      if (index > max) return;
      if (nextIndex == max) {
        $preview.find(".__next").addClass("disabled");
      }
      $preview.find(".__prev").removeClass("disabled");
      index = nextIndex;
      const $target = $preview.find(`iframe[data-index=${nextIndex}]`);
      $preview.find("iframe").hide();
      $preview.find(".__name").text($target.attr("data-name"));
      $target.show();
    })
    .on("click", ".__prev", (evt) => {
      // 前のファイル
      const nextIndex = index - 1;
      if (index < 0) return;
      if (nextIndex == 0) {
        $preview.find(".__prev").addClass("disabled");
      }
      $preview.find(".__next").removeClass("disabled");
      index = nextIndex;
      const $target = $preview.find(`iframe[data-index=${nextIndex}]`);
      $preview.find("iframe").hide();
      $preview.find(".__name").text($target.attr("data-name"));
      $target.show();
    })
    .on("click", ".__download", () => {
      // ダウンロード
      const url = $preview.find(`iframe[data-index=${index}]`).attr("data-url");
      const name = $preview.find(`iframe[data-index=${index}]`).attr("data-name");
      const a = document.createElement("a");
      a.href = url;
      a.download = name;
      a.click();
      a.remove();
    })
    .on("click", ".__close", () => {
      // 閉じる
      $preview.remove();
    });
  };
  
	// 一覧画面
	kintone.events.on("app.record.index.show", (e) => {
		const records = e.records;
  
    for (const code of getFileFields()) {
      // 添付ファイルフィールド要素を取得
  	  const elements = kintone.app.getFieldElements(code);
  	  if (!elements) return;
    
      for (const element of elements) {
        if (!$(element).find("a").length) continue;

        const link = $(element).find("a").attr("href");
        if (!link) continue;

        const id = getParam(link, "record");
        const record = records.find(x => x.$id.value == id);
  
        // PDFがあれば取得
        const files = record[code].value.filter(x => x.contentType == "application/pdf");
        if (files.length) {
          const $button = $(`<button><i class="fa-solid fa-magnifying-glass"></i></button>`);
          $button.data("files", files);
          $(element).addClass("__preview").append($button);
    
          $button.on("click", (evt) => {
            preview(files);
          });
        }
      }
    }
		return e;
	});
  
	// 詳細画面
	kintone.events.on("app.record.detail.show", (e) => {
		const record = e.record;
    for (const code of getFileFields()) {
      const element = kintone.app.record.getFieldElement(code);
      if (!$(element).find("a").length) continue;
  
        // PDFがあれば取得
      const files = record[code].value.filter(x => x.contentType == "application/pdf");
      if (files.length) {
        const $button = $(`<button><i class="fa-solid fa-magnifying-glass"></i>プレビュー</button>`);
        $button.data("files", files);
        $(element).addClass("__preview").append($button);

        $button.on("click", () => {
          preview(files);
        });
      }
    }
		return e;
	});
})(jQuery);

// 添付ファイルフィールド取得
const getFileFields = () => {
	const fields = [];
	const fieldList = cybozu.data.page.SCHEMA_DATA.table.fieldList;
	for (const id in fieldList) {
	  if (fieldList[id].type != "FILE") continue;
	  fields.push(fieldList[id].var);
	}
  return fields;
};

// パラメータ取得
const getParam = (link, key) => {
  const url = new URL(link);
  const params = url.searchParams;
  return params.get(key);
};

// ファイルダウンロード
const download = async (fileKey) => {
	const fileUrl = `${kintone.api.url("/k/v1/file.json", true)}?fileKey=${fileKey}`;
	try {
		const headers = {
			"X-Requested-With": "XMLHttpRequest"
		};
		const resp = await fetch(fileUrl, {
			method: "GET",
			headers
		});
		const blob = await resp.blob();
		const url = window.URL || window.webkitURL;
		const blobUrl = url.createObjectURL(blob);
		return blobUrl;
	} catch (err) {
		console.log(err);
		return null;
	}
};

// プレビュー
const preview = async (files) => {
  const $preview = $(`
    <div id="_preview">
      <div class="__preview_content">
        <div class="__preview_header">
          <div class="__name">${files[0].name}</div>
          <div class="__prev disabled"><i class="fa-solid fa-chevron-left"></i></div>
          <div class="__next"><i class="fa-solid fa-chevron-right"></i></div>
          <div class="__download"><i class="fa-solid fa-download"></i></div>
          <div class="__close"><i class="fa-regular fa-circle-xmark"></i></div>
        </div>
        <div class="__iframes"></div>
      </div>
      <div class="__background __close"></div>
    </div>
  `).appendTo(document.body);
  
  // 1ファイルの場合
  if (files.length == 1) {
    $preview.find(".__prev, .__next").remove();
  }
  
  // ファイル追加
  for (const [i, file] of files.entries()) {
    const url = await download(file.fileKey);
    const params = "#toolbar=0&navpanes=0";
    const $iframe = $(`<iframe data-index=${i}></iframe>`)
      .attr("src", `${url}${params}`)
      .attr("data-url", url)
      .attr("data-name", file.name)
      .appendTo($preview.find(".__iframes"));
    if (i != 0) $iframe.hide();
  }
  
  let index = 0;
  $preview.on("click", ".__next", (evt) => {
    // 次のファイル
    const max = files.length - 1;
    const nextIndex = index + 1;
    if (index > max) return;
    if (nextIndex == max) {
      $preview.find(".__next").addClass("disabled");
    }
    $preview.find(".__prev").removeClass("disabled");
    index = nextIndex;
    const $target = $preview.find(`iframe[data-index=${nextIndex}]`);
    $preview.find("iframe").hide();
    $preview.find(".__name").text($target.attr("data-name"));
    $target.show();
  })
  .on("click", ".__prev", (evt) => {
    // 前のファイル
    const nextIndex = index - 1;
    if (index < 0) return;
    if (nextIndex == 0) {
      $preview.find(".__prev").addClass("disabled");
    }
    $preview.find(".__next").removeClass("disabled");
    index = nextIndex;
    const $target = $preview.find(`iframe[data-index=${nextIndex}]`);
    $preview.find("iframe").hide();
    $preview.find(".__name").text($target.attr("data-name"));
    $target.show();
  })
  .on("click", ".__download", () => {
    // ダウンロード
    const url = $preview.find(`iframe[data-index=${index}]`).attr("data-url");
    const name = $preview.find(`iframe[data-index=${index}]`).attr("data-name");
    const a = document.createElement("a");
    a.href = url;
    a.download = name;
    a.click();
    a.remove();
  })
  .on("click", ".__close", () => {
    // 閉じる
    $preview.remove();
  });
};

// 一覧画面
kintone.events.on("app.record.index.show", (e) => {
  const records = e.records;

  for (const code of getFileFields()) {
    // 添付ファイルフィールド要素を取得
    const elements = kintone.app.getFieldElements(code);
    if (!elements) return;
  
    for (const element of elements) {
      if (!$(element).find("a").length) continue;

      const link = $(element).find("a").attr("href");
      if (!link) continue;

      const id = getParam(link, "record");
      const record = records.find(x => x.$id.value == id);
      
      // PDFがあれば取得
      const files = record[code].value.filter(x => x.contentType == "application/pdf");
      if (files.length) {
        const $button = $(`<button><i class="fa-solid fa-magnifying-glass"></i></button>`);
        $button.data("files", files);
        $(element).addClass("__preview").append($button);
  
        $button.on("click", (evt) => {
          preview(files);
        });
      }
    }
  }
  return e;
});

// 詳細画面
kintone.events.on("app.record.detail.show", (e) => {
  const record = e.record;
  for (const code of getFileFields()) {
    const element = kintone.app.record.getFieldElement(code);
  
    // PDFがあれば取得
    const files = record[code].value.filter(x => x.contentType == "application/pdf");
    if (files.length) {
      const $button = $(`<button><i class="fa-solid fa-magnifying-glass"></i>プレビュー</button>`);
      $button.data("files", files);
      $(element).addClass("__preview").append($button);

      $button.on("click", () => {
        preview(files);
      });
    }
  }
  return e;
});