33

Salesforce1 アプリをGruntでデプロイ

Embed Size (px)

Citation preview

Page 1: Salesforce1 アプリをGruntでデプロイ
Page 2: Salesforce1 アプリをGruntでデプロイ
Page 3: Salesforce1 アプリをGruntでデプロイ
Page 4: Salesforce1 アプリをGruntでデプロイ

空き会議室を増やす!

Page 5: Salesforce1 アプリをGruntでデプロイ

矢野 貴明株式会社co-meeting COO

動画・説明記事作成

遠藤 裕之株式会社co-meeting CPO

開発(AngularJS, Twilio,

Apex)

木村 篤彦株式会社co-meeting CEO

開発(AngularJS)・デザイン

Page 6: Salesforce1 アプリをGruntでデプロイ
Page 7: Salesforce1 アプリをGruntでデプロイ
Page 8: Salesforce1 アプリをGruntでデプロイ

Force.comPCブラウザ ・ SF1

VisualforcePage

Force.comREST API

ユーザ

AITA

JSforce

Apex Scheduler

Page 9: Salesforce1 アプリをGruntでデプロイ

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

Page 10: Salesforce1 アプリをGruntでデプロイ

ローカルプロキシサーバー

ローカルWebサーバー

Force.comブラウザ

②HTML

AngularJS

HTML

Force.comREST API

⑤API呼び出し

⑦JSON

ユーザ

③ユーザ操作

⑧ユーザ操作

⑨ビジネスロジック

④ビジネスロジック

⑥API呼び出し

• 認証はOAuthで行い、取得したトークンをAPI呼び出しで取得• クロスドメイン、プロキシサーバー経由でREST APIを呼ぶ

ローカルPC

アプリケーション

JSforce

①ページリクエスト

Page 11: Salesforce1 アプリをGruntでデプロイ

Force.comブラウザ

②HTML

①ページリクエスト

AngularJS

Visualforceページ

Force.com REST API⑤API呼び出し

⑥JSON

ユーザ

③ユーザ操作

⑦ユーザ操作

⑧ビジネスロジック

④ビジネスロジックア

プリケーション

JSforce

認証はVisualforceページの$API.Session_Id

Page 12: Salesforce1 アプリをGruntでデプロイ

npm版ビルドツールJavaのMavenRubyのRake

豊富なプラグイン

Page 13: Salesforce1 アプリをGruntでデプロイ

1. CoffeeScript, SCSSのコンパイル、最小化

2. Force.comアプリケーションへの変換

3. Force.com Migration Toolでアップロード

Page 14: Salesforce1 アプリをGruntでデプロイ

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

CoffeeScript to Javascript

Page 15: Salesforce1 アプリをGruntでデプロイ

Force.comメタ情報

AngularJSアプリ JS/CSSライブラリ コンパイル・圧縮したJS/CSS(中間生成物)

コンパイル・結合・圧縮

コンパイル・結合・圧縮

コピー

apexタグの付加・置換

Force.comアプリ形式に変換

Index.html

CoffeeScriptSCSS画像

ZIP圧縮

Page 16: Salesforce1 アプリをGruntでデプロイ

ZIP圧縮

Force.comメタ情報

AngularJSアプリ JS/CSSライブラリ コンパイル・圧縮したJS/CSS(中間生成物)

コンパイル・結合・圧縮

コンパイル・結合・圧縮

コピー

apexタグの付加・置換

Force.comアプリ形式に変換

Index.html

CoffeeScriptSCSS画像

1. JS, CSSを最小化・結合してZip圧縮

2. AngularJSのViewはapexタグを付加・置

換してVisualforceページとして変換

apex:pageタグの付加

apex:stylesheetタグ、apex:includeScriptタ

グへの置換

OAuth使用から$API.Session_Idを利用する

よう置換

3. タブ/アプリケーションなどのForce.comメタ

情報は事前に用意したものをコピー

Page 17: Salesforce1 アプリをGruntでデプロイ

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

$ grunt deploy

./dist_sfdc

Page 18: Salesforce1 アプリをGruntでデプロイ
Page 19: Salesforce1 アプリをGruntでデプロイ

$ git clone [email protected]:comeeting/angularforce.git

AngularForce をクローン

AngularForceは、Yoeman angular-generatorで作成したプロジェクトにForce.com用の設定を追加したプロジェクト

Page 20: Salesforce1 アプリをGruntでデプロイ

$ 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ライブラリのインストール

Page 21: Salesforce1 アプリをGruntでデプロイ

$ 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プラグインのインストール

Page 22: Salesforce1 アプリをGruntでデプロイ

$ git submodule init$ git submodule update$ cd jsforce-ajax-proxy$ npm install

jsforce-ajax-proxyを取得

[submodule "jsforce-ajax-proxy"]path = jsforce-ajax-proxyurl = [email protected]:jsforce/jsforce-ajax-proxy.git

.gitmodules

Page 23: Salesforce1 アプリをGruntでデプロイ

{"user": "admin@<アプリケーション名>.co-meeting.com","pass": "<パスワード>","token": "<メールで送られてきたセキュリティトークン>"

}

sfdc_credential.json

OAuth および デプロイ用のForce.com設定

Page 24: Salesforce1 アプリをGruntでデプロイ

sfdc_credentail.jsonはgrunt-ant-sfdcのパラメータとして渡される

antdeploy: {options: {

root: 'dist_sfdc/',…

},dist: {

options: require('./sfdc_credential.json'),pkg: { … }

},},

Gruntfile.js

Page 25: Salesforce1 アプリをGruntでデプロイ

$ grunt serve

Page 26: Salesforce1 アプリをGruntでデプロイ

$ grunt deploy

Page 27: Salesforce1 アプリをGruntでデプロイ

圧縮して一つにまとめられるため静的リソースの管理が楽に

クライアントサイドもCIをまわせる

モダンなWeb技術の恩恵を受け易い

開発プロセスが標準化しやすい

Page 28: Salesforce1 アプリをGruntでデプロイ
Page 29: Salesforce1 アプリをGruntでデプロイ

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分

Page 30: Salesforce1 アプリをGruntでデプロイ
Page 31: Salesforce1 アプリをGruntでデプロイ
Page 32: Salesforce1 アプリをGruntでデプロイ

弊社内で調査したエンタープライズサービスを随時ご紹介するブログ

現在はSalesforce関連を中心に非定期で更新しています。

http://www.enterpriseappsnow.com

Page 33: Salesforce1 アプリをGruntでデプロイ

週3正社員時短勤務

早朝・深夜勤務OK

プロダクトを一緒に作ってくれる方募集中!

在宅ワークOK

副業OK ゆっくり出勤

柔軟な勤務形態に対応可能です

結婚・子育てなどで惜しまれながらも退社された凄腕エンジニアをぜひご紹介ください!