前のページへ戻る

キミもレスキュー隊に入隊

15-1 「ドラッグ アンド ドロップを作ってみよう」

前準備

スクラッチサイトにアクセスして、サインインしよう。
(まだ自分のアカウントを作っていない人は、「スクラッチのはじめ方」にしたがってアカウントを作ってね)
why_programming_15のスタジオ(※NHKサイトをはなれます)を見てみよう。

why_programming_15のスタジオで、プロジェクト「15_1_ドラッグ アンド ドロップを作る」を選び、「中を見る」、次に「リミックス」をおして、自分のアカウントにコピーしてね。
(コピーの仕方は「自分の作品を作ろう!リミックス(改造)をする」も読んでね)

ラム

ドラッグ アンド ドロップってなに?

イメージ画像

イメージ画像

イメージ画像

みんなは、ドラッグ アンド ドロップを使ったことがある?
マウスを使ったりして、画面の中のものをつかんだり、動かしたりできる便利な機能(きのう)よね。
今回は、100年に一度 咲(さ)くはずの「おそろしの花」が咲かなくて困っているわ。
ひしゃくに入った水を、ハートの形をした種に運べば咲くはずなんだけど、
ドロップ アンド ドロップがこわれていて、できなくなっていたの。
さっそく直して、おそろしの花を咲かせてみましょう。

ラム

動きを整理して考えてみよう その1

イメージ画像

これがドラッグ アンド ドロップのプログラムよ。中身が抜けているところもあるわね…
・もし マウスのポインターに触(ふ)れた かつ マウスが押された なら
・〇〇まで繰り返す
・マウスのポインターへ行く

これはひしゃくのプログラムだから、 「触れたり」「押されたり」「行ったり」するのは、ひしゃくのことね。
つまりひしゃくが、もしマウスのポインターに触れた かつ マウスが押された なら…
と書かれていると考えてね。
マウスのポインターというのは画面に出てくる矢印のことね。
ちょっと難しそうに見えるけど、そういうときに大事なコツがあるの。
それは、難しそうな動きは細かく分けて、それぞれを順番に考えていくこと。
この場合は「ドラッグ アンド ドロップ」を「つかむ」「動かす」「はなす」という動きに分ける。
それだけで、ずいぶんわかりやすくなるはずよ。

ラム

動きを整理して考えてみよう その2

イメージ画像

イメージ画像

じゃ、一緒に考えてみましょう。まずは「つかむ」よ。
みんなはひしゃくをつかむときに、まずどうする?
マウスのポインター(矢印)を動かして、ひしゃくにふれさせる。
それから、マウスのボタンを押すわよね。
こんなふうに、実際の動きに注目しながら、順に考えていくのよ。
それから、さっきも言ったように、これはひしゃくのプログラムだから、
ひしゃくから見た動きが書かれていることを忘れないでね。
まとめると、みんなが「つかむ」とき、ひしゃくは、
①マウスのポインターにふれている
②マウスのボタンがおされている

という状態ね。
どちらか一方ではなく、①、②両方がされている ことが、「つかむ」ということになるの。
それが、ドラッグ アンド ドロップの一番上に書かれている命令よ。

ラム

動きを整理して考えてみよう その3

イメージ画像

イメージ画像

次は、つかんだ後の動き=「動かす」ね。
みんなは、つかんだひしゃくを「動かす」ときにどうする?
マウスのボタンを押したまま、ポインターを動かしたいところへ移動させるわよね。
このとき ひしゃくはどういう状態?そのマウスのポインターと一緒に移動しているわよね。
つまり、マウスのポインターについて行ってる。
それが、青いブロックの命令に書かれている命令=マウスのポインターへ行くよ。
どう?考え方のコツはつかめてきたかしら?

ラム

動きを整理して考えてみよう その4

イメージ画像

イメージ画像

それじゃ最後に、「動かす」の後の動き=「はなす」を考えてみましょう。
みんなは動かしたひしゃくを“はなす”ときにどうする?“マウスのボタンをはなす”わよね。
そうすれば、ひしゃくはマウスのポインターについて行くのをやめる=ドロップされる(はなされる)。
つまり、“はなす”とは、“マウスのポインターについて行くのをやめる”ことだと考えられるわね。
プログラムを見ると、〇〇までくり返すとなっているから、もしここが、
“マウスのボタンがはなされるまでくり返す”となれば、
ひしゃくは、マウスのボタンがはなされるまで、ポインターについて行き、はなされたら、“ドロップされる”ことになる。
こんなふうに、動かす人間からではなく、動かされるものから見たらどういうことなのか、ということを考えるのはプログラムを作る上でとても大事なのよ。

ラム

便利な命令「ではない」の使い方

イメージ画像

イメージ画像

イメージ画像

ところで…“マウスのボタンがはなされる”という命令は見つかったかしら?
実は、スクラッチにそんな命令はないの。
でも、さっきから使っている“マウスが押された”という命令ならあるわね。
どう?これをうまく使えないかしら。
実は、スクラッチの「演算(えんざん)」のところには、「ではない」という命令があって、これを使って、マウスが押されたではないまでくり返すとすれば、“マウスがはなされるまでくり返す”と同じ意味の命令をしたことになるのよ。
この「ではない」という命令は、いろいろなところで使えるからぜひ覚えてね。

さぁ、これでドラッグ アンド ドロップの命令が完成したわ。
おそろしの花をさかせて遊んでみましょう!

ラム

今回のまとめ

  • むずかしいことは一度に考えず、細かく分けて、それぞれを順番に整理して考えること。
  • 「~ではない」はとてもべんり!

今回のリミックス

・ドラッグ アンド ドロップの作り方は1つじゃない。ほかのやり方も考えてみよう。
・オリジナルの花を描いて、もっとおそろしい花にしてみよう。フリー素材を使ってもいいし、イラストを描くなら「9_1キャラクターを描こう」が参考になるわ。写真を撮ってもいいかも!