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


[Intro.js](http://usablica.github.io/intro.js/)をAngularJSのDirectiveにした[Angular Intro.js](http://code.mendhak.com/angular-intro.js/example/index.html)を利用して、簡単にチュートリアルを実現する方法を試してみました。

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

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/07/スクリーンショット-2014-07-01-17.27.261.png)

## 導入手順

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

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

- 一応、`bower search` で確認

	```shell
	$ bower search intro
	```

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/07/スクリーンショット-2014-07-01-16.42.39.png)

- この中の `angular-intoro.js` をインストール

	```shell
	$ bower install angular-intro.js --save
	```

- すると `intor.js` と `angular-intro.js` がインストールされます。

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/07/スクリーンショット-2014-07-01-15.18.36.png)

### `index.html`から読み込む

- CSSファイルの読み込み

	```html:index.html
	<link rel="stylesheet" href="bower_components/intro.js/introjs.css" />
	```

- JavaScriptファイルの読み込み

	```html: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` を編集します。

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/07/スクリーンショット-2014-07-01-15.24.25.png)

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

- [公式のサンプル](https://github.com/mendhak/angular-intro.js/tree/master/example)を元に、チュートリアルを仕込みたいページのコントローラに設定を書きます。
- 今回は AngularJS雛型環境のTOPページである `scripts/controllers/main.js` に書いてみます（ほぼ公式のコピペ）。

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/07/スクリーンショット-2014-07-01-16.20.02.png)

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

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

	```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"` 〜 を指定していきます。例えば、

    ```html
    <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フレームワークの影響かフォーカスがずれてしまうので、それとなくごまかしてます^^;
- 同じ投稿を [ゆめみスタッフブログ](http://staffblog.yumemi.jp/) にも書きました。