Web プログラミングのチュートリアル作るなら scrimba が最強かもしれない

  • 2018/9/24
  • Web プログラミングのチュートリアル作るなら scrimba が最強かもしれない はコメントを受け付けていません。

割と面倒なチュートリアル動画作成ですが…?

こんにちは!
江嵜です。

前回はターミナル画面の録画のお話でしたが、今回は似たところでチュートリアル動画のお話です。

あなたは、プログラミングのチュートリアル動画って撮りますか?

もし、あなたが何かしらの OSS (オープンソースソフトウェア) に携わっている・主導しているということがあれば、使い方のチュートリアル動画を取る機会がいくらかあるかもしれないですね。

しかしこの動画作成、以外と面倒なんです。

単純に考えて、

  • 見せるための環境を整えて
  • 音声を録音できるようにマイクを準備し
  • 録画ソフトで画面を撮影できるように設定して
  • それぞれを記録して
  • 最後に音と動画を合わせる!

という手順が必要になります。

と、これまでとっても面倒だったチュートリアル動画作成ですが…

scrimba を使えばチュートリアル動画が超楽で作れる!

Web のフロントエンドだけですが、scrimba を使うととっても簡単にチュートリアル動画が作れるようになるんです!

どれだけ簡単か、実際に見てみましょう。

実際に簡単に動画撮影をする手順をアニメーション gif にしてみました。

とっても簡単ですね!

scrimba のページからプロジェクトを作成すれば、それだけで準備が完了します。

あとは左下のレコードボタンをクリックして、音声入力ソースを選ぶだけ。

録画が完了した時点で、右下の四角ボタンをクリックで終了です。

実際に上のアニメーション gif の中で作成したものがこちらです

バッチリいい感じで録画できてますよね!

コンソールへの出力は見やすくポップアップするのも、見ていて気持ちがいいポイントですね。

見ている人は直接編集ができるのもすごいところ!

これだけでもすごい scrimba ですが、さらに驚きの機能があります。

それが、コードの直接編集機能!

なんと、動画を一時停止したときに、見ているコードを実際に編集して動かしてみることが出来るのです!
是非、皆さん私の動画を一時停止して、実際に編集してみてください。

しっかり反映されることを確認できるかと思います。

ちなみに、動画を再度再生し始めるとコードの方は編集前に戻りますのでご安心を。

scrimba でチュートリアル動画を作ろう!

さて、あなたも scrimba でチュートリアル動画を作りたくなりましたよね!

是非 scrimba を使って、あなたもチュートリアル動画作ってみてくださいね!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-4-17

    第8回 麻雀部活動記録~まるで個室のような雀卓で~

    3月末の桜が満開な季節に恒例の麻雀部を開催してきました! 例によって活動記録を書いていこうと思いま…
  2. 2019-4-15

    JetBrains の IDE に新色登場! IntelliJ でも PhpStorm でも新しい色を体験しよう!

    JetBrains の IDE に新しいテーマが作られていました! こんにちは、江嵜です。 みな…
  3. 2019-4-8

    やっぱり JavaScript (TypeScript) でも アノテーション (Decorator) 使いたい!

    JavaScript でもアノテーションしたい! こんにちは、江嵜です。 JavaScript …
  4. 2019-4-3

    2019年03月度社員総会&懇親会@Tokyo☆

    2019年3月15日(金)に、エージェントグロー東京オフィスの社員総会&懇親会が開催されまし…
  5. 2019-4-2

    第2回 倶楽部ぽじてぃぶ ~ボードゲーム~

    2019年2月23日に、第2回となる倶楽部ぽじてぃぶの活動が開催されました! 今回は、その様子をお…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。