Webサイトの説明をまとめて表示してくれるヘルプライブラリ「Chardin.js」
Chardin.jsはWebサイトの画面上に項目の説明を表示するJavaScriptライブラリです。
スマートフォンアプリをはじめ、Webアプリケーションで最初に表示した時に説明を表示するタイプのWebサイトが増えてきました。凝ったものもありますが、もっとシンプルに実装したい時に使えそうなのがChardin.jsです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 14.51.58.1364968750.png)
最初の表示です。ボタンを押します。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 11.51.53.1364968764.png)
各DOMごとに説明が表示されます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 11.52.18.1364968778.png)
ソースを見ると分かりますが、data-*で表示する内容を指定しています。
Chardin.jsは説明用のテキストとその表示位置（上下左右）、さらに一度表示した後ボタンを非表示にしたり、逆に別な要素を表示したりすることもできます。汎用的ではないかも知れませんが、手軽にチュートリアルやヘルプ画面を実現するのに便利そうです。
Chardin.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
スマートフォンアプリにおいて最初のチュートリアルが分かりやすいかどうかで利用率が全く変わってきます。ボタンがアイコン化され、何をしたら良いか分からないものが多いからです。さらにゲームなどはチュートリアルを通して遊び方を叩き込みます。
ただしチュートリアルを経たからといって、アプリの使い方を全て理解しているとは思わないことです。ユーザは自分の必要な機能だけを使いたいと思うものです。チュートリアルと適切なヘルプ、その組み合わせが大事です。