Visualforceページでサムネイルっぽいものを作ってみた

Once upon a time…

Salesforceが大半Lightning Experienceに置き換わってきている今はで需要がなさそうですが、
Salesforce Classic時代にオブジェクトに添付した画像ファイルを画面上で確認できるのは、
それはそれはうれしいことでした。
なにせ関連リストからはファイル名しかわからなかったので、いちいち参照リンクまで遷移しなければなりません。

そんな時代だったので、サムネイルで添付ファイルを確認できるVisualforceページを作ったことがありました。実装方法としては、jQueryのfadeIn()、fadeOut()を使ってアニメーションを作っています。

ということでこんな風に添付画像を並べて、クリックした画像を拡大表示できるようにしてみます。

Classic時代の実装

下の図のような形でVisualforceページを作成し、main_imgクラスにthumb_imgクラスで選択した画像を表示するようにしてみました。

サンプルScript

$(document).ready(function() {
    // サムネイルの変更
    $(function() {
        $('.thumb_img img').mouseover(function() {
            var src = $(this).attr("src");
            // メインの画像をfadeOutさせる
            $('.main_img img').fadeOut(function() {
                // サムネイルの画像をfadeInさせる
                $('.main_img img').attr("src", src).fadeIn();
            });
        })
    });
});

上のコードではthumb_img（サムネイルの部分）にマウスオーバーしたときに、その時の
main_img（メイン画像）をフェードアウトさせつつ、thumb_imgをフェードインさせています。
Classic時代は添付ファイルのオブジェクトがAttachmentオンリーだったので、取引先に紐づいているAttachmentを<apex:repeat>で回して表示していました。画像のURLは/servlet/servlet.FileDownload?file={attachmentId}で取得できます。

<div id="main" class="main_box">
    <div class="main_img">
        <img src="/servlet/servlet.FileDownload?file={!defaultImageId}" />
    </div>
    <div class="thumb_img">
        <apex:repeat var="item" value="{!attList}">
            <img src="/servlet/servlet.FileDownload?file={!item.Id}" />
        </apex:repeat>
    </div>
</div>

Lightning Experienceでの実装

Lightning Experienceを使うようになった今、添付ファイルの構造がClassic時代と変わってしまったため、Attachmentだけを取得してきても同じようにサムネイルにすることができなくなってしまいました。
数式のサンプルを参考に/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Jpg&versionId={contentVersionId}で取得したいところですが、ちょっと曲者で以下のような構成になっています。

そのため、以下のように実装しています。

public with sharing class AccountExtentionController {

    /** イメージデータ */
    public List<String> exAttachmentList {get; set;}
    /** デフォルトイメージデータ */
    public String defaultImage {get; private set;}

    /**
     * コンストラクタ
     */
    public accountExtentionController (ApexPages.StandardController controller) {
        this.exAttachmentList = new List<String>();

        // 取引先に紐づく添付ファイルを取得する
        String accountId = ((Account)controller.getRecord()).Id;
        Account acc = [SELECT Id, Name, (SELECT Id FROM CombinedAttachments) FROM Account WHERE Id = :((Account)controller.getRecord()).Id];
        
        // Attachmentのプレフィックスを取得する
        String attachmentPref = Attachment.getSObjectType().getDescribe().getKeyPrefix();

        List<Id> contentDocumentIdList = new List<Id>();
        List<Id> attachmentIdList = new List<Id>();
        for (CombinedAttachment accAttachment : acc.CombinedAttachments) {
            // 添付ファイルがAttachmentの場合
            if (String.valueOf(accAttachment.Id).startsWith(attachmentPref)) {
                attachmentIdList.add(accAttachment.Id);
            // 添付ファイルがContentDocumentの場合
            } else {
                contentDocumentIdList.add(accAttachment.Id);
            }
        }

        // attachmentだけのリストを返す
        for (Attachment att : this.getAttachment(attachmentIdList)) {
            String srcUrl = '/servlet/servlet.FileDownload?file=' + att.Id;
            exAttachmentList.add(srcUrl);
        }

        // contentdocumentだけのリストを返す
        for (ContentDocument cd : this.getContent(contentDocumentIdList)) {
            for (ContentVersion cv : cd.ContentVersions) {
                String srcUrl = '/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Jpg&versionId=' + cv.Id;
                exAttachmentList.add(srcUrl);
            }
        }
        // デフォルトは最初の画像にする
        this.defaultImage = this.exAttachmentList.isEmpty() ? '' : this.exAttachmentList[0];
    }

    /**
     * Attachment取得
     */
    private List<Attachment> getAttachment(List<Id> ids) {
        String allowImage = 'image/jpeg,image/png,mage/gif,image/bmp';
        List<String> contentType = allowImage.split(',');
        return [SELECT Id FROM Attachment WHERE Id IN :ids AND ContentType = :contentType ORDER BY CreatedDate DESC];
    }

    /**
     * ContentDocument取得
     */
    private List<ContentDocument> getContent(List<Id> ids) {
        String allowImage = 'PNG,JPG,GIF,BMP';
        List<String> contentType = allowImage.split(',');
        return [
            SELECT 
                Id, 
                (SELECT Id FROM ContentVersions WHERE IsLatest = true LIMIT 1) 
            FROM 
                ContentDocument
            WHERE 
                Id IN :ids
            AND
                FileType = :contentType
            ORDER BY 
                CreatedDate DESC 
        ];
    }
}

CombinedAttachmentオブジェクトはレコードに紐づいているすべてのファイルが取得できるのですが、LEXで添付したファイルを取得したところ、ContentDocumentのIdとなっていました。そのため、ContentDocumentから再度最新のContentVersionを取得しなおしてURLを作成しています。このままだとたくさんファイルを添付されたときにレイアウトが崩れてしまうので、実際には
取得したリストを絞り込むなどの制限が必要になりそうです。

サンプル

サンプルでは取引先レコードに紐づく添付ファイルをサムネイルっぽい形式で詳細ページに表示できるようにしています。非管理パッケージをインストールして、取引先レイアウトにVisualforceページを追加すると試すことができます。
サンプルURL

• LEXで動いているところ
  

参考

https://help.salesforce.com/articleView?id=000007604&language=ja&type=1
https://developer.salesforce.com/docs/atlas.ja-jp.218.0.api.meta/api/sforce_api_objects_contentdocument.htm