シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
注目記事ピックアップ
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/04/11 19:55

Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!

scrimba-01
どうも、まさとらん(@0310lan)です!

みなさんは、「スクリーンキャスト」ってご存知でしょうか?

これは、パソコンの画面を録画ツールや機材を使って「動画」に保存することなのですが、最近はこのような手法を使ったプログラミング関連の動画が増えてきました。

そこで、これからプログラミング動画を作りたい!と考えている人に向けて、ブラウザだけで動画制作を完結できるWebサービスが公開されているのでご紹介しようと思います!

【 Scrimba 】
scrimba-02
動画を作るのに必要なことは、無料の「ユーザー登録」をするだけです!

録画ツールや機材などは一切不要で、動画を作ったらそのまま世界中に公開することも可能です。
また、面白いのは動画再生中に、表示されているソースコードをそのまま画面上で編集や実行ができてしまうところ!

このあたりも含めて、一体どんなサービスなのか詳しく見ていきましょう!


■「Scrimba」の使い方!

それでは、実際に「Scrimba」を使いながら、基本的な機能をご紹介していきます。

まず、最初に自分のGitHubアカウントと連携して、無料の「ユーザー登録」を済ませておきましょう!


そして、画面右上の「create」という項目をクリックします。
scrimba-03

新規プロジェクトの作成画面になるので、「タイトル名」を入力して「CREATE」ボタンをクリックしましょう。
scrimba-04

すると、専用の「コードエディタ」が起動します。
scrimba-05 もうすでに、この画面上でプログラミングを行うことが可能になっており、好きなようにコードを書いてスクリーンキャストを作ることが出来ます!


■コードエディタを触ってみよう!

スクリーンキャストを作る前に、少しだけコードエディタのご紹介をしておきます。


「Scrimba」のコードエディタは、通常のエディタと同じように、シンタックスハイライトやコード補完などの機能が標準搭載されています。
scrimba-06

また、画面右上のボタンをクリックすると…
scrimba-07

しっかりと、コンソールログも確認できるので便利です!
scrimba-08 もちろん、構文エラーのチェックや、オブジェクトの中身を確認するような用途にも使えますね。


ファイルを追加することも可能で、「+」アイコンをクリックして「ファイル名」を入力します。
scrimba-09

例えば、HTMLファイルを追加して「実行」ボタンをクリックしてみましょう。
scrimba-10

すると、ポップアップ表示でWebサイトの「プレビュー」が表示されます!
scrimba-11 タブを切り替えなくても、この画面上で確認が出来るのは非常に便利でしょう。


外部の「① JavaScriptライブラリ」や、「② CSSリセット、Bootstrap」なども追加できます。
scrimba-12

さらに、画面右下のアイコンをクリックすると…
scrimba-13

画面全体が「コードエディタ」になるので、プログラミングに集中したい時などは便利ですね!
scrimba-14 このように、手軽にプログラミングを行える環境が用意されており、さらに画面切り替えなしで「コンソールログ」や「プレビュー」などが利用できるため、スクリーンキャストの録画には最適な仕様と言えるでしょう。


■「Scrimba」で動画を作ってみよう!

それでは、早速スクリーンキャストに挑戦してみましょう!


と…言っても方法は非常に簡単で、「録画」ボタンをクリックするだけでOKです。
scrimba-15

メッセージが表示されるので、「①音声」を付けるかどうかを選択してから「②確認」ボタンをクリックしましょう!
scrimba-16 これで、即座にコードエディタが「録画状態」に変わります。

ここからは、エディタに入力した内容がすべて録画されるようになっており、音声を付けた場合はパソコンのマイクから自分の声も同時に録音できる状態になっています。


画面の下には、録画時間を確認できる工夫もされています。
scrimba-17

終了する場合は、「FINISH」ボタンをクリックするだけでOK!
scrimba-18 たったこれだけで、プログラミングのスクリーンキャストを制作することが出来ました。

簡単ですね!


作成した動画は、「再生ボタン」をクリックすればすぐに閲覧することができます!
scrimba-19

また、「PUBLISH」ボタンをクリックすれば、すぐにでも世界中へ公開することも可能です!
scrimba-20 もちろん、公開せずにこのまま「プライベート」で保存しておくことも可能です。


■「Scrimba」の特徴的な機能!

スクリーンキャストの基本的な制作ができたところで、「Scrimba」の面白い特徴をご紹介します。


動画を再生中に、どこでもいいのでエディタ内をクリックしてみましょう!
scrimba-21

なんと、「コード」を編集することが出来るのです!
scrimba-22 追記入力や、修正、ファイルの追加など、なんでも出来ます。


そして、コンソールログを使って実行結果も確認可能。
scrimba-23 ところが、もう一度「再生ボタン」をクリックすると、コードエディタは元の状態に戻るようになっています!


この斬新な機能はちょっと文章では伝わりにくいかもしれないので、ぜひ以下のリンクから実際に試してみることをオススメします。

【 コードサンプル|Scrimba 】


「Scrimba」で動画を制作できると言いつつも、実は動画ファイルを生成しているわけではなく、どちらかと言うと「テキストログ」を記録して再表示しているイメージに近いわけです。(見た目は「動画」と変わりませんが…)

そのため、録画中もパソコンはとても軽快に動作し、処理もまったく重くなりません。

つまり、「Scrimba」を使うと「動画のようで動画じゃない…」という面白いスクリーンキャストを手軽に作ることが出来るわけです。

また、動画を見ているユーザーも、途中で実際にコードを触って確認できるので、学習の効率が良いだけでなく理解もしやすいと言えるでしょう。


現在、「Scrimba」は公開されたばかりのサービスであり、疑問点や機能追加などを「Gitter」を利用して活発に意見交換がされています。

scrimba-24GitHubコミュニティもあります)


■おまけ

最後に、動画ではありませんが、ブログの記事を作る感覚で「プログラミング講座」を作って公開できるサービスを合わせてご紹介しておきます!

【ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!】
scrimba-25
有料・無料のオンラインコースを手軽に作れるようになっており、実行エンジン搭載のコードエディタを記事内に貼りつることも可能です。

また、グラフ・チャート、スライド資料、イラスト、ファイルの添付…など、多彩な機能をすべて無料で利用できるので、オンライン講座の作成&公開にご興味ある方はぜひ一読ください!


■まとめ

これまで、プログラミング関連の「スクリーンキャスト」や「ライブ動画」などは、基本的にユーザーは見るだけしか出来ませんでしたが、「Scrimba」は画面上でそのままコードをいじれるようにしたわけです。

まだ、開発途上で実験段階ではありますが、なかなか面白い試みと言えるのではないでしょうか。

公式サイトには、すでにたくさんのスクリーンキャストが公開されており、基本的なWeb開発のチュートリアルも多いので、ご興味ある方はぜひトライしてみてください!


<参考>
「Scrimba」公式サイト



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る