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

アプギガトップ > Webサービス > 開始10秒でアニメーションが作れる新感覚プログラミング「Viscuit-ビスケット」にハマる!
注目記事ピックアップ
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
インターネット
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...

ページトップへ戻る