Angular jsとforce comではじめるhtml5開発

2,125 views

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,125
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
18
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Angular jsとforce comではじめるhtml5開発

  1. 1. AngularJS + Force.comではじめるHTML5開発 株式会社セールスフォース・ドットコム テクニカルエバンジェリスト 中嶋 一樹
  2. 2. AngularJSって何ですか? • 数あるJavascriptフレームワークの一つ。 • モデルとビューが連動する仕組み。 • 独自のディレクティブでHTMLを拡張できる。 Demo Javascript HTML AngularJS (モデル) • AngularJS (ビュー)
  3. 3. 最も基本的な例 <!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の値を更新するとすべての箇所で変更が反映される。
  4. 4. 何故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
  5. 5. 何故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
  6. 6. Force.comでの基本的なデザインパターン データ取得 APIでデータ取得 データモデルに格納 HTMLに反映 ! データ更新 更新ボタンをクリック APIでデータ更新リクエスト 必要に応じて更新後のデータをAPIで取得 HTMLに反映
  7. 7. 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エンコードされる。
  8. 8. 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メソッドを実行 •• ③取得したデータを モデルにセット ④ビューに反映される
  9. 9. AppExchange Packageとしての留意点 • 名前空間 • Javascript中でのカスタムオブジェクト名、カスタム項目名は名前空間付きで指定しなければならない。 ! • CRUD/FLS対応 • @remoteAction宣言するメソッドでは明示的にCRUD/FLSの強制をおこなうことが必要。 • 参考情報:http://www.nkjmkzk.net/?p=3371
  10. 10. 参考情報 チュートリアル: 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を用いたレスポンシブデザインでモバイル対応
  11. 11. Force.com アプリケーションPaaS 開発者 製品 appexchange ビジネスアプリのマーケットプレイス ユーザー 出品 フィードバック 開発 i appexchange開発者向けに用意された無償トレーニングで開発と公開のノウハウを学べます。 appexchangeであれば全国のお客様にビジネスアプリを販売できますGetting Started!

×