金井 健一 – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 【βリリース記念】5分でわかる！Angular2のススメ /canidoweb/18001/ Fri, 25 Dec 2015 02:00:26 +0000 /?p=18001 2015年12月15日に、Angular v2.0.0-beta.0がリリースされました。Angular2の発表から実に1年です。まだβ版ではありますが、1つの区切りとして現状のAngular2についてお伝えしていきます。

何が変わったのか

以前から言われているとおり、かなり大きく変わっています。これまでのJavaScriptフレームワークではMVCやMVVMと呼ばれるデザインパターンが多く採用されてきました。

しかし、Web Componentsの仕様策定が進んでいる今、この仕様と共存できるようなコンポーネント指向のフレームワークが求められてきています。そういった背景から、MVW(hatever)という思想で開発されていたAngular1に対し、Angular2はコンポーネント指向で設計されています。

Angular2は、以下のような特徴をもっています。

  • 処理速度・パフォーマンスの向上
  • よりシンプルに、わかりやすく
  • クロスプラットフォーム
  • Angular1からのシームレスなアップグレード
  • 柔軟な開発
  • 網羅的なルーティング
  • Dependency Injection（DI）
  • レガシーブラウザのサポート
  • アニメーション（開発中）
  • 国際化 (Internationalization:I18N) とアクセシビリティ（開発中）

angular.io – FEATURES & BENEFITS より

これだけだと伝わりにくいので要約すると、

  • Angular1での課題の解決
  • ES2015/ESNextへの対応
  • TypeScriptなどのトランスパイラとの連携
  • Web ComponentsやPolymerとの連携
  • AndroidやiOS対応
  • デスクトップアプリ対応
  • サーバサイドレンダリング対応

などが挙げられます。

Angular1の良いところはそのままに、課題については改善していこうという姿勢です。その結果もあり、Angular1で問題となっていたDirty Checkingを解決したことや、サーバサイドレンダリングをおこなえるようになったことで、パフォーマンスが飛躍的にアップしました。Angular2開発当初にパフォーマンスの問題で一時取り止めになっていた双方向バインディングも現在では実装されています。

それに加えて、Angular2では、モバイルやデスクトップアプリでも快適に動作するよう考慮されています。すでにIonicや NativeScriptで、ハイブリッドアプリやネイティブUIモバイルアプリを開発する際も、Angular2を利用することができるようになりました。

これらを見れば、多岐にわたる変更があるだろうことが想像できるでしょう。

Angular2が提供するAPIは一新されていて、Angular1との互換性はありません。しかし、Angular1のディレクティブの設定に似ているため、多少経験がある方であれば理解するのはさほど難しくはありません。

// コンポーネントを作成するサンプル
(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

弱点がなくなった Angular2

他のフレームワークと比較すると、Angular1は入力フォームの多い、管理画面などの開発において圧倒的な強みがありました。双方向バインディングや強力なフォームバリデーション機能が備わっていたためです。

Angular2は、それらの機能を備えたままさらに強力になったといえます。管理画面だけでなく、モバイル環境やデスクトップアプリでも問題なく利用できるので、活躍する場が広がっていくでしょう。

サーバサイドレンダリングを利用すれば、SEOが必要なWEBサイトのフロントですら利用することができるようになります。 このように、苦手としていたことの改善によるパフォーマンスが向上したことで、今後は限定的なケースではなく、さまざまなケースで利用されることが期待できます。

他にも、開発する際の自由度があがったことも大きなメリットです。ES5で実装することもできますし、ES2015で実装することもできます。またTypeScriptやBabelなどのトランスパイラも組み合わせて開発することも可能になりました。特に、Angular2自身がTypeScriptで実装されていることもあり、tsdファイルを作成する必要がなくなったことは、TypeScriptユーザにとって嬉しいことではないでしょうか。

Angular2 のこれから

現在、β版にはなり多少は落ち着いたのかなといった印象ですが、今後はAngularユーザやコミュニティによってさらにブラッシュアップされていくことと思います。まだまだドキュメントが少ないことが懸念されますが、これらはAngularの開発チームでも課題になっているので、時間とともに解決されていくでしょう。

最後に気になるv2.0.0のリリース時期について、あくまでも予想ではありますが、 2016/5/4〜6にかけて開催される ng-confでv2.0.0をお披露目したいのではないかと推測しています。（もしかしたら間に合わないかも、ということもありますが…）

]]> AngularJSのControllerとScopeの基礎を学ぼう /canidoweb/16732/ Mon, 07 Sep 2015 01:00:30 +0000 /?p=16732 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (3)

連載企画「AngularJS徹底解説」の第3回目は、ControllerとScopeの基礎について解説していきます。

AngularJS は MVW(hatever)!!!

AngularJSはMVC(Model-View-Controller)フレームワークと呼ばれることが多いですが、一部の開発者からは MVVM(Model-View-ViewModel)である、という声もあがっていて、ある時期に「一体どっちなんだ！？」という状態になりました。
そこで、そういった経緯に対してAngularJSチームが、そこについての議論は本筋ではないとして、AngularJSはMVW(Model-View-Whatever)である、と明言しています。

今回解説するControllerは、このWhateverの役割にあたる機能です。実際に「Whatever = 何でもいい」とはいっても、”Controller”という名のとおり、MVCパターンとして見れば M-V-“Controller”にあたる機能ですので、その概念から外れることはありません。

Controller の基本

コントローラは以下のように記述します。他にもいくつか書き方があるのですが、今回はこの書き方で解説していきます。

まず、myAppアプリにmyCtrlというコントローラを作成してみます。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // ここにコードを書いていく
  }]);

以下の意味になります。 

...
  .controller.('コントローラ名', ['依存サービス', function(依存サービス){
    // ここにコードを書いていく
  }]);

$scopeについては、 ビューにデータなどを渡したり、ビューから発生したイベントを監視するなど、ビューとのやり取りを行うことができる特別なオブジェクトです。（AngularJSでは直接DOM操作をすることは推奨されていないため、この$scopeを通じて行います。そのためほとんどのケースでコントローラを記述する際に定義することになります）

また複数依存するサービスが複数ある場合は、

...
  .controller.('コントローラ名', ['依存サービス1', '依存サービス2' ... , function(依存サービス1, 依存サービス2 ...){
    // ここにコードを書いていく
  }]);

このように、配列に追加していく形で定義することができます。

先ほどの$scopeを利用して、ビューにモデルの値を引き渡します。
テンプレート(HTML)箇所については、前回までに解説した通りです。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Controller</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div>筆者：{{myName}}</div>

<div>
  エキスパートたち
  <ul>
    <li ng-repeat="expert in expertList">{{expert}}</li>
  </ul>
</div>

<div>
  {{author.name}} ( twitter - {{author.twitter}} )
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // Model の初期化 ①
    var myName = 'can.i.do.web';
    var expertList = ['Shumpei', 'komasshu', 'yoshikawa_t'];
    var author = { name: 'きゃない', twitter: 'can_i_do_web' };
    // View にバインディング ②
    $scope.myName = myName;
    $scope.expertList = expertList;
    $scope.author = author;
  }]);
</script>
</body>
</html>

$socpeを利用することで、ビューとやりとりすることができます。①で様々な形式のモデルの初期化、②で$scopeにプロパティを追加していくかたちで、 ビューに値を渡すことができます。
上記のほかにも複雑なオブジェクトや、関数などもバインドすることが可能です。

sample1

Controller の適用範囲

コントローラに限らず、ではあるのですが、AngularJSのディレクティブには適用範囲があります。
それは、そのディレクティブを定義したDOMの範囲とイコールです。

...
<body>
  <div ng-controller="myCtrl">
    myCtrl内: {{name}} <!-- ① -->
  </div>
  myCtrl外: {{name}} <!-- ② -->
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    $scope.name = 'can.i.do.web';
  }]);
</script>
</body>

①のようにng-controller="myCtrl"と定義したdivタグの内部のみ、初期化されたnameを表示（取り扱う）することができます。 ②はng-controller="myCtrl"が定義されているdivタグの外側にあるため、myCtrlで定義したnameにアクセスすることはできません。

このように、AngularJSではそれぞれの コントローラなどのディレクティブがお互いに干渉しないよう、適用される範囲のみでそれぞれの機能を果たします。そうすることで個々の機能が疎結合になり、保守性が高くなります。

Controller の分割

最初に挙げたサンプルのように画面全体に対して1つのControllerで運用していった場合、かなり多機能なコントローラになってしまいます。

例えば以下のケースだとどうなっているか見ていきましょう。

...
<body ng-controller="myCtrl">
  <header>
    ... <!-- header -->
  </header>
  <main>
    ... <!-- main -->
  </main>
  <footer>
    ... <!-- footer -->
  </footer>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // いろいろな機能のコード
  }]);
</script>

上記はbody全体に対してのみのコントローラとなっています。ヘッダやフッタに関しては、一般的なアプリケーションでは共通的な機能と言えるでしょう。

それに対して上記の場合は、画面ごとにヘッダやフッタのデータやイベント等の振る舞いを毎回記述しなくてはなりません。先述したとおり、保守性を高めるために、 コントローラを分割すると良いでしょう。

...
<body ng-controller="myCtrl">
  <header ng-controller="headerCtrl">
    ... <!-- header -->
  </header>
  <main ng-controller="mainCtrl">
    ... <!-- main -->
  </main>
  <footer ng-controller="footerCtrl">
    ... <!-- footer -->
  </footer>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // 画面全体に渡るコード
  }])
  .controller('headerCtrl', ['$scope', function($scope){
    // headerで必要な機能のコード
  }])
  .controller('mainCtrl', ['$scope', function($scope){
    // main で必要な機能のコード
  }])
  .controller('footerCtrl', ['$scope', function($scope){
    // footer で必要な機能のコード
  }]);
</script>

上記のようにコントローラを分割することで、機能の塊を小さくできます。headerCtrlやfooterCtrlを切り分けることによって、アプリケーション全体で共通的なヘッダ、フッタの機能として利用することもできます。

また、メインコンテンツ内も機能的に煩雑になっているようであれば、さらにコントローラを分割して運用していくとよいでしょう。

Scope

スコープはビューとコントローラの間に立って、モデルをビューにバインディングしたり、ビューから発生したイベントを受け取って何かしら振る舞う、といった役割を持ちます。$scopeはそれを実際に行なうためのオブジェクトです。

スコープはDOMツリーと同様ツリー構造になっていて、ng-appを基点にDOMツリーに沿うように構成されます。そしてng-controller と記述している箇所でng-appの子スコープとして新たなスコープが生成されています。Chrome DevToolsなどで該当するDOMを見てみると、ng-scopeというクラス名が自動的に付与されているため、これを元に確認することができます。

最初のサンプルの場合、ng-repeatでも新しくスコープを生成するため、expertListの<li>にも同じように付与されています。

sample1-a

“Controllerの適用範囲” で解説した内容はこのスコープのツリー構造と関わっています。

以下の例を見てみましょう。

...
<body ng-controller="myCtrl">
<p>①親スコープの'name' -> {{name}}</p>
<p>②親から見ようとした 'twitter' -> {{twitter}}</p>

  <div ng-controller="myChildCtrl">
    <p>③myChildCtrl の 'name' -> {{name}}</p>
    <p>④myChildCtrl の 'twitter' -> {{twitter}}</p>
  </div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    $scope.name = 'can.i.do.web';
  }])
  .controller('myChildCtrl', ['$scope', function($scope){
    $scope.twitter = 'きゃない';
  }]);
</script>

実行してみると、このように表示されます。

scope

スコープはツリー上に構成されるため、スコープの親子関係が生まれます。
原則、子スコープから親スコープの値は参照できますが、その反対はできません。
親であるmyCtrlで定義された、nameというプロパティは、子であるmyChildCtrlのnameとして参照することができるため、表示されています。
反対に、親スコープから子スコープのプロパティを参照できないため、②では何も表示されていません。

子スコープが新たに生成されるタイミングは、コントローラを定義する（ng-controller）など、一部の（ビルトイン）ディレクティブ などを定義した場合です。
どのディレクティブ が新しくスコープを生成するかや、詳細な挙動については、AngularJS にかなり慣れている必要があります。
しかし、はじめから完璧に理解する必要は全くありません。スコープという概念があり有効範囲や親子関係がある、ということを頭の片隅においておくと良いでしょう。

Controller 間でデータ共有

親子コントローラ間でデータを共有するためには以下のように記述しましょう。

...
<body ng-controller="parentCtrl">

  <div>
    <p>親スコープ</p>
    <input type="text" ng-model="autor.name">
  </div>

  <div ng-controller="childCtrl">
    <p>子スコープ</p>
    <input type="text" ng-model="autor.name">
  </div>

<script>
angular.module('myApp', [])
  .controller('parentCtrl', ['$scope', function($scope){
    // 親スコープ
    var author = {};
    author.name = 'Kanai';
    // bind
    $scope.autor = author;
  }])
  .controller('childCtrl', ['$scope', function($scope){
    // 子スコープ
  }]);
</script>

これまでのサンプルとの違いは、$scope.autor.nameのように、直接$scope.nameとしていない点です。
このように$scopeとバインドしたいプロパティとの間に、オブジェクトを挟むことで、親子間でデータを共有することができます。

こうすることで、親子スコープのどちらのinputでも、片方の入力値を書き換えれば、もう一方のデータも書き変わります。
先述してきたサンプルの場合は、JavaScriptのプロトタイプチェーンの都合上、親子関係が破綻してしまいます。そのため、値を書き換えても相互にデータの書き換えを行なうことができません。
データの書き換えや参照が思ったようにうまくいかない場合は、このことを覚えておくとよいかもしれません。

まとめ

今回は、ControllerとScopeの基礎を解説しました。
特にスコープについては複雑な概念や実装になっていますので、いきなり全てを把握することは難しいです。AngularJS の経験を積むとともに徐々に学んでいきましょう。
次回はサービスについての解説を予定しています。

]]> AngularJSの強力なフォームバリデーションを活用しよう /canidoweb/13708/ Fri, 13 Mar 2015 03:00:44 +0000 /?p=13708 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (2)

連載企画「AngularJS徹底解説」の第2回目は、Angularが備えている強力なフォームバリデーションについて解説します。

AngularJS の強力なフォームバリデーション

ご存知の通り、HTML5の仕様にもフォームバリデーションがあり、主要なモダンブラウザであれば既に実装されています。しかし、ブラウザに実装されたバリデーション機能は、まだ実践で使うには使い勝手がよいものとは言えません。もうしばらくは、プラグインやライブラリに頼ったり、または、自身で実装していく必要がありそうです。

今回からデモページを用意してみました。実際に動作していることを確認できます。レイアウト調整をしているため、本稿で掲載するサンプルコードとは多少異なること、ご了承ください。

各input要素のバリデーション

まず、Angularでのバリデーションは、双方向バインディングの特性を活かして、入力と同時にチェックを行うことができます。

例えば以下のように 記述することで、それぞれのテキストボックスに対して必須チェック・文字数チェックを行うことができます。

<form>
  <input type="text" ng-model="demoModel" ng-required="true">
  <input type="text" ng-model="demoModel2" ng-maxlength="4">
</form>

まずは、ng-requiredとng-maxlength="4"となっている箇所がバリデーションの定義です。とても簡単に記述することができます。

ただ上記のままでは、チェックがエラーだったとしても、何の変化もおきません。そこで、次はバリデーションチェックエラーの場合にエラーメッセージを出してみます。

先のサンプルに少し書き足して、以下のようなコードにします。

<form name="demoForm" novalidate>
  <input type="text" name="input3" ng-model="demoModel" ng-required="true">
  <p ng-show="demoForm.input3.$error.required">入力必須です</p>

  <input type="text" name="input4" ng-model="demoModel2" ng-maxlength="4">
  <p ng-show="demoForm.input4.$error.maxlength">4文字までです</p>
</form>

このように、実際バリデーションを利用するにあたっては、form要素にname属性とnovalidate属性を、各input要素にはname属性とng-model属性を定義することがほぼ必須となります。忘れずに定義するようにしましょう。

form要素のnovalidate属性は、ブラウザに実装されているバリデーション機能をOFFにするためです。またform、input共にname属性がついていますが、こうすることでバリデーションチェックの結果を取得することができます。

実行すると以下のようにエラーメッセージが表示されます。

invalid

ng-showにそれぞれ渡している値がバリデーションチェックの結果です。それぞれの”form名”.”input名”.$errorというオブジェクトに保持されます。$errorの中にあるrequiredやmaxlengthはチェックエラーのときに、trueになります。エラーではない場合はfalseとなるため、これを利用してエラーメッセージの表示切り替えを行うことができます。

上記のサンプルでは、必須チェックのみ、文字数チェックのみでしたが、複数のバリデーションを定義することも可能です。

<form name="demoForm2" novalidate>
  <input type="text" name="input5"　ng-model="demoModel5" ng-required="true" ng-minlength="4" ng-pattern="^[0-9]+$">
  <p ng-show="demoForm2.input5.$error.required">入力必須です</p>
  <p ng-show="demoForm2.input5.$error.minlength">4文字以上です</p>
  <p ng-show="demoForm2.input5.$error.pattern">半角数値のみです</p>

  <p>demoForm.input5.$error.pattern : {{ demoForm.input4.$error }}</p>
</form>

このように、各エラーに対してをエラーメッセージを細かく設定することができます。逆に、エラーメッセージは1つだけ表示させたい場合もあります。以下のように、$invalidを利用すると実現することができます。$invalidは、複数定義したバリデーションのどれかひとつでもエラーであればtrueとなるためです。

<form name="demoForm2" novalidate>
  <input type="text" name="input6"　ng-model="demoModel6"　ng-required="true" ng-minlength="4" ng-pattern="/^[0-9]+$/">
  <p ng-show="demoForm2.input6.$invalid">4文字以上の半角数字のみ（必須）</p>
</form>

取得可能なバリデーションチェックの結果を一部挙げると、

  • “form名”.”input名”.$error
    • 各バリデーションチェックエラーのプロパティを保持
  • “form名”.”input名”.$valid
    • 該当要素のバリデーションチェックが、エラーでないとき true
  • “form名”.”input名”.$invalid
    • 該当要素のバリデーションチェックが、エラーであるとき true
  • “form名”.”input名”.$dirty
    • 該当要素の値が初期値から変更があったとき true
  • “form名”.$valid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがないとき true
  • “form名”.$invalid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがあるとき true

となります。 この他にも input 要素が初期値かどうか、form が submit されたかどうかのフラグも取得可能です。

バリデーションによるクラスの付与

先述したとおり、Angular ではエラーであるかどうか等、true/falseのフラグを保持しています。これに加えて、各要素にクラスの付与も同時に行っています。 例えば、ng-requiredを定義すると、ng-invalid-requiredというクラスが要素に付与されます。Google Chrome Developer Tools等から確認することができます。

devtools

自動的にクラスが付与されるため、エラー時に「要素のボーダーを赤くする」など、スタイルを設定しておくこともできます。下記は、.ng-invalid（エラーの場合）のみ場合、初期表示時から赤く表示されてしまいます。

それを回避するために、.ng-dirty（初期値から変更があったかどうか）を併せて記述することで、ユーザが入力するまではエラーとして扱わないようにしています。

.ng-invalid.ng-dirty{
  border: solid 1px red;
}

まとめ

今回はフォームのバリデーション機能について解説しました。自身であれこれ設定しなくても、かなり簡単に実装することがおわかりいただけたかと思います。

もちろん標準の機能では実現できないケースも出てくるでしょう。その際には、AngularUI の UI-Utils を利用することで複雑なバリデーションを実装することも可能です。

AngularUIのようにAngular用のプラグインも豊富に存在しているので、これらについても今後紹介していきたいと思います。

ng-japan 開催！

ngjapan 2015/3/21に日本で初めてとなる Angularのカンファレンス、ng-japanを開催します。 Angularの開発チームメンバーを招き、直接学ぶことができる場です（逐次通訳あります）。

そこで、CodeIQ さんから Angular について出題 させてもらいました。 ぜひ、解いてみてください。 codeiq

HTML5 Experts.jpでも、特集企画を組んでその内容をお伝えする予定です。

3/5～3/6に開催された本家 ng-conf では、Angular 2などのセッションが話題になっており、これからも注目すべきフレームワークの1つと言えるでしょう。

]]> これから始めるAngularJS /canidoweb/11543/ Wed, 10 Dec 2014 01:00:15 +0000 /?p=11543 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (1)

これから始めるAngularJS

HTML5の普及とともに、より表現豊かなWebアプリケーションを開発できるようになりました。その反面、Webアプリケーションの開発は、より複雑に、より大規模になってきています。こうした問題を解決するために、数多くのフレームワークが生まれてきました。 Backbone.jsやKnockout、最近であれば、Vue.jsやFacebook社が発表したReactなどが挙げられます。

本連載では、数多くあるフレームワークの中でも、今注目されているAngularJSについて幅広く紹介していきます。今回は、AngularJSに触れたことのない方に向けての入門編です。

AngularJS ロゴ

AngularJSとは

AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケーションを開発していく上で必要とされる機能が一通り揃っています。

Backbone.jsなどの場合は、最低限の機能しかしないため、不足する機能については、サードパーティ製のプラグインやライブラリと組み合わせて開発していくのが定石です。

一方、AngularJSでは、機能的な面でサードパーティ製のプラグインを導入することはほとんどありません。標準で用意されている機能だけでも充分な役割を果たしてくれます。

また、スクリーンショットにHTML enhanced(HTML拡張 ) とあるように、HTMLのような記述方法を採用しているのも大きな特徴です。

AngularJSの標準機能を挙げてみます。

  • 双方向データバインディング
  • シンプルなルーティング機能
  • HTML ベースのテンプレート機能
  • 非同期通信のサポート
  • 数多くのビルトインディレクティブ
  • フィルタ機能
  • Dependency Injectionによるモジュール管理
  • セキュリティ対策
  • テスト

などなど。

他のフルスタックといわれるフレームワークでも、ここまで幅広く包括的に用意されているものはなかなかありません。それゆえに、他のフレームワークに比べると、学習コストが高いとされています。

また、どんなフレームワークにも得意／不得意があります。フルスタックとはいえAngularJSも例に漏れません。AngularJSが得意とすることは、CRUD系のアプリケーションや、ルーティング機能を活かしてのSPA(Single Page Application)などです。

CRUD系のアプリケーションというのは、Webサイトの管理画面、マイページなどが該当します。他にもエンタープライズ向けのシステムもCRUD系アプリケーションの典型と言えるでしょう。

SPAで代表的なものは、ハイブリッドアプリ、Chrome Extension、Firefox OSアプリなどが該当します。ただし、SPAの中でも、ゲームで用いるような派手なエフェクトや、canvasを利用してのグラフィック処理などは得意ではありません。このようなケースで AngularJSを採用するのは控えた方がよいでしょう。

Hello World

まずは、Hello Worldを試してみましょう。

公式サイトからダウンロードします。今回はCDNを利用します。

AngularJS Download

現在は1.3系（最新版）と1.2系（レガシー版）の2つのバージョンが存在しています。この2つの違いは、IE8以下のブラウザをサポートするかしないかです。1.3系ではIE8以下のブラウザはサポートされませんので、採用する際はこれを判断基準にするとよいでしょう。特に意識しなくてよい場合は、1.3系をオススメします。

続いて、以下のようにマークアップします。

<!doctype html>
<html ng-app><!-- ① -->
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
  <!-- ② -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
  Hello <span ng-bind="myModel"></span> !!!<!-- ③ -->
  <div><input type="text" ng-model="myModel"></div><!-- ④ -->
</body>
</html>

AngularJSはカスタムタグやカスタム属性を記述して、対応する機能を呼び出します。このサンプルコードで行われている AngularJSに関わる設定は以下の4つです。

  • ① ng-app
    • AngularJSを利用することの宣言をおこないます。
  • ② AngularJSを読み込みます。
  • ③ ng-bind
    • 指定した”myModel”をデータバインドします。
  • ④ ng-model
    • モデル名の宣言をします。

ブラウザで動かしてみましょう。

Hello World

テキストボックスに文字を入力するのと同時にHelloの後に入力した文字が表示されます。通常であればJavaScriptでテキストボックスの入力植を取得して、Helloの後に出力する、といった処理が必要になりますが、AngularJSでは、モデルとそのデータバインディングの指定をおこなうだけで同様の処理がおこなわれます。

ビルトインディレクティブ

Hello Worldのサンプルでは、カスタム属性としてng-appなどを記述しました。AngularJSの仕組みで作られたカスタム要素やカスタム属性をディレクティブと呼び、特に標準で用意されているディレクティブをビルトインディレクティブと呼びます。

一部を除いて「ng-」で始まっているのが特徴で、70個程度のビルトインディレクティブが標準機能として用意されています。aや formなどもAngularJSによって拡張されているため、ただのHTMLの要素ではなく、これらもビルトインディレクティブとして扱われます。

以降、サンプルで使用したビルトインディレクティブの他に、よく利用するディレクティブをいくつか紹介します。

ng-show / ng-hide / ng-if

Hello Worldに以下のコードを少し追加して確認してみます。このディレクティブはいずれも、ng-show=”条件”のように記述します。条件が trueとみなされた時にそれぞれの役割を果たします。名前からもわかる通り、ng-showとng-ifはtrueのときに表示、ng-hideはtrueのときには非表示となります。

ng-showとng-ifの違いは、前者は{ display: none; }で表示の切り替えをおこなっているのに対し、ng-ifは条件がtrueの時は、DOMに追加、falseのときはDOMから削除しています。

<body>
  Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>

  <div ng-show="myModel">こんにちわ</div>
  <div ng-hide="myModel">入力してください！</div>
  <div ng-if="myModel==='World'">Hello World 完成！</div>
</body>

ng-class

ng-classは、動的にCSSのclassの付け替えをおこなうことができます。記述方法はいくつかあるのですが、{ class 名 : 条件 } と記述するのが使いやすいです。条件については先ほどと同様です。

<style>
  .notEmpty { background-color: red; }
</style>
<body ng-class="{ notEmpty : myModel }">
  Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>
</body>

ng-repeat

このディレクティブはテンプレート上で配列のループ処理を行うためのものです。情報を一覧表示する際に必ず使いますので、覚えておいていただきたいです。

<body>
  <ul ng-init="items = ['html5', 'experts', 'jp']">
    <li ng-repeat="item in items">
      <p ng-bind="item"</p>
    </li>
  </ul>
</body>

ng-initはモデルの初期化をおこなうディレクティブです。今回はサンプルのために使用しましたが、実際のアプリケーションを開発する際は、あまり使用することはないでしょう。

まとめ

今回は、AngularJSの基本についてと、ビルトインディレクティブについて紹介しました。これらは特にDOMを操作するためのディレクティブです。

AngularJSにはほかにもクリックなどのイベントの定義をするものや、form要素の拡張をおこなった強力なバリデーション機能を持つものもあります。こちらについては次回以降、順を追って紹介していく予定です。

おまけ

AngularJSの本、共著で書きました。

book

]]> キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ /canidoweb/7359/ Mon, 07 Jul 2014 01:00:05 +0000 /?p=7359 連載： ハイブリッドアプリ開発最前線 (4)

ionic

ionic 概要

ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。
また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。

ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと）
現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。

特徴

  • Apache Cordovaを拡張して作られている、モバイルUIフレームワーク＆開発ツール
  • UIがシンプル、かつ美しい
  • AngularJS を採用している
  • 現状はiOS 6+とAndroid 4+のサポートのみで、Windows PhoneとFirefox OSについては今後対応予定

ionicでHello, World

事前準備

ionicでアプリケーションを開発するためには、 Node.js がインストールされている必要があります。 インストールされていない場合は、上記のリンクからダウンロードしてインストールしておきましょう。
また、各プラットフォーム（Android、iOS）ごとに必要なSDKのインストールも必要です。
こちらについては本稿では触れませんのでご了承ください。

1. cordova-cliとionic-cliのインストール

Node.jsのnpm-cliを利用して、cordova-cliとionic-cliをインストールします。
今回はiOSを対象に解説していくため、ios-sim-cliもインストールしておきます。
これは後述するiOSのエミュレータでの確認をするために必要となります。

$ sudo npm install -g cordova ionic
  $ sudo npm install -g ios-sim

2. ionicプロジェクトの作成

ionicのプロジェクトを作成します。

$ ionic start myApp tabs

実行すると”myApp”という名前のプロジェクトが作成されます。
“tabs”という引数はデフォルトのテンプレートの指定になります。
“blank”、”tabs”、”sidemenu”の3種類がテンプレートとして用意されていますので、ご自身で作成するアプリケーションの要件に応じて使い分けるとよいでしょう。
各テンプレートのレイアウトは以下の画像を参照してください。 project

3. 対象のプラットフォームを設定

次に、作成したプロジェクト内に移動して作成するプラットフォームを指定します。
iOS 向けの設定を追加します。

$ cd myApp
  $ ionic platform add ios

4. Hello, Worldを書く

今回のケースでは、アプリケーション起動時に表示されるhtmlはmyApp/www/templates/tab-dash.htmlなので、このhtmlファイルを編集します。
以下のように、h1要素のテキストを”Hello, World”に書き換えます。

<ion-view title="Dashboard">
      <ion-content class="has-header padding">
          
Hello, World

      </ion-content>
  </ion-view>

5. 変更を確認する

アプリケーションの動作確認をおこなうためには2つの方法があります。
主にデザインやレイアウトの確認を行なう場合であればWebサーバを起動して確認するとよいでしょう。

$ ionic serve

serve

$ ionic build ios
  $ ionic emulate ios

ネイティブのAPIを利用している箇所は、エミュレータを起動して確認しましょう。

emu

6. 実機での動作確認

Androidであれば、実機と開発環境をUSBケーブルで接続してから

$ ionic run android

で実機にインストールすることができます。

iOSの場合は、ionicコマンドから実機にインストールすることができません。
iOSでの実機確認を行なうには、XcodeからmyApp/platforms/iosを開いて実機にインストールすることができます。
これ以降はXcodeでの作業になります。

ionic の機能

ionicコマンドで作成されたプロジェクトには、以下のディレクトリが配置されます。
これらがionic独自のディレクトリで、Apache Cordovaとは大きく異なる点です。
Apache Cordovaで作られたプロジェクトにはこれらのディレクトリは存在しません。

myApp/www/lib/ionic
  myApp/scss/

myApp/www/lib/ionic配下のファイル群がionicが提供するUIコンポーネント群の実体です。
またionicはSassを採用しているので、myApp/scss/やmyApp/www/lib/ionic/scss配下のファイルを編集することで、UIコンポーネントをカスタマイズすることも可能です。
もちろん、myApp/www/lib/ionic/css配下のcssファイルを直接編集することも可能ですが、7000ステップ以上ありますので現実的ではありません。
カスタマイズを前提とするならば、Sassの導入は必須となります。

Optional

ionicは、タスクランナーとしてgulp.jsを採用しています。
gulp-cliを利用することで、Sassを自動コンパイルさせたりすることもできます。
設定方法について詳しく知りたい方はこちらを参照してください。

ngCordovaモジュール

2014/6/3に公式ブログから ngCordova のαリリースが発表されました。
cordova.js（ネイティブの機能を呼び出すためのApache Cordovaのライブラリ）をAngularJSでラップしたモジュールです。
ionicにとっては、cordova.jsを直接呼び出して使用するよりも、ngCordovaというAngularJSのモジュールとして扱うことで親和性が高くなり、これまで以上に機能拡張が容易になります。

最後に

以下のProductsのページには、”Coming mid-2014: Powerful mobile development tools and services for Ionic.”と記述されていて、近々大きなリリースを予定しているのが伺えます。
注目されているフレームワークの1つですので、今のうちから試してみてはいかがでしょうか。

products

参照リソース

]]>