AngularJSではじめるHTML5開発 – Part1 Getting Started at nkjmkzk.net

AngularJSではじめるHTML5開発 – Part1 Getting Started

AngularJS-large

これから数回に分けてAngularJSでHTML5アプリを開発していきたいと思います。

開発環境は最高のHTML5プラットフォームであるForce.comですが、Force.comおよびAngularJSをまったく使ったことがない開発者の方々でも試せることを前提にした内容です。

ただし一点、一応IE以外で検証ください。

今回は最初の最初、ゼロからはじめてForce.com上でAngularJSが動くまでを解説していきます。

まずこのPart1で開発する部分をデモでみてみましょう。

デモ

それでは実装へ。

開発組織の入手

Force.comの開発環境は「Developer Edition」と呼ばれ、誰でも、いくつでも、いつまででも無料です。さらに本番環境で利用できるほぼすべての機能が利用できます。なんということでしょう。

ということで、まずは下記のサイトからこのDeveloper Editionを入手します。

http://events.developerforce.com/signup?d=70130000000EjHb

サインアップが完了してしばらくすると、メールでログイン情報が届きます。このメールにしたがってログインすると下記のようなサイトにアクセスできます。

just logged in

Force.comの開発環境は「全部入り」であるため、CRMの機能もはいってしまっています。なのでいきなりごちゃごちゃしていますが、すべて無視してください。今回は他の機能には一切触れずに純粋にプラットフォームとして利用していきます。

HTMLファイルの作成

Force.comではVisualforceページというファイルにHTMLを書いていきます。

Visualforceページは本来Force.com独自のマークアップ言語ですが心配ありません。なぜならVisualforceページは99%、HTML5だけで記述できるからです。独自マークアップを利用せずにHTML、CSS、JavascriptといったWeb開発者の必須科目で開発することができます。

では早速新しいVisualforceページを作成してみます。

アカウント名のプルダウンメニューから「開発者コンソール」を選択します。

click_dev_console

このコンソールではコーディング、およびデバッグをおこなうことができます。まずは上部のメニューから File > New > Visualforce Pageを選択します。

click_new_vf

ファイル名を入力するフォームが現れますので「index」と入力してOKをクリックします。
＊Apex Pageというのがやや謎ですが、Visualforce Pageのことです。
＊ファイル名はindexでなくても何でもOKです。

enter vf page name

新しいVisualforce Pageが作成され、下記のように謎のタグが入っています。

<apex:page>
</apex:page>

このタグはVisualforce独自のマークアップであり、かつ、唯一必須のVisualforceタグです。
Visualforceページでは、ページの最上部に<apex:page>そして最下部に</apex:page>が必ず必要です。
すべてのHTMLコードはこの内側に記載していきます。

早速HTMLを記述していきたいところですが、その前に一つだけ。<apex:page>タグを下記のように修正してあげてください。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >
</apex:page>

これは「まっさらなページにHTML5コードを書きますよ」という宣言です。
Visualforceについて知っておかなければいけないことは以上です。
編集したコードはキーボードでCtrl + s または Command + sといったショートカットキーで保存できます。
保存ができたら次に進みましょう。

AngularJSをインポート

AngularJSのセットアップは一つのJavascriptファイルを読み込むだけです。googleやcdnjsのようなCDNサービスから読み込むことができます。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >

<html>
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
</head>
</html>

</apex:page>

これで完了です。

超重要機能データバインディングを試してみる

さて、早速Angularしてみましょう。

AngularJSといえばJavascript内のデータモデルが動的にHTMLに反映される、というのが一つの醍醐味です。この動作を確認するためにシンプルなHTMLとJavascriptのコードを記述してみます。

<apex:page showHeader="false" standardStyleSheets="false" 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.10/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>
 
</apex:page>

まずはこのコードを保存し、コンソール右上のPreviewボタンをクリックして動作をみてみましょう。

click preview

下図のようにテキストフィールドと、h1タグが効いた文字列が表示されているはずです。

preview

次にテキストフィールドの値を変更してみてください。そうするとh1タグの文字列も連動して変更されるはずです。

ここでわかるのは下記2点です。

Javascriptで$scope.guestNameに代入した初期値（Kazuki Nakajima）がHTMLにも反映されているようだ。
テキストフィールドの値と<h1>タグの値はつながっているようだ。

AngularJSではこの仕組みを「データバインディング」と呼んでおり、おそらくは最も重要な機能だと思います。
仕組みをよくみてましょう。

<html ng-app="ngbootcamp">

これはこのページでAngularJSを有効化するための指定です。
ngbootcampというのは利用するAngularJSのモジュールを指定しています。モジュールはこの後にJavascriptで作成します。

    var ngbootcamp = angular.module('ngbootcamp', []);
    
    ngbootcamp.controller('guestCtl', function($scope){
      $scope.guestName = 'Kazuki Nakajima';
    });

angular.module()というメソッドでAngularJSのモジュールを”ngbootcamp”という名前で作成しています。（このモジュール名は任意のものでかまいません）
このメソッドはモジュールのインスタンスを返します。つまりvar ngbootcampがそのインスタンスとなっています。

ngbootcamp.controller()ではコントローラを作成しています。
このメソッドは第一引数にコントローラ名、第二引数に無名関数でコントローラのプロパティやメソッドを定義します。

このコントローラ内で定義した$scope.guestNameのようなプロパティはHTMLから参照できるようになります。$scopeというのはこのコントローラの空間を示しているオブジェクトです。ちょっと難しいですが$scope.を先頭につけた変数はAngularがしっかり管理してくれて、JavascriptでもHTMLでもアクセスできるようになる、くらいの理解でまずは良いと思います。

<body ng-controller="guestCtl">

普段は見かけない属性「ng-controller」なるものがあります。AngularJSではng-*というような形式の追加属性がたくさん用意されており、これによってHTMLの機能を拡張しています。このng-controllerは、Javascript内で定義されているAngularJSのコントローラーを指定することで、この要素（body）の配下ではguestCtlというコントローラーが利用できる、ということになります。

<input type="text" ng-model="guestName" />

また出ました。今度はng-model。これは極めて重要な属性で、コントローラの変数と、このテキストフィールドの値をくっつけます。つまり、$scope.guestNameとこのテキストフィールドの値は常に同期することになります。なのでJavascriptで$scope.guestNameに代入したKazuki Nakajimaという値が最初にテキストフィールドに入っていたわけです。

<h1>{{guestName}}</h1>

こんどはダブル波括弧が登場です。このダブル波括弧で変数名を指定することにより、コントローラーで定義した$scope.guestNameにアクセスすることができるわけです。
そして、コントローラー内の変数、テキストフィールド、h1タグの値はすべての同じオブジェクトを参照しているため、常に値が同期しています。

鋭いかたは、「ng-modelの方は波括弧をつけていないじゃないか」、と思われたかもしれません。
その通りなのですが、ng-modelはAngular独自の属性であり、その値はすでにAngularの縄張りにはいっています。なので波括弧をつけずともAngular世界の変数であることが認識できるので波括弧はつけません。一方、h1タグの方は波括弧をつけないとそのままguestNameと出力されるますので明示的に波括弧でAngular世界のオブジェクトであることを教えてあげるわけです。

というわけで、Force.com上でAngularJSが動くようになりました。
冒頭にあえてAngularJSとは？のようなイントロをいれませんでしが、それはここまで試してみるとどう便利なのかが肌でわかってくると思ったからです。

お察しの通り、AngularJSを使うと動的にページレイアウトを変更したり、フォームの中身を簡単に取得してAPIコールをおこなったりすることが極めて容易に実現できます。そのコードも非常にクリーンです。

次回はデータベースとのやり取りを含めた実装をみていきたいと思います。

nkjmkzk.net