目次


Intro.js を使用して JavaScript アプリにインタラクティブなマニュアルを追加する

Web アプリのフィーチャーのガイド付きツアーをいまどきの動的な手法で提供する

Comments

新しい Web アプリ (あるいは、すでに使用しているアプリの新しいフィーチャー) を短時間で使いこなせるようになりたいユーザーは、概して長々としたマニュアルやガイドを読もうとはしないものです。アプリの機能を紹介して説明している間、ユーザーの注意を引き付けておくという点では、製品デモは静的なマニュアルよりも効果があります。特に効果的なのは、製品のフィーチャーの説明とデモに従って実際にユーザーがアプリを操作できるガイド付きツアーです。

Intro.js ライブラリーは、JavaScript アプリのマニュアル作成に、革新的でインタラクティブな手法を採っています。このライブラリーには、Web アプリの機能とフィーチャーをユーザーに案内するステップバイステップのツアーを作成する上で必要となる、JavaScript と CSS (Cascading Style Sheets) のファイルが用意されています。Intro.js を使用すれば、状況に応じた情報をアプリに統合することができ、ユーザーはアプリの環境をナビゲートしながらその情報を見ることができます。さらに、このライブラリーを AngularJS および Node.js と統合すると、開発環境の中から操作情報を追加できるようになります。UI デザイナーと JavaScript 開発者はどちらも、アプリの価値をいまどきの単純かつ動的な手法で高めるために Intro.js の機能とリソースを利用することができます。

Intro.js の機能は、あらゆる Web サイトの UI に簡単に実装できるようになっています。このライブラリーは無料のオープンソースであり、Internet Explorer、Chrome、Firefox の最新バージョンに対応しています。このチュートリアルでは、Intro.js の主なフィーチャーを紹介し、ガイド付きツアーを実装する例をステップバイステップで説明します。

Intro.js のナビゲーション

Intro.js は、以下の一般的なナビゲーション・フィーチャーを実装します。

  • ツアーの開始: Intro.js ライブラリーに用意されているサンプル・ボタンを使って、ツアーの初期化を定義することができます。ツアーの開始にユーザーの注意を引くために、独自のボタン (例: ツアーの開始のサンプル・アイコンのスクリーンショット) をデザインすることもできます。
  • ツアーのステップ: ユーザーがナビゲートすることになる、ツアー完了までのステップを指定する必要があります。これらのステップは、ツアー・ファイルの中で一連の HTML 要素を使って指定します。これについては、後で詳しく説明します。Intro.js ライブラリーではデフォルトで、ナビゲーション・ボタンとして「Prev (戻る)」(「Previous」の短縮形) と「Next (次へ)」というラベルのボタン 「Prev (戻る)」と「Next (次へ)」というラベルのナビゲーション・ボタンのスクリーンショット が指定されます。
  • ツアーの終了または完了: ツアーのすべてのステップで、Intro.js は残りのステップをスキップするオプションをユーザーに提供します。ユーザーはボタン (デフォルトで「End tour (ツアー終了)」というラベルが付けられたボタン) 「End tour (ツアー終了)」ボタンのスクリーンショット をクリックすることで、ツアーを途中で終了することができます。ユーザーがツアーの最終ステップに到達すると、「End tour (ツアー終了)」ボタンに代わって、ライブラリーによって実装された「Done (完了)」というラベルのボタン 「Done (完了)」ボタンのスクリーンショット が表示されます。「Done (完了)」ボタンをクリックすると、ツアーが完了します。

次は、サンプル・アプリのツアーがどのようなものかを紹介します。

Intro.js による基本ツアー

このチュートリアルのサンプル・アプリのプロトタイプは、Node.js と AngularJS を使用して、JavaScript で作成された Web サイトで構成されています。この My Travel App は、旅行を管理できるよう旅行者を支援するアプリです。アプリの初期ページの外観は以下のとおりです。

My Travel App のホーム・ページのスクリーンショット
My Travel App のホーム・ページのスクリーンショット

My Travel App には、旅行者、グループ、言語を管理するための「Travellers Information (旅行者情報)」というメニューがあります。

「Travellers Information (旅行者情報)」メニューのスクリーンショット
「Travellers Information (旅行者情報)」メニューのスクリーンショット

My Travel App ユーザーを対象とした「Getting Started (はじめに)」、「Navigate My Travel App (My Travel App のナビゲーション)」、「Manage Travellers (旅行者の管理)」という 3 つのガイド付きツアーを実行するために、新しいメニュー「Launch Tour (ツアーの開始)」を作成しました。

「Getting Started (はじめに)」、「Navigate My Travel App (My Travel App のナビゲーション)」、「Manage Travellers (旅行者の管理)」ツアーのスクリーンショット
「Getting Started (はじめに)」、「Navigate My Travel App (My Travel App のナビゲーション)」、「Manage Travellers (旅行者の管理)」ツアーのスクリーンショット

デモする目的で実装してあるガイド付きツアーは、「Manage Travellers (旅行者の管理)」のみです (「Getting Started (はじめに)」、「Navigate My Travel App (My Travel App のナビゲーション)」の選択項目はプレースホルダーのみです)。「Manage Travellers (旅行者の管理)」ツアーでは、ユーザーが「Travellers Information (旅行者情報)」メニューから旅行者、グループ、言語を管理するために選択できる各ステップのマニュアルを作成してあります。

ツアーの機能をライブ・デモで紹介するために、「Bluemix に「Hello World」Web ページをデプロイする」で説明されている手順に従って My Travel App を IBM Bluemix にデプロイした後、既存の My Travel App プロジェクト・コードを適用しました。

My Travel App を起動して、「Manage Travellers (旅行者の管理)」ツアーを試してみてください。その後、このチュートリアルの続きを読んで、私たちが Intro.js を使ってこのツアーをプログラミングした実際の方法を学んでください。

「Manage Travellers (旅行者の管理)」ツアーを作成する

これから、Intro.js ライブラリーを使用して My Travel App の「Manage Travellers (旅行者の管理)」ガイド付きツアーを作成する手順を最初から最後まで説明します。動画デモ「Creating the tour」に従っても構いません。

Intro.js ライブラリーをプロジェクトに追加する

サンプル・アプリでは Node.js コンポーネントと bower コンポーネントを使用しているため、以下の bower インストーラーを使用して Intro.js をインストールすることで、このライブラリーをローカルで取得することができます。

bower install intro.js

Intro.js ライブラリーを bower.json パッケージに追加することもできます。それには、以下のように dependencies セクションにこのライブラリーを含めます。

"dependencies": {
...
"angular-intro.js": "~1.1.3",
...
}

Intro.js をダウンロードしてインストールする方法の詳細については、GitHub の Intro.js プロジェクト・ページ を参照してください。

HTML を更新して Intro.js ライブラリーを Web サイトに追加する

Intro.js コードを HTML ページに組み込む方法は以下のとおりです。

<li>
 <a role="menuitem" tabindex="-1" id="travellersTourController"
   ng-controller="TravellersTourController"
   ng-click="startTravellersTour()">
 <i class="header-nav-icon" ng-include="'/static/icon/travel_icon.svg'"></i>
   <span translate="NAV_TOUR_MANAGE_TRAVELLERS"></span>
 </a>

上記のコードに含まれる idng-controllerng-click の値は、このサンプルの実装に固有の値です。これらの要素については、追って説明します。

コントローラー・ファイルを作成する

サンプル・アプリでは、AngularJS と、TravellersTourController という新しいコントローラーを使用しています。このコントローラーは、Intro.js ライブラリーに関連するすべてのコードを格納するために新しく作成したものです。このコントローラー・コードには、以下の役割があります。

  1. Intro.js ライブラリーの使用を宣言する
  2. Intro.js を起動する
  3. ガイド付きツアーで表示するステップを定義する
  4. ツアーを終了する

TravellersTourController のコードを入手するには、「ダウンロード」を参照してください。

Intro.js の変数を定義する

ツアーのステップを定義する前に、コントローラー・コードで intro という新しい変数を定義します。

var intro = Intro.js();

これで、コントローラーに含まれる関数とイベントが、intro 変数を使用して Intro.js ライブラリーを参照できるようになります。

ツアーのステップを定義する

ツアーのステップを指定するために、新しい Intro.js オブジェクトを作成します。このオブジェクト内で、ツアーのいずれかのステップが含まれたオブジェクトをステップ順に要素として持つ配列を定義します。

$scope.IntroOptions = {
  steps: [
    {
      element: '#toolbar-travellers-info-icon',
      intro: "<div class='tour-header'>Open Travellers Information Menu</div>" +
      "<div class='tour-step'>Click <b>" + TOUR.iconUsers + " Travellers Information</b> 
          icon to open the " +
      "travellers information menu.<br><br>" +
      "Use this menu to manage travellers, travellers groups " +
      "and also the language for each traveller.</div>",
      position:'left'
    },
    {
      element: '#travellersmenu',
      intro: "<div class='tour-header'>Travellers list</div>" +
      "<div class='tour-step'>Click <b>Travellers</b> 
          to view a list of travellers that belong to " +
      "the configured trips.</div>", 
      position: 'left'
    },
    {
      element: '#travellersmenu',
      intro: "<div class='tour-header'>Add new travellers</div>" +
      "<div class='tour-step'>You can also add a new traveller to the trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing travellers. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add travellers</b> at the " +
      "right corner of the menu.</div>",
      position: 'left'
    },
    {
      element: '#groupsmenu',
      intro: "<div class='tour-header'>Groups</div>" +
      "<div class='tour-step'>This tab allows travellers to create groups and 
          subgroups of travellers. " +
      "Any traveller that is already part of a group can add new travellers and subgroups.</div>",
      position: 'left'
    },
    {
      element: '#groupsmenu',
      intro: "<div class='tour-header'>Add new groups</div>" +
      "<div class='tour-step'>You can also add a new group of travellers to the 
          trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing groups. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add groups</b> 
          at the right corner of the menu.</div>",
      position: 'left'
    },
    {
      element: '#languagesmenu',
      intro: "<div class='tour-header'>Languages</div>" +
      "<div class='tour-step'>By default, users have <b>English</b> 
          language configured as the preferred language. "+
      "Travellers can add new languages to My Travel App at any time.</div>",
      position: 'left'
    },
    {
      element: '#tour-icon-dropdown',
      intro: "<div class='tour-header'>End of Travellers Info Tour</div>" + 
      "<div class='tour-step'>See this tour any time by clicking " + 
          TOUR.iconTour + " in the upper right toolbar </div>",
      position: 'left'
    }
  ],
  showStepNumbers: false,
  exitOnEsc:true,
  showBullets: false,
  scrollToElement:true,
  nextLabel: 'Next',
  prevLabel: 'Prev',
  skipLabel: 'End tour',
  doneLabel: 'Done'
};

ステップごとに、以下の要素を定義する必要があります。

  • ターゲット element: これは、ステップが参照する HTML 要素の ID です。
  • intro 要素: ツアーのステップに対応する HTML コンテンツで構成されます。
  • position 要素: ページ内のステップの位置を指定します。

次の 7 つのスクリーンショットと付随するコード・セグメントで、「Manager Travellers (旅行者の管理)」ツアーの Intro.js オブジェクト内に定義された各ステップが、elementintro、および position のシーケンスによってどのように表示されるかを示します。

ツアーの最初のステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{element: '#toolbar-travellers-info-icon',
      intro: "<div class='tour-header'>Open Travellers Information Menu</div>" +
      "<div class='tour-step'>Click <b>" + TOUR.iconUsers + " Travellers Information</b> 
          icon to open the " +
      "travellers information menu.<br><br>" +
      "Use this menu to manage travellers, travellers groups " +
      "and also the language for each traveller.</div>",
      position:'left'
}
ツアーの最初のステップのスクリーンショット
ツアーの最初のステップのスクリーンショット

ツアーで旅行者を一覧表示する方法を説明するステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#travellersmenu',
      intro: "<div class='tour-header'>Add new travellers</div>" +
      "<div class='tour-step'>You can also add a new traveller to the trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing travellers. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add travellers</b> at the " +
      "right corner of the menu.</div>",
      position: 'left'
}
ツアーで旅行者を一覧表示する方法を説明するステップのスクリーンショット
ツアーで旅行者を一覧表示する方法を説明するステップのスクリーンショット

ツアーで新しい旅行者を追加する方法を説明するステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#travellersmenu',
      intro: "<div class='tour-header'>Add new travellers</div>" +
      "<div class='tour-step'>You can also add a new traveller to the trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing travellers. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add travellers</b> at the " +
      "right corner of the menu.</div>",
      position: 'left'
}
ツアーで新しい旅行者を追加する方法を説明するステップのスクリーンショット
ツアーで新しい旅行者を追加する方法を説明するステップのスクリーンショット

ツアーで「Groups (グループ)」タブについて説明するステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#groupsmenu',
      intro: "<div class='tour-header'>Add new groups</div>" +
      "<div class='tour-step'>You can also add a new group of travellers to the 
          trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing groups. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add groups</b> 
          at the right corner of the menu.</div>",
      position: 'left'
}
ツアーで「Groups (グループ)」タブについて説明するステップのスクリーンショット
ツアーで「Groups (グループ)」タブについて説明するステップのスクリーンショット

ツアーで新しいグループを追加する方法を説明するステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#groupsmenu',
      intro: "<div class='tour-header'>Add new groups</div>" +
      "<div class='tour-step'>You can also add a new group of travellers to the 
          trips you have. Use the " +
      "<b>Filter by search</b> field to look for existing groups. "+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add groups</b> 
          at the right corner of the menu.</div>",
      position: 'left'
}
ツアーで新しいグループを追加する方法を説明するステップのスクリーンショット
ツアーで新しいグループを追加する方法を説明するステップのスクリーンショット

ツアーで「Languages (言語)」タブについて説明するステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#languagesmenu',
      intro: "<div class='tour-header'>Languages</div>" +
      "<div class='tour-step'>By default, users have <b>English</b> 
          language configured as the preferred language. "+
      "Travellers can add new languages to My Travel App at any time.</div>",
      position: 'left'
}
ツアーで「Languages (言語)」タブについて説明するステップのスクリーンショット
ツアーで「Languages (言語)」タブについて説明するステップのスクリーンショット

ツアーの最後のステップでは、Intro.js オブジェクト・コードの以下の部分を使用します。

{
      element: '#tour-icon-dropdown',
      intro: "<div class='tour-header'>End of Travellers Info Tour</div>" + 
      "<div class='tour-step'>See this tour any time by clicking " + 
          TOUR.iconTour + " in the upper right toolbar </div>",
      position: 'left'
}
ツアーの最後のステップのスクリーンショット
ツアーの最後のステップのスクリーンショット

ツアーのその他の要素を定義する

Intro.js の変数にステップ・オブジェクトを設定する

「Manage Travellers (旅行者の管理)」ツアーのすべてのステップと追加のツアー要素を定義した後は、前に作成した intro 変数に Intro.js のオブジェクトを設定します。そのために使用するメソッドは、setOptions() です。

intro.setOptions($scope.IntroOptions);

Intro.js を起動する

HTML メニューに、コントローラーと、ツアーの出発点として実行する関数の両方を指定します。サンプル・アプリでは、startTravellersTour() 関数を指定しています。

$scope.startTravellersTour = function() {
     startTravellersPath();
     intro.start();
};

startTravellersTour() 関数には、Intro.js を起動するための呼び出しを含めます。こうするだけでツアーを開始できるようになりますが、このチュートリアルでは Intro.js を開始する前に別の関数も実行します。これは、jQuery を使用した startTravellersPath() 関数により、ツアーが開始される際に、アプリの適切なメニューが表示されるようにするためです。

var startTravellersPath = function() {
$timeout(function(){
    $("#toolbar-travellers-info-button").click();
    $timeout(function(){
        $("#loadTravellersMenu").click();
    },500);
    $('.dropdown').removeClass('open');
},500);
};

ステップの遷移が適切に行われるようにする

ツアーを行っている間、「Travellers Information (旅行者情報)」メニューのタブをユーザーがナビゲートできるようにしなければなりません。そこで、onchange イベントも定義して、ツアーの実行中に各ステップで適切なタブが表示されるようにします。

intro.onchange (function(targetElement) {
    if (targetElement.id === 'travellersmenu') {
        $("#loadTravellersMenu").click();
    }
    if (targetElement.id === 'groupsmenu') {
        $("#loadGroupsMenu").click();
    }
    if (targetElement.id === 'languagesmenu') {
       $("#loadLanguagesMenu").click();
    }
});

Intro.js を終了する

ツアーの実行を終了するために、onexit イベントと oncomplete イベントを定義して、ツアーが適切に終了されるようにします。

intro.onexit (function(targetElement) {
    $("#toolbar-travellers-info-button").click();
});
intro.oncomplete (function(targetElement) {
    $("#toolbar-travellers-info-button").click();
});

テンプレート内でコントローラー・ファイルを宣言する

最後に、新しいコントローラーを使用するには、その前に EJS テンプレート・ファイル内でコントローラーをカスタム・ファイルとして宣言する必要があります。

<script src="/static/js/guided_tour/travellersTourController.js"></script>

まとめ

このチュートリアルでは、ユーザー・マニュアル作成へのアプローチとして、Intro.js ライブラリーによるインタラクティブかつ動的な手法を紹介し、このライブラリーを使用してガイド付きツアーを作成するために必要なすべてのステップを説明しました。Intro.js は、あらゆる Web サイトに簡単に統合することができます。このチュートリアルで説明したように、Bluemix クラウド内で実行される Web アプリも例外ではありません。Bluemix と Intro.js を併せて利用することで、Web アプリのユーザー・エクスペリエンスを大幅に強化することができます。

謝辞

Bluemix に My Travel App をデプロイする際にサポートしてくれた Leonardo Faccio Demo 氏に深く感謝いたします。


ダウンロード可能なリソース


関連トピック

  • Intro.js:Intro.js Web サイトにアクセスしてください。
  • GitHub 上にある Intro.js: Intro.js GitHub リポジトリーにアクセスしてください。
  • 「Creating Packages - bower.json」: bower を使用してパッケージを作成する方法を学んでください。
  • 「Understanding Controllers」: AngularJS Developer Guide のこの部分を読んで、Angular におけるコントローラーの役割を理解してください。
  • Intro.js: Intro.js の最新バージョンをダウンロードしてください。
  • EJS: オープンソースの JavaScript テンプレート・ライブラリーである EJS をダウンロードしてください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source, Cloud computing
ArticleID=1023349
ArticleTitle=Intro.js を使用して JavaScript アプリにインタラクティブなマニュアルを追加する
publish-date=12102015