BootstrapのPopoverでアプリの道案内

先日のRailsログ可視化でも話ましたが，学生プロジェクトで学内向けのRailsアプリを開発しています．
もうすぐオープンベータなので「はじめてのユーザに使い方を案内する方法」を考えてみました．

Popover(吹き出し)を使う

CSSフレームワークの「Bootstrap」では，Popoverという機能が提供されています．
これはボタンなどに表示する「吹き出し」を提供しています．

今回はこのPopoverをアプリの動線上に順に表示することで，ユーザを案内します．

サンプル

案内を開始するボタンと，Popoverを表示するボタンを設置します．
「はじめての人はクリック」ボタンを押すと「新規登録」にdata-contentの内容でPopoverを出します．

<button class="btn btn-warning" id="new-btn-1">はじめての方はクリック</button>
<a class="btn btn-primary" id="new-pop-1" data-content="アプリを利用するために、アカウントを登録してください。" href="/users/sign_up">新規登録</a>

更に，ページ遷移後も続けて案内できるように，Cookieに案内中であることを記録します．
expireがCookieの有効期限で，ここでは1000 * 300 = 5分にしています．

$( '#new-btn-1' ).on 'click', ->
  expire = new Date()
  expire.setTime expire.getTime() + 1000 * 300
  document.cookie = 'newcomer=yes; expires=' + expire.toUTCString()
  $( '#new-pop-1' ).popover 'show'

遷移先のページで次のボタン('#new-pop-2')にPopoverする場合は，Cookieの情報で判断します．

if document.cookie.indexOf( 'newcomer=yes' ) isnt -1
  $( '#new-pop-2' ).popover 'show'   

実際の画面はこんな感じ．
後輩からの要望で，Popoverは目立つ色に変えました．

案内完了時

案内が完了したときにCookieを削除します．
有効期限を過去にしてCookieを上書きすれば良いようです．

if document.cookie.indexOf( 'newcomer=yes' ) isnt -1
  expire = new Date()
  expire.setTime 0
  document.cookie = 'newcomer=no; expires=' + expire.toUTCString()