（著者：サイボウズ 北川 恭平）
はじめに
こんにちは。北川@サイボウズです。
レコード一覧画面で、画像を並べたクールなビューをつくりたい！というニーズに今回は応えていきたいと思います。
ファイルダウンロードで必須となる2つの手順を参考に、レコード情報として登録した添付ファイルをカスタマイズビューに表示させてみたいと思います。
…ん？カスタマイズビューってなに？って思った方は、こちらのヘルプの「カスタマイズ」項目をまず読んでみてください。
それでも分らなかったという方は、取り急ぎ「かっこいい一覧ビューを作れる機能」ということで覚えていただければとお思います。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/173/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
サンプルアプリのフィールドの設定
それでは、まず「添付ファイル」フィールドと「文字列(1行)」フィールドだけのシンプルなアプリを作成します。
実際に作成したアプリの詳細は以下です。
| フィールドタイプ | フィールド名 | フィールドコード |
| 文字列（1行） | タイトル | title |
| 添付ファイル | 添付ファイル | attachment |
サンプルアプリのフィールドのカスタマイズビューの設定
次に、以下のように「一覧」作成時に「カスタマイズ」を選びましょう。
「一覧名」は分りやすくかっこいい名前を付けます。今回は、「Coolなビュー」としました。
今回は、とてもシンプルに2つのpタグにidをつけて記述しました。
これらの要素に、レコードから情報を取得して子要素として追加していきたいと思います。
具体的な処理の流れとしては、
- REST APIにて、指定したレコードのタイトル及び添付ファイルのファイルキーを取得
- 取得したファイルキーを使って、ファイルをダウンロード（blobオブジェクト）
- 取得したそれぞれの情報を利用して、新たに要素を生成
- カスタマイズビューに配置した、pタグにそれぞれ子要素として3で生成した要素を追加
レコードの取得は毎度のことなので今回は省略します。
レコードを取得した後、以下の filedownload 関数を呼び出して、title と fileKey を引数として渡しましょう。
上記で使われている、escapeHtml関数については、「JavaScriptでセキュアなコーディングをするために気をつけること」をご参照ください。
また、今回は1レコード1添付ファイルということを想定しています。
※別途jqueryの読み込みが必要です。
挙動確認
では作成したJavaScriptを適用して、挙動を確認しましょう。
まず初めに、デモデータを登録しましょう。おなじみのkintoneロゴを登録しました。
次に、カスタマイズビュー「Coolなビュー」を開くと…
見事、タイトルと画像が現れました！
ちょっと違いが分りずらい？という方へ、「おなじみの一覧画面「(すべて)」でみると以下のようなビューとなります。
つまり、カスタマイズビューとはレコード情報をつかって表示をアレンジできる機能とご理解いただければと思います！
本Tips応用してaタグのURLをレコード詳細画面のURLに設定すれば、新入社員紹介アプリやビジュアルを意識した物品管管理アプリができそうですね。
このTipsは、2014年7月版で確認したものになります。
レコード取得のコードと、表記のサンプルコードをつなげても何回やってもうまくいかなかったので、デモページからコード入手して改造しました。
コツ①：レコード取得後、表記のサンプルコードの前にfiledownload(title,filekey);が必要。
コツ②：サンプルコードには無いエスケープ処理が必要。デモページのコードには入っていた。
以下レコード番号2の場合、添付ファイルフィールドのコードはattachmentとした。
(function () {
"use strict";
// レコード一覧の表示時に発行日が本日であれば文字色、フィールドの背景色を変更する
kintone.events.on('app.record.index.show', function (event) {
//レコード番号2番のレコードの添付ファイルのファイルキーを取得
var AppMain_ID = kintone.app.getId();
var recId =2;
kintone.api('/k/v1/record', 'GET', {app: AppMain_ID, id: recId}, function(resp){
var record = resp.record;
var fileKey = record.attachment.value[0].fileKey;
var title = record.title.value;
filedownload(title,fileKey);
});
});
//ファイルダウンロード＆リンク生成
function filedownload(title,filekey){
var apiurl = '/k/v1/file.json?fileKey=' + filekey;
var xhr = new XMLHttpRequest();
xhr.open('GET', apiurl, true);
xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest'); //これが無いとIE,FFがNG
xhr.responseType = "blob";
var blob = xhr.responseType;
xhr.onload = function() {
//blobからURL生成
var blob = xhr.response;
var url = window.URL || window.webkitURL;
var image = url.createObjectURL(blob);
//タイトルの要素生成
var youso = document.createElement("b");
youso.innerHTML = "タイトル：" + escapeHtml(title);
$(youso).appendTo("#title");
$('<a><img src="' + image + '" width="10%" height="10%" /></a>').appendTo("#file");
};
xhr.send();
}
//エスケープ用関数
function escapeHtml(str) {
str = str.replace(/&/g, '&');
str = str.replace(/</g, '<');
str = str.replace(/>/g, '>');
str = str.replace(/"/g, '"');
str = str.replace(/'/g, ''');
return str;
}
})();
栃折真澄様
お世話になっております。cybozu developer network 運営でございます。
フィードバックをいただき、ありがとうございます。
ご指摘の内容を社内にフィードバックし、記事の修正を検討します。
今後ともよろしくお願いいたします。