ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

introjs

Labels:  JavaScript, ツール/ライブラリ 投稿者:神庭 良輔

5分で完了!Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方

こんにちは!

ランサーズ株式会社の開発部でエンジニアをしております、神庭(かんば)です。
最近、SEOが楽しくて仕方がないお年頃です!

 

先日、サービスの操作説明をするために、操作マニュアル(チュートリアル)ようなものを作りたいって要望があり、少しだけ調べる機会がありました。

操作マニュアル(チュートリアル)といえば、前職の受託システム会社で働いていた時では、ExcelやWordを駆使してゴリゴリ頑張って作っていました。

ただ、画像や文字・図形だけで作られた操作マニュアルでは、細かいところの説明や動きを、エンドユーザー様にうまく伝えることが難しく、電話で補足しないと伝わらないってことも何度かありました。(私のドキュメント作成能力の問題かもしれませんが…)

ほかにも、仕様変更や機能拡張などでシステムは日々進化していっているのに、操作マニュアルやチュートリアルは、古いままって状態もありました。ご経験ありますよね・・・?

今回調べるにあたり、そういった背景やWebサイト/Webサービスの説明をExcelやWordで作るよりも、もっと良い方法があるはずと思い、探してみたところ、、、ありました!

intro.js

 

Webページ上に簡単にチュートリアルを作れる「Intro.js」というJavaScriptライブラリが良かったので、今回は「Intro.js」の導入と使い方を簡単に紹介していきたいなと思います。

では、まいりましょう!

Webサイト上に簡単にチュートリアルが作れるIntro.jsとは?

Intro.jsはWebページ上に簡単にチュートリアルが作れるJavaScriptライブラリです。

ライブラリで提供されている外部ファイル(intro.js, introjs.css)を読み込み、指定のタグをHTML属性に追加するだけでWebページ上に簡単にチュートリアルを作ることが出来ます。

HTMLやJavaScript初心者の方でも簡単に導入して、使いやすいライブラリだと思います。

文字で説明するよりも実際に動いているものを触ってみるのがイメージつきやすいと思うので確認してみましょう!

>>【Intro.js 提供元のWebサイト】

Webページに移動して「Show me how」ボタンを押すとチュートリアルが始まります。

intro.js-fllow

Intro.jsの導入手順と使い方

導入手順といっても、本当に簡単に導入が出来ちゃうんです。

  1. ライブラリをダウンロードします。
  2. ダウンロードした「intro.js」と「introjs.css」をWebページで読み込みます。
  3. チュートリアルのステップで説明したいHTML要素に対してタグを設定します。
  4. トリガーとなるタイミングで「introJs().start();」と魔法の言葉をコールします。

ライブラリをダウンロードします。

ダウンロードページから最新のライブラリをダウンロードします。
(※ ブログ投稿時のライブラリの最新バージョンは「v1.0.0」です。)
>>【Intro.jsライブラリのダウンロードページ】

Webページでライブラリを読み込みます。

ダウンロードしてきた「intro.js」と「introjs.css」をWebページで読み込みます。

<script src="/path/to/intro.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/introjs.css">

 

HTML要素にタグを設定します。

チュートリアルのステップで説明したい部分のHTML要素にタグを設定します。(data-stepの部分が説明する順番の設定になります。)

<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">

魔法のことば!

最後に、チュートリアルを開始したいイベントでメソッドを呼ぶだけ!

<script>
$(function(){
    introJs().start();
});
</script>

これだけでデモで書かれているようなチュートリアルが出来ちゃいます。
とても簡単に導入して、使えちゃいますよね。

試しに開発環境で導入してみました

私も開発環境で、ランサーズで提供しているコンテンツの「クラウドソーシング相談室」に実装してみましたが5分もあれば導入から実装まで出来てしまいました。(※ デモのため開発環境で実装したので、本番環境には適用していません。)

クラウドソーシング相談室

さいごに

今回は、Webサイト上で簡単にチュートリアルが作れるJavaScriptライブラリ「Intro.jsの導入と使い方」のお話でした。いかがでしたでしょうか?

操作マニュアルや新機能の使い方であったりWebサイト/Webサービスのコンテンツの一つとしてチュートリアルを提供してみてはいかがでしょうか。

今回ご紹介させて頂いたIntro.jsの導入と使い方の記事があなたのシステム開発に少しでもお役に立てれば、とても嬉しいです!

引き続き、「ランサーズ(Lancers)エンジニアブログ」をよろしくお願いします!

参考にさせて頂いたWebサイトや書籍

【本家Intro.js】

ライブラリを提供している本家のWebサイトになります。

【jQuery レッスンブック jQuery2.X/1.X対応】

山崎大助さんが書かれているJQueryのレッスンブックです。Intro.jsの使い方についてもサンプル付きで分かりやすく紹介されています。こちらの書籍でIntro.jsの存在を知りました!ありがとうございます。

<神庭 良輔/Kamba Ryosuke>

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

Webエンジニア(Wantedly)
Rubyエンジニア(Wantedly)
フロントエンドエンジニア(Wantedly)
インフラエンジニア(Wantedly)
2017新卒エンジニア(Wantedly)
エンジニアインターン(Wantedly)
その他採用情報

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

関連記事

thumbnail
ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3

ランサーズでは、現在、Webエンジニアを募集しています。 詳しくは、募集要項をご覧下さい。 こんにちは。リートの satoshi です。 前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。 WYSIWY …

thumbnail
意外とすんなり作れたApple Watch 開発環境

  ランサーズ エンジニアの土屋です。 先日社内勉強会で行った、Apple Watch開発の環境構築内容を共有します。Apple Watch開発するぞ!という方のお役に立てたら幸いです。 Apple Watchについておさらい 2015/03/10の …

nodejs
NodeJS, WebSockets and the real-time web

Today our team held first presentation of the series “lancers|conf”. The idea behind “lancers|conf” is to …