blog
ブログ

salesforce技術ブログ(静的リソースを簡単にアップロードする方法)

今回は、一つずつアップロードすると非常に手間のかかる、静的リソースの

簡単アップロード方法です。

 

■その5:静的リソースを簡単にアップロードする方法

 

静的リソースを一括アップロードするためには、下記のソースを、ホームの

コンポーネント(HTML)に貼り付けることで、実現可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/htz/Salesforce.com-Static-Resource-Uploader/master/StaticResourceUploader.js"></script>
<script id="staticresource_new" type="text/x-jquery-tmpl">
<tr id="${id}" class="dataRow">
<td class="dataCell">
<input class="dosave" type="button" value="Save" /><br />
<input class="cancel" type="button" value="Cancel" />
</td>
<td class="dataCell">{{html file.name}}</td>
<td class="dataCell">
<input class="developerName" type="text" value="${file.name.replace(/W+/g, '_')}" />
</td>
<td class="dataCell"><textarea class="description"></textarea></td>
<td class="dataCell">{{html file.type}}</td>
<td class="dataCell image">
{{if image}}
<img id="img_${id}" class="thumbnail" src="${image}" />
{{/if}}
</td>
<td class="dataCell numericalColumn size">${$.commaStyle(file.size)}</td>
<td class="dataCell">
<select class="cacheControl">
<option value="0">Private</option>
<option value="1">Public</option>
</select>
</td>
<td class="dataCell error"></td>
</tr>
</script>
<script id="staticresourcelist_view" type="text/x-jquery-tmpl">
<tr id="${id}" class="dataRow">
<td class="actionColumn">
<input class="select" type="checkbox" />
</td>
<td class="actionColumn">
<a class="actionLink edit" href="javascript:void(0);">Edit</a>
&nbsp;|&nbsp;
<a class="actionLink delete" href="javascript:void(0);">Del</a>
{{if object.ContentType.match(/(image|text|javascript|css|html|xml)/)}}
&nbsp;|&nbsp;<a class="actionLink preview" href="javascript:void(0);">Preview</a>
{{/if}}
{{if object.ContentType.match(/zip/)}}
&nbsp;|&nbsp;<a class="actionLink unzip" href="javascript:void(0);">Unzip</a>
{{/if}}
</td>
<td class="dataCell">
<a href="/resource/1311880464000/${object.Name}" target="_blank">${object.Name}</a>
</td>
<td class="dataCell">{{html object.NamespacePrefix}}</td>
<td class="dataCell">${$.escapeHTML(object.Description).replace(/[r?n]/g, '<br />')}</td>
<td class="dataCell">{{html object.ContentType}}</td>
<td class="dataCell image">
{{if object.ContentType.match(/image/.*/)}}
<image id="img_${object.Id}" class="thumbnail" src="/resource/1311880464000/${object.Name}?_=${_}" />
{{/if}}
</td>
<td class="dataCell numericalColumn size">${$.commaStyle(object.BodyLength)}</td>
<td class="dataCell">{{if object.CacheControl}}${object.CacheControl}{{/if}}</td>
<td class="dataCell error"></td>
</tr>
</script>
<script id="staticresourcelist_edit" type="text/x-jquery-tmpl">
<tr id="${id}" class="dataRow">
<td class="actionColumn">&nbsp;</td>
<td class="actionColumn">
<input class="update" type="button" value="Save" /><br />
<input class="cancel" type="button" value="Cancel" />
</td>
<td class="dataCell">
<input class="developerName" type="text" value="${name}" />
</td>
<td class="dataCell">${object.NamespacePrefix}</td>
<td class="dataCell">
<textarea class="description">${description}</textarea>
</td>
<td class="dataCell type">
{{if file}}
<span class="red">${file.type}</span><br /><span class="red">(${file.name})</span>
{{else}}
${object.ContentType}
{{/if}}
</td>
<td class="dataCell image">
{{if image}}
<img id="img_${object.Id}" class="thumbnail" src="${image}" />
{{else object.ContentType.match(/image/.*/)}}
<image id="img_${object.Id}" class="thumbnail" src="/resource/1311880464000/${object.Name}?_=${_}" />
{{/if}}
</td>
<td class="dataCell numericalColumn size">${$.commaStyle(object.BodyLength)}</td>
<td class="dataCell">
<select class="cacheControl">
<option value="0" {{if object.CacheControl && object.CacheControl == 'Private'}}selected="selected" {{/if}}>Private</option>
<option value="1" {{if object.CacheControl && object.CacheControl == 'Public'}}selected="selected" {{/if}}>Public</option>
</select>
</td>
<td class="dataCell error"></td>
</tr>
</script>
<script id="preview_text" type="text/x-jquery-tmpl">
<div class="dummy">
<input id="linenumber" type="checkbox" {{if linenumber}}checked="checked" {{/if}}/>
<label for="linenumber">Line number</label><br/>
<pre id="${id}" class="prettyprint{{if linenumber}} linenums{{/if}}">${text}</pre>
</div>
</script>
<script id="preview_image" type="text/x-jquery-tmpl">
<div class="dummy">
<img src="${url}?_=${_}" />
</div>
</script>
<script id="unzip" type="text/x-jquery-tmpl">
<tr id="${id}" class="dataRow unzipRow">
<td class="actionColumn"></td>
<td class="actionColumn"><a class="actionLink closeunzip" href="javascript:void(0);">Close</a></td>
<td colspan="8">
<div class="unzipActionLinks">
<a class="expandall" href="javascript:void(0);">Expand All</a>|<a class="collaseall" href="javascript:void(0);">Collapse All</a>
</div>
{{tmpl({files: files, base_url: base_url}) "#unzip_dir"}}
</td>
</tr>
</script>
<script id="unzip_dir" type="text/x-jquery-tmpl">
<ul class="ziptree {{if files['$dir']}}{{else}}root{{/if}}" style="{{if files['$dir']}}display: none;{{/if}}">
{{each files}}
{{if $index != '$dir'}}
{{if $value['$dir']}}
<li class="dir">
<div class="tr">
<div class="name">
<img class="icon" src="/s.gif" />
<a class="filename dirtoggle" href="javascript:void(0);">${$index}</a>
</div>
<div class="image">&nbsp;</div>
<div class="size">-</div>
<div class="clear">&nbsp;</div>
</div>
{{tmpl({files: $value, base_url: base_url}) "#unzip_dir"}}
</li>
{{else}}
<li class="file">
<div class="tr">
<div class="name">
<img class="icon" src="/s.gif" />
<a class="filename" href="${base_url}/${$value.name}" target="_blank">${$index}</a>
<div class="actionLinks">
{{if $value.name.match(/.(?:txt|js|html|css|xml|bmp|jpg|jpeg|png|gif)$/)}}
[<a class="actionLink unzippreview" href="javascript:void(0);">Preview</a>]
{{/if}}
</div>
</div>
<div class="image">
{{if $value.name.match(/.(?:bmp|jpg|jpeg|png|gif)$/)}}
<img class="thumbnail" src="${base_url}/${$value.name}" />
{{/if}}
</div>
<div class="size">
${$.commaStyle($value.fileSize)}
</div>
<div class="clear">&nbsp;</div>
</div>
</li>
{{/if}}
{{/if}}
{{/each}}
</ul>
</script>
<script id="preview_window" type="text/x-jquery-tmpl">
<div id="previewWindow" class="overlayDialog" style="top: ${top}px; left: ${left}px;">
<div class="topRight">
<div class="topLeft">
<img title="close" id="followingDialogX" class="dialogClose" src="/s.gif" />
<h2 id="followingDialogTitle">${title}</h2>
</div>
</div>
<div class="middle">{{html html}}</div>
<div class="bottomRight">
<div class="bottomLeft">
</div>
</div>
<div class="resize">&nbsp;</div>
</div>
</script>
<div id="StaticResourceUploader" class="bRelatedList" style="display: none;">
<div id="uploadtab">
<ul>
<li id="newtab" class="active">New Static Resource</li>
<li id="edittab">View/Edit Static Resource</li>
</ul>
</div>
<div id="newtab" class="bPageBlock">
<div class="pbBody">
<div id="droparea">
<p>Drop static resource files.</p>
</div>
<div id="uploadlistbox" style="display: none;">
<table id="uploadlist" class="list">
<thead>
<tr class="headerRow">
<th scope="col">Action</th>
<th scope="col">File name</th>
<th scope="col" style="width: 130px;">Name</th>
<th scope="col" style="width: 210px;">Description</th>
<th scope="col">MIME Type</th>
<th scope="col">Image</th>
<th scope="col">Size</th>
<th scope="col">Cache Control</th>
<th scope="col">Error</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="text-align: right;">
<input id="cancelall" type="button" value="Cancel All" />
<input id="dosaveall" type="button" value="Save All" />
</div>
</div>
</div>
</div>
<div id="edittab" class="bPageBlock" style="display: none;">
<div class="pbBody">
<div id="filter">
<input id="order" type="hidden" value="Name" />
<input id="asc" type="hidden" value="ASC" />
<dl>
<dt>Name:</dt>
<dd><input id="name" type="text" /></dd>
<dt>Namespace Prefix:</dt>
<dd><select id="prefix"><option value=""></option></select></dd>
<dt>Type:</dt>
<dd>
<select id="type">
<option value="">All</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="image">Image</option>
<option value="text">Text</option>
<option value="zip">Zip</option>
<option value="other">Other</option>
</select>
</dd>
<dt>Cache Control:</dt>
<dd>
<select id="cache">
<option value="">All</option>
<option value="Private">Private</option>
<option value="Public">Public</option>
</select>
</dd>
<!-- dt>Limit:</dt>
<dd>
<select id="limit">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</dd -->
<dt>
<input id="refresh" type="button" value="Refresh" />
&nbsp;|&nbsp;
<input id="deleteselected" type="button" value="Delete Selected" disabled="disabled" />
</dt>
<dd style="clear: left;"></dd>
</dl>
</div>
<table id="staticresourcelist" class="list">
<thead>
<tr class="headerRow">
<th scope="col" style="width: 24px;"><input id="selectall" type="checkbox" /></th>
<th scope="col" class="actionColumn">Action</th>
<th scope="col" id="Name" class="order sortAsc" style="width: 130px;">Name</th>
<th scope="col" id="NamespacePrefix" class="order" style="width: 210px;">Namespace Prefix</th>
<th scope="col" id="Description" class="noorder">Description</th>
<th scope="col" id="ContentType" class="order">MIME Type</th>
<th scope="col" class="noorder">Image</th>
<th scope="col" id="BodyLength" class="order">Size</th>
<th scope="col" id="CacheControl" class="order">Cache Control</th>
<th scope="col" class="noorder">Error</th>
</tr>
</thead>
<!-- tfoot>
<tr>
<td colspan="10">
<div class="paginator">
<span class="prevNextLinks">
<span class="prevNext">
<a href="javascript:void(0);">
<img src="/s.gif" title="First Page" alt="First Page" class="first" />
</a>
</span>
<span class="prevNext">
<a href="javascript:void(0);">
<img src="/s.gif" title="Previous" alt="Previous" class="prev" />
Previous
</a>
</span>
<span class="prevNext">
<a href="javascript:void(0);">
Next
<img src="/s.gif" title="Next" alt="Next" class="next" />
</a>
</span>
<a href="javascript:void(0);">
<img src="/s.gif" title="Last Page" alt="Last Page" class="last" />
</a>
</span>
<span class="right">
Page
<input id="page" class="pageInput" type="number" maxlength="4" onchange="void();" onkeydown="" value="1">
of n
</span>
</div>
</td>
</tr>
</tfoot -->
<tbody>
</tbody>
</table>
</div>
</div>
</div>

 

 

貼り付けがうまくいっていたら、ホーム画面に下記イメージの枠が

追加されます。

salesforce 静的リソースを追加する方法

※Drop static resource files. 欄に、アップロードするファイルをドラッグする

 ことで、アップロード可能となります。

 

多くの画像を静的リソースに登録する必要がある場合は、非常に重宝しますので、

ご利用ください。

contact

ご相談・ご質問等ございましたら、お気軽にお問い合わせください。

翻訳