どうも、まさとらん（@0310lan）です！
みなさんは、「スクリーンキャスト」ってご存知でしょうか？
これは、パソコンの画面を録画ツールや機材を使って「動画」に保存することなのですが、最近はこのような手法を使ったプログラミング関連の動画が増えてきました。
そこで、これからプログラミング動画を作りたい！と考えている人に向けて、ブラウザだけで動画制作を完結できるWebサービスが公開されているのでご紹介しようと思います！
【 Scrimba 】
動画を作るのに必要なことは、無料の「ユーザー登録」をするだけです！
録画ツールや機材などは一切不要で、動画を作ったらそのまま世界中に公開することも可能です。
また、面白いのは動画再生中に、表示されているソースコードをそのまま画面上で編集や実行ができてしまうところ！
このあたりも含めて、一体どんなサービスなのか詳しく見ていきましょう！
■「Scrimba」の使い方！
それでは、実際に「Scrimba」を使いながら、基本的な機能をご紹介していきます。
まず、最初に自分のGitHubアカウントと連携して、無料の「ユーザー登録」を済ませておきましょう！
そして、画面右上の「create」という項目をクリックします。
新規プロジェクトの作成画面になるので、「タイトル名」を入力して「CREATE」ボタンをクリックしましょう。
すると、専用の「コードエディタ」が起動します。
もうすでに、この画面上でプログラミングを行うことが可能になっており、好きなようにコードを書いてスクリーンキャストを作ることが出来ます！
■コードエディタを触ってみよう！
スクリーンキャストを作る前に、少しだけコードエディタのご紹介をしておきます。
「Scrimba」のコードエディタは、通常のエディタと同じように、シンタックスハイライトやコード補完などの機能が標準搭載されています。
また、画面右上のボタンをクリックすると…
しっかりと、コンソールログも確認できるので便利です！
もちろん、構文エラーのチェックや、オブジェクトの中身を確認するような用途にも使えますね。
ファイルを追加することも可能で、「＋」アイコンをクリックして「ファイル名」を入力します。
例えば、HTMLファイルを追加して「実行」ボタンをクリックしてみましょう。
すると、ポップアップ表示でWebサイトの「プレビュー」が表示されます！
タブを切り替えなくても、この画面上で確認が出来るのは非常に便利でしょう。
外部の「① JavaScriptライブラリ」や、「② CSSリセット、Bootstrap」なども追加できます。
さらに、画面右下のアイコンをクリックすると…
画面全体が「コードエディタ」になるので、プログラミングに集中したい時などは便利ですね！
このように、手軽にプログラミングを行える環境が用意されており、さらに画面切り替えなしで「コンソールログ」や「プレビュー」などが利用できるため、スクリーンキャストの録画には最適な仕様と言えるでしょう。
■「Scrimba」で動画を作ってみよう！
それでは、早速スクリーンキャストに挑戦してみましょう！
と…言っても方法は非常に簡単で、「録画」ボタンをクリックするだけでOKです。
メッセージが表示されるので、「①音声」を付けるかどうかを選択してから「②確認」ボタンをクリックしましょう！
これで、即座にコードエディタが「録画状態」に変わります。
ここからは、エディタに入力した内容がすべて録画されるようになっており、音声を付けた場合はパソコンのマイクから自分の声も同時に録音できる状態になっています。
画面の下には、録画時間を確認できる工夫もされています。
終了する場合は、「FINISH」ボタンをクリックするだけでOK！
たったこれだけで、プログラミングのスクリーンキャストを制作することが出来ました。
簡単ですね！
作成した動画は、「再生ボタン」をクリックすればすぐに閲覧することができます！
また、「PUBLISH」ボタンをクリックすれば、すぐにでも世界中へ公開することも可能です！
もちろん、公開せずにこのまま「プライベート」で保存しておくことも可能です。
■「Scrimba」の特徴的な機能！
スクリーンキャストの基本的な制作ができたところで、「Scrimba」の面白い特徴をご紹介します。
動画を再生中に、どこでもいいのでエディタ内をクリックしてみましょう！
なんと、「コード」を編集することが出来るのです！
追記入力や、修正、ファイルの追加など、なんでも出来ます。
そして、コンソールログを使って実行結果も確認可能。
ところが、もう一度「再生ボタン」をクリックすると、コードエディタは元の状態に戻るようになっています！
この斬新な機能はちょっと文章では伝わりにくいかもしれないので、ぜひ以下のリンクから実際に試してみることをオススメします。
【 コードサンプル｜Scrimba 】
「Scrimba」で動画を制作できると言いつつも、実は動画ファイルを生成しているわけではなく、どちらかと言うと「テキストログ」を記録して再表示しているイメージに近いわけです。（見た目は「動画」と変わりませんが…）
そのため、録画中もパソコンはとても軽快に動作し、処理もまったく重くなりません。
つまり、「Scrimba」を使うと「動画のようで動画じゃない…」という面白いスクリーンキャストを手軽に作ることが出来るわけです。
また、動画を見ているユーザーも、途中で実際にコードを触って確認できるので、学習の効率が良いだけでなく理解もしやすいと言えるでしょう。
現在、「Scrimba」は公開されたばかりのサービスであり、疑問点や機能追加などを「Gitter」を利用して活発に意見交換がされています。
（GitHubコミュニティもあります）
■おまけ
最後に、動画ではありませんが、ブログの記事を作る感覚で「プログラミング講座」を作って公開できるサービスを合わせてご紹介しておきます！
【ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能！】
有料・無料のオンラインコースを手軽に作れるようになっており、実行エンジン搭載のコードエディタを記事内に貼りつることも可能です。
また、グラフ・チャート、スライド資料、イラスト、ファイルの添付…など、多彩な機能をすべて無料で利用できるので、オンライン講座の作成＆公開にご興味ある方はぜひ一読ください！
■まとめ
これまで、プログラミング関連の「スクリーンキャスト」や「ライブ動画」などは、基本的にユーザーは見るだけしか出来ませんでしたが、「Scrimba」は画面上でそのままコードをいじれるようにしたわけです。
まだ、開発途上で実験段階ではありますが、なかなか面白い試みと言えるのではないでしょうか。
公式サイトには、すでにたくさんのスクリーンキャストが公開されており、基本的なWeb開発のチュートリアルも多いので、ご興味ある方はぜひトライしてみてください！
＜参考＞
・「Scrimba」公式サイト
written by まさとらん（@0310lan）
情報提供元：