Webで動かしながら操作案内を簡単設置！ 使わないとかなり損するIntro.jsとは：HTML5アプリ作ろうぜ！（8）（2/2 ページ）

サンプルアプリで「Intro.js」の使い方を解説

　最初に、以下からサンプルアプリのファイルをダウンロードしてください。

• http://www.venezia-works.com/html5_vol10/sample.zip

サンプルアプリのファイル構成

　ZIPファイルを解凍すると、以下フォルダとファイルの構成になっています（index.html内に主なJavaScript処理を記述しています）。

• index.html
• js/jquery.js
• css/main.css
• js/blob.js→（FileSaver.js用：前回記事参照）
• js/canvas-to-blob.js→（FileSaver.js用：前回記事参照）
• js/FileSaver.js→（FileSaver.js用）
• introjs/intro.min.js→（Intro.js用）
• introjs/introjs.min.css→（Intro.js用）

表示順、説明文など基本的な設定

　まずは、index.htmlをテキストエディターで開いてみましょう。

　index.htmlでは、Intro.js関連ファイル（intro.min.js、introjs.min.css）を読み込んでいます。

　「説明パネル」はデフォルトでグレー文字、白背景です。好みに合わせて変更しましょう。以下のCSSエリア（Class名）を上書きすることで可能です（変更しなくても問題ありません。CSSに慣れてない方は、ここのスタイル指定は行わない方がいいでしょう）。

　以下は、「説明パネル」の表示順、説明文などの属性を設定する部分です。

　属性は以下のようになっています。

ボタンをクリックした際のイベントもオプションでカスタマイズ可能

　以下は、「操作説明」ボタンをクリックした際のイベント（設定含む）です。

　これのHTMLをブラウザーで表示すると、以下のように「Next」「Back」のボタンが見えます。

　これを以下のようにプロパティを追加することで、ボタンの表示を変更できます。

　HTMLをブラウザーで表示すると、以下のように「次へ」「戻る」のボタンになります。

　このように、プロパティを変更することで幾つかの変更が可能です。

　プロパティ一覧は以下に表示します。以下は、必須ではありません。オプションとして追加可能です。ボタン表示文字の変更、表示／非表示など多数あります（参考URL：https://github.com/usablica/Intro.js）。

手間の掛かる作業をライブラリで簡単に

　今回は、Intro.jsを利用することでWebサイト／Webサービスなどに簡単に説明を入れられるサンプルを紹介しましたが、いかがでしたでしょうか。

　色合いの変更もCSSのスタイルを継承・上書きで可能なので、Webサイト／Webサービスに合ったテイストで表示した方がいいでしょう。CSSが苦手な方もチャレンジしてみてくださいね。サンプルコードは分かりやすくなっていますので、チャレンジするのにちょうどいいと思います。

　今回のチュートリアル／操作案内のような、手間の掛かる作業を簡単にする仕組みを知ることでWebサイト／Webサービスに限らず、Web技術を使ったスマホのネイティブアプリなどを作るときの企画・開発にもご活用いただければ幸いです。

　今回のように、JavaScriptライブラリとHTML5を利用することで新しいアプリ開発にチャレンジしてみましょう！ 皆さんが考えた企画、制作したアプリを世の中に広めるには、実際に作って結果を見るというチャレンジが大事だと思いますので、ぜひ新しい技術を触っていきましょう！ これからも本連載「HTML5アプリ作ろうぜ！」をよろしくお願い致します。

著者紹介

山崎大助 （デジタルハリウッド講師／U-SYS）

著書：レスポンシブWebデザイン「超」実践デザイン集中講義

受賞歴：Microsoft MVP

デジタルハリウッド講師を務めるほか＠IT、日経ソフトウエア、SoftwareDesign、ITProなどへ寄稿。HTML5ビギナーズ（html5jビギナー部）で勉強会を毎月or隔月開催中。ヒカ☆ラボなどのセミナーやイベントにも登壇中。本サイトで「HTML5アプリ作ろうぜ！」の記事連載中。