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

著者名:北川 恭平(サイボウズ株式会社)

目次

はじめに

レコード一覧画面で、画像を並べたクールなビューを作りたい!というニーズに今回は応えていきたいと思います。
ファイルダウンロードで必須となる 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 関数を呼び出して、titlefileKey を引数として渡しましょう。

 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 で動作を確認しています。