なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
第9回となる今回は、画像（セット）／音声ファイルを扱う、以下のライブラリについて紹介します。
- UI Bootstrap（Carousel）：複数の画像をカルーセルとして表示
- Angular Fullscreen：画像を全画面モードで表示
- ngAudio：音声ファイルを再生／操作
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリでデータを視覚的に見せる方法を知りたい方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.8
- UI Bootstrap 0.14.3
- Angular Fullscreen 1.0.1
- ngAudio 1.7.1
- Chrome 46
- Firefox 42
- Internet Explorer 11
画像セットをカルーセル表示する - UI Bootstrap（Carousel）
カルーセルとは、複数の画像を横方向にスライド表示するしかけのこと。英語では、もともとメリーゴーランド、空港などに設置されたコンベアーの意味で、それらが動作する様子になぞらえて、そう呼ばれます。スライドショーとも言います。
UI BootstrapのCarouselウィジェットを利用することで、このようなカルーセルを限りなくコーディングレスで実装できます。UI Bootstrapは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-bootstrap bootstrap
具体的なサンプルも見ていきます。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）UI BootstrapとBootstrap本体をインポート -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/carousel.js"></script>
</head>
<body ng-controller="MyController">
<!-- （4）カルーセル全体を定義-->
<uib-carousel interval="interval" style="width: 450px;">
<!-- （3）表示する各画像を設定-->
<uib-slide ng-repeat="image in images">
<img ng-src="{{image.path}}" style="margin:auto;" />
<div class="carousel-caption">
<h3>{{image.title}}</h3>
</div>
</uib-slide>
</uib-carousel>
</body>
</html>
// （2）ui.bootstrapモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
$scope.interval = 5000;
$scope.images = [
{
path: 'photo/Sunflower.jpg',
title: 'ひまわり畑'
},
{
path: 'photo/Sheep.jpg',
title: '2匹のひつじ'
},
{
path: 'photo/Rabbit.jpg',
title: 'うさぎたち'
}
];
}]);
UI Bootstrapを利用するには、UI Bootstrap（ui-bootstrap-tpls.min.js）とともに、Bootstrap本体（bootstrap.min.css）もインポートしておきます（1）。また、アプリモジュール（myApp）からはui.bootstrapモジュールへの依存関係を宣言して、UI Bootstrapを有効化します（2）。
カルーセルに表示する画像は、<uib-slide>要素で表します（3）。画像に対して、タイトル／説明を付与する場合は、<div class="carousel-caption">要素で表します。サンプルでは、あらかじめ用意したスコープ変数imagesをもとに、ng-repeatディレクティブを使って<slides>要素を繰り返し生成しています。が、もちろん、<uib-slide>要素を画像の数だけ列挙しても構いません。
あとは、<slide>要素（群）を<uib-carousel>要素で括るだけです（4）。スライドが切り替わる時間間隔（ミリ秒）は、interval属性で指定します。
