カテゴリー内の他の記事

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

(著者:サイボウズ 北川 恭平)

はじめに

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

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

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

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

デモ環境

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

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

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

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

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

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

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

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

「一覧名」は分りやすくかっこいい名前を付けます。今回は、「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月版で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
栃折真澄

レコード取得のコードと、表記のサンプルコードをつなげても何回やってもうまくいかなかったので、デモページからコード入手して改造しました。

コツ①:レコード取得後、表記のサンプルコードの前に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, '&amp;');
        str = str.replace(/</g, '&lt;');
        str = str.replace(/>/g, '&gt;');
        str = str.replace(/"/g, '&quot;');
        str = str.replace(/'/g, '&#39;');
        return str;
    }

})();

 

Avatar
cybozu Development team

栃折真澄様

お世話になっております。cybozu developer network 運営でございます。

フィードバックをいただき、ありがとうございます。
ご指摘の内容を社内にフィードバックし、記事の修正を検討します。

今後ともよろしくお願いいたします。

サインインしてコメントを残してください。