スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--------------------------------------------------------------------------------------

メモ。リッチテキストエリアに入れた画像のURLを引っこ抜いて、Visualforceに表示する。

お仕事メモです。

Salesforceを扱う作業にて、以下のような依頼がきました。
・経費?に関してレコードを作成し、領収書などの画像をアップロードする。
・アップロードした画像をチェックするため、Visualforceで一覧で表示できるようにしてほしい。
・(できれば)画像をマウスオーバーしたら拡大するようにしてほしい。

それに対し、
・画像はリッチテキストにてアップロードする。
・1レコードのリッチテキストに2つ以上画像をアップロードした場合は最初の画像のみ一覧に表示する。
・リッチテキストエリアには基本的に文字などを入力しない。画像アップロード用の項目とする。
という前提条件で開発することになりましたとさ。

2015-02-02_04.jpg

2015-02-02_05.jpg


2015-02-02_06.jpg



さて、実験ということで、取引先オブジェクトでやってみました。

開発環境の取引先オブジェクトにリッチテキスト項目(画像用。image__c)を作成し、画像をアップロードしたらどうなるか、開発者コンソールで試してみました。

2015-02-02_01.jpg

2015-02-02_02.jpg  

14:15:10:055 USER_DEBUG [3]|DEBUG|ああああ<img alt="ユーザが追加した画像" src="https://c.na15.content.force.com/servlet/rtaImage?eid=001i000000eKFhT&amp;feoid=00Ni000000EpiUa&amp;refid=0EMi0000000Prhq" style="height: 375px; width: 500px;"></img>いいいいい


前提。
・アップロードするファイルは1つ。
・リッチテキストに文字は基本的には入れない。
なので、" src="のあとのhttps://●● と次の"までを引っこ抜けば良さげ。

ということで、Apexのコントローラで

if(String.isNotEmpty(account.image__c) && account.image__c.indexOf('" src="') > 0){
    //" src="から後ろ、 最初に"が出てくるまでを取り出す。
     Integer startpo = account.image__c.indexOf('" src="') + 7;
     Integer endpo = account.image__c.indexOf('"', startpo);
    account.image__c.substring(startpo, endpo);

}


こんな感じで引っこ抜きます。
画像がアップロードされていないケースもありうるのでnull、空文字チェックと" src="の記述チェックを入れてます。



さて、Visualforceは一覧で表示させたいということで、コントローラは
・取引先のラッパークラスを作成。画像URLの文字列をラッパークラスに突っ込む。
・ラッパークラスのリストをプロパティで作ってあげる。
という形にしました。

public with sharing class DemoController {

    public List<AccountWrap> accountWrapList{get;set;}

    public class AccountWrap{
        public Account ac{get;set;}
        public String imageSrc{get;set;}

        public AccountWrap(){
            ac = new Account();
            imageSrc = '';
        }
    }

    //初期処理
    public void init(){
        accountWrapList = new List<AccountWrap>();

        for(Account a :[select id, name, phone, image__c from Account]){
            AccountWrap wrap = new AccountWrap();
            wrap.ac = a;
            if(String.isNotEmpty(a.image__c) && a.image__c.indexOf('" src="') > 0){
                //tableに表示させる画像URL
                Integer startpo = a.image__c.indexOf('" src="') + 7;
                Integer endpo = a.image__c.indexOf('"', startpo);

                wrap.imageSrc = a.image__c.substring(startpo, endpo);
            }

            accountWrapList.add(wrap);
        }
    }
}


Visualforceで画像を表示するには
<apex:image value="{画像URL}" />
のようにすればOKです。


さて、次に画像にマウスを乗せると、画像が拡大される件。
私はJavascript、jQueryには疎いので、素直にネットに転がっているライブラリを使わせてもらいました。
今回は「Easiest Tooltip and Image Preview Using jQuery」を使用してみました。

参考URL
http://www.css-lecture.com/log/javascript/jquery-tooltip-image-preview.html
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

tooltip.zip内にあるmain.jsをダウンロードし、静的リソースにアップロード。またはvisualforceにコピペ。

リンクのタグ<a>にcssクラスとして"preview"を付ければいいということです。
Visualforceで該当するのは<apex:outputLink>のstyleclassが該当します。

 <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" target="_blank" >
    <apex:image value="{!ac.imageSrc}" width="30px" height="30px" />
</apex:outputLink>

また、CSSも静的リソースまたはvisualforceに以下のような記述を入れます。

<style>
#preview{
    position: absolute;
    border: 3px solid #333;
    background: #444;
    padding: 5px;
    display: none;
    color: #FFF;
    text-align: center;
}
</style>


これで、マウスオーバーで画像拡大します。


マウスオーバーしても、画像の表示位置、ブラウザ、モニタの大きさによっては全体が表示されないかも?
で、このような要望をしてくる顧客なので、クリックして画像表示する際に別ウィンドウはあまりよろしくないし、同一ウィンドウで入力内容などが消えるのはNGなのかな?

クリックしたらLightBoxチックにポップアップ表示でいこうということで、ライブラリのLightBox Plusを実装してみることにしました。
参考URL
http://allabout.co.jp/gm/gc/23975/
http://serennz.sakura.ne.jp/toybox/lightbox/
ダウンロードするといろいろ入っていますが、必要となるのはResourceフォルダ内のもの。

リンクタグ<a>にrel="lightbox"と入れればよいということで、Visualforceでは<apex:outputLink>が該当します。
 <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" rel="lightbox[demo]" target="_blank" >
    <apex:image value="{!ac.imageSrc}" width="30px" height="30px" />
</apex:outputLink>


ResourceはZipでまとめて静的リソースに入れるわけですが、Zipにする前にlightbox_plus.jsに記述されているgifファイルの設定をしてあげる必要があります。
いろいろ試してみたのですが、loadingimg:{!URLFOR($Resource.lightbox, 'resource/loading.gif')}のようにしてもうまくいかないので、パス指定をする必要がありそうです。

開発しているvisualforceのページのソースを表示し、他の静的リソースはどこかな?
と探してみます。

2015-02-02_03.jpg

というわけで、ここを参考に以下のように書き換えて、ZIPにしました。

Spica.Event.run(function() {
  new Lightbox({
    loadingimg:'/resource/1422585715000/秘密/lightbox/resource/loading.gif',
    expandimg:'/resource/1422585715000/秘密/lightbox/resource/expand.gif',
    shrinkimg:'/resource/1422585715000/秘密/lightbox/resource/shrink.gif',
    blankimg:'/resource/1422585715000/秘密/lightbox/resource/blank.gif',
    previmg:'/resource/1422585715000/秘密/lightbox/resource/prev.gif',
    nextimg:'/resource/1422585715000/秘密/lightbox/resource/next.gif',
    closeimg:'/resource/1422585715000/秘密/lightbox/resource/close.gif',
    effectimg:'/resource/1422585715000/秘密/lightbox/resource/zzoop.gif',
    effectpos:{x:-40,y:-20},
    effectclass:'effectable',
    resizable:true,
    animation:true
  });
}


そんなわけで、全部入れたVisualforceはこんな感じ。

<apex:page controller="DemoController" action="{!init}" sidebar="false">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-1.11.1.min.js')}" />

<!--lightboxを設定 -->
<apex:includeScript value="{!URLFOR($Resource.lightbox, 'lightbox/resource/lightbox_plus.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.lightbox, 'lightbox/resource/lightbox.css')}"/>


<!--imgpreview.jsをリンクを設定 -->

    <apex:pageBlock title="取引先一覧" id="pageblock">
        <apex:form id="form">
            <apex:pageblockTable value="{!accountWrapList}" var="ac" id="table">
                <apex:column >
                    <apex:facet name="header">name</apex:facet>
                    <apex:outputField value="{!ac.ac.name}" />
                </apex:column>
               <apex:column >
                    <apex:facet name="header">id</apex:facet>
                    <apex:outputField value="{!ac.ac.id}" />
                </apex:column>
               <apex:column >
                    <apex:facet name="header">電話</apex:facet>
                    <apex:outputField value="{!ac.ac.phone}" />
                </apex:column>

                <apex:column >
                    <apex:facet name="header">画像</apex:facet>
                        <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" rel="lightbox[demo]" target="_blank" ><apex:image value="{!ac.imageSrc}" width="30px" height="30px" /></apex:outputLink>
                </apex:column>
 
            </apex:pageblockTable>
        </apex:form>
    </apex:pageBlock>


<style>
    #preview{
    position: absolute;
    border: 3px solid #333;
    background: #444;
    padding: 5px;
    display: none;
    color: #FFF;
    text-align: center;
}
</style>
<script>
/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){
    /* CONFIG */
       
        xOffset = 10;
        yOffset = 10;
       
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
       
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";   
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                               
        $("#preview")
            .css("top",(e.pageY + yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
           .fadeIn("fast");                       

    },
    function(){
        this.title = this.t;   
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY + yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px");
    });        
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});
</script>
</apex:page>



関連記事


--------------------------------------------------------------------------------------

コメントの投稿

非公開コメント

このブログについて
  • 全記事一覧(時間順)
  • このブログについて
  • 私のプロフィール
  • 当ブログで扱っている動画について
  • 記事違いなコメントのお返事

  • カテゴリー
    twitter
    カレンダー
    07 | 2017/08 | 09
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -
    Amazon
    でたらめな当ブログにぴったりな商品を自動で表示するみたいです。



    月別アーカイブ
    プロフィール

    たづみ

    Author:たづみ
    ・1981年生まれの男
    ・もう少し詳細なプロフィールはこちらで

    最新コメント
    アクセスランキング
    [ジャンルランキング]
    日記
    921位
    アクセスランキングを見る>>

    [サブジャンルランキング]
    会社員・OL
    200位
    アクセスランキングを見る>>


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。