Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MB)AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。ngAudio再生プレイヤーを実装するまとめ参考資料なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。はじめに第9回となる今回は、画像(セット)/音声ファイルを扱う、以下のライブラリについて紹介します。検証環境この記事では、以下の環境でサンプルの動作を確認しています。Bootstrap(Carousel)カルーセルとは、複数の画像を横方向にスライド表示するしかけのこと。英語では、もともとメリーゴーランド、空港などに設置されたコンベアーの意味で、それらが動作する様子になぞらえて、そう呼ばれます。スライドショーとも言います。BootstrapのCarouselウィジェットを利用することで、このようなカルーセルを限りなくコーディングレスで実装できます。Bootstrapは、Bowerを利用することで、以下のコマンドでインストールできます。bootstrap具体的なサンプルも見ていきます。Bootstrap(ui-bootstrap-tpls.min.js)とともに、Bootstrap本体(bootstrap.min.css)もインポートしておきます(1)。Bootstrapを有効化します(2)。カルーセルに表示する画像は、<uib-slide>要素で表します(3)。class="carousel-caption">要素で表します。サンプルでは、あらかじめ用意したスコープ変数imagesをもとに、ng-repeatディレクティブを使って<slides>要素を繰り返し生成しています。<uib-slide>要素を画像の数だけ列挙しても構いません。あとは、<slide>要素(群)を<uib-carousel>要素で括るだけです(4)。スライドが切り替わる時間間隔(ミリ秒)は、interval属性で指定します。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。