SalesforceでAngular.jsを使用する方法とは？開発環境を構築しよう

SalesforceでAngular.jsを使用する方法とは？開発環境を構築しよう

Angularとは？

AngularとはWebアプリケーションを構築するために開発されたJavaScriptのフレームワークです。 HTMLタグの要素に指定するだけでJavaScript,CSS/HTMLの基本的な役割を担いデータを動的にレタリングできます。 Salesforce VisualforceではAngular.jsを使用することで、メンバーの各情報を入力するためのフォームなどを効率的に構築することができるようになります。 本記事では、SalesforceのVisualforceアプリでAngular.jsを使うために開発環境を構築する方法を紹介します。

SalesforceのVisualforceにAngular.jsをロードする方法

Angular.jsをロードすれば、自動的にJavaScriptとHTML/CSSの基本的な環境でアプリケーションの全体を構築できます。 SalesforceでAngular.jsを使用するために複雑な準備はほとんど必要ありません。 はじめにAngular公式サイトから、最新のAngular.jsをダウンロードしてローカル環境で保存してください。 BootstrapやjQueryのようにインターネット上のリソースを直接参照する方法もありますが、個人利用でない限り静的リソースを使用する方法に慣れておきましょう。 Angular.jsの最新版をダウンロードしたら、次に静的リソースを作成します。Salesforce lightning画面から、設定のクイック検索ボックスに「Static Resources」と入力します。そして項目から「静的リソース」を選んでください。 新規をクリックしたらテキストボックスに読み込みさせるリソース名を入力してください。静的リソース名は英数字のみ使用でき文字で始まり、一意の必要があります。 ここでは解説のためにリソース名を「DEMO_Angular」に設定している想定で読み進めてください。

angular.min.jsを読み込みHello world を表示させてみましょう

静的リソースを作成するときに、ページの入力フォームが表示されますので任意の名前を入力してください。ここでは仮にnewangularと入力します。 既に記述されているコードの上から以下に記載したコードを上書きしてください。

< apex:page showHeader=""false"" sidebar=""false"" >
< head >
 < link rel=""stylesheet""   href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css""/ >
        < apex:includeScript value=""{!$Resource.DEMO_Angular}""/ >
 < /head >
 < body ng-app=""myApp"" class=""container"" ng-controller=""myctrl"" >
  < div id=""demo"" ng-controller=""demoAngularController"" >
   {{testVar}} World
  < /div >
 < /body >
 < script >
var demoModule = angular.module('demo', []);
    demoModule.controller('demoAngularController', function ($scope) {
        $scope.testVar = 'Hello';
    });
    angular.bootstrap(document.getElementById(""demo""),['demo']);
  < /script >
< /apex:page >

ここまで進めたら、実際に「Hello world」と出力されているか確認してみましょう。 左上の[preview]ボタンを押してください。新しいタブが開き入力したコードの結果が表示され、「Hello world」と出力されていることが確認できます。

SalesforceにAngularをロードする記述についての詳細説明

< apex:includeScript value=""{!$Resource.DEMO_Angular}""/ >

この記述はVISUAL FORCEで使用するAPEXの記述です。ダウンロードしたAngular.jsを「DEMO_Angular」という名前で登録したので、 JavaScriptファイルを読み込むincludeScript value=の値に{!$Resource.DEMO_Angular}と記述しています。 HTMLにレタリングされた結果は以下のようになります。

< script type='text/javascript' src='/resource/1233160164000/DEMO_Angular' >

手動ブートストラップ

angular.bootstrap(document.getElementById(""demo""),['demo']);

JavaScriptの基本的な記述が書かれていますが、一箇所だけ手動bootstrapの記述について解説しておきます。 この記述は「Angularアプリケーションを手動で初期化する」という意味です。Angularアプリケーションをブートストラップさせるためのもので、サーバーとのやり取りがすべて完了した後にAngularコンパイルのみが動作する仕組みとなっています。 これはAngularアプリケーションをブートストラップしてコンパイルする前に書かれた何かしらの処理の結果にかかわらず、Angularアプリケーションのコンパイルの動作を保証するための記述です。

ng-app属性の記述

 < body ng-app=""myApp"" class=""container"" ng-controller=""myctrl"" >
  < div id=""demo"" ng-controller=""demoAngularController"" >
   {{testVar}} World
  < /div >
 < /body >

ng-appの意味は先ほどのブートストラップの記述と同じように「Angularアプリケーションを初期化する」という目的で記述しています。つまりAngular.jsの機能を有効化するために記述しているので必ず記述する必要があります。 ブートストラップが手動で初期化するのに対して、ng-app属性は自動で初期化する挙動となります。ng-app属性はHTMLドキュメント内に1つだけ記述することが可能です。ng-appタグを利用する代わりに、 クラス属性として読み込みこむこともできます。 例えば、ビジュアルフェスページはHTMLのカスタマイズ属性をすることができないため、別の方法でタグを読み込む必要があります。つまり以下のような記述になります。

  < body class="" ng-app""> < /body >

どちらの記述も利用するので覚えておくと良いでしょう。

controllerの記述

var demoModule = angular.module('demo', []);
    demoModule.controller('demoAngularController', function ($scope) {
        $scope.testVar = 'Hello';
    }); 

Angular.jsを利用する上でコントローラーを定義する必要があります。 上記の例では、angular.module(‘demo’, []); と定義したモジュールオブジェクトをdemoModuleという変数に代入しています。そして「demoAngularController」という名前でコントローラーを登録しています。 コントローラーはモジュールオブジェクトに登録してスコープを準備するために必要な構成要素です。つまりcontrollerメソッドの基本構文は以下となります。

controller(ControllerName, Constructor)

コンストラクター関数の引数に設定されている($scope)オブジェクトは、functionの中で設定された値を登録できます。 ここでは「$scope.testVar = ‘Hello’; 」という値を登録しています。

ng-controller属性の記述

< div id=""demo"" ng-controller=""demoAngularController"" >
   {{testVar}} World
  < /div >

先ほどfunctionの中で設定された値に「$scope.testVar = ‘Hello’; 」を登録しました。 スコープオブジェクトに設定したプロパティを反映させるにはコントローラーが紐付いている要素の中に「{{プロパティ名}}」と記述します。 コントローラーはdiv要素(id=”demo”)に紐づいているため、全体で値を反映させたい場合は、< body ng-controller=””demoAngularController >このようにbody要素に属性を紐付けしてください。

SalesforceにAngular.jsを読み込むだけで利用できる

本記事ではAngular.jsをSalesforceにロードする方法を紹介しました。 Angular.jsをSalesforceで利用するために複雑な構築をする必要はありません。基本的に読み込みができれば、Angular.jsは使用可能です。 大量のデータ送信には向きませんが、一般的な入力フォームや簡単なメッセージを構築するときにコード記述を少なく抑えられるメリットがあります。 Angular.jsは導入が容易なために、さまざまなアプリケーション開発の現場で使用されています。是非この機会にSalesforceでAngular.jsを扱えるようにしておきましょう。]]>