Salesforce1 アプリをGruntでデプロイ

空き会議室を増やす！

矢野貴明
株式会社co-meeting COO
動画・説明記事作成
遠藤裕之
株式会社co-meeting CPO
開発（AngularJS, Twilio,
Apex）
木村篤彦
株式会社co-meeting CEO
開発（AngularJS）・デザイン

Force.comPCブラウザ・ SF1
Visualforce
Page
Force.com
REST API
ユーザ
AITA
JSforce
Apex Scheduler

ローカルで開発アプリをデプロイ

ローカル
プロキシ
サーバー
ローカル
Webサーバー
Force.comブラウザ
②HTML
AngularJS
HTML
Force.com
REST API
⑤API呼び出し
⑦JSON
ユーザ
③ユーザ操作
⑧ユーザ操作
⑨ビジネス
ロジック
④ビジネス
ロジック
⑥API呼び出し
• 認証はOAuthで行い、取得したトークンをAPI呼び出しで取得
• クロスドメイン、プロキシサーバー経由でREST APIを呼ぶ
ローカルPC
ア
プ
リ
ケ
ー
シ
ョ
ン
JSforce
①ページリクエスト

Force.comブラウザ
②HTML
①ページリクエスト
AngularJS
Visualforceページ
Force.com REST API
⑤API呼び出し
⑥JSON
ユーザ
③ユーザ操作
⑦ユーザ操作
⑧ビジネス
ロジック
④ビジネス
ロジックア
プ
リ
ケ
ー
シ
ョ
ン
JSforce
認証はVisualforceページの$API.Session_Id

npm版ビルドツール
JavaのMaven
RubyのRake
豊富なプラグイン

1. CoffeeScript, SCSSのコンパイル、最小化
2. Force.comアプリケーションへの変換
3. Force.com Migration Toolでアップロード

CoffeeScript, SCSSはプレーンなJavascript,CSSに変換
CoffeeScript to Javascript

Force.comメタ情報
AngularJSアプリ JS/CSSライブラリコンパイル・圧縮した
JS/CSS（中間生成物）
コンパイル・結合・圧縮
コピー
apexタグの付加・置換
Force.comアプリ形式に変換
Index.html
CoffeeScript
SCSS
画像
ZIP圧縮

ZIP圧縮
Force.comメタ情報
AngularJSアプリ JS/CSSライブラリコンパイル・圧縮した
JS/CSS（中間生成物）
コピー
apexタグの付加・置換
Force.comアプリ形式に変換
Index.html
CoffeeScript
SCSS
画像
1. JS, CSSを最小化・結合してZip圧縮
2. AngularJSのViewはapexタグを付加・置
換してVisualforceページとして変換
apex:pageタグの付加
apex:stylesheetタグ、apex:includeScriptタ
グへの置換
OAuth使用から$API.Session_Idを利用する
よう置換
3. タブ/アプリケーションなどのForce.comメタ
情報は事前に用意したものをコピー

Gruntプラグイン grunt-ant-sfdc
を利用しコマンドでForce.comにデプロイ
$ grunt deploy
./dist_sfdc

$ git clone git@bitbucket.org:comeeting/angularforce.git
AngularForce をクローン
AngularForceは、Yoeman angular-generator
で作成したプロジェクトにForce.com用の設定を
追加したプロジェクト

$ bower install
{
"dependencies": {
"angular-ui-bootstrap-bower": "~0.11.0",
"jsforce": "git://github.com/jsforce/jsforce.git",
"font-awesome": "~4.2.0",
"angular-translate": "~2.2.0",
"toastr": "~2.0.3"
}, …
}
Bower.jsonに追加している主なパッケージ
依存するJSライブラリのインストール

$ npm install
{
"devDependencies": {
"grunt-angular-templates": "^0.5.7",
"grunt-ant-sfdc": "^0.2.6",
"grunt-contrib-coffee": "^0.10.1",
"grunt-contrib-compass": "^0.7.2”,
…
}, …
}
package.jsonに追加している主なパッケージ
Gruntプラグインのインストール

$ git submodule init
$ git submodule update
$ cd jsforce-ajax-proxy
$ npm install
jsforce-ajax-proxyを取得
[submodule "jsforce-ajax-proxy"]
path = jsforce-ajax-proxy
url = git@github.com:jsforce/jsforce-ajax-proxy.git
.gitmodule
s

{
"user": "admin@<アプリケーション名>.co-meeting.com",
"pass": "<パスワード>",
"token": "<メールで送られてきたセキュリティトークン>"
}
sfdc_credential.json
OAuth およびデプロイ用のForce.com設定

sfdc_credentail.jsonはgrunt-ant-sfdcの
パラメータとして渡される
antdeploy: {
options: {
root: 'dist_sfdc/',
…
},
dist: {
options: require('./sfdc_credential.json'),
pkg: { … }
},
},
Gruntfile.js

圧縮して一つにまとめられるため
静的リソースの管理が楽に
クライアントサイドもCIをまわせる
モダンなWeb技術の恩恵を受け易い
開発プロセスが標準化しやすい

Happy Work! Happy Life!
株式会社co-meetingは、法人向けソフトウェアの開発、販売に10年以上携わってきた4人のメン
バーによって創業されたITベンチャー企業。
人生において大きな時間を占める「仕事をしている時間」。co-meetingは、世界中の「仕事をして
いる」人に向けて、仕事時間を充実させ、人生を豊かにするWebサービスを提供していきます。
社名株式会社co-meeting
住所〒160-0023
東京都新宿区西新宿8-15-15 カトルセゾン304
設立 2011年3月14日
代表代表取締役CEO 木村篤彦
資本金 669万円（2014年8月現在）
事業企業向けソフトウェアサービスの開発・販売
システム開発に関するコンサルティングや技術支援
丸ノ内線西新宿駅徒歩 2分

弊社内で調査したエンタープライズサービスを随時ご紹介するブログ
現在はSalesforce関連を中心に非定期で更新しています。
http://www.enterpriseappsnow.com

週３正社員
時短勤務
早朝・深夜勤務OK
プロダクトを一緒に作ってくれる方募集中！
在宅ワークOK
副業OK ゆっくり出勤
柔軟な勤務形態に対応可能です
結婚・子育てなどで惜しまれながらも退社された凄腕
エンジニアをぜひご紹介ください！

Salesforce1 アプリをGruntでデプロイ

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Salesforce1 アプリをGruntでデプロイ

Similar to Salesforce1 アプリをGruntでデプロイ (20)

Salesforce1 アプリをGruntでデプロイ

Editor's Notes