2017.11.09

ファイルのプレビュー一覧表示

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

はじめに

みなさん、こんにちは。テラスカイの永野です。

Salesforceでは、「Salesforce Files(コンテンツ)」「ドキュメント」「添付ファイル」と様々なファイルに関する機能を提供しています。今回はその中でもSpring '16で添付ファイルとしても使えるようになり、豊富な便利機能を提供している「Salesforce Files」を用いた便利なプレビューの使い方を紹介したいと思います。

標準のプレビュー機能の見え方

標準のプレビュー機能では、単一のファイルに対して内部的にPDF形式に変換した上でプレビューを自動作成して表示可能となっています。ただし、一部ファイルはプレビューが表示されないため注意が必要です。
暗号化されたファイル、パスワードで保護されたファイル、コピー保護された PDF、不明なファイル形式、25 MB を超えるファイルなど、プレビューできないファイルもあります。プレビューできないファイルについては、フィードやリストビューで [プレビュー] オプションを使用できません。また、ファイルは汎用のファイル形式アイコンとしてフィードに表示されます。Microsoft Office 2007 機能の一部はプレビューでは正しく表示されません。
あくまで単一ファイル表示を前提としているため、複数ファイルに対して俯瞰的に中身を確認することはできません。

Classicでのプレビュー画面例

LEXでのプレビュー画面例

複数ファイルの内容を一覧で見たい!

複数のファイルの内容を一覧で見えるようにする場合、本記事執筆時点では標準カスタマイズの範囲では行なえません。そのため、個別に画面を開発することとなります。
ここでは、Visualforceを用いた例で紹介をしたいと思います。

事前定義

ファイルのプレビューはRest APIによりプレビューURLを取得することとなりますので、「リモートサイトの設定」に下記定義を行います。

 リモートサイトの URL:https://[MyDomain].salesforce.com

[MyDomain]の部分は、「私のドメインの設定」を設定している場合はそのドメイン名、設定していない場合は、"AP2"、"CS6"等の文字をURLより確認して設定します。

リモートサイトの設定

また、今回は「パンフレット」というライブラリ内のファイル一覧を表示するため、事前にライブラリを作成してファイルを格納しておきます。

Visualforceページの定義

Visualforceページ、コントローラを下記の内容で定義します。
<apex:page showheader="true" sidebar="true" standardstylesheets="true" extensions="FilePreviewController" standardController="User" readOnly="false">
    <apex:pageBlock title="ファイルプレビュー" id="block">
    <apex:pageBlockSection title="パンフレット" id="blocksection" collapsible="false" >
    <apex:datatable value="{! documentWrapperList}" var="document" styleClass="table table-bordered table-condensed table-hover table-dashboard">
        <apex:column >
            <apex:outputText value="{! document.docNameForDisplay}" />
            <apex:image url="{!document.thumbnailURL}" onclick="window.open('{!document.previewURL}', '{!document.docName}', 'width=1024, height=800, menubar=no, toolbar=no, scrollbars=yes, resizable=yes');" style="width:361px;height:480px;"></apex:image>
        </apex:column>
    </apex:datatable>
    </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
FilePreview.html
public with sharing class FilePreviewController{
    public List<DocumentWrapper> documentWrapperList {get; set;}
    private String instanceUrl = 'https://ynaganotesttest-dev-ed.my.salesforce.com';

    /*
     * コンストラクタ
     */
    public FilePreviewController(ApexPages.StandardController controller) {
        documentWrapperList = new List<DocumentWrapper>();
        excuteSearch();
    }

    /**
     * 検索実行
     */
    private void excuteSearch() {
        // ファイルのID取得
        List<ContentDocument> documentList =
            [ SELECT  Id, Title, FileExtension
              FROM ContentDocument
              WHERE parentId IN (SELECT Id FROM ContentWorkspace WHERE Name IN ('パンフレット'))
              ORDER BY LastModifiedDate DESC];

        documentWrapperList.clear();
        for(Integer i = 0; i<documentList.size(); i++){
            documentWrapperList.add(new DocumentWrapper(documentList[i],instanceUrl,i + 1));
        }
    }

    /**
     * 画面表示クラス
     */
    public class DocumentWrapper {
        public String docName { get; set; }
        public String docNameForDisplay { get; set; }
        public String thumbnailURL { get; set; }
        public String previewURL { get; set; }
        public ContentDocument doc { get; set; }
        public Integer index { get; set; }

        /**
         * コンストラクタ
         */
        public DocumentWrapper(ContentDocument contentDocument, String instanceUrl, Integer index) {
            doc = contentDocument;
            docName = contentDocument.Title + '.' + contentDocument.FileExtension;
            docNameForDisplay = contentDocument.Title + '.' + contentDocument.FileExtension;
            previewURL = instanceUrl + '/' + contentDocument.Id;
            this.index = index;

            setThumbnailURL(contentDocument,instanceUrl);
        }

        /**
         * ThumbnailURLをCallOutで取得
         */        
        private void setThumbnailURL(ContentDocument contentDocument,String instanceUrl) {
            thumbnailURL = '';
            //HTTPリクエストの作成
            HttpRequest req = new HttpRequest();
            String endPoint = instanceUrl + '/services/data/v40.0/connect/files/'+ contentDocument.Id + '/previews/big-thumbnail?startPageNumber=0&endPageNumber=0';
            req.setEndpoint ( endPoint ) ;
            req.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionId());
            req.setMethod ( 'GET' ) ;

            //HTTPリクエストの送信
            HttpResponse res = new Http().send(req) ;

            JSONparser parser = JSON.createparser(res.getBody());
            while (parser.nextToken() != null) {
                if (parser.getCurrentToken() == JSONToken.START_ARRAY){
                    while(parser.nextToken() != null){
                        if(parser.getCurrentToken() == JSONToken.START_OBJECT){
                            InnnerPreview ip = (InnnerPreview)parser.readvalueas(InnnerPreview.class);
                            thumbnailURL = ip.previewUrl;
                        }
                    }
                }
            }
        }
    }

   /**
    * レスポンスを加工する為のインナークラス
    */   
    private class InnnerPreview {
        Integer pageNumber;
        String previewUrl;
    }
}
FilePreviewController.java

画面確認

作成したVisualforceページにアクセスをすると、ファイルが縦一列にプレビュー表示できています。

ファイルプレビュー画面

おわりに

今回ご紹介したサンプルコードはシンプルにファイルのプレビュー一覧を表示させるのみですが、これを応用することでファイルの内容を俯瞰的に確認しながらアクションが行えるようになるかと思います。
ファイルのプレビューURL取得をREST APIでのコールアウトで呼び出している点がスマートではありませんが、ファイル関連の機能は特にLEXを中心にどんどん拡張されていますので、今後の機能拡張に期待したいと思います!
25 件

関連する記事