Salesforce World Tour Tokyo 2015 LT @Developer Theater

1. #salesforcedevjp 2015.12.04
Visualforceを、
あきらめない
- Sencha Ext JS と Visualforce と 私 -
※肉と本編は関係ありません

2. #salesforcedevjp 2015.12.04
0. 自己紹介

3. #salesforcedevjp 2015.12.04
1. Sencha Ext JS とは

4. #salesforcedevjp 2015.12.04
Salesforce上で、
どうやって画面開発してますか？

5. #salesforcedevjp 2015.12.04
Salesforce上で、
どうやって画面開発してますか？
• (そもそも)してない
• Visualforce
• Lightning Component

6. #salesforcedevjp 2015.12.04
ここ最近では、
JavaScriptフレームワークを
使わずには難しい -> JS弱者に厳しい...
などなど

7. #salesforcedevjp 2015.12.04
他にもあります -> Sencha Ext JS

8. #salesforcedevjp 2015.12.04
Sencha Ext JS
1. 豊富なUIコンポーネント
• Grid, Tree, Toolbar, Chart...（その他いろいろ）
2. 堅牢なクラスシステム
• ES6とかではなくて...Sencha内で構築された仕組み
3. マルチデバイス / クロスブラウザ
4. MVC / MVMM アーキテクチャ
5. テーマ操作
• 元々用意されているテーマをベースにSassでカスタマイズ
6. 開発ツール (Sencha Cmd, Sencha Architect, IDE Plugin)
などなど

9. #salesforcedevjp 2015.12.04
そんなわけで...
1. JS弱者でもそれなりな「モノ」が作れる！（と思う）
• フレームワークのお作法を学習すれば...
• もちろん、JS強者ならもっと色んなことができる！（はず）
2. Sencha Ext JSが用意する単一のアーキテクチャ内で開発できる
• 様々なライブラリ, ツールを組み合わせなくてもよい
3. あと、あまりHTMLとか書かない
• JavaScriptでコンポーネントをどう配置するか指定すれば、
Ext JSが吐き出してくれる
• デザインがニガテな人には良いかも

10. #salesforcedevjp 2015.12.04
2. Sencha Ext JS on Visualforce

11. #salesforcedevjp 2015.12.04
例えばこんな構成で...
ブラウザ
Ext JS
Remote Action
Apex REST
Force.com
or
1. Force.com側に Apex REST or RemoteAction でAPIを作る
2. Ext JS側に REST API or RemoteAction でアクセスする機能を作る
proxy
proxy
User

12. #salesforcedevjp 2015.12.04
ちなみに...
実はDeveloper向けの記事があるのです。（ご参考までに）
"Developing Mobile Applications with Foce.com and Sencha Touch
l https://developer.salesforce.com/page/
Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch_Part_1
l https://developer.salesforce.com/page/
Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch_Part_2
l https://developer.salesforce.com/page/
Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch_Part_3

13. #salesforcedevjp 2015.12.04
3. demo

14. #salesforcedevjp 2015.12.04
Gridコンポーネントのサンプル

15. #salesforcedevjp 2015.12.04
4. さいごに...

16. #salesforcedevjp 2015.12.04
①オブジェクトを指定して検索画面を表示する
Interface Drive ※管理パッケージとして鋭意作成中...
obj= で指定したオブジェクトの
検索画面を表示する

17. #salesforcedevjp 2015.12.04
②取引先の画面
• ページレイアウト情報から画面を自動生成する
• 関連リストはタブごとにグリッド表示する

18. #salesforcedevjp 2015.12.04
③取引先の編集
• ページレイアウト情報から編集画面を自動生成する
セクションごとにタブ表示する

19. #salesforcedevjp 2015.12.04
END