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

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

導入手順

  • 開発環境 は 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.jsangular-intro.js がインストールされます。

index.htmlから読み込む

  • CSSファイルの読み込み

  • JavaScriptファイルの読み込み

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

AngularJSに組み込む

  • app.js を編集します。

チュートリアルの設定をする(Controller側)

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

チュートリアルの設定をする(View側)

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

  • この例だと、ページ表示時に自動でチュートリアルを表示(ng-intro-autostart="true")するようにしています。任意のタイミングへ変更したい場合はここを false にして、実行したいタイミングで View か Controller から CallMe() メソッドをコールすればOKです。

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

  • 以上で完了です。$grunt serve して動作を確認してみます。

注意

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

ほか

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


Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16271409 bytes) in /home/yumeco/www/prod/wp-includes/wp-db.php on line 1171