なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
本稿は、第10回に続いての小ネタ編。これまでの回で取りこぼした小粒なライブラリとして、以下のものを紹介します。
- UI Layout：マウスドラッグでサイズ変更できる可変パネルを実装
- ngCSV：オブジェクト配列をCSV形式のファイルに変換
- Angular Count-to：カウントダウン／アップ機能を実装
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.5.7
- UI Layout 1.4.2
- ngCSV 0.3.6
- Angular Count-to 0.1.1
- Chrome 51
- Firefox 47
- Internet Explorer 11
マウスでサイズを変更できる可変パネルを生成する - UI Layout
UI Layoutを利用することで、ドラッグ操作でサイズを変更できる可変パネルを実装できます。
UI Layoutは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-ui-layout
それでは以下では、可変パネルの具体的な例として、ページを以下の領域で分割してみましょう。
- 左右を30、70％で分割
- 左側の上下を更に25、75％で分割
- 区切り線の幅は5px
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）UI Layout本体とスタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/angular-ui-layout/src/ui-layout.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-layout/src/ui-layout.js"></script>
<script src="scripts/layout.js"></script>
</head>
<body ng-controller="MyController">
<!-- （3）可変パネルを定義-->
<div ui-layout="{ flow : 'column', dividerSize: '5px' }">
<div ui-layout-container>
<div ui-layout="{ flow : 'row', dividerSize: '5px' }">
<div ui-layout-container size="25%" style="background-color:#0ff;"></div>
<div ui-layout-container size="75%" style="background-color:#0f0;"></div>
</div>
</div>
<div ui-layout-container size="70%" style="background-color:#f00;"></div>
</div>
</body>
</html>
// （2）ui.layoutモジュールへの依存関係を
angular.module('myApp', [ 'ui.layout' ])
.controller('MyController', function($scope) {
});
UI Layoutを利用するには、ライブラリ本体（ui-layout.js）とスタイルシート（ui-layout.css）をインポートした上で（1）、アプリモジュール（myApp）からはui.layoutモジュールへの依存関係を宣言します（2）。
あとは、ui-layout／ui-layout-container属性でレイアウトを定義していくだけです（3）。まず、可変パネルを表す要素にui-layout属性（ディレクティブ）を指定します。値には「パラメーター名: 名前」のハッシュ形式で、以下の情報を宣言します。
| パラメーター名 | 概要 | デフォルト値 |
|---|---|---|
| flow | 区切りの方向（column：横、row：縦） | row |
| deviderSize | 区切り線の幅 | 10px |
この例では、まず外側の<div>要素を横方向に区切って、更に配下の<div>要素を縦方向に分割しています。
可変パネルの配下で個々の領域（分割サイズ）を表すのが、ui-layout-container属性（ディレクティブ）です。利用可能な属性は、以下の通りです。
| 属性 | 概要 |
|---|---|
| size | パネルの初期サイズ（単位はpx、または%） |
| min-size | パネルの最小サイズ（単位はpx、または%） |
| max-size | パネルの最大サイズ（単位はpx、または%） |
ui-layout属性の付いた要素の子要素では、すべてui-layout-container属性を付与してください。
