Platformでの開発方法について考えてみました。gulp-jsforce-deployというライブラリのおかげでメタデータAPIをつかって静的リソースへのアップロードを簡単に行えるようになっています。これを活用すればAngularJSやReactをつかったVisualforceページ開発がやりやすくなります。その辺りの手順についてです。はじめにgulp-jsforce-deployをつかえば、ページ、クラス、静的リソースと開発に必要なファイルを簡単にデプロイすることができます。個人的にMavensMateの便利機能も手放したくないなと思っています。いうわけで静的リソース周りの開発はgulp-jsforce-deployを利用してそれ以外はMavensMateを使った開発という流れで考えてみました。Salesforceプロジェクトを作成まずはMavensMateをつかってSalesforceプロジェクトを作成します。今回は新しく用意したDev環境をつかっています。Gitリポジトリの作成Salesforceプロジェクトを作成したらGitリポジトリで管理できるように設定します。今回の方法で開発を行うにはGitの管理は必ず必要になります。initまでまずはGit対象外のファイルを管理するため.gitignoreファイルを用意します。この辺りの操作はターミナルから行うのが簡単だと思います。cdコマンドでSalesforceプロジェクトのディレクトリに移動します。.gitignoreを作成します。giboコマンドを利用するのが簡単だと思います。後でnpmを利用するのでNodeも追加しておきます。.gitignore作成後は.gitignoreの編集を行います。下記のファイルが管理対象外になるように指定します。下記を新規追加します。.envconfig/app/pkg/staticresources/app/pkg/package.xmlこれで.gitignoreの準備ができました。initコマンドを実行して.gitファイルを作成します。Privateという感じで選択肢がありますが、今回はGitHubにPublicリポジトリを作って開発を進めます。通常はPrivateリポジトリでの開発になると思います。initまで終わっているので次のコマンドを実行します。masterこれでリモートブランチにリポジトリを作成するところまでできました。README.mdファイルの作成README.mdファイルはそのプロジェクトの概要をわかりやすく説明するために必要なファイルです。今回はGitHub上から作成しておきます。pullコマンドで変更を反映します。pullこれでREADME.mdファイルの作成もできました。静的リソース周りの開発はgulp-jsforce-deployをつかって行います。appフォルダを用意してその中で管理していこうと思います。init次のファイル構成を基本構成として用意します。細かいファイルの内容はGitHubのリポジトリで確認してください。staticresourcesdevstaticresourcesフォルダで静的リソースにアップロード対象のファイルを管理します。deployBowerとVendorフォルダSLDSなどのライブラリをBowerでインストールできるようにしておきます。インストール先はvendorフォルダです。SystemのインストールSLDSのインストールから静的リソースへのアップロードまで試してみます。--save実行するとvendorフォルダに格納されます。インストールできたら静的リソースにアップロードします。手順は次のとおりです。Systemを静的リソースにアップロードできます。assetsフォルダだけコピーしなくても全部のファイルをアップすればいいじゃないかと思うかもしれません。静的リソースには5MBまでという条件があります。Sassなどの設定ファイルを含めてアップロードしようとするとあっという間に上限をオーバーしてしまいます。基本的に静的リソースにアップするのはビルド後のファイルだけとし、設定ファイル関係はGitリポジトリで管理するのが一般的みたいです。SLDSがアップロードできたのでVisualforceページに読み込んでみます。VFページやApexクラスの作成はMavensMate側の機能を利用できます。画面を表示すると正しく静的リソースにアップロードしたファイルを読み込んでCSSを適用できていました。まとめここまででMaventsMateとgulp-jsforce-deployの機能を利用してVisualforceページを開発できることを確認できました。あとは同じ要領で開発を進めていけるんじゃないかと思います。Reactをつかった開発の流れも確認していきたいのですが、続きは別記事にしようと思います。今回確認につかったコード一式はこちらにまとめてあります。appフォルダをコピーすれば簡単に動作確認ができると思います。