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

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