AngularJSアプリケーションにチュートリアルを簡単に導入する #JavaScript

Intro.jsをAngularJSのDirectiveにしたAngular Intro.jsを利用して、簡単にチュートリアルを実現する方法を試してみました。

こんなのできました ⇒ http://hkusu.github.io/AngularJS_intro_demo

導入手順

開発環境は Mac OS X (Mavericks)とします。
今回は Yeoman の generator-angular で作成した雛型アプリケーションが既にある前提で、Bowerで angular-intro.js を追加する手順を説明します。
- 雛型アプリケーションを用意する方法については、前に投稿したこのあたりを参考にしてください。

Bower で angular-intro.js をインストール

一応、bower search で確認
```
$ bower search intro
```
この中の angular-intoro.js をインストール
```
$ bower install angular-intro.js --save
```
すると intor.js と angular-intro.js がインストールされます。

`index.html`から読み込む

CSSファイルの読み込み

index.html

<link rel="stylesheet" href="bower_components/intro.js/introjs.css" />

JavaScriptファイルの読み込み

index.html

<script src="bower_components/intro.js/intro.js"></script>
<script src="bower_components/angular-intro.js/src/angular-intro.js"></script>

※もしくはGruntで $grunt bower-install とすると自動で index.html に記載が追加されます。

AngularJSに組み込む

app.js を編集します。

チュートリアルの設定をする（Controller側）

公式のサンプルを元に、チュートリアルを仕込みたいページのコントローラに設定を書きます。
今回は AngularJS雛型環境のTOPページである scripts/controllers/main.js に書いてみます（ほぼ公式のコピペ）。

チュートリアルの設定をする（View側）

TOPページである views/main.html に書きます。

<div ng-controller="MainCtrl"
     ng-intro-options="IntroOptions" ng-intro-method="CallMe"
     ng-intro-autostart="true">

〜

</div>

この例だと、ページ表示時に自動でチュートリアルを表示（ng-intro-autostart="true"）するようにしています。任意のタイミングへ変更したい場合はここを false にして、実行したいタイミングで View か Controller から CallMe() メソッドをコールすればOKです。
- Viwe からコールする例：<span ng-click="CallMe();">○○</span>
- Controller からコールする例：$scope.CallMe();
- 実際の案件では、二回目を表示しないように、見たフラグをサーバかWEBストレージ、もしくは cookie に保存する感じかと。

チュートリアル時にフォーカスしたいHTML要素に、id="step1" 〜を指定していきます。例えば、

<div id="step1" class="header">
  <ul class="nav nav-pills pull-right">
    <li class="active"><a ng-href="#">Home</a></li>
    <li><a ng-href="#"><span id="step5">About</span></a></li>
    <li><a ng-href="#">Contact</a></li>
  </ul>
  <h3 class="text-muted">angular intro test</h3>
</div>

<div class="jumbotron">
  <h1>'Allo, 'Allo!</h1>
  <p id="step2" class="lead">
    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
    Always a pleasure scaffolding your apps.
  </p>
  <p id="step3"><a class="btn btn-lg btn-success" ng-href="#">Splendid!</a></p>
</div>

以上で完了です。$grunt serve して動作を確認してみます。
- デモ ⇒ http://hkusu.github.io/AngularJS_intro_demo

注意

CSSフレームワークを利用している、またははCSSの組み方によっては、フォーカスがずれてしまうようです。

ほか

今回のソースはこちら（GitHub）に置いておきます。
- https://github.com/hkusu/AngularJS_intro_demo
自分の作ったアプリケーションにも導入してみました。
- http://hkusu.github.io/gp-kao-catalog/
  - [つかいかた]リンクを押してみてください。
- ただ上にも書いたとおりCSSフレームワークの影響かフォーカスがずれてしまうので、それとなくごまかしてます^^;
同じ投稿をゆめみスタッフブログにも書きました。

AngularJSアプリケーションにチュートリアルを簡単に導入する