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

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