【Pando“パンドゥ”開発秘話】intro.jsでチュートリアル

株式会社クインテット

フォローする

株式会社クインテット　デザイナーの小貫です。
突然ですが、皆様は説明書をよく読むタイプでしょうか？

自分は正直あまり読みませんが、それはあくまで使い慣れている製品の話。あまり馴染みのない製品だとまずは説明書から入ります。

今回はそんな説明書ならぬチュートリアルをサイトに追加するライブラリ、「intro.js」の導入事例について、Pando開発秘話として紹介していきます。

「intro.js」とは

「intro.js」とは、MITライセンスのjQueryライブラリです。

指定した要素にポップアップで説明を出す事ができる他、色々なオプションで説明の出し方を変える事も可能です。

サンプル（Demoボタンを押すと始まります）

簡単な導入方法紹介

必要なjs、cssを読み込んだら早速、表示内容の設定をしていきます。
下記2つの方法で記述することができます。

HTMLのdata属性で記述
Javascript内に記述

HTMLのdata属性で記述する場合

<div data-intro="ここにチュートリアルのテキストを記述" data-step="何番目か記述"></div>

このようにdata-introとdata-stepの組み合わせで書きます。

Javascript内に記述する場合

introJs().setOptions({
    'steps': [{
        element: 'ターゲットになるidやclass',
        intro: 'ここにチュートリアルのテキストを記述',
    }, {
        element: 'ターゲットになるidやclass',
        intro: 'ここにチュートリアルのテキストを記述',
    },{
        …略…
    }];
});

Javascript内に記述する場合、HTML側にはidかclassを振っておき、内容についてはjsのほうでまとめます。
少々手間がかかるものの、チュートリアル内容を追って編集する際にはこちらのほうが便利です。

Pandoでの導入事例

当サイトPandoでは、マイページにて「intro.js」を使用しています。
初回アクセス時のみチュートリアルが表示され、スキップor完了した場合は再表示ボタンからもう一度見られる…という仕様になっています。

導入にあたって工夫した点

ハイライトされた箇所がスマホで白くなる問題に対応

原因は、iOS版Safariにて、スクロール時に下部メニューバーを固定させるために使っていたCSSのクラスでした。「intro.js」実行中はそのクラスを一時的に削除して対応しています。

チュートリアル完了時のみボタンデザインを変える

オプションでtooltipにクラスを割り当てられます。tooltipClass: 'introjs-finish'という記述でステップ完了時のみ.introjs-finishクラスを付与し、CSS側でボタンデザインを変えています。

Step番号の位置調整

Step番号の位置を調整したいとの要望があったため、上記のtooltipClassで変えたいステップのみクラスを割り当てて表示位置を変えています。
ハイライトの中央にStep番号を持ってくるパターン等を追加しました。

記述位置が散らばってて修正しにくい問題に対応

文面の調整を行う必要があったのですが、しばらくたつと「何処に書いたっけ…？」状態になって探すのもひと手間なので、記述を全部まとめてしまいました。
このようにまとめて一つのファイルにしてあります。

var stepsMypage = [
    {
        intro: 'マイページの基本的な使い方をご紹介します。',
    }, {
        element: '#js_tutorial__user_image',
        tooltipClass: 'margin_l_small',
        intro: 'ユーザーアイコンです。正方形の画像が綺麗に収まります。',
        highlightClass: 'introjs-num-inset',
    }, {
        element: '#js_tutorial__user_background_image',
        tooltipClass: 'margin_s_medium',
        intro: '個人ページで表示される背景画像を設定できます。',
        highlightClass: 'introjs-num-inset',
    }, {
        …略…
    }, {
        element: '#js_tutorial__post',
        intro: '記事の投稿はこちらから。',
        tooltipClass: 'introjs-finish introjs-fixed',
        hideNext: true,
    }
];

離脱（スキップ）or完了した時の処理を考える

離脱や完了時に「もう一度チュートリアルを見る」案内を出そうと思って調べたところ、「introJs.onbeforeexit()」というAPIがあり、これを使うことにしました。
「introJs.onExit()」と似ていますが、このAPIは完了だけでなく、離脱する際にも実行されます。
実際のコードでは、これを使ってalertでもう一度チュートリアルを見る際の案内を出す仕組みになっています。
その際、完了フラグを持たせることで２度目のアクセスからはチュートリアルが表示されなくなります。フラグ処理の手法は色々とありますが開発部に依頼した部分ですので、ここでは割愛します。

WYSIWYGエディタとの組み合わせ

当サイトで使用しているWYSIWNGエディタ（記事などの投稿部分）にもチュートリアルを出すことになったのですが、各機能のボタン1つ1つにはidが振られているため簡単に出せるものの、複数のボタンを束ねた状態を作るのが難しい…という問題が発生しました。
エディタ側にあまり自由度がなく、HTMLコードを直に弄るのが不可能だったためです。
そこで使ったのがjQueryの「wrapAll();」でした。
特定idの要素を束ね、divで括って新たにidを付与、divのidに対して「intro.js」を実行することでチュートリアルを出しています。