添付ファイルの内容を背景として表示

kintone カスタマイズ
1

あるアプリAに添付されている画像ファイルをAPIで取得し、アプリBのカスタマイズビューの一覧上に背景画像(background-imageとして)で表示をしたいと考えています。

何か良い方法はございませんでしょうか？

2

「カスタマイズビューの一覧上」というのは「レコードを追加するボタン」等がある場所ということで良いでしょうか？

現在kintoneのapiではその要素を取得できないようなので、クラス名から取得するしかないようです。そのため、kintoneの仕様が変わった場合は動かなくなる可能性がありますが、不可能ではなさそうです。

アプリAに以下のJavaScriptをアップロードします。（アプリIDやビュー名等書き換えてください）

クエリで画像の添付されたレコードを指定→添付ファイルのfileKeyを取得→ファイルをダウンロードして背景に指定、という手順を踏んでいます。

  1. (function(){
  2.     ‘use strict’;
  3.     function sendParams(url, type, func){
  4.         var request = new XMLHttpRequest();
  5.         request.open(‘GET’, url, true);
  6.         request.responseType = type;
  7.         request.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
  8.         request.onload = function(event) {
  9.             if (request.status === 200) {
  10.                 // success
  11.                 var data = request.response;
  12.                 func(data);
  13.             } else {
  14.                 // error
  15.                 func(undefined);
  16.             }
  17.         };
  18.         request.send();
  19.     }
  20.     kintone.events.on(‘app.record.index.show’, function(event) {
  21.         var viewName = ‘一覧1’;                  // 対象ビュー名
  22.         var appId = 2;                           // 画像が添付されているアプリID
  23.         var query = ‘order by $id desc limit 1’  // 最新のレコードを取得
  24.         if (event.viewName == viewName) {
  25.             var body = {
  26.                 ‘app’: appId,
  27.                 ‘query’: query,
  28.                 ‘totalCount’: true
  29.             };
  30.             kintone.api(kintone.api.url(‘/k/v1/records’, false), ‘GET’, body, function(resp) {
  31.                 if (0 < resp.totalCount) {
  32.                     var records = resp.records;
  33.                     var record = records[0];
  34.                     var files = record[‘添付ファイル’].value;  // 添付ファイル
  35.                     if (0 < files.length) {
  36.                         var file = files[0];
  37.                         var fileKey = file.fileKey;
  38.                         var url = kintone.api.url(‘/k/v1/file’, false) + ‘?fileKey=’ + fileKey;
  39.                         sendParams(url, ‘blob’, function(data){
  40.                             if (data !== undefined) {
  41.                                 var url = window.URL || window.webkitURL;
  42.                                 var blobUrl = url.createObjectURL(data);
  43.                                 var elements = document.getElementsByClassName(‘gaia-argoui-app-toolbar’); // 一覧上部のクラス名
  44.                                 if (0 < elements.length) {
  45.                                     elements[0].style.background = ‘url(’ + blobUrl + ‘)’;
  46.                                 }
  47.                             }
  48.                         });
  49.                     }
  50.                 }
  51.             });
  52.         }
  53.     });
  54. })();