これまでのシリーズはこちら

ScratchのStep by Stepを4つまでやって

ScratchのStep by Stepは2017年6月9日現在で13項目あります。一つ一つの項目に反復作業と新規学習項目が含まれており、段階を追って学べる仕様にはなっていますが、やはり4項目を終えてみるとちょっと復習の時間がほしいな、と思う初心者。
特に、できることとできないことの把握の幅が、4項目の「Make It Fly」で一気に広がった印象があります。基礎的な動きがどういったものなのか、というのは把握できても、これができたかもしれない、という発想にのちのち行きつくのがちょっと難しいのですね

たぶん一つのStep by Stepの項目を1つ終えたら、自己流で何かしらの似たようなScratchを組むのがよいのではないでしょうか。やっぱりお勉強と一緒で反復作業大事ですね。

ところでScratch、日本語対応がじゃんじゃん進んでいますね！

ミュージックを作ろう！

Choose musical instruments, add sounds, and press keys to play music.
楽器を選択し、音を追加し、キーを押して音楽を再生しよう！

ゲームにはグラフィック、サウンド、ストーリーの三本柱があるのですが、プログラムをエンターテインメントで覚えるにこのあたりをおさえておくと大変やりやすいということなのでしょうかね。音楽にはとんと縁のないデザイナーですがもそもそやっていきましょう。

ドラムを選ぶ

Click this icon to choose a new sprite:
Click the ‘Music’ theme and choose a drum.
In Scratch, characters and objects are called ‘sprites’.
Tip: If you don’t want the cat in your project, you can delete it using the scissors tool.
Click on the scissors, then click on the cat.

新しいスプライトを選択するには、このアイコンをクリックしてね！
「音楽」テーマをクリックし、ドラムを選択します。
（スクラッチでは、文字とオブジェクトは「スプライト」と呼ばれます）
ヒント：あなたのプロジェクトで猫を望んでいない場合は、はさみツールを使用して猫を削除することができます。
はさみをクリックし、猫をクリックしてください。

以前にやったことがあるスプライト挿入の基本ですね。

ナビの通りにスプライトを選びましたがこれはドラムか？？？

ねこちゃんは消しちゃいましょう。

ドラムを鳴らす

Build a script to play a drum sound:
Press the space key to try it.
Click the Sounds tab to preview the sounds.

ドラムサウンドを再生するためのスクリプトを作成するよ！
Spaceキーを押して試してみてね。
[サウンド]タブをクリックしてサウンドをプレビューします。

お子さんはプレビューって言ってわかるものでしょうかね。試しに見てみようね！　くらいなんですけど。

サウンドタブ（日本語では「音」のタブ）をクリックすると、黒い波の三角形みたいなものが横にならんで見えます。これはドラッグすることで選択できて（紫っぽい青に選択範囲に色が付きます）効果から編集が可能のようです。が、めったなことがない限りはやらないほうがよさげですね、特に私はこう、音楽というものには縁がないので……。

high　low　muted　tap　などいろいろコンガにも音の種類がありますね。

リズムをつける

Add more sounds to make a pattern. Use wait blocks to pause between sounds.
You can add more sounds and play with the timing to customize your rhythm.
Your script will look something like this:
Press the space key to try it.

さらに音を加えてパターンを作ろう！ 待機ブロックを使って、サウンド間で一時停止をするよ。
あなたのリズムで変えるために、たくさんのサウンドを追加できて、タイミングを合わせて演奏することができるよ。
あなたのスクリプトは次のような感じになるよ。
Spaceキーを押して試してみてね！

りずみかる。
待機ブロック、というあたらしい単語が出てきましたね。秒数はコンマ以下も存分に使えるようです。

繰り返そう

Use a repeat block to make it play more than once.
Your script will look something like this:

リピートブロックを使って複数回再生させるよ！
あなたのスクリプトは次のようになります：

やっていて初めて気づいたのですが、ブロックの左上が半円っぽくまるくなっているブロック（主にイベントブロック）は、下の改装にしかリピートもブロックもつけられないんですね……まあそうか……当たり前か……。

●ドラムのアニメーション

You can animate your instrument by adding a next costume block.
Click the Costumes tab to see the sprite’s costumes.

「次のコスチューム」ブロックを追加して、楽器をアニメにすることができるよ！
コスチュームタブをクリックするとスプライトの衣装を見ることができます。

ビジュアルもリズミカル。
コスチュームのタブをクリックしてスプライトを見てンると、ｂのイメージにエフェクトがついていますね。たぶんここを増やすと、ネクストコスチュームなんで、あるだけのコスチュームをめぐっていくのでしょう。

楽器を奏でる

Click this icon to choose a new sprite:
Click the ‘Music’ category to choose an instrument (such as Saxophone or Trumpet).
Build a script to play a sound when you press a key:
Choose ‘up arrow’ or another key:

新しいスプライトを選択するには、このアイコンをクリックします。
「音楽」カテゴリをクリックして、楽器（サックスやトランペットなど）を選択します。
キーを押したときにサウンドを再生するスクリプトを作成するよ：
「上矢印」または別のキーを選択します。

外国では「カウベル」が普通にあるようですね。
でもエレクトーンの手の抜き方はちょっとやばいんじゃないの……。

メロディをつける

サウンドを追加しメロディを追加します。

Use wait blocks to pause between sounds.
You can add more sounds and play with the timing to customize your melody.

待機ブロックを使って、サウンドとサウンドの間で一時停止します。
あなたのメロディーをつくるために、より多くの音を加えて、そのタイミングで演奏することができます。

突然の日本語……。

カスタマイズ、って結構いろんなところで頻繁に使われていますが、日本語にしてみるととても難しい単語になっています。

辞書で引くと「注文通りに作る」という意味なので、スターバックスのカスタマイズ、とか、自作パソコン、とかに使われるのは確かにカスタマイズなのでしょうが、ここでいうカスタマイズとは「あなたの注文通りにブロックを組み立てればあなたの思う通りに演奏できるよ」の意味になります。
クリエイトとカスタマイズはよく似ているのですが、フルオーダーメイドがクリエイトでレディメイドがカスタマイズですかね。難しいですね。詳しいとこは教えてTさん！

和音をつける

Play more than one sound at a time to make a chord, like this:
Use the dropdown menu to choose ‘down arrow’ or another key.
You can also add other chords, like this:

一度に複数のサウンドを演奏して、和音を作りましょう。
ドロップダウンメニューを使って、「下矢印」または別のキーを選択します。
次のように他のコードを追加することもできます：

ブロックを多数作って同時にキーを押すことで、ピアノのように和音になるメロディーが作れる、ということですね。

指定された以外にもいろいろ音は追加できるので、どの音なのかわかる人はこれだけで簡易なメロディーが作れてしまいそうですね。

ランダムノートの演奏

Click this icon to choose another musical instrument sprite, such as Piano or Guitar.
Build a script like this:
To make it change color each time, add a change color block to your script like this:
Tip: Click the Sounds tab to see how many sounds are in your sprite. Type that number into the pick random block.

このアイコンをクリックすると、ピアノやギターなどの別の楽器スプライトを選択できます。
次のようなスクリプトを作成します。
毎回色を変更するには、次のように「変更カラーブロック」をスクリプトに追加します。
ヒント：[サウンド]タブをクリックして、スプライトに含まれるサウンドの数を確認します。「ピックランダムブロック」にその番号を入力します。

変更カラーブロックを利用してもギターの色はあんまりかわらないですね！！！

ボーカルを追加

Add any sprite you want!
Click the Sounds tab, then click :
Click the Vocals theme, then choose beatbox sounds.
Make a sequence, for example:
Or, add a script that plays a random sound:

必要なスプライトを追加してください！
[サウンド]タブをクリックし、次にこのアイコンをクリックします。
Vocalsテーマをクリックし、ビートボックスサウンドを選択します。
シーケンスを作成します。例：
または、ランダムなサウンドを再生するスクリプトを追加します。

音感なんてなかった。
乱数数値はコスチュームタブやサウンドタブに含まれる要素個数が原則のようです。コスチュームやサウンドは増やせるので、実質乱数も自分で決めている、ということですね。

サウンドの録音

If you have a microphone, you can record your own sounds.
Click the to choose a new sprite:
Click the microphone icon to record your own short sounds. Make a sound like ‘meep’, ‘bop’, or ‘zap.’
Trim the sound so it’s just one short syllable. To trim, highlight the part to delete, then press the ‘delete’ key.
Click the icon again to record another sound.
You can also record sounds using objects around you, such as by tapping a table or dropping a coin.

マイクを持っている場合は、自分で出す音を録音できます。
このアイコンをクリックして新しいスプライトを選択します：
自分の短い音を録音するには、マイクアイコンをクリックします。 ‘meep’、 ‘bop’、 ‘zap’のようなサウンドを作りましょう。
ちょうど1つの短い音節になるように音をトリムします。 削除するには、削除する部分をハイライト表示してから、「削除」キーを押します。
アイコンをもう一度クリックすると、別のサウンドが録音されます。

また、テーブルをタップするか、コインを落とすなど、周囲のオブジェクトを使用してサウンドを録音することもできます。

録音機能はついていませんのでこちらはちょっと試せないですね。

後の使い方はおおよそ一緒。そんなに長い音でなければあいさつ、ハッピーバースデーなどといった言葉も録音できそうですね。

演奏を続けよう

ADD MORE SPRITES

You can add and animate more instruments, singers, dancers, or other sprites.
背景の追加
Click the icon to open the Backdrop library:
PLAY NOTES
Another way to make music is to use the play note block.

Try a script like this:

You can choose the instrument and notes you want. You can also change the timing.

ADD A MUSIC LOOP
Choose ‘speaker’ or another sprite:

Choose a drum loop from the Sound library:
Loop your sound by adding a script like this:
HAVE A MAKEY MAKEY?
Connect your project to a Makey Makey. You can create musical instruments out of coins, clay, cardboard, and more! To find out more, see Makey Makey and Scratch.

【もっとたくさんのスプライトを加える】
もっとたくさんの楽器、歌手、ダンサー、その他のスプライトを追加してアニメをつくりことができます。
【背景の追加】
アイコンをクリックして背景ライブラリを開きます：
【プレイノート】
音楽を作るもう1つの方法は、プレイノートブロックを使用することです。
次のようなスクリプトを試してみてください：
必要な楽器と音符を選択できます。 タイミングを変更することもできます。
【音楽を追加する】
‘スピーカー’または別のスプライトを選択してください：
サウンドライブラリからドラムループを選択します：
次のようなスクリプトを追加してサウンドをループさせます：

【メイクすることができますか？】
プロジェクトをMakey Makeyに接続します。 コイン、粘土、厚紙などの楽器を作ることができます！ 詳細については、Makey MakeyとScratchを参照してください。

ながい！

早い話がいろいろカスタマイズできるよーってことですね。背景をさくっと入れてみましょう。

さらにスピーカーを追加してさくっと音を適応してみましょう。そのままループするブロックを組みます。

ここにある Makey Makey とは、ミノムシクリップでつなぐだけでいろんなものをパソコンのキーボードのキーにできるサイエンスキットです。
簡単にできそうなのでどこかの教室とかでやってないかな～～～（ちらっ　ちらっ　→）

できあがりがこちら！

音感なんてなかった。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

テレビを見なくなってから季節感を失いました、網干です。

情報源がネットの情報になってから早数年…、情報の選別の仕方が極端になってしまったので季節ごとの何かを感じることが少なくなってしまいました…。
そんなこんなで年末になってしまったので、年始の準備が全く整っていません。
と、とりあえず部屋の大掃除を始めて年末感を出そうかなと考えています。

さて、今回は「ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法」を記載します。
本記事を読む事で、今見ているページのようにオブジェクト（花びら等）がゆらゆらと落下するエフェクトをページに追加することができます。
（このページでは雪は見づらいので花びらを落下させています）

いろいろな個人サイトを眺めているとたまに見かけるこの機能、意外と簡単に実装できるので紹介します。

雪を降らせるためのプログラムファイルをダウンロード

まず初めに、雪を降らせるためのプログラムファイルをダウンロードします。
ダウンロードは下記のURLから行ってください。
https://github.com/loktar00/JQuery-Snowfall

以下、ダウンロードの方法を記載します。

プログラムのダウンロード方法

URLにアクセスすると下図のようなページに移動します。
ページの右側にある「Clone or download」をクリックしてください。

「Clone or download」をクリックすると下図のような画面が表示されますので、右側の「Download ZIP」をクリックしてください。

「Download ZIP」をクリックするとダウンロードが開始します。
ダウンロードしたファイルはzip形式で圧縮されています。

プログラムファイルのダウンロードは以上になります。

プログラムを使って好きなページに雪を降らせる

先程ダウンロードしたプログラムファイルを解凍して、解凍したフォルダごとサーバー内のアクセスできる領域に設置してください。

これで準備は完了です。早速使ってみましょう！

プログラムの実装

本プログラムはjQueryを使用しているので、headタグに下記の指定が必要になります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"<</script<

次に、ダウンロードしたプログラムを使うために、下記の記述をbody内に記述します。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    //image : './image.png'		// 要素を指定の画像に変更
  });
</script>

これで、ページ内に雪を降らせることができます！

………。

ちょいと分かりにくいかもしれないですね…

ということで、サンプルプログラムを載せておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="Shift_JIS">
    <title>snow_sample</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body bgcolor="#2d2f52" text="#ffffff">
    <script type="text/javascript" src="./JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).snowfall({
        flakeCount : 100,			// 要素の数
        flakeColor : '#FFF',		// 要素の色
        flakeIndex : 999999,		// 要素のz-index
        minSize : 5,				// 要素の最小サイズ
        maxSize : 20,				// 要素の最大サイズ
        minSpeed : 2,				// 要素の最小落下スピード
        maxSpeed : 5,				// 要素の最大落下スピード
        round : true,				// 要素に丸みを持たせる？
        shadow : false				// 要素に影をつける？
        //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
        //image : './image.png'		// 要素を指定の画像に変更
      });
    </script>
  </body>
</html>

※snowfall.jquery.min.js のパスはサーバー内に格納したディレクトリになりますので注意してください！

上記のプログラムが正常に起動すると、雪の降るページが表示されます。

雪ではなく花びらを降らせるための設定方法

雪を花びらに変えたい場合は、下記のようにimageの部分に花の画像を指定することで実装できます。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false,				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    image : '(画像ファイルを格納したディレクトリパス)/example.png'		// 要素を指定の画像に変更
  });
</script>

今回は以上になります。

いかがでしたか？

企業様のサイトではなかなかできないことですが、個人のサイトではこういった遊びのエフェクトを追加することで面白いページが作れそうですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。