どうも、まさとらん（@0310lan）です！
今回は、さまざまなチュートリアルガイドを簡単に自動生成してくれる無料のWebサービスをご紹介します。
例えば、Webサービスを初めて利用するユーザー向けのチュートリアルなどを、非常に簡単なステップでドキュメント化してくれます。
アイデア次第でさまざまな使い方ができるので、ご興味ある方はぜひ参考にしてください！
【 Scribe 】
■「Scribe」の使い方
それでは、「Scribe」をどのように使えばいいのか詳しく見ていきましょう！
まずはサイトの上部にあるボタンをクリックして、無料のユーザー登録を済ませておきます。
自分の好きなユーザー名を入力しましょう。
次に、メールアドレスを入力します。
続いてパスワードを設定したら、登録したメールアドレス宛に認証リンクが送付されるのでクリックしてログインしてください。
「Scribe」が提供するブラウザの拡張機能をインストールする画面が表示されるので、ボタンをクリックしましょう。
拡張機能のウェブストアが表示されたら、インストールボタンをクリックしてください。
拡張機能がインストールできたら、以下のようなサンプルデモが表示されます。
このデモ画面から、どのようにチュートリアルガイドを生成するのかを簡単に体験できるようになっています。
■サンプルデモを試してみよう！
それでは、先ほど表示されたデモを実際に試してみましょう。
画面右側の丸いボタンをクリックしてください。
ここからブラウザ上で行うアクションはすべて自動的に記録されるようになります。
画面が切り替わり、Googleのトップページが表示されて、画面左下には「Scribe」の専用ウィジェット（丸いボタン）が配置されているのが分かります。
試しに検索を実行してみましょう。
今回はサンプル例として「javascript」というキーワードで検索してみました。
Wikipediaのページをクリックしてみます。
ページが表示されたら、ここで記録を終了してみましょう。
「Scribe」のウィジェットをクリックして、記録終了ボタンをクリックします。
すると「Scribe」のエディタに切り替わります。
そして、ブラウザ上で行ったアクションがステップ・バイ・ステップのチュートリアルガイドへと変換されているのが分かります。
検索ボックスに入力した内容や、クリックした場所のスクリーンショットなどもすべて自動的に記録されているわけです。
もちろん、さらに編集してカスタマイズもできるのですが、今回はこのままにして次に進みましょう。
画面上部にある【Done】ボタンをクリックします。
これでチュートリアルガイドの作成が完了します。
ひとまず【Back】ボタンをクリックしてみましょう。
以下のようなダッシュボード画面が表示されます。
この画面から、新規のチュートリアルガイドを作成したり、公式ドキュメントを確認したりなどができます。
■チュートリアルガイドを作ってみよう！
今度はチュートリアルガイドをゼロの状態から作成してみましょう。
「Scribe」には自由にコンテンツを組み合わせたページを作成できる機能が提供されているのですが、このページ作成手順を簡単なチュートリアルガイドにしてみましょう。
まずは、ダッシュボードの画面上部にある【New +】ボタンをクリックします。
メニューが表示されるので、「New Scribe」を選択します。
ブラウザで現在開いているタブがリストで表示されるので、記録したいタブを選択します。
今回は「Scribe」での操作を記録してガイドを作りたいので、「Scribe」のタブを選択しておきましょう。
すると一瞬だけ画面が暗転して、記録がスタートしたことが分かります。
ここからの作業はすべて自動的に記録されています。
「Scribe」のページを作る手順をガイドにしたいので、ダッシュボード画面から【New +】ボタンをクリックして「New Page」を選択します。
ページ作成用のエディタが表示されるので、タイトルを編集して新規ページを作成しましょう。
画面上部の【Done】ボタンをクリックして編集を終了します。
「Scribe」のウィジェットをクリックして、記録も停止しておきましょう。
たったこれだけで、ページを作成する手順を解説したチュートリアルガイドができます。
ダッシュボード画面からページを作成するまでのステップが細かく分かれており、スクリーンショットも一緒に記録されているのでガイドとしても理解しやすい構成になっています。
■ガイドをカスタマイズしてみよう！
先ほど作成したチュートリアルガイドは、自分好みにカスタマイズできる機能も提供されているので合わせてご紹介しておきます。
まずはガイドのトップにあるアイコンを編集してみましょう。
カラーやアイコンなどを好きなものに変更できます。
チュートリアルガイドのタイトルも分かりやすいものに変えておきましょう。
各ステップのテキストも編集可能で、URLとテキストの間に半角スペースを挿入すればリンクと切り分けて表示できます。
不要なステップがある場合は、オプションから削除することもできます。
カスタマイズしたガイドは以下のようになります。
「Scribe」を利用して作られたチュートリアルガイドは、他にもたくさん公開されています。公式サイトにはさまざまな事例が紹介されているので、ぜひ参考にしてみてください。
■シェア＆公開してみよう！
作成したチュートリアルガイドは、簡単にネット上へ公開できます。
ガイドの上部にある「Share」ボタンをクリックしてみましょう。
シェア用の設定画面が表示されて、公開用のリンクや埋め込みコードなどを利用できるのが分かります。
公開用のリンクは、Webサイトのようにチュートリアルガイドが表示されるもので、このリンクをブログやSNSなどでシェアすれば誰でも閲覧できます。
また、埋め込みコードを利用すれば自分のWebサイトやサービスなどにチュートリアルガイドを表示させることができます。
埋め込みコードの場合は、各ステップごとに画面が切り替わるスライド資料のような形式が利用できます。
他にもPDFファイルとして書き出す機能も提供されています。
また、本記事でご紹介したページ作成機能を使えば、複数のチュートリアルガイドを組み合わせた複雑なガイドも手軽に構築できるのでオススメです。
このように「Scribe」を利用すると、例えばWebサービスの利用ユーザー向けにチュートリアルを作成したり、複数人のチームで共有する資料を作成したりなども簡単に行えるので便利でしょう。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。
paizaラーニングについて詳しくはこちら
■まとめ
今回は誰でも簡単にチュートリアルガイドを自動生成してくれるWebサービスをご紹介しました！
ガイドの作成をできるだけ簡単に生成してくれる機能は、実際に使ってみると非常に便利なことが分かります。カスタマイズについてもかなり細かく編集できるうえ、今回ご紹介した内容はすべて無料で活用できるのも大きな魅力でしょう。
ぜひみなさんも独自のチュートリアルガイドを作って公開してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
