paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

インタラクティブなチュートリアルガイドを作成できる万能Webエディタ「Stonly」を使ってみた!

f:id:paiza:20191127125036j:plain
どうも、まさとらん(@0310lan)です!

今回は、さまざまなチュートリアルコンテンツを簡単に作成・公開できるWebサービスをご紹介します!

Webサイトに埋め込むことも可能で、ヘルプページやQ&Aなどより直感的に分かりやすいコンテンツを手軽に作成することができます。

Stonly

f:id:paiza:20191127130405j:plain


実際のサンプルデモは以下のようになります!

チュートリアル以外にも、チーム内の情報共有として使ったり、コーディングガイドや学習コンテンツなど、さまざまな用途に活用できるのが大きな特徴です。

■「Stonly」の使い方

それでは、「Stonly」がどのようなサービスなのか基本的な使い方から見ていきましょう!

まずはサイトのトップページから無料のユーザー登録をします。

f:id:paiza:20191127130554j:plain


ユーザー名・メールアドレス・パスワードを設定すれば完了です。

f:id:paiza:20191127130607j:plain


すると自分専用のダッシュボード画面が表示されます。

f:id:paiza:20191127130619j:plain


新規プロジェクトを作成するために画面中央のボタンをクリックしましょう!

f:id:paiza:20191127130630j:plain


好きなプロジェクト名を入力します。

f:id:paiza:20191127130642j:plain


チュートリアルを作成する編集エディタが表示されました!

f:id:paiza:20191127130653j:plain

このエディタで、インタラクティブなチュートリアルをすべて作成できるように設計されています。便利な機能が盛りだくさんなので、それぞれの詳しい使い方について次の章から解説していきいます。

■チュートリアルコンテンツの作り方

「Stonly」でチュートリアルコンテンツを作成する編集エディタは4つの画面で構成されています。

f:id:paiza:20191127130711j:plain

それぞれの役割は以下の通りです。

  • 【コンテンツ】解説用の文章を作る
  • 【メディア】画像・動画などを挿入する
  • 【ステップ】画面遷移のボタンを作る
  • 【アウトライン】目次の構成を表示する

上記のなかでも、特に重要となるのが【コンテンツ】と【メディア】です。


【コンテンツ】は、チュートリアルの文章を作成するテキストエディタ機能を提供しており、ブログを書くように解説文を入力できるようになっています。

f:id:paiza:20191127130750j:plain

太字・リンク・リスト…など、基本的な機能も搭載されています。


また、本文内に警告や補足情報を効果的に配置する機能も備わっているので便利です。

f:id:paiza:20191127130807j:plain


文章だけだと伝わりにくい場合に【メディア】を使うと効果的です。

たとえば、画像をアップロードすると専用の画像編集エディタが起動します!

f:id:paiza:20191127130818j:plain


このエディタでは、画像内にテキストを挿入したり矢印などのポインタを貼り付けることができます。

f:id:paiza:20191127130829j:plain

他にも、範囲を明確にする四角・円の線を描画したり、カラーの変更や線の太さなども自由に変えられます。


このような画像編集機能を使うことで、たとえばスクリーンショットの画像を使って操作説明のチュートリアルを簡単に作成できるわけです。

f:id:paiza:20191127130842j:plain


画像だけでなく動画コンテンツも挿入可能で、YouTubeやVimeoなどの動画URLをコピペするだけですぐに利用できます。

f:id:paiza:20191127130854j:plain

動画の場合は、どこから再生するのか秒単位で指定可能で、1本の動画から見せたいシーンだけを視聴できるように設定できます。


また、プログラミング用のテキストエディタも搭載しています。

f:id:paiza:20191127131003j:plain

100以上の言語に対応したシンタックスハイライト付きで、コードの解説や埋め込みコードの貼り付け場所の説明など、さまざまなケースで便利に使えるでしょう。

■画面遷移のボタンを作ろう!

ひとつひとつのチュートリアルコンテンツはお互いにリンクさせることが可能で、複数のコンテンツを組み合わせることでインタラクティブなチュートリアルを作成できるのでご紹介しておきます。

方法は簡単で、編集エディタの【ステップ】機能を使います。

たとえば2つのチュートリアルをリンクさせるだけなら、【New step】からリンクさせたいコンテンツを選択します。

f:id:paiza:20191127131025j:plain


プレビューでチュートリアルを確認してみると【次へ】ボタンが表示されているのが分かります。

f:id:paiza:20191127131042j:plain

このボタンをクリックすることで、【ステップ】の設定で選択したチュートリアルページに遷移するというわけです。


また、ボタンは同時に複数配置することも可能なので、たとえば複数のチュートリアルコンテンツとリンクさせておけば、ユーザーがインタラクティブに選択できるようになります。

f:id:paiza:20191127131100j:plain


しかし、ボタンが増えてくると【アウトライン】には多数の目次であふれかえることになります。

f:id:paiza:20191127131127j:plain


そこで、便利なのがフローチャート機能です。

画面上部のアイコンからこのボタンを選択してみましょう!

f:id:paiza:20191127131201j:plain


すると、現在のチュートリアルコンテンツの構造を自動的にフローチャートで確認できるようになります。

f:id:paiza:20191127131211j:plain

これにより、複数の分岐点が明確になりチュートリアルを効率よく設計することが可能です。

「Stonly」ではこれらの機能を活用することで、簡単にチュートリアルコンテンツを作成できるのが大きな魅力です。アイデアしだいでは、情報共有、ヘルプサポート、学習コンテンツ…など、さまざまなコンテンツを簡単に構築できるようになるでしょう。

■チュートリアルを公開してみよう!

「Stonly」で作成したチュートリアルコンテンツは、簡単にネット上へ公開できます。

コンテンツがある程度完成したら、画面上部の【PUBLISH】ボタンをクリックしましょう!

f:id:paiza:20191127131233j:plain

たったこれだけで、ネット上へ公開することができます。


共有機能から生成されたリンクの確認や、埋め込みコードをコピーすることができます。

f:id:paiza:20191127131243j:plain

あとは、リンクをシェアしたりコードをWebサイトの好きな場所に貼り付ければ、チュートリアルを世界中の人に使ってもらうことができるわけです。


さらに、コメント機能も搭載されているのでユーザーと意見交換をおこなうことも可能です!(OFFにすることも可能)

f:id:paiza:20191127131258j:plain

また、公開されたチュートリアルコンテンツはスマホにも自動で最適化されているので、デバイス問わずどこからでもアクセスして利用できるのも大きな魅力でしょう。

他にも、アクセス解析機能やバージョン管理システムなども搭載されており、チュートリアルコンテンツの作成から公開までこのサービス1つで集中管理できるのは非常に便利ではないでしょうか。

■ 動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、簡単にチュートリアルコンテンツを作成・公開できるサービスについてご紹介しました。

これまでチュートリアルの作成に特化したサービスというのはあまりなく、しかも誰でも簡単に操作できるシンプルな設計とインタラクティブなコンテンツの作成ができるのは貴重な存在だと感じます。ヘルプページやQ&Aなどでは分かりにくい内容を「Stonly」は補ってくれるでしょう。

「Stonly」はまだリリースされたばかりで、バージョンアップも活発におこなわれています。

チュートリアル開発にご興味のある方は、ぜひオリジナルのコンテンツを作成して公開してみてはいかがでしょうか。


<参考リンク>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud