Tips

レコードに登録された添付ファイルをカスタマイズビューに表示してみよう

著者名：北川 恭平（サイボウズ株式会社）

目次

はじめに

固定リンクがコピーされました

レコード一覧画面で、画像を並べたクールなビューを作りたい！というニーズに今回は応えていきたいと思います。
ファイルダウンロードで必須となる2つの手順 を参考に、レコード情報として登録した添付ファイルを表示するカスタマイズビューを作成します。

ん？カスタマイズビューっていなに？って思った方は、 kintoneヘルプの「カスタマイズ」 (External link) 項目をまず読んでみてください。

それでも分らなかったという方は、取り急ぎ「かっこいい一覧ビューを作れる機能」ということで覚えていただければとお思います。

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/173/ (External link)

ログイン情報は cybozu developer networkデモ環境 で確認してください。

サンプルアプリのフィールドの設定

固定リンクがコピーされました

それでは、まず「添付ファイル」フィールドと「文字列（1行）」フィールドだけのシンプルなアプリを作成します。
実際に作成したアプリの詳細は以下です。

フィールドタイプ フィールド名 フィールドコード
文字列（1行） タイトル title
添付ファイル 添付ファイル attachment

サンプルアプリのフィールドのカスタマイズビューの設定

固定リンクがコピーされました

次に、以下のように「一覧」作成時に「カスタマイズ」を選びましょう。

「一覧名」は分りやすくかっこいい名前を付けます。
今回は、「Coolなビュー」としました。

今回は、とてもシンプルに2つの<p>タグにidをつけて記述しました。

1
2

<p id="title"></p>
<p id="file"></p>

これらの要素に、レコードから情報を取得して子要素として追加していきたいと思います。
具体的な処理の流れは次のとおりです。

  1. REST APIにて、指定したレコードのタイトルおよび添付ファイルのファイルキーを取得
  2. 取得したファイルキーを使って、ファイルをダウンロード（Blobオブジェクト）
  3. 取得したそれぞれの情報を利用して、新たに要素を生成
  4. カスタマイズビューに配置した<p>タグの子要素として3で生成した要素を追加

1件のレコードを取得するAPI は毎度のことなので今回は省略します。
レコードを取得した後、以下のfileDownload関数を呼び出して、titleとfileKeyを引数として渡しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/*
 * customize view with file program
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
// HTMLエスケープ関数
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// ファイルダウンロード＆リンク生成関数
function fileDownload(title, filekey) {
  const apiurl = '/k/v1/file.json?fileKey=' + filekey;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', apiurl, true);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // これが無いとIE,FFがNG
  xhr.responseType = 'blob';
  xhr.onload = function() {
    // blobからURL生成
    const blob = xhr.response;
    const url = window.URL || window.webkitURL;
    const image = url.createObjectURL(blob);

    // タイトルの要素生成
    const youso = document.createElement('b');
    youso.innerHTML = 'タイトル：' + escapeHtml(title);

    // 要素を追加
    $(youso).appendTo('#title');
    $('<a><img src="' + image + '" width="10%" height="10%" /></a>').appendTo('#file');
  };
  xhr.send();
}

上記で使われている、escapeHtml関数については、 JavaScriptでセキュアなコーディングをするために気をつけること を参照してください。

また、今回は1レコード1添付ファイルということを想定しています。

別途jQueryの読み込みが必要です。

挙動確認

固定リンクがコピーされました

では作成したJavaScriptを適用して、挙動を確認しましょう。

まず初めに、デモデータを登録しましょう。
お馴染みのkintoneロゴを登録しました。

次に、カスタマイズビュー「Coolなビュー」を開くと、タイトルと画像が現れました！

ちょっと違いが分りづらい？という方へ、「お馴染みの一覧画面（すべて）」でみると以下のようなビューとなります。

つまり、カスタマイズビューとはレコード情報をつかって表示をアレンジできる機能とご理解いただければと思います！

本Tips応用してaタグのURLをレコード詳細画面のURLに設定すれば、新入社員紹介アプリやビジュアルを意識した物品管管理アプリができそうですね。

information

このTipsは、2014年7月版kintoneで動作を確認しています。