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

アプギガトップ > Webサービス > 開始10秒でアニメーションが作れる新感覚プログラミング「Viscuit-ビスケット」にハマる!
注目記事ピックアップ
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
インターネット
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る