paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ブラウザだけで簡単にプログラミング動画を作って公開できる「Scrimba」を使ってみた!

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

今回は、ブラウザさえあれば今すぐ「プログラミング動画」を制作してネット上に公開できる無料のWebサービスをご紹介します!

自分の声を一緒に収録することも可能なので、チュートリアル動画やプログラミング講座などを自由に制作できるスグレモノです。

優秀なコードエディタや動画編集機能なども優れているので、ご興味ある方はぜひ参考にしてみてください!

Scrimba

f:id:paiza:20170802141504j:plain

■「Scrimba」の使い方!

それでは、実際に「Scrimba」を使いながら、どのようなサービスなのかを見ていきましょう!

まず最初に、トップページの画面上部にある「ログイン」ボタンからGitHubアカウントと連携しましょう。
f:id:paiza:20170802141524j:plain


ログインが済んだら、次に「create」をクリックします。
f:id:paiza:20170802141543j:plain


すると、「新規作成」ウィンドウが表示されます。
f:id:paiza:20170802141612j:plain
ここで、「① テンプレート」と「② プロジェクト名」を選択してから、画面下の「CREATE」ボタンをクリックしてください。


ブラウザの画面全体が「コードエディタ」になりました!
f:id:paiza:20170802141643j:plain
この画面上で普通にプログラミングもできるのですが、そのままスクリーンキャストを制作することも出来るようになります。


ちなみに、画面上部のツールバーに「編集」ボタンがあるのでクリックしてみてください。
f:id:paiza:20170802141658j:plain


設定画面が開くので、「VISIBILITY」の箇所を「ONLY ME」に選択しておきましょう!
f:id:paiza:20170802141712j:plain
こうすることで、このプロジェクトは自分だけが閲覧できる状態になります。

■「スクリーンキャスト」を作ってみよう!

Scrimba」を使った「スクリーンキャスト」は非常に簡単なので、実際にやってみましょう!

まずは、ツールバーにある「録画」ボタンをクリックします。
f:id:paiza:20170802141744j:plain


次に、PC搭載のマイクを使って「① 音声」も同時に収録するかどうかを選択し、「② CONFIRM」ボタンをクリックします。
f:id:paiza:20170802141800j:plain


すると録画が始まるので、あとは通常通りプログラミングしたり自分の声を収録していきましょう!
f:id:paiza:20170802141823j:plain


録画をやめる時は、画面上部の「STOP」と書かれた文字か、録画ボタンをもう1度クリックすればOKです。
f:id:paiza:20170802141855j:plain


最後に、「FINISH」ボタンをクリックすればスクリーンキャストの完成です!
f:id:paiza:20170802141907j:plain


再生ボタンをクリックすると、普通に動画として視聴することができますよ!
f:id:paiza:20170802141921j:plain
もちろん、「PUBLISH」ボタンをクリックすれば、ネット上に公開することも可能です。


さらに「Scrimba」の注目すべき点として、映像として録画しているのではなく「テキストデータ」として記録しているのが大きな特徴です!

その証拠に、動画を途中で止めると…そのままコードを好きなように編集することが可能なのです!
f:id:paiza:20170802141934j:plain
これにより、ユーザーは動画を見るだけでなく、同じ画面上でコードをいじって検証することもできるので、非常に効率の良い学習を可能にしているわけです。

再生ボタンをもう1度クリックすれば、自分で編集したコードはリセットされるので安心です。

また、「テキストデータ」を記録しているだけなので、録画中もパソコンに負荷がほとんど掛かることなく軽快に動作するのも魅力の1つでしょう。

以下のサンプル動画を視聴しながら、ぜひコードも編集してみてください!

サンプル動画|Scrimba公式

■「Scrimba」でオススメの機能!

Scrimba」を使う上で、ぜひ活用しておきたい機能をいくつかピックアップしましたのでご紹介します!

例えば、コードエディタのツールバーから「コンソール」ボタンをクリックすると、JavaScriptプログラミングで役に立つ「コンソール画面」が下部に表示されます。
f:id:paiza:20170802143832j:plain
普通ならブラウザ搭載のデベロッパーツールを起動するわけですが、エディタ上で軽快に動くのは便利です。


外部の「① JavaScriptライブラリ」も「設定」ボタンから自由に追加可能!
f:id:paiza:20170802143856j:plain
リセットやノーマライズ、Bootstrapなどの「② CSS」も選択できるようになっています。


また、プレビュー画面も表示できるので、画面を切り替えることなくWebの状態をリアルタイムに確認することが出来るのは便利ですね。
f:id:paiza:20170802143915j:plain
もちろん、動画を録画している最中も表示できるので、チュートリアル動画を作る時にも重宝する機能でしょう。


さらに、録画済みの動画はいつでも再編集することが可能!
f:id:paiza:20170802143929j:plain
トリミングなども自由にできるので、上手く喋れなかった箇所を省略する、なんてことも簡単にできます。


制作した動画はネット上に公開するだけでなく、ブログやサイトへ簡単に貼り付けられるように「埋め込みタグ」も生成してくれます。

方法も簡単で、自分のダッシュボードから貼り付けたい動画の「設定アイコン」をクリックします。
f:id:paiza:20170802143941j:plain


設定パネルが表示されますが、その下にあるコードをコピーすればOK!
f:id:paiza:20170802143953j:plain
これをブログやサイトのHTMLに貼り付ければ、自分の動画を埋め込むことが可能です。

このように、「Scrimba」はスクリーンキャストを制作するのに必要な環境をブラウザだけで実現しているスグレモノです。

まだベータ版ではあるものの、公開チャットで活発に意見交換されているのでバージョンアップの頻度が高いのも好印象ですね。

公開チャット |Gitter
f:id:paiza:20170802144018j:plain

■初心者でも動画でプログラミングが学べる!paizaラーニング


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

PythonJavaC言語PHPRubyJavaScriptSQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

↓詳しくはこちら
paiza.jp

■まとめ

今回は「Scrimba」について基本的な部分をご紹介しました。

スクリーンキャストは、いざ作ろうと思った時にいろいろ機材を揃えるのが大変なのですが、ブラウザさえあればすぐに始められるのは本当に便利で楽しいです。

将来的には、有料動画を作成できる機能なども検討されているようなので、ご興味ある方は今後も引き続きチェックしておきましょう!


<参考>





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

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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