angular jsとforce comではじめるhtml5開発
TRANSCRIPT
AngularJS + Force.comではじめるHTML5開発
株式会社セールスフォース・ドットコム
テクニカルエバンジェリスト 中嶋 一樹
AngularJSって何ですか？
• 数あるJavascriptフレームワークの一つ。
• モデルとビューが連動する仕組み。
• 独自のディレクティブでHTMLを拡張できる。
Demo
Javascript
HTML
AngularJS (モデル)
•AngularJS (ビュー)
最も基本的な例
<!doctype html><html ng-app="ngbootcamp"><head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script> <script> var ngbootcamp = angular.module('ngbootcamp', []); ngbootcamp.controller('guestCtl', function($scope){ $scope.guestName = 'Kazuki Nakajima'; }); </script></head><body ng-controller="guestCtl"> <input type="text" ng-model="guestName" /> <h1>{{guestName}}</h1></body></html>
•
すべてデータモデル : guestNameを参照しているため、input要素でユーザーが値を書き換えたり、Javascriptで$scope.guestNameの値を更新するとすべての箇所で変更が反映される。
何故AngularJSを利用するのか？
• HTML5のWebアプリケーションにおいてJavascriptは欠かせない。
• Force.comはREST/SOAP, Javascript Remoting, Remote Object等、組み込まれたAPI機構が多数準備されており、驚くほど簡単にJavascriptから問い合わせできる。
• AngularJSはJavascriptフレームワークであり、上記APIで取得したデータをモデル・ビューに簡単に反映できる。
もちろん他のSenchaやBackbone等でも類似のアドバンテージは存在すると思いますが、あとは宗教の世界でしょう。
Javascript
HTML
Visualforceページ Force.comデータベース
AngularJS
• REST/SOAP • Javascript Remoting • Remote Object
AngularJS
何故AngularJSを利用するのか？
• HTML5のWebアプリケーションにおいてJavascriptは欠かせない。
• Force.comはREST/SOAP, Javascript Remoting, Remote Object等、組み込まれたAPI機構が多数準備されており、驚くほど簡単にJavascriptから問い合わせできる。
• AngularJSはJavascriptフレームワークであり、上記APIで取得したデータをモデル・ビューに簡単に反映できる。
もちろん他のSenchaやBackbone等でも類似のアドバンテージは存在すると思いますが、あとは宗教の世界でしょう。
Javascript
HTML
Visualforceページ Force.comデータベース
AngularJS
• REST/SOAP • Javascript Remoting • Remote Object
AngularJS
つまり、AngularJS + Force.comより速く、より簡潔に、
HTML5
Force.comでの基本的なデザインパターンデータ取得
APIでデータ取得 データモデルに格納 HTMLに反映
!データ更新 更新ボタンをクリック APIでデータ更新リクエスト 必要に応じて更新後のデータをAPIで取得 HTMLに反映
Javascript Remotingでの実装例 - Apex
global with sharing class guestCtl { @remoteAction global static list<guest__c> getGuests(){ return [select id, name from guest__c]; }}
ここでは例を簡潔にするため、CRUD/FLS対応をしていません。
• @remoteActionを宣言することでこのメソッドはJavascriptで実行可能になる。
• 返り値は自動的にJSONエンコードされる。
Javascript Remotingでの実装例 - Visualforce
<apex:page showHeader="false" standardStyleSheets="false" controller="guestCtl" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" ><html ng-app="ngbootcamp"><head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script> <script> var ngbootcamp = angular.module('ngbootcamp', []); ngbootcamp.controller('guestCtl', function($scope){ $scope.getGuests = function(){ guestCtl.getGuests( function(result, event){ if (event.status){ $scope.guests = result; $scope.$apply(); } } ); } }); </script></head>!<body ng-controller="guestCtl"> <div><button type="button" ng-click="getGuests()">Get Guests</button></div> <div ng-repeat="guest in guests">{{guest.Name}}</div></body>!</html></apex:page>
①クリックで関数実行
②Apexの「クラス名.メソッド名」で Javascript Remotingメソッドを実行
••③取得したデータを モデルにセット
④ビューに反映される
AppExchange Packageとしての留意点
• 名前空間 • Javascript中でのカスタムオブジェクト名、カスタム項目名は名前空間付きで指定しなければならない。
!• CRUD/FLS対応
• @remoteAction宣言するメソッドでは明示的にCRUD/FLSの強制をおこなうことが必要。
• 参考情報：http://www.nkjmkzk.net/?p=3371
参考情報
チュートリアル： http://www.nkjmkzk.net/?tag=appx-20140220
• AngularJSではじめるHTML5開発 – Part1 Getting Started
• AngularJSではじめるHTML5開発 – Part2 データベースにアクセスする
• AngularJSではじめるHTML5開発 – Part3 Bootstrapの適用
• AngularJSではじめるHTML5開発 – Part4 動的なデータベースアクセスと画面の更新
• AngularJSではじめるHTML5開発 – Part5 データの更新
• AngularJSではじめるHTML5開発 – Part6 UI Bootstrapを用いたプログレスバーとモーダルダイアログ
• AngularJSではじめるHTML5開発 – Part7 Promise/Deferredを用いたデータ更新後の画面リフレッシュ
• AngularJSではじめるHTML5開発 – Part8 モーダルダイアログによる新規レコード作成フォーム
• AngularJSではじめるHTML5開発 - Part9 enquire.jsを用いたレスポンシブデザインでモバイル対応
Force.com アプリケーションPaaS
開発者 製品
appexchange ビジネスアプリのマーケットプレイス ユーザー
出品
フィードバック
開発
i appexchange開発者向けに用意された無償トレーニングで開発と公開のノウハウを学べます。
appexchangeであれば全国のお客様にビジネスアプリを販売できますGetting
Started!
