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

（著者：サイボウズ 北川 恭平）

はじめに

こんにちは。北川@サイボウズです。

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

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

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

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/173/

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

それでは、まず「添付ファイル」フィールドと「文字列(1行)」フィールドだけのシンプルなアプリを作成します。

実際に作成したアプリの詳細は以下です。

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

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

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

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

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

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

レコードの取得は毎度のことなので今回は省略します。
レコードを取得した後、titleとfileKeyを以下の関数に渡してあげましょう。

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

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

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

挙動確認

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

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

次に、カスタマイズビュー「Coolなビュー」を開くと…

見事、タイトルと画像が現れました！

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

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

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

このTipsは、2014年7月版で確認したものになります。