クイックツアーの実装

Salesforceのいくつかの機能では、初めて使用する際にクイックツアーと呼ばれる、
吹き出しによるチュートリアルが表示されます。

このクイックツアーのような吹き出しに近いものを
Visualforce上で表示する方法を紹介します。

Intro.js

Intro.js
http://usablica.github.io/intro.js/

今年の５月頃にはてブで話題になっていたJavaScriptのプラグインです。
このプラグインの詳細は下記のサイトで詳しくご紹介されています。

実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件
http://blog.livedoor.jp/sasata299/archives/51891797.html

静的リソースのアップロード

このIntro.jsのJavaScriptとCSSをZIPに圧縮し、
静的リソースとしてアップロードします。

Visualforceページの作成

Visualforceページで下記のように実装します。

実装結果

Visualforceページ内の右上部にリンクを設置しました。
こちらをクリックします。

吹き出しと説明文が表示され、説明箇所以外が暗転します。

[進む]をクリックすると、次の説明箇所へ進みます。

divタグが増えてしまうのが少し残念ですが、簡単にクイックツアーが実装できます。