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

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

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※デモ環境についての説明はこちら