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

アプギガトップ > Webサービス > 開始10秒でアニメーションが作れる新感覚プログラミング「Viscuit-ビスケット」にハマる!
注目記事ピックアップ
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
インターネット
2013/12/12 22:30

開始10秒でアニメーションが作れる新感覚プログラミング「Viscuit-ビスケット」にハマる!


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

最近は、Scratchを始めとする「ビジュアルプログラミング」が人気です。

英数字ばかりが羅列するプログラミングではなく、レゴブロックを組み立てる感覚で思い通りのコーディングが出来るので、子供や初心者にも扱いやすいのが魅力です。


 

そこで今回は、もっと小さな子供や年配の方まで一緒になって楽しめるプログラミングツールをご紹介しようと思います!

それが「Viscuit-ビスケット」です!(以下「Viscuit」)


すでにご存知の方も多いかと思いますが、「まだ知らない…」「試したこと無い…」という人や、プログラミングに興味ある人のためにも特徴をピックアップしてご紹介します!

 

ロケットを飛ばしてみる!
まず、サンプルとして「Viscuit」のオンラインエディタを使って、ロケットが上昇していくアニメーションを作ってみましょう!

【 専用エディタ

 

上記の専用エディタを表示させると、以下のような画面になります。


 

そして、画面右上にある「メガネ」のようなツールをドラッグ&ドロップします。


 

次に、ロケットから火が出ているイラストを、メガネの両方にドラッグ&ドロップしてセットします。


 

注意点として、右側にセットする際に、ちょうどセンターになるように十字マークを合わせます。


 

そして、同じイラストを今度は画面へドラッグ&ドロップ!


ここでは、まだ動く気配がありません。

 

そこで、先ほどセットした右側のイラストを、少しだけ上へズラしてみます。


 

すると、画面に配置されたロケットが、上方向へ上昇するアニメーションが見事に完成します!


ここまで、慣れると10秒もかかりません…。

 

なぜ?動いたのか…ですが、簡単に説明するために「パラパラ漫画」を想像してみてください。

いくつか微妙に変化した「コマ」が、パラパラめくられて動いているように見えるわけですが、Viscuitもよく似ています。

 

先ほど出てきた「メガネ」が、実は2つのコマになっています。


この2つのコマが交互に表示されることで、上方向に上昇しているアニメーションになるのです。冒頭で、右側のイラストをセンターに合わせてもまったく動かなかったのは、2つのコマがまったく同じ位置にあったからです。

 
もっと機能を追加してみる!
だいたいの基本が分かったところで、今作ったロケットをもっと改造してみましょう!

例えば、

「①」という部品を、ロケットにドラッグ&ドロップしてみます。


 

すると、Padの①ボタンを押したときにしか、ロケットが飛ばないようになります。


これを使えば、自分の意のままにロケットを操れるようになるわけですね。

 

今度は、「1秒」と書かれた部品をロケットにドラッグ&ドロップすると、ロケットは「1秒毎」に上昇するアニメーションになります。


 

さらに、メガネツールをもう1つ追加して、ロケットが「星のイラストにぶつかった時」のアクションを作ってみます。

 

すると、画面上でロケットが上昇していき…、


 

星のイラストにぶつかった所で、大爆発をするアニメーションが完成します。


いかがでしょうか?

ここまで来ると、恐らくほとんどの人は、時間を忘れてアニメーション作りに没頭するはず…。「インベーダーゲーム」くらいであれば、操作に慣れるとすぐに作れてしまいますよ。

このようにViscuitは、プログラミングをしている意識はまったく無いのに、つい夢中になって楽しい作品作りを通してコンピュータの仕組みを学習することが出来るわけですね。

 
まとめ
Viscuitは、積極的にワークショップなども開催されており、親子で楽しめるプログラミングツールとして大活躍しています。

とにかく、楽しみながらすぐに「動く作品」を作り出すことが出来るので、逆に言うと「何でも出来るツール」ではなく、「特化型」のプログラミングツールと言えます。

そのため、複雑なプログラミングは出来ませんが、それを差し引いても初めてのプログラミング学習としては十分過ぎる効果があるはずです!

みなさんも、ぜひ一度お試しあれ。

 

Viscuit-ビスケット

 

 

written by まさとらん

 

まさとらん

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

twitter:0310lan

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

ページトップへ戻る