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

**URL:** <https://community.cybozu.dev/t/topic/3146>\
**Category:** kintone 開発相談\
**Created:** [2018 年 6 月 12 日午前 7:27 UTC](https://community.cybozu.dev/t/topic/3146 "2018-06-12T07:27:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account108](https://avatars.discourse-cdn.com/v4/letter/l/e47c2d/32.png) [@Legacy\_Account108](https://community.cybozu.dev/u/Legacy_Account108)\
**Post date:** [2018 年 6 月 12 日午前 7:27 UTC](https://community.cybozu.dev/t/topic/3146/1 "2018-06-12T07:27:23Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account745](https://avatars.discourse-cdn.com/v4/letter/l/f14d63/32.png) [@Legacy\_Account745](https://community.cybozu.dev/u/Legacy_Account745)\
**Post date:** [2018 年 6 月 17 日午前 8:18 UTC](https://community.cybozu.dev/t/topic/3146/2 "2018-06-17T08:18:49Z")

</div>

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

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

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

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

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