2013/11/28 【dbookPRO 手取り足取り】 第06回 国旗を動かすパズル問題の作り方

国旗パズル

第06回のコラムでは、dbookPROを使ってよりデジタル教科書らしい教材を作成してみましょう。

デジタル教科書の標準的な機能には、クリックすると写真が飛び出すように表示されたり、ドラッグして様々なアイコンを動かしたりするものがあります。

前者はヒント等の提示に、後者は答えを導く過程によく用いられます。

今回は、そんな画像提示にちょっとしたアクセントを与える効果を、自作の教材につけ加えてみましょう。


今回作るのは、国旗を使ったパズル問題です。

地図を見ながら、色で塗り分けられた地域の国旗を当てるクイズ形式の教材です。

まずは、世界地図のデータを用意します。

世界地図の素材は、弊社で販売している「ネットワーク図鑑 食べ物百科」から持ってきました。

こちらから、「食べ物百科」のサンプル版が操作できます。あくまでサンプル版なので、機能が制限されています。「食品の図鑑」という項目のみが操作できます。)



世界地図を貼った様子
世界地図を貼った様子

世界地図をdbookPROの新規ページに貼りました。

元のデータは白地図ですが、今回は特別に国旗をあてる該当国の色をそれぞれ変えています。

画像を貼った時に、貼り方を聞かれた場合は「現在のページの背景にセット」を選択します。



四角ツールで枠を作った様子
四角ツールで枠を作った様子

図形ツールの中の、四角ツールを選択します。

これで、国旗画像をドラッグする枠を作ります。

枠は同じ大きさに保つためにも、バウンディングボックスの左下のコピーボタンでどんどん増やしていきます。



矢印を作った様子
矢印を作った様子

続いて使うのも、図形ツールの中にある矢印ツールです。

枠がどの国に対応しているのか分かるように、矢印で指していきます。



枠の色を変えた様子
枠の色を変えた様子

国旗をドラッグするための枠を作り、矢印で対応する国を指しましたが、図形の色が同じだと判別がつきにくくなります。

それぞれに色を変えていきましょう。

まずは、オブジェクトをクリックすると出現する設定ボタンを押します。

基本設定パネルで、塗りの色を変えましょう。

色が表示されているボックスをクリックすると、パレットが出現します。

ここでそれぞれの国の色を選ぶのですが、パレットの中から探すのが大変だという場合は、スポイトツールを使いましょう。

スポイトツールは、dbookPROに読み込んだページ上の画像データの中からクリックして選んだ箇所の色と同じものを選択してくれます。

試しに中国の箇所をクリックすると、塗りの色が茶色に変わりました。



それぞれの枠の色をかえた様子
それぞれの枠の色をかえた様子

10カ国分の枠を用意しました。

それなりに手間のかかる作業ですが、バウンディングボックスのコピーボタンとスポイトツールを使えば、短時間で作り終えることができます。



「授業で使う素材集」から
「授業で使う素材集」から

今度は、国旗の画像を用意します。

こちらの画像データも、弊社のソフトから持ってきましょう。

「授業で使う素材集」から、各国の国旗データを用意します。

こちらから、「授業で使う素材集」のサンプル版が操作できます。あくまでサンプル版なので、機能が制限されています。)



地図を貼りつけた様子
地図を貼りつけた様子

地図画像をドラッグ&ドロップして貼りつけました。

とりあえずのスペースとして、枠で囲った所に集めました。

ただ集めただけなので、並び方が凸凹しています。



設定で並びを整列する様子
設定で並びを整列する様子

国旗画像を整列しましょう。

10個ある国旗を範囲指定して、全て選択状態にします。

それから、設定ボタンをクリックして、「基礎設定パネル」の整列をクリックしましょう。



設定で並びを整列する様子2
設定で並びを整列する様子2

さらにパネルがでてきます。

「上揃え」と「等間隔に並べる」を選択しましょう。

これで、国旗が綺麗に並べ終わりました。



動かしたいオブジェクトが下になってしまった
動かしたいオブジェクトが下になってしまった

これで、用意は万端、国旗を動かそうと思ったら、枠の下に国旗画像が来てしまいました。

dbookPROで作成したオブジェクトには、一番新しく貼付したオブジェクトが一番上に表示されます。

貼付をするごとにレイヤーと呼ばれる層にオブジェクトが置かれて行くからです。

国旗をレイヤーで上に表示させるために、「設定」で編集しましょう。



国旗が上にくるように設定した様子
国旗が上にくるように設定した様子

国旗を選択した状態で、設定ボタンをクリックします。

「基本設定パネル」に「手前へ」というボタンがあるので、ここをクリックしましょう。

これで、国旗が上にきました。



授業モードで国旗が操作できない時は
授業モードで国旗が操作できない時は

授業モードで動かしたいオブジェクトが選択できない。

dbookPROで教材を作成している時にそうした状況になった場合は、やはり設定を確認してください。

dbookPROの「編集モード」で作成した図形や入力した文字は、「授業モード」に移行するとロックがかかり操作できなくなります。今回の国旗画像のように、あらかじめ「授業モード」で操作することが分かっているオブジェクトは、操作ができるように設定を変える必要があります。

設定を確認しましょう。「授業モードでロック」にチェックが入っているオブジェクトは、「授業モード」で自動的に背景化され、操作ができなくなります。

このチェックを外したオブジェクトは、授業モードで操作できるようになります。



カーソルがグラブツールに変わった様子
カーソルがグラブツールに変わった様子

「授業モード」に移って確認してみましょう。

国旗の画像の上にカーソルを当てると、カーソルが「矢印」から「グラブ」に変わります。

動かせないオブジェクトは、カーソルを当てても矢印のままになっています。

チェックを外す操作は、複数同時にできるので、国旗画像を範囲指定してチェックを外してください。



解答画面
解答画面

次のページを解答ページにします。

国旗を枠にはめた状態で範囲指定して、世界地図画像、枠と矢印、国旗画像をコピーします。

次の白紙ページに貼りつければ、解答ページは完成です。

ただ、これだけだと解答合わせしかできないので、少々使い勝手が悪いです。

このページに、国の基本情報を含めた解説をつけ加えたいと思います。



解答画面
解答画面

こちらは、写真図版「世界の国々」のページです。

dbookPROには、他に開いているアプリケーションの画面やウェブページの特定の箇所をスクリーンショット(PC画面の撮影)できる機能があります。

授業で使えると思ったページの画像を、どんどんdbookPROに貼りつけていきましょう。

「編集モード」のカメラの形をしたアイコン(「画面キャプチャを貼り付け」)がそれです。

選択すると、「画面を切り抜いて貼り付け」、「5秒後の画面を切り抜いて貼り付け」2つのウインドウが表示されます。

前者はdbookPRO内のページの撮影したい場合に、後者は他に開いているウインドウの撮影したい場合に選択します。

今回は、後者の「5秒後の画面を切り抜いて貼り付け」を選びましょう。



切り抜いた様子
切り抜いた様子

「5秒後の画面を切り抜いて貼り付け」をクリックすると、自動的にdbookPROのページが閉じられます。

5秒間経った時の画面がスクリーンショットとして撮られます。

続いて、切り抜く操作を行います。カーソルを動かしてみると、カーソルの位置にしたがって色反転されるのではないでしょうか。反転されない箇所が切り取られます。

操作のステップは、(1)始点位置を決める、(2)終点位置を決める、(3)の3つです。全てクリック一つで画面が切り抜けるので、dbookPROと同時に画像編集ソフトを立ち上げずに済むのでとても簡単です。

切り抜いた画像は、自動的にdbookPRO上に貼りつけられます。



ポップアップ画像をつくる様子
ポップアップ画像をつくる様子

画像設定パネルの「ポップアップウインドウにする」を選択します。

操作はこれだけです。



ポップアップウインドウ
ポップアップウインドウ

画像がポップアップウインドウになりました。

このポップアップ画像は、あくまでdbookPRO内で表示されるウインドウなので、dbookPROを閉じるとこのウインドウも閉じられます。

「最大化表示(*dbookRPOウインドウ内)」「閉じる」の操作が可能です。



ポップアップウインドウ
ポップアップウインドウ

ポップアップアイコンは、どこでも好きな場所に動かせるので、国旗の近くに寄せてみました。

アイコンをクリックすると、直前で開いていた表示サイズでウインドウが開きます。


この解説ポップアップウインドウを全ての国旗に付帯させた教材が、今回のサンプルで操作できます。

サンプル教材では、解説ウインドウの他に、その国の国歌も視聴できるようにリンクを貼っているので、是非普段の授業にお役立てください。



ポップアップウインドウ

今回のサンプルはこちら

(GI web)

コラム一覧にもどる