# カスタマイズビューでレコード毎に添付ファイルを表示

**URL:** <https://community.cybozu.dev/t/topic/775>\
**Category:** kintone 開発相談\
**Created:** [2017 年 6 月 23 日午前 6:16 UTC](https://community.cybozu.dev/t/topic/775 "2017-06-23T06:16:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1480](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1480](https://community.cybozu.dev/u/Legacy_Account1480)\
**Post date:** [2017 年 6 月 23 日午前 6:16 UTC](https://community.cybozu.dev/t/topic/775/1 "2017-06-23T06:16:10Z")

</div>

お世話になっております。

タイトルの件について、カスタマイズビューでkintoneのデフォルトの一覧ビューのようにレコード一覧をリストで表示をさせたいと考えています。

現在下記のようなコードで表示をしていますが、添付ファイルが1つしか表示されていません。

これを各レコードごとに添付ファイルを1つづつ表示させることは出来ますでしょうか？

お手数でございますが、ご確認お願い致します。

js

```
(function () {
    kintone.events.on('app.record.index.show', function (event) {
        if (event.viewName != 'カスタマイズビュー') return;
        
        var products = new Array();
        for (var i = 0; i < event.records.length; i++) {
            var record = event.records[i];
            console.log(record);
            $("#area").loadTemplate($("#template"),
            {
              t01: record['文字列1行'].value,
              t02: record['添付ファイル'].value,
            },{append:true});
        }
        
        var AppMain_ID = kintone.app.getId();
        var recId = 1;
        
        kintone.api('/k/v1/record', 'GET', {app: AppMain_ID, id: recId}, function(resp){
            var record = resp.record;
            var fileKey = record['添付ファイル']['value'][0]['fileKey']
            filedownload(fileKey);
            });
        });
    
        function filedownload(filekey){
            var apiurl = '/k/v1/file.json?fileKey=' + filekey;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', apiurl, true);
            xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest');
            xhr.responseType = "blob";
            var blob = xhr.responseType;
        
            xhr.onload = function() {
                var blob = xhr.response;
                var url = window.URL || window.webkitURL;
                var image = url.createObjectURL(blob);
            
                $('<a><img src="' + image + '" width="100%" height="100%" /></a>').appendTo("#file");
                };
            xhr.send();
        }
    
        function escapeHtml(str) {
            str = str.replace(/&/g, '&amp;');
            str = str.replace(/</g, '&lt;');
            str = str.replace(/>/g, '&gt;');
            str = str.replace(/"/g, '&quot;');
            str = str.replace(/'/g, '&#39;');
            return str;
        };
})();

```

html

```
<script type="text/html" id="template">
<tr>
<td class="t01" data-content="t01"></td>
<td class="t02" id="file"></td>
</tr></tbody>
</script>
<div class="container">
<table class="table-bordered"><tr>
<th class="t01">タイトル</th>
<th class="t02">画像</th>
</tr><tbody id="area"></table>
</div></div>

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2017 年 6 月 27 日午前 11:46 UTC](https://community.cybozu.dev/t/topic/775/2 "2017-06-27T11:46:25Z")

</div>

Nao様

お世話になっております。  
サイボウズスタートアップスの江田と申します。

下記のようなコードで実装してみてはいかがでしょうか。

javascript  
(function () {  
“use strict”;  
kintone.events.on(‘app.record.index.show’, function (event) {  
if (event.viewName != ‘カスタマイズビュー’) return;  
var AppMain\_ID = kintone.app.getId();  
for (var i = 0; i \< event.records.length; i++) {  
var record = event.records[i];  
$(“#area”).loadTemplate($(“#template”),  
{  
t01: record[‘文字列1行’].value,  
t02: ‘\<span id="file\_’ + record.$id.value + ‘"\>\</span\>’,  
},{append:true});  
kintone.api(‘/k/v1/record’, ‘GET’, {app: AppMain\_ID, id: record.$id.value}, function(resp){  
var record = resp.record;  
var fileKey = record[‘添付ファイル’][‘value’][0][‘fileKey’];  
filedownload(fileKey, record.$id.value);  
});  
}  
});  
function filedownload(filekey, id){  
var apiurl = ‘/k/v1/file.json?fileKey=’ + filekey;  
var xhr = new XMLHttpRequest();  
xhr.open(‘GET’, apiurl, true);  
xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);  
xhr.responseType = “blob”;  
var blob = xhr.responseType;  
xhr.onload = function() {  
var blob = xhr.response;  
var url = window.URL || window.webkitURL;  
var image = url.createObjectURL(blob);  
$(‘#file\_’ + id).replaceWith(‘\<a\>\<img src="’ + image + ‘" width=“100%” height=“100%” /\>\</a\>’);  
};  
xhr.send();  
}  
})();

html  
\<script type=“text/html” id=“template”\>  
\<tr\>  
\<td class=“t01” data-content=“t01”\>\</td\>  
\<td class=“t02” data-content=“t02”\>\</td\>  
\</tr\>  
\</script\>  
\<div class=“container”\>  
\<table class=“table-bordered”\>  
\<tr\>  
\<th class=“t01”\>タイトル\</th\>  
\<th class=“t02”\>画像\</th\>  
\</tr\>  
\<tbody id=“area”\>\</tbody\>  
\</table\>  
\</div\>

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1480](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1480](https://community.cybozu.dev/u/Legacy_Account1480)\
**Post date:** [2017 年 6 月 28 日午前 12:43 UTC](https://community.cybozu.dev/t/topic/775/3 "2017-06-28T00:43:32Z")

</div>

江田篤史様  
ご返信ありがとうございます。  
ご教授いただいた通り設定をしましたら、実装ができました。  
本当にありがとうございます。  
今後ともよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account840](https://avatars.discourse-cdn.com/v4/letter/l/34f0e0/32.png) [@Legacy\_Account840](https://community.cybozu.dev/u/Legacy_Account840)\
**Post date:** [2020 年 9 月 2 日午前 2:01 UTC](https://community.cybozu.dev/t/topic/775/4 "2020-09-02T02:01:52Z")

</div>

初歩的な質問で申し訳ないです。

上記を参考にしたところ、

$(“#area”).loadTemplate($(“#template”),

部分でエラーになってしまいます。

TypeError: $(…).loadTemplate is not a function

ライブラリか何か足りないのでしょうか？

よろしくお願いします。