読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:gulp-jsforce-deployを使って静的リソースをデプロイする方法

salesforce.com Gulp Webpack JSforce

gulp-jsforce-deployを使って静的リソースをデプロイする方法についてです。何も考えず静的リソースでJSやCSSを管理しようとすると開発時に『静的リソースからファイルをダウンロード』→『Zipファイルを解凍』→『JSやCSSに処理を追加』→『Zipに変換』→『静的リソースにアップロード』・・・と現実的ではない手順で対応する必要がでてくると思います。


gulp-jsforce-deployはコマンドラインからSalesforceへのデプロイ処理を実行できる便利なツールです。これをつかってこの問題を解決できます。


はじめにgulp-jsforce-deployの環境構築の手順についてはこちらです。リンク先の記事ではVisualforceページとApexクラスをデプロイする手順についてまとめてあります。


ページとクラスをデプロイできるところまで準備してそこから検証を進めました。
f:id:tyoshikawa1106:20160703030117p:plain


静的リソースをデプロイするにはpkgフォルダにstaticresourcesフォルダを用意してその中にデプロイ対象のファイルを用意する必要があります。
f:id:tyoshikawa1106:20160703030606p:plain


それではどうやってデプロイすればいいか確認してみます。まず、次のように圧縮していないフォルダを用意してデプロイを実行してみました。
f:id:tyoshikawa1106:20160703030709p:plain


当たり前ですがこれではデプロイできません。エラーにはなりませんでしたがそもそも対象として認識されませんでした。
f:id:tyoshikawa1106:20160703030800p:plain


それではZip形式にした場合はどうでしょうか。
f:id:tyoshikawa1106:20160703030855p:plain


当然これも対象として認識されません。
f:id:tyoshikawa1106:20160703030957p:plain


最後にZipファイルの名前を変更して拡張子を『.resource』にして実行します。
f:id:tyoshikawa1106:20160703031245p:plain


これでようやくデプロイ対象として認識されました。
f:id:tyoshikawa1106:20160703031351p:plain


ですがまだエラーとなっています。

Error on pkg/staticresources/MyStaticResources.resource : 値を入力してください: [ContentType]


理由はXMLファイルが存在していないためです。通常は次のようにXMLファイルが一緒に存在しています。
f:id:tyoshikawa1106:20160703031521p:plain


このようにファイルを用意してあげます。
f:id:tyoshikawa1106:20160703031637p:plain


内容はこちら

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>application/zip</contentType>
</StaticResource>


これで再度実行してみると・・・エラーにならずにデプロイできました。
f:id:tyoshikawa1106:20160703031759p:plain


Salesforce組織にログインして静的リソースを確認してみます。無事にファイルが保存されていました。
f:id:tyoshikawa1106:20160703031903p:plain


ファイルをダウンロードしてみました。ZipにまとめたJSファイルとCSSファイルがきちんと格納されていました。
f:id:tyoshikawa1106:20160703032101p:plain


この静的リソースを読み込むように変更してみます。
f:id:tyoshikawa1106:20160703032903p:plain


無事にCSSとJavaScriptが適用されました。
f:id:tyoshikawa1106:20160703032943p:plain


Zipファイルに圧縮するときですが圧縮時のフォルダによってパスが変わるので注意してください。

圧縮例①

f:id:tyoshikawa1106:20160703033106p:plain

<apex:includeScript value="{!URLFOR($Resource.MyStaticResources, 'myjavascript.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.MyStaticResources, 'mycss.css')}" /> 
圧縮例②

f:id:tyoshikawa1106:20160703033218p:plain

<apex:includeScript value="{!URLFOR($Resource.MyStaticResources, 'MyStaticResources/myjavascript.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.MyStaticResources, 'MyStaticResources/mycss.css')}" /> 


という感じです。パスの違いは開発時に影響がでるのでやりやすいパスになるように考慮してZipに変換する必要があります。


これで無事にgulp-jsforce-deployを使って静的リソースをデプロイすることができました。ですが、まだ基本的な使い方を確認できただけです。これだけでは『処理追加』→『圧縮』→『拡張子をresourceに変更』→『デプロイコマンドを実行』と通常の手順のときと同じような負担が必要になってしまいます。


なのでここからをGulpやWebpackなどをつかって自動化を行う必要があります。検索すると参考になる情報がいくつか見つかりました。


イメージ的にlibフォルダを用意、そこでJSやCSSに処理を実装。ビルドコマンドを実行するとstaticresourcesフォルダにコピーを作成→ZIPに変換→ファイル名変更(拡張子の変更)という感じの流れでできたらいいなと思います。
f:id:tyoshikawa1106:20160703040723p:plain


まだここから先は確認できていないので、今回はgulp-jsforce-deployを使って静的リソースをデプロイするときの基本的な手順の確認ということでここまで。きちんと確認できたら別記事にまとめようと思います。

追記

続きの記事書きました。