第
1
章
jQuery
と
jCanvas
1.1.
jQuery
とは
jQuery とは、人間が理解しやすいプログラミング言語で書かれたコンピュータプログラムであるソースコード を広く一般に公開し、誰でも自由に扱ってよいとする考え方のオープンソースソフトウェアとして公開されてい る、javaScript のライブラリのひとつである。jQuery の特徴とメリットは、他のライブラリに比べて軽量であり、 シンプルなコードで、より多くのことを実行できる点にある。長いコードのように読みにくいこともなく、エラー の数も少なくなり、実行効率が良い。デメリットは、JavaScript の記述を少なくするために、jQuery 独自のプロ グラムの記法がある。よく使われるもので例を挙げるならば、オブジェクトを指定する$() である。また、メソッ ドには JavaScript では使えないものもあり、JavaScript に加えて、jQuery の記法も学ぶ必要があるとされる。さ らに、色々あるブラウザによって挙動の差異をなくすように設計されているので、「Googlr Chrome では動いたけ ど Eddge(Enternet Explorer) では動かなかった。」という例がなくなる。Web サイト、特に動的なものを作成す るには最も利用価値があると言われている。jQuery が人気が出たのは、様々な機能を実現するプラグインという 形で機能を拡張するという仕組みを持たせたことがひとつの理由である。加えて、次々に便利な機能を持ったプ ラグインが公開されたことも理由であるとされている。jCanvas がその jQuery のプラグインのひとつである。そ の jCanvas については、以下で説明する。 (jQuery のプログラム例) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ $("#test").html("Hello World!") }); </script> <head> <body> <div id="test"></div> </body> </html>1.2.
jCanvas
とは
jCanvas とは、jQuery のプラグインとして作成されていて、HTML5 から Canvas が追加され、それをもう少 し楽に扱えるものである。Canvas は、HTML と JavaScript を用いて Web ページ内に複雑な図とかをブラウザ上 で描画できる機能があり、それは、HTML の代表的な機能として紹介されている。以上を踏まえて、HTML につ いても議論すべきだろう。
1.2.1.
HTML
HTML とは、HyperText Markup Language の略で、Web ページを作成時に使用される言語の一つである。 WWW（Web、ウェブ）で利用される国際的な非営利団体である W3C(World Wide Web Consortium) によって
標準化が行われており、大半の Web ブラウザは標準で HTML 文書の解釈・表示が出来る。HTML では、文書の 一部を「<」と「>」 で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾について の情報を文書に埋め込んで記述することができる。また、特別な文字列のことをマークアップ言語という。文章の 中で表題や段落の区切りを指定したり、箇条書きの項目を挙げたり、文書の一部として画像や音声、動画を埋め込 んだり、テキスト内に埋め込まれた、ほかのファイルや位置への参照情報のハイパーリンクを設定したりすること ができる。言語を使用して書かれた文書自体は、メモ帳などのエディターで開けるテキストファイルになるため 編集が簡単である。ソフトウェアや OS にバージョンがあるように、HTML にもバージョンがある。これは、そ の都度改良や新しい仕様が加えられている。
1.2.2.
HTML4
かつて、Netscape や Internet Explorer などの web ブラウザのシェア争いがあった頃は、次々と新しい機能が追 加された。ユーザーも、新しい機能を使うようになり、アクセス数が多いほど優良な web ブラウザである時期が あった。しかし、次々と生み出される新しい機能は、各 web ブラウザごとの独自の機能であったため、その web ブラウザでないと見れないサイトが出てきた。さらに、最新のバージョンでないと見れないという問題も起こって きた。そこで、W3C が勧告を出し、現在は世界中がそれに従うように推奨されている。それが HTML4.0 という 仕様である。さらに HTML4.0 の不具合を修正した HTML4.01 という仕様が発表された。 W3C の仕様書によると、HTML 4.0 及び HTML 4.01 の目的として、以下のように書かれている。 ・HTML 4 は、多様な言語で文書を書くことができ、国際化分野の専門家からの助力を得て設計されたため、HTML の国際化が達成すること。 ・身体的な限界を持つ人々に対して Web ページをよりアクセスしやすくできるよう設計すること。 ・表のデータを実装出来ること。 ・一般メディアオブジェクト及びアプリケーションを HTML 文書に組み込む機構を実装すること。 ・HTML 文書で指定するか外部スタイルシートで指定するか、スタイル情報を要素のグループに関しても指定で きるようにすること。 ・HTML 文書にスクリプトを組み込む機構は、スクリプト言語から独立すること。・印刷出来ること。 以上のことから「HTML 4.01」は、ある意味標準的な HTML と言える。
1.2.3.
HTML5
まず HTML5 とは、今まで難しかったとされる処理が簡単に出来て、長かったコードが短く書けるものである。動 画や音声、数字や文字だけでなく図形等を用いるグラフィックの描写が可能になり、HTML4 では実現するのが難 しかったとされる、位置を取得したり、大量のデータを保持させることも可能になった。まとめると、今まで制作 する側が苦労していた部分の改善や、よく使う機能などが追加されたものである。対応ブラウザについても、要 素ごとにばらつきがあり、完全に対応しているとは言い難いが、全てのブラウザが「HTML5」への対応に向かっ ている。 HTML5 は、人間にも、コンピューターにも馴染みやすい言語とすることが目的とされた。ここでの人間とは コーダーやフロントエンドエンジニアなどウェブサイトを作る人であり、コンピューターとはウェブブラウザや検 索エンジンのクローラーを指し示す、と考えられる。HTML5 の特徴は、 ・一部のブラウザでは対応しておらず、対応済みのブラウザでもすべての機能は対応していないこと。対応して いないブラウザは OPERA や、Internet Explorer7 と Internet Explorer8 である。・記述方法に関して比較的決まりごとが少ないこと。 ・他の言語やファイルの埋め込みに対して柔軟に対応出来ること。 ・検索エンジン等がウェブサイトの構造をより詳しく把握できるようになったこと。 また、動きのあるウェブサイトを作るための要素もいくつか追加された。例えば、video 要素は従来の img 要素を 扱うように、動画を扱うことができ、⟨canvas⟩では JavaScript と連携して図形を描くことができる。一方で、削 除された要素もあります。例えば、⟨font⟩要素は CSS で代替できるため、「HTML5」では削除された。
1.2.4.
Canvas
Canvas とは、HTML5 から追加された図形を描くための技術仕様である。Canvas 機能を用いると JavaScript で以下のような描写処理を行うことができる API(アプリケーションプログラミングインターフェース) が提供さ れている。 ・線（直線、曲線、実線、点線） ・四角形 (角丸) ・円 (楕円、弧) ・色とスタイル（単色、グラデーション、影） ・文字の描画（サイズ、フォント、ゆがみ、色の指定） ・変形（拡大、回転） Canvas の特徴は、書いた図形を動かしたりする、アニメーション機能がないことである。もし図形を動かしたい なら、一コマずつ消して、再描画する処理をする必要がある。これらの特徴とされるデメリットが Canvas にはあ り、どんなことも出来るわけではないことがわかる。
また、今回使用する jCanvas は、HTML5Canvas の機能を jQuery により使いやすくプラグインできるものとして 作成されてあり、Canvas への描画処理を少し軽めの API で実現できる。
jCanvas 未使用時 (Canvas 使用時) と、jCanvas 使用時の違いを以下にまとめる。 ・jCanvas 未使用時 (Canvas 使用時) 例
onload = function() { draw();
};
function draw() {
var canvas = document.getElementById(’c1’);
if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext(’2d’);
/* 円 #1 */ ctx.beginPath();
ctx.fillStyle = ’red’; // 赤
ctx.arc(70, 45, 35, 0, Math.PI*2, false); ctx.fill();
/* 円 #2 */ ctx.beginPath();
ctx.fillStyle = ’green’; // 緑
ctx.arc(45, 95, 35, 0, Math.PI*2, false); ctx.fill();
/* 円 #3 */ ctx.beginPath();
ctx.fillStyle = ’blue’; // 青
ctx.arc(95, 95, 35, 0, Math.PI*2, false); ctx.fill();
}
・jCanvas 使用時例 $("#canvas").drawArc({
strokeStyle: "black", strokeWidth: 2, x: 100, y: 100, radius: 50 }). $("#canvas").drawArc({ fillStyle: "green", //緑 strokeStyle: "black", strokeWidth: 2, x: 300, y: 300, radius: 50 }). $("#canvas").drawArc({ fillStyle: "blue", //青 strokeStyle: "black", strokeWidth: 2, x: 500, y: 500, radius: 50 }). 上記はそれぞれ、三つの円を違う色で描写する例である。Canvas は描く図形の色は、デフォルトでは黒となる。 よって、黒以外の色を指定する場合は、描画する前に次のプロパティに色情報を指定する必要がある。Canvas は、 Canvas 要素から描画のためのコンテキストを取得し、それを用いて上から順番に描画処理を記述するため、コー ド量が増えた時に記述内容から描画内容を把握するのが難しくなる場合がある。Canvas は最初に指定された色が、 それぞれ描画される図形によって指定しない限り、ずっと残る。一方、jCanvas は、Canvas 要素に対して描画処 理を直接記述するため、複数の描画処理をわかりやすく記述出来る。jCanvas は図形ごとに描写処理をするので、 プロパティが独立している。また、上記の例からは、コードの記述方法の簡易さの違いが見て取れる。使用する 側からすると、短くまとめられ、簡単にわかりやすく書けるコードの方がエラーも少なく、作成へのストレスも 少なくなるだろう。なので私は、jCanvas を使用して本ソフトを制作できると考え、jCanvas について調べた。
1.2.5.
jCanvas のダウンロード
jCanvas を入手するには、まず、http://projects.calebevans.me/jcanvas/へ行く。「Download jCanvas」と書かれたリンクがあるので、そこからダウンロードする。jcanvas.js または jcanvas.min.js が配布されている。min の部分は圧縮方式を表している。実際に使用するときはファイルサイズが 小さいほうが よいので、一般的には圧縮版を使用する。ダウンロードしたものを HTML ファイルに保存する。
1.2.6.
設置方法
ダウンロードしたファイルは HTML 内へ次のように設置する。 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> <script src="jcanvas.min.js" type="text/javascript"></script> </head><body><canvas></canvas> <script language="javascript"> //ここにコードを書き込む </script> </body></html>
1.2.7.
jCanvas の共通プロパティ
jCanvas で描画をする前に、まずはキャンバスを作成する。 $("canvas")[0].width = $(window).width(); で、キャンバスの幅を最大にし、 $("canvas")[0].height = $(window).height(); で、キャンバスの高さを最大にする。 さらに、図形を描くには共通のプロパティがある。strokeStyle:”色”で線色を指定、 fillStyle:”色”で塗りつぶす 色を指定、 strokeWidth:で線幅を指定、 x:値で点の x 座標を指定、 y:値で点の y 座標を指定。 以上は必須であ る。ただし、fillStyle と strokeStyle は選択可能である。以下にそれぞれの命令について列挙する。1.3.
jCanvas
の命令
1.3.1.
図形描写
•
drawArc
(x:, y：, radius:, start:, end:)drawArc 関数で円弧を描くことができる。ｘ:とｙ:で指定した値が円の中心点になり、radius で指定した 値が円の半径になる。start:は開始角、end:は終点角を指定できる。
(例)$("canvas").drawArc({strokeStyle:"red", x:100, y:100, radius:20, start:0, end:360});
•
drawLine
(x1:, y1:, ... xn:, yn:)drawLine 関数で折れ線を描くことができる。ｎは自然数である。n が 2 ならば直線、n が 3 以上ならば 折れ線になる。x1:と y1:で指定した値が折れ線の開始点で、xn:と yn:で指定した値が折れ線の終了点であ る。さらに、rounded:ture で、折れ線の角を丸める。 strokeDash:[間隔] で、点線にできる。 startArrow: , endAllow: を ture にすることで矢印が描ける。 arrowAngle: , arrowRadius: で、矢印の開きや大きさを指 定できる。
(例)$("canvas").drawLine({strokeStyle:’blue’, endArrow:true, arrowRadius:20, x1:10, y1:20, x2:50, y2:100, x3:70, y3:40});
•
drawRect
(x:, y:, width:, height:)drawRect 関数で長方形を描くことができる。x:と y:で指定した場所が長方形の中心点になり、width:で 横幅、height:で高さを指定できる。cornerRadius:で角の丸みを指定できる。
(例)$("canvas").drawRect({fillStyle:’red’, x:300, y:140, width:300, height:150});
•
drawPolygon
(x:, y:, radius:, sides:, (rotate:))drawPolygon 関数で正多角形を描くことができる。x:と y:で指定した場所が正多角形の中心点になり、 radius:で指定した値が正多角形の半径になり、sides:で角数を指定。さらに、rotate:で回転角を、concavity: で辺のへこみを指定することもできる。
(例)$("canvas").obj.drawPolygon({fillStyle:’green’, x:50, y:100, radius:30, sides:3, concavity:0.5});
•
drawText
(x:, y:, fontStyle:’ ’, fontSize:, text:’ ’)drawText 関数で文字を表示できる。fontStyle:で字体を指定、fontSize:で字の大きさを指定、text: ’’で 囲った文字列を表示する。さらに、align を’center’, ’left’, ’right’ にそれぞれ指定することで、文字列が中央 揃え、左揃え、右揃えに対応する。さらに、’start’ を指定した場合は、x,y の位置から描き始め、’end’ を指 定した場合は、x,y の位置で書き終わる。baseline を ’middle’, ’top’, ’hanging’, ’alphabetic’, ’ideographic’, ’bottom’ にそれぞれ指定することで、縦位置設定ができる。また、flipArcText:を true にすると、文字列を 弧状に描画できる。fontFamily:で指定されたものは最上位設定になる。
(例)$("canvas").drawText({strokeStyle:’blue’, strokeWidth:1, x:150, y:30, fontSize:20, text:’ こんにちは’});
•
drawImage
(source:, x:, y:)drawImage 関数で画像を貼り付けることができる。source:で画像ファイルのフルパス、ｘ:とｙ:で指定し た場所が画像を表示する中心点になる。ただし注意として、画像ファイルは作成している HTML ファイル と同じフォルダ内に保存しなければならない。さらに、width:と height:を指定することで画像の大きさを変 化。scale:指定で画像を拡大縮小。sWidth:と sHeight:、sx:と sy:を指定することでクロップ（表示範囲）の 調整。cropFromCenter:の真偽値でどこからクロップするかの指定ができる。
(例)$(’canvas’).drawImage({source: ’images/fish.jpg’, x: 150, y: 150});
•
drawQuadratic
(x1: , y1: , cx1: , cy1: , x2: , y2:)drawQuadratic 関数で 2 次曲線を描くことができる。x1:と y1:で指定した値が 2 次曲線の開始点で、cx1: と cy1:で指定した値が 2 次曲線の頂点で、x2:と y2:で指定した値が 2 次曲線の終了点である。
(例)$("canvas").drawQuadratic}({strokeStyle:’black’, x1:70 , y1:150 , cx1:200 , cy1:20 , x2:350 , y2:100})
•
drawBezier
(x1:, y1:, cx1: ,cy1:, cx2:, cy2:, x2:, y2:, cx3:, cy3:, cx4:, cy4:, x3:, y3:[,...])drawBezie 関数でベジエ曲線を描くことができる。x1:と y1:で指定した値がベジエ曲線の開始点で、x2:と y2:で指定した値がベジエ曲線の頂点で、x3:と y3:で指定した値がベジエ曲線の終了点である。cx1:と xy1:、 cx2:と cy2:、cx3:と cy3:、cx4:と cy4:で指定した値がベジエ曲線の接点である。
(例)$("canvas").drawBezier({strokeStyle:’black’, x1:10, y1:10, cx1:30 ,cy1:30, cx2:70, cy2:70, x2:120, y2:120, cx3:140, cy3:140, cx4:180, cy4:180, x3:210, y3:210})
•
drawEllipse
(x:, y:, width:, height:)drawEllipse 関数で楕円を描くことができる。x:と y:で指定した値が楕円の中心点になり、width:で指定 した値が楕円の横幅で、height:で指定した値が高さを指定できる。
(例)$("canvas").drawEllipse({fillStyle:’red’ x:150, y:100, width:200, height:100});
•
drawSlice
(x:, y:, radius:, start:, end:)drawSlice 関数で扇形を描くことができる。x:と y:で指定した値が扇形の中心点になり、radius:で指定した 値が扇形の半径になり、start:で指定した値が開始角、end で指定した値が終了角である。さらに、spread:(0 ∼1) でとなりの扇形との間隔指定ができる。
(例)$("canvas").drawSlice({fillStyle:blue, start:60, end:120, x:100, y:100, radius:150, spread:1/40});
•
drawPath
(p1:type:’ ’,(座標設定),p2:type:’ ’,,...)drawPath で線の描画を複数纏めて宣言できる。type は、line、vector、quadratic、arc などがある。 (例)$("canvas").drawPath({strokeStyle: ’#000’,strokeWidth: 4,
p1: {type: ’line’, x1:200, y1:50,x2:100, y2:150,x3:200, y3:150,x4:120, y4:200}, p2: {type: ’quadratic’, cx1:175, cy1:250,x2:225, y2:200}});
1.3.2.
Layer
•
drawLayers (レイヤー)
drawLayers 関数でキャンバスをクリアし、キャンバスのレイヤーを描画することができる。そのとき、レ イヤーは 0∼の登録順の番号、もしくは名前文字列で指定する。
•
addLayer (type:図形, width: 横, height: 縦 )
レイヤーを追加する関数である。type:で描画したい図形や文字などの様々な種類を指定する必要がある。 •
addLayerToGroup (レイヤー , レイヤーグループ文字列 )
グループ登録する関数である。 •animateLayer(レイヤー ,｛プロパティ｝ [, 時間 ] [, イージング ] [, 処理関数 ] )
アニメーション化する関数である。イージングは速度変化である。しかし、いまのところは、’linear’ と’swing’ のみ使う。liner は図形を描き、swing は図形を回転させる。 •animateLayerGroup( )
グループ登録して、アニメーション化する関数である。 •delayLayer( )
アニメーション待機時間設定をする関数である。 •delayLayerGroup( )
グループ登録されたアニメーション待機時間設定をする関数である。•
moveLayer(元レイヤー , 変更後レイヤー番号 )
指定した元レイヤーから、指定した変更後レイヤーまで動く関数である。 •removeLayer( )
レイヤー削除関係の関数。 •removeLayerFromGroup( )
•removeLayerGroup( )
•removeLayers(関数設定)
•setLayer( )
レイヤー設定関係の関数 •setLayerGroup( )
•setLayers(関数設定)
•getLayer(レイヤー )
レイヤー取得関係の関数。 •getLayerGroup( )
•getLayerIndex( )
•getLayers(関数設定)
•stopLayer(レイヤー)
アニメーションを停止する関数である。 •stopLayerGroup( )
グループアニメーションを停止する関数である。 •setEventHooks(add:function(layer) レイヤーが設定された時の処理 )
•イベント項目
–click
クリックしたときに反応するイベント。 –dblclick
ダブルクリックしたときに反応するイベント。 –mousedown
マウスのボタンを押したときに反応するイベント。 –mouseup
マウスのボタンを離したときに反応するイベント。–
mousemove
マウスを動かしているときに反応するイベント。 –mouseover
マウスが canvas 要素上にいるときに反応するイベント。 –mouseout
マウスが canvas 要素上にいないときに反応するイベント。 –dragstart
ドラッグし始めたときに反応するイベント。 –drag
ドラッグしたときに反応するイベント。 –dragstop
ドラッグをやめたときに反応するイベント。 –dragcancel
ドラッグしたものが canvas の外に出たときに反応するイベント。(例)dragstart, drag, dragstop, dblclick $("canvas").drawArc({
layer: true,draggable: true,bringToFront: true,fillStyle: "green", x: 150, y: 150,radius: 50,
dragstart: function() {layer.fillStyle="blue"}, drag: function(layer) {layer.fillStyle="red"},
dragstop: function(layer) {layer.fillStyle="yellow"}, dblclick:function(layer){layer.fillStyle="black"}}); 初期の円の色は緑色である。ドラッグし始めた瞬間に円の色は青色に変わる。ドラッグしている時、円の色 は赤色に変わる。ドラッグを終了した時、円の色は黄色に変わる。ダブルクリックした時、円の色は黒色に 変わる。 (例) $.jCanvas.defaults.layer = true; $("canvas").drawArc({
fillStyle: ’blue’,x: 150, y: 150,radius: 50,draggable:true,
name:"rei",drag:function(){$("canvas").removeLayer("link");drawLink();}}); function drawLink(){
var ai = obj.getLayer("rei"); $("canvas").drawRect({
fillStyle: ’red’, x:ai.x+100, y:ai.y+100,
width: 100, height: 100,draggable: false,name:"link"});} drawLink();
(例)
$.jCanvas.defaults.layer = true; obj.drawLine({
strokeStyle: "black", strokeWidth: 1, x1:10, y1:200,
x2:200, y2:30, x3:390, y3:200, draggable: false, name: "link" }); obj.drawArc({
fillStyle: "blue", radius:6, x:200, y:30, draggable:true, name:"vertex", drag:function(layer){
var sen=obj.getLayer("link"); sen.x2=layer.x; sen.y2=layer.y; }});
1.3.3.
キャンバス関係
•
clearCanvas()
キャンバスを消去する。
•
rotateCanvas(x:, y:, rotate: )
指定した x:と y:の値を中心に、rotate:で指定した角度を回転する。
•
scaleCanvas(x:, y:, scaleX: , scaleY: )
指定した x:と y:の値を中心に、scaleX:で横倍率、scaleY:で縦倍率指定した分、拡大縮小する。さらに、 scaleCanvas(scale:2).drawRect… のようにも指定することもできる。 •
translateCanvas(translate:)
translate:で右移動距離を指定した分、大平行移動する。さらに、translateY:で上移動距離を指定できる。 •detectPixelRatio(function(ratio)ratio を使った処理)
解像度に応じた処理。 •restoreCanvas( )
描画状態を保存した時点のものに戻す。 •getCanvasImage ( )
画像の Base64 データで保存する。（デフォルト PNG, 引数’jpg’ で JPEG に変更できる） •setPixels( )
ドット処理。1.3.4.
戻り値がないメゾット
•createGradient( )
指定した形のグラデーションを描画する。 •createPattern( )
指定した画像を塗りつぶす。 •getCanvasImage( )
画像の Base64 文字列生成する。 •getEventHooks( )
イベントオブジェクトの取得。 •measureText( )
名前の付いたテキスト文字列の取得。 •jCanvas.extend( )
命令拡張用1.3.5.
その他のプロパティ
•一般的なもの
–shadowBlur:
0∼100 の間の値を指定することで、ぼかし効果のレベルが変化する。0 なら変化なし、100 なら完 全にぼける。 –shadowColor:”色”
色を指定することで、影の色が変化する。 –shadowStroke:
値を指定することで、影の長さが変化する。 –shadowX: , shadowY:
x 方向と y 方向に指定した大きさの影を、形や文字に付ける。 –scaleX: , scaleY:
値を指定することで、x 方向と y 方向に拡大縮小する。ただし、拡大縮小する中心は canvas 要素の 中心である。 –opacity:
0∼1 の間の値を指定することで、図形や文字の透明度が変化する。0 なら透明、1 なら不透明である。 –bringToFront:
ture を指定することで、重なっている描画を前に出す。 false を指定することで、重なっている描画 を後ろに出す。 –restrictDragToAxis:
’x’ と’y’ を指定することで、その軸方向にドラッグを制限する。さらに、’null’ を指定すれば自由に 動くようになる。 –disableEvents:
ture を指定することで、イベント発生の一時停止をする。 false を指定することで、イベント発生を 再開する。 –intangible:
ture を指定することで、上に図形があってもマウスが反応する。false を指定することで、上に図形 があっても反応しない。 –visible:
ture を指定することで、描画したものを表示する。false を指定することで、描画したものを非表示 にする。 –autsave:
ture を指定することで、自動保存する。false を指定することで、自動保存しなくする。 –crossOrigin:
drawImage で使う。元の文書とは異なるものから読み込んだ画像を canvas 要素で利用できるように なる。”, ’anonymous’, ’use-credentials’ –dragGroups:
ドラッグするものをグループ化し、まとめて動かすことができる。 –inDegrees:
true を指定することで、描画された図形が半分の形になる。false を指定することで、描画されたも のが正しい形になる。 –intangible:
true を指定することで、ドラッグしても動かなくする。false を指定すると、ドラッグしたら動くよ うになる。–
maxWidth:
drawText で使う。値を指定することで、文字がその値の中に納まるようにして、表示されるように なる。 –r1:,r2:
null を指定することで、r1 はグラデーションの半径の始点を指す。r2 はグラデーションの半径の終 点を指す。 –respectAlign:
drawText で使う。true を指定することで、x と y の位置に文字を表示する。false を指定すること で、x と y の位置に文字を表示しなくする。
–
translateX:,translateY:
translateX と translateY で指定した値の位置に、描画する図形を移動させる。
•
図形関連
–
strokeJoin:
線の継ぎ目を指定できる。 ’miter’ はとがった状態を、 ’bevel’ は先を切った状態を、’round’ は丸い 状態を指す。 –
miterLimit:
上記の’miter’ のとがりの制限値を指定できる。 –imageSmoothing:
ture を指定することで、滑らかに描画する。false を指定することで、滑らかに描画しなくする。 –compositing:
描画の重なり具合を以下の値で選択できる。’source-over’, ’source-in’, ’source-out’, ’source-atop’, ’lighter’, ’destination-over’, ’destination-in’, ’destination-out’, ’destination-atop’, ’copy’, ’xor’,
–
mask:
ture を指定して、その図形の上に図形を描くと、元の図形内にのみ描かれる。 –ccw:
ture を指定することで、反時計まわりに角度を進める。false を指定することで、時計回りに進む。 –intersects:
ture を指定することで、図形の上にカーソルがある。false を指定することで、図形の上にない。た だし、読み込み専用である。第
2
章 シミュレーションによる学習ソフト
2.1.
シミュレーションソフトのメリットとデメリット
シミュレーションソフトの例として、自動車教習所で自動車の運転や走行を体験するドライブシミュレーション や、航空機乗組員の訓練、試験、審査で航空機の飛行の操縦訓練や搭乗体験をするフライトシミュレーションが 主に挙げられる。それぞれのシミュレーションはパソコン上でするものでなく、運転席やコックピットを型取った 機械を想定して考える。また、それらを例に挙げて以下にて、シミュレーションソフトのメリットと考えられる ことを一つずつ説明していく。まず、一つ目として、シミュレーションソフトと実際の車や飛行機を比較すると、 実装費用の違いについては、シミュレーションソフトの方がメリットがあると考える。数値として比較出来るよ うに、インターネットで実際の車と飛行機の値段、車や飛行機を運転できるシミュレーションソフトが掲載され た機械の値段を調べてみた。普通車の新車は 200 万円前後で購入でき（SUZUKI より引用）、飛行機のジャンボ 機と呼ばれるものは 200 億∼250 億円での購入になるという（Aviation information site より引用）。ドライビン グシミュレーションが掲載された機械は、130 万円∼3000 万円前後までと幅広く（フォーラムエイトより引用）、 フライトシミュレーションが掲載された機械は、2 億∼4 億円とされているという。これらのことから、運転・操 縦体験をするために実際に車や飛行機を複数台準備することは、シミュレーションソフトを複数台準備すること に比べると、金額的に不可能に近い。さらに実物を使用し運転体験をすることで失敗すれば、大きな被害が生じ、 莫大な金額がかかるが、シミュレーションソフトが掲載されたものを使えばその心配がなくなるだろう。さらに、 実際の車や飛行機を使用すると出てくる費用的な問題は、ガソリン代や整備費といった面でも出てくる。実物は シミュレーションソフトと比べると耐久性にも欠けるので、そのメンテナンス費も必要となるので、そう考える とやはり、実装費用の違いについては、シミュレーションソフトの方がメリットがあるだろう。二つ目のメリット は、実際の車や飛行機を使うよりも、シミュレーションソフトを使用した方が、指導者への負担が少ないという ことである。シミュレーションソフトを使えば、場合によっては指導者が不要な場合がある。ユーザーがシミュ レーションソフトを使ってる間で、指導者は別のユーザーの実習や講義を行うことが出来るので、指導者一人が ユーザーに対してかける時間が短縮される。三つ目のメリットは、実際の車や飛行機を使うよりも、シミュレー ションソフトを使用した方が、ユーザーへの精神的負担が少ないということである。実物の車や飛行機での運転 や操縦は言葉では表せないほどの大きな精神的負担があるだろう。シミュレーションソフトを使えば、少なくとも 負担は大きく感じることなく、運転・操縦体験が出来ると考えられる。四つ目のメリットは、実際の車や飛行機 はシミュレーションソフトと比べると、体積差が大きく違うということである。シミュレーションソフトはパソ コンを使って体験出来るのがあるが、本格的なシミュレーションソフトは車の運転席や飛行機のコックピットに 座って体験するものもある。それはパソコンなどに比べると大きくなるが、実際の車や飛行機に比べれば小さく、 体積も小さい。実物を管理するためにはそれなりの広い場所が必要となるが、シミュレーションソフトは教室の 広さに 2 台ほどは管理出来るので、管理場所にも困ることがない。五つ目のメリットは、実際の車や飛行機を運 転・操縦するも、シミュレーションソフトを使用した方が、事故の危険性が少ないということである。実際の車 や飛行機を運転・操縦し、運転操作ミスや操縦ミスで衝突したり墜落する場合の物の損害や破損の心配がなくな る。また、ユーザーへの被害はもちろん、他の人への被害もなくなるだろう。 以上のメリットと同じように、デメリットも述べる。 1. 実物の大きさがわからない。 2. 緊張感が薄れる可能性がある。 デメリットとして以上のことが挙げられるだろう。以下にて、項目を一つずつ説明していく。一つ目のデメリッ トの、実物の大きさがわからないことについて述べる。実際の車や飛行機を使って運転・操縦をするわけではな く、シミュレーションソフトを使うので、実物の大きさと異なる場合の方が多いと考えられる。運転席やコック ピットをに座ってシミュレーションしたとしても、運転席のまわりの状況は理解できるが、車や飛行機の実際の 大きさは把握できないので、実際を運転すると事故を起こす可能性が出てくるだろう。また、パソコンを使った簡 単な趣味レーションソフトの場合は、運転席のまわりの状況はもちろん、操縦するハンドルなどの大きさや質感 などもわからないだろう。次に、二つ目のデメリットの、緊張感が薄れる可能性があることについて述べる。実際の車や飛行機を使って運転・操縦をするわけではなく、シミュレーションソフトを使うので、ユーザーへの大 きな精神的負担がないことはメリットとして挙げたが、緊張感が無さ過ぎるのは問題だろう。実物ではないので、 運転操作ミスや操縦ミスに対して、反省が見られなくなる可能性もあると考える。 これらのシミュレーションソフトのメリットを生かした学習ソフトを作成しようと考えた。
2.2.
web
上による学習ソフトのメリットとデメリット
上記では、シミュレーションソフトのメリットとデメリットについてまとめたが、以下では、パソコンを組み 立てるという web 上による学習ソフトを作成した場合を例に挙げて、メリットとデメリットをまとめる。まずは メリットについて述べる。 上記のシミュレーションソフトのメリットを web 上の学習ソフトに置き換えてメリットの項目を一つずつ説明 していく。まず、一つ目として、シミュレーションソフトと実際にパソコンを組み立てることを比較すると、実装 費用の違いについては、シミュレーションソフトの方がメリットがあると考える。生徒が一人で一つのパソコン を組み立てるということは、パソコンを動かすために決まった種類の部品を揃えることになり、一人一つの作成部 品を与えるとなると莫大な金額がかかるが、教育学習ソフトを使えばその心配がない。また、作成途中で部品の 破壊や紛失があった場合に新しいものを与えなければいけなく、その分の部品も準備するとなると、またさらに費 用がかかる。二つ目のメリットは、実際のパソコンを組み立てるよりも、web 上による学習ソフトを使用した方 が、先生への負担が少ないということである。先生が一人で生徒全員分のパソコンを組み立てるという細かい作 業の状況を見ることは不可能であるが、教育学習ソフトを使用すれば一目で学習状況・進行状況がわかる。三つ 目のメリットは、実際のパソコンを組み立てるよりも、web 上による学習ソフトを使用した方が、事故の危険性 がなくなることについて述べる。例えば、部品の紛失・部品の破損・ネジのつけ間違いなど、これらの危険性を 回避しなければ、パソコンを組み立てることが出来なくなる。しかし、教育学習ソフトにはその危険性や心配が なくなる。また、作業行程中に子どもが怪我をするかもしれない、などの危険への心配もなくなる。 上記から、シミュレーションソフトのメリットと、web 上による学習ソフトのメリットが共通であることがわか る。さらに、web 上による学習ソフトの場合、上記に挙げたシミュレーションソフトのメリットに加えてさらに 強調されるべきメリットが生まれる。そのメリットとは、「インターネット環境がある場所では、学習が可能にな る。自宅学習が可能になる。」ということである。インターネット環境がある場所であれば、世界中のどこでも学 習が可能になる。最近は、図書館や飲食店などを含めても、インターネット環境がある場所が多いので、いつでも どこでも予習復習が出来るようになる。加えて、近年では自宅でもインターネット環境がある傾向が多い。この メリットがあることによって、どんな問題が解決されるのか、例を挙げてみる。実際のパソコンを組み立てると なると、もちろん持ち運びが出来ない。また、シミュレーション体験できたとしても、その場に行かなければ体 験できない。しかし、このメリットがあると、どこでも学習が気軽に出来る。また、理解力向上も図れると考え る。パソコンを組み立てるという細かい作業をするには気力も必要となり、さらに小学生などの子どもにパソコ ンを組み立てさせることは難易度が高いのではないかという心配がある。しかし、教育学習ソフトを使用すれば、 簡単にかつ、わかりやすくパソコンの組み立てについて学ぶことができる。また、楽しさも加わり興味をもって もらい、より深く学習しようという気になると考えられる。 以上のメリットと同じように、デメリットも述べる。 1. 部品の原寸サイズ・重さがわからない。 2. 授業を受ける生徒にとって緊張感が薄れる可能性がある。 3. 立体的でない。 デメリットとして以上のことが挙げられるだろう。以下にて、項目を一つずつ説明していく。一つ目のデメリッ トの、部品の原寸サイズ・重さがわからないことについて述べる。パソコンを初めて見る生徒もいる可能性もあ るので、この教育学習ソフトではパソコンケースのサイズや、中に入っている部品の大きさや重さの実感がわか ないかもしれない。二つ目のデメリットの、授業を受ける生徒にとって緊張感が薄れる可能性があることについて述べる。実際のパソコンを組み立てるには生徒も一人一人先生の話を聞き、緊張感を持って、授業に取り組む だろう。しかし、教育学習ソフトは実際に組み立てるよりも簡単で、遊び感覚で授業に参加する生徒が出てくる 可能性がある。三つ目のデメリットの、立体的でないことについて述べる。この教育学習ソフトは立体的でない ので、実物の全体像を把握することは難しいかもしれない。 これらのデメリットをなくすために、改善案を述べる。一つ目の部品の原寸サイズ・重さがわからないことにつ いて述べる。画面上に表示されているアイコンのサイズに関しては、それぞれ、標準的な部品の原寸サイズと同 じサイズでの表示が可能である。しかし、特にパソコンケースのアイコンに関してはディスプレイよりも大きく なるので、原寸サイズでの表示は不可能だった。しかし、少しでもわかりやすくするために、パソコンのディス プレイいっぱいの大きさで表示されるように設定した。また、重さは使用する部品によってそれぞれ違うが、標 準的な重さを表示するように設定した。二つ目の緊張感が薄れるいうデメリットについて述べる。実際に組み立 てることに比べれば簡単とはいえ、先生の話をしっかり聞かないと難しい内容に設定出来る。私が作成した学習 ソフトのアイコンの移動は真ん中をドラッグだが、回転は角をドラッグすることである。アイコンの真ん中をド ラッグしない限り回転するようになっているので、生徒の興味を引き付けつつ、授業を真面目に聞いて学習しよ うという緊張感へもつながるだろう。三つ目のデメリットである「立体的でないとい。」うデメリットについて述 べる。画面上にあるアイコンはをダブルクリックすることによって、平面の画像から側面の画像に切り替わるよ うにプログラミングし、教育学習ソフトを作成した。立体的になったわけではないが、平面でありながらもいろ んな角度から見たように感じられるようにはなっただろう。これらのように、改善出来るので、実際にパソコンを 組み立てるより web 上による学習ソフトを使用することを私は考え、作成した。
2.3.
設計方針
最近、日本はスマートフォンやパソコンの普及により、高度情報化社会になっている。生活のあらゆるモノがイ ンターネットに繋がり、進化した人工知能が最適化に向けて様々な判断を行うようになろうとしている。文部科学 省が小学校段階における論理的思考力や創造性、問題解決能力等の育成とプログラミング教育に関する有識者会 議で 2020 年度から、小学校におけるコンピューターのプログラミング教育を必修化する方針であると発表した。 そのことから、児童にとっても情報科教育が身近になっている。プログラミング教育の必修化を推進する背景と して、Web エンジニアをはじめとする IT 人材の不足があると言われている。しかし、IT 人材の不足のためにプ ログラミングなどのソフトウェア面を学ぶことに加えて、パソコンのハードウェア面にも詳しくあるべきだと私 は考えた。だが、ハードウェア面について学ぶ授業づくりはそんなに多くされていないと考える。実際、私が高 校生の時に受けた情報の授業は、ホームページを作成したり、エクセルやワード、パワーポイントの使い方を学 び、発表をするということだった。このことからわかるように、プログラミングなどのソフトウェア面と比較し て、ハードウェア面について教わることは少なかったので、小学生の情報の授業でも同じであろうと考えた。そ こで私は、ハードウェア面に着目することに決め、web 上による学習ソフトを作成することにした。部品の破損 や、紛失などのリスクを背負って実際に組み立てることはせずに、パソコンにはどのような部品があるのか、そ れぞれの部品をどこへ置けばパソコンとして機能するのかを学べる教育学習ソフトを制作しようと考えた。パソ コンはどのような部品があるのか？パソコンはどのようにして動いているのか？などの、疑問を持ったことは少 なくとも一度はあるだろう。その疑問を解消しつつ、さらにパソコンのハード面について学べるようにすること を目的とする。その目的を達成するために、まずはパソコンにはどのような部品があるのか？という疑問を解決 することを一つ目の目標とする。そのために、画面上に 5 つの部品を表示した。どのような部品がパソコン内に 入っているのかが一目で理解してもらえると考える。次に、パソコンはどのようにして動いているのか？という疑 問を解消することを二つ目の目標とする。それぞれの部品があらかじめ画面上に表示されている PC ケースのど こに入れれば、パソコンとして作動するのかを理解してもらえるように部品を移動出来るようにプログラミング した。これらの目標をひとつずつ達成すれば、目的が達成される。さらに、web 上による学習ソフトなので、学 校での授業中はもちろん、自宅やそれ以外の場所でも学習することが出来るので、子ども達に身近に感じてもら い、学習する回数を増やしてもらえると考える。また、本ソフトを使うことによってハードウェア面について知っ てもらい、それがまたさらに情報という教科に含まれる、ソフトウェア面についても、ハードウェア面について も、深く勉強するきっかけになれば良いと考える。また、ハードウェア面について学べるものとして本学習ソフトを作成したが、本ソフトで動かすことのできる 5 つの部品だけでは、もちろんパソコンは動かない。あらかじ め画面上に表示されている PC ケース、Windows シリーズや Mac OS X などの OS や、出力装置の内のひとつで あるディスプレイ（モニターと呼ばれることもある）、入力装置であるキーボードやマウス、CPU を冷やすため の CPU クーラーが最低限必要とされる部品である。以上の 11 点があれば、パソコンは作動する。私が作成した web 上による学習ソフトでの部品が 5 つだけにした理由を二つ述べる。一つ目は、パソコンを作動するのに必要と されるパーツを全て画面上に表示すると、部品で画面がいっぱいになってしまい生徒たちの混乱を招き兼ねない と考えたからである。画面上にそれなりに余白があった方が移動させた部品をどこの四角形に入れるべきか、な どわかりやすいだろう。二つ目は、ディスプレイやキーボード、マウスといった出力装置と入力装置と、OS はさ すがにパソコンを動かすために誰もが必要だと理解していると考えたからである。以上の二つの理由から、部品 をつだけの表示にした。しかし、今後バージョンアップしたものを作成する機会があれば、パソコンを組み立て るために必要とされる部品を全て動かせるように、さらにどこに設置すれば良いかをわかりやすいように学習出 来るソフトプログラミングして作成したいと考える。
2.4.
本ソフトの機能
上記の画像は本ソフトの初期画面である。何も入っていない空のパソコンの本体に、アイコンを移動させるべき 場所に、jCanvas でそれぞれ違う色の四角形を描いた。CPU を移動させるべき場所は黄色の四角形である。メモ リは赤色、ビデオカードは青色、電源は緑色、ハードディスクは白色とする。なお、以下での機能の説明は CPU と電源を使用する。画面上にあるアイコンの真ん中をドラッグすることで、アイコンを移動させることが出来る。以下が移動した 後の画面上の様子である。生徒達に、授業の資料として見るだけでなく、自分で手を動かすことで学習して欲し いと考えたことから、ドラッグをすることが出来るようにした。また、ドラッグ＆ドロップすることによって、ア ラート表示される処理にした。アラート表示の処理については、後で述べる。 画面上にあるアイコンの角をドラッグすることで、アイコンを回転させることが出来る。すべてのアイコンは 真ん中ドラッグすれば移動で、角をドラッグすれば回転するように設定した。移動させるだけでなく回転するよ うにしたことで、生徒たちがおもしろみを感じ、さらに興味を持ってくれると良いと考えた。また、回転させた
後のアイコンの傾きの角度が-40 度∼40 度の時は自動で 0 度になるように処理をしてある。
上記の画像はアイコンの画像を変更する前の初期画面である。
画面上にあるアイコンのをダブルクリックすることで、画像を変更することが出来る。画像を変更することで、 本学習ソフトのデメリットである立体的でないというのを、改善することが出来ると考えた。変更前の画像は、電
源やハードディスとわかる部分になってあり、変更後は四角形に入るサイズに変わる。
画像が変更出来ることと同時に、画面上にあるアイコンのをダブルクリックすることで、その部品の意味が簡 易に表示される。ただ、アイコンをドラッグ＆ドロップしたり、画像の変更だけをするよりも、簡易とはいえ意味 を表示されるように処理することで、その部品の働きについて知ってもらえると良いと考えた。
アラート表示する（PC ケースに入れられるべき場所に入ってない場合） アイコンのドラッグ＆ドロップをやめた場所によって、アイコンが置かれた場所が PC ケースに入れられるべ き場所であるかどうかを、アラートが表示される。アラート表示されるので、あいこんがおかれるべき場所が正 しいか否かが一目で分かる。画面上に正否の文章を表示するようにしていたが、それだと移動させたアイコンが 邪魔になり、分かりにくいことから、アラート表示するように編集した。ドラッグ＆ドロップ、回転させたアイコ ンの傾きの角度をを 180 度で割って、答えが奇数だった場合は、”〇〇〇の場所はここです”とアラートが出力さ れる。また、答えが偶数だった場合は、”〇〇〇の角度が違います”と出力されるようにした。アイコンを置く場 所は正しくても、角度が違うと間違っていることを理解させたく思い、上記のアラート表示の言葉を考えた。
2.5.
指導方針
web 上による学習ソフトを使用して展開される授業で一番注意したい点は、生徒一人一人がきちんと授業につ いて来れているかということである。よって、生徒達にはそれぞれ一人つき一台のパソコンを使用して学習して もらう。ここで、グループディスカッションではなく、一人ずつ学習させようと考えた理由は二つある。一つ目の 理由は、グループディスカッションを行うには、リーダー・書記・タイムキーパー・発表者などという役割分担が 必要となってくる。役割分担を決めるに当たって時間がかかり、なかなか授業内容に進むことが出来ない可能性が あると考えたからである。また、グループディカッションは役割があるので、その役割を懸命にこなそうとする 生徒と、人任せにしてしまう不真面目な生徒との差も生まれる。さらに、グループディスカッションが上手くい かなかった場合、人の責任にしてしまう生徒もいるかもしれない、という心配も見られることを考えて、グルー プディスカッションではなく、一人ずつの学習を促進したい。二つ目の理由は、一人ずつ学習することにって、自 分で問題を解決しようという姿勢が見られると感じたからである。友人に聞くということも良いことではあると 思うが、まず自分で問題を解決をするにはどうすれば良いか考える力がつくだろう。私は大学生になるまで本格 的な考察はしたことがなかった。そのことにより、レポートをまとめる場面などで困ることが多かったので、その 練習としても、一人で考察する方が良いだろう。ただし、グループディスカッションにもメリットがある。まとめ る力が養われたり、意見を発表する力が付くということである。このように、グループディスカッションにもメ リットがあることがわかる。また、比較のために個別学習のメリットも述べる。メリットとして、生徒からする と、自分のペースで勉強することが出来、先生からすると、生徒一人一人の学習スピードが把握することが出来 る。しかし、個別学習にデメリットがないわけではない。例えば、人と協力して問題を解決するという力が養われ ないことや、自分がどれくらい理解しているか把握ができないということもあると考えられる。以上のグループ ディカッションと個別学習のメリットとデメリットを比較した結果、私はグループディスカッションを使わずに、 生徒一人につき一台のパソコンを使用して学習させたいと考えた。 最近はスマートフォンやタブレットが普及し、同じような操作ができるパソコンの使用方法は生徒達も把握し ていると考える。しかし、パソコンを組み立てるという機会は無いに等しく、いざ組み立てるとなると難しいと 感じる生徒が多く出てくるだろう。そこで、web 上に学習ソフトを公開し、生徒達に楽しみながら、パソコンの 組み立てについて学んでもらえる授業づくりを考えた。その授業の展開方法としては、指示した内容通り手を動 かして作業させるために、まず教師が見本として本学習ソフトを動かして見せる。その後、生徒に対して発問や 指示をするたびに、机間巡視することを心掛けたい。さらに、わからない生徒には質問しやすいような、良い授 業の雰囲気作りも重要だと考える。その良い雰囲気を作るために、生徒一人ずつの個性や授業内容を理解、また は認識している度合いを把握するということであると考える。先生が教壇で黒板を使って授業展開するだけより も、本学習ソフトのように生徒自ら手を動かして学習する方が、生徒の理解力や集中力も高めることが可能にな るだろう。これらのように、生徒それぞれが、どれくらい理解できているのか、どれくらい認識しているのかとい うことを先生が把握することで、サポートしたり助言してあげることで良い授業の雰囲が仕上がると考える。ま た、わからないとこはないか？手が止まっている生徒がいれば、どこがわからないのか？声をかけることで、生 徒も先生がちゃんと教えようとしていることを感じて取れるだろう。先生だけが意気込み、生徒がそれについてき ていなかったり、先生がやる気がなく、その授業を受ける生徒もやる気がないといったような、ただただ時間が 過ぎるのを待つだけのような授業は必ず避けたと考える。評価の基準は、一時間という決められた時間内に、先 生が立てた授業目標までを、生徒達はスムーズに学習できたかということにする。加えて、web 上による学習ソ フトを使用して展開される授業の進度について来られているか、理解すべき部分を理解できているかということ を、授業中の生徒達から把握する。また、生徒個人の評価の方法としては、発問したことに対して生徒が積極的 に取り組んでいるかどうかを、一人一人確認する。わからないからほっておくのではなく、わからないなりに行動 に移していれば、その生徒には良い評価を与えても良いと私は考える。もちろん、使用方法を理解し進んで取り 組んでる生徒はさらに良い評価を与える。また、授業中に質問をした生徒にはプラスアルファで評価点を上げた い。このことを生徒に伝えるかどうかは考えどころである。伝えてしまえば、やる気を出して質問をしてくる生 徒が増えるとは思うが、その質問が授業に関係ないものだったとしても、評価点を上げるのか？という問題が出 てくる。しかし、伝えないとあまり質問してくる生徒はいないに近いだろう。よって、この点に関しては今後もっ と深く考えるべき点である。 本学習ソフトの楽しさや、部品を指定された四角形に入れることによってパソコンが動くようになる、ということを理解してもらい、パソコン作りをはじめとするハードウェア面について興味を持ってもらいたい。ハード ウェア面について学べるものとして本学習ソフトを作成したが、本ソフトで動かすことのできる 5 つのアイコン だけでは、もちろんパソコンは動かない。そのことを生徒達に教えて、あと必要とされるものは何があると思う か？と発問してみることも良いと考える。考えるように生徒達に投げ出すだけでなく、どんな働きをするものが足 りないよと、ヒントを与えつつ一緒に勉強できる授業作りを出来ると、生徒達にもさらに楽しみながら学んでも らえると考える。
2.5.1.
本ソフトを用いた指導例
指導方針を踏まえて考えた指導例は以下のようになる。 時間 ＊学習活動 ○発問 ・指示 ●指導上の留意点 ◎評価 ◇支援 準備物・資料等 導入 (20 分) ・本ソフトの導入 ○生徒全体に、「ブラウザ上で、ソ フトを開けましたか？」と聞く 。 ・本ソフトの操作説明 ＊生徒全体に、「画面上にあるアイ コンをドラッグして移動させたり、 回転させたりしてみましょう。」と 投げかけ、生徒と一緒に操作方法 を確認しながら、解説する。 ・「アイコンをダブルクリックして みてください。」 〇「アイコンはどう変化しました か？また、解説文が表示されまし たか？」 ◇机間巡視し、本ソフトの導入、 または操作方法に悩んでいる生徒 に、「どこがわからないのか？」「何 に悩んでいる？」など積極的、か つ、具体的に指導する。 ●授業のペースについて来れてい ない生徒がいないか確認する。 ◎生徒が自ら主体的、意欲的に取 り組んでいるか確認する。 展開 (25 分) ・「CPU と書かれたアイコンの置 くべき場所は黄色の四角形の中で す。正しい向きになるように、回 転させながら、黄色い枠に入るよ うに、移動させてみましょう。」と 指示する。 〇「CPU を正しい場所に移動させ ることはできましたか？」 〇「CPU とは、どういうものです か？」 〇「CPU がパソコンになぜ内蔵さ れないといけないのか、考えてみ ましょう」 ＊「CPU と同じ要領で、他のアイ コンも移動させてみましょう。」 〇「緑色の枠内に入るアイコンは、 どれだと思いますか？」 ＊「その他のアイコンも移動させ て、正しい場所であろう四角形に 入れてみましょう。」 ◇机間巡視し、質問や不明な点が ある際は積極的に質問するように、 声かけを行う。 ●授業のペースについて来れてい ない生徒がいないか確認する。 ◎本ソフトに関心を持ち、問題に 対する解決を図ろうとしている。 まとめ (5 分) ＊本日の学習内容を振り返る。2.6.
試作
画面上にアイコンが 5 つ表示されている。まず 5 つのアイコンとは、電源・ハードディスク・メモリ・ビデオ カード・CPU といった部品をアイコンにしたものである。これらのそれぞれの部品がパソコンにおいてどのよう な意味のあるものかを述べる。 1. 電源 (ユニット)…電源ユニットとは、デスクトップ型やタワー型のパソコンで、筐体内部の隅に装着されて いる箱型の電力供給装置。家庭用の交流電源から受電し、直流に変換して各部品に供給する役割を果たす。 電源ユニットは側面の一つが筐体背面にむき出しになるようにできており、この面に外部から電源を供給す るための接続端子がある。反対側にはハードディスクやマザーボードなど内部の各部品に電力を供給するた めの多数の電源ケーブルがついており、ケーブルの先端は接続する装置の種類に応じて数種類のコネクタに 分かれている。 2. ハードディスク…ハードディスクとは、パソコンのデータを保存する部品である。パソコンに内蔵されてい る記憶部品になる。別名：HDD。内蔵ストレージともいう。コンピューターでは「補助記憶」を担当する。 パソコンを動かすうえで欠かせない OS（Windows）、ワード・エクセルなどの各種ソフト、ユーザーが作成 したデータなどすべてが格納されている。 3. メモリ…メモリとは、データを記憶する部品のことである。メモリは、大きく分けてと読み書き両方できる RAM(ラム) と読み出し専用の ROM（ロム）があるが、一般的にメモリという時は、パソコン内の RAM で あるメインメモリーのことを指す。スマートフォンやタブレットでは、単に RAM といいます。データやプ ログラムを 一時的に記憶する部品で、コンピューターでは 「主記憶」を担当する。メインメモリもパソコ ンを使っているときや何かのプログラムを開くときに、作業台のように利用されるので、このメモリの数値 は、パソコンの動作速度に影響を及ぼす。 4. ビデオカード…ビデオカードとは、パソコンに装着して画面表示機能を追加する拡張カード。画像描画のた めの LSI チップや、画面イメージを保持するためのメモリ（VRAM）、ディスプレイと接続するための端子 などから構成される。ビデオカードにより、最大表示解像度や最大同時発色数、最大表示周波数（リフレッ シュレート）などの性能に違いがある。最近では 3 次元グラフィックスの描画処理の高速化を行う専用回路 も搭載されている。マザーボード上に画面表示機能を搭載した機種もあるが、多くの場合はその機能を切る ことができ、より高性能なビデオカードを後から追加できるようになっている。 5. CPU…CPU とは、コンピュータを構成する部品の一つで、各装置の制御やデータの計算・加工を行う装置。 メモリに記憶されたプログラムを実行する装置で、入力装置や記憶装置からデータを受け取り、演算・加工 した上で、出力装置や記憶装置に出力する。パソコンでは CPU の機能を一つのチップに集積されたマイク ロプロセッサ（MPU）が利用され、Intel 社の x86 シリーズと各社の互換プロセッサが市場のほとんどを占 めている。 以下で、画面上にある 5 つのアイコンを動かすために、どのようにプログラミングしたかを以下にまとめる。2.6.1.
電源
obj.drawImage({ draggable: true, source: ’dg-02.jpg’, x:50, y:70, width: 100, height: 100, fromCenter: false, rotate:180, dblclick:function(layer){ source: ’dg-02.jpg’, obj.drawText({ strokeStyle:"black", fillStyle:"black", strokeWidth:1, x:210,y:20, fontSize:30, text:"電源とはパソコンの電源ユニット", name:"setsumei4"});}, dragstart:function(layer){omx=layer.eventX;omy=layer.eventY;}, drag:function(layer) {kaki(layer);}, dragstop:function(layer){if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;};
if(yoko*50/1680<=layer.y<yoko*781/1680 && yoko*476/1680<=layer.x<=yoko*1245/1680){ //pc ケー ス上
if(yoko*595/1680<=layer.y<yoko*748/1680 && yoko*511/1680<=layer.x<=yoko*911/1680){ //電源で あるべき場所
if(-10<=layer.rotate%360 && layer.rotate%360<=10){
if(layer.width==400*yoko/1680 && layer.height==150*yoko/1680){ //判定式 den();} } if(layer.rotate%180){ dg();} else{ obj.removeLayer("eo");} } }}}); function den(){ sweetAlert("電源の場所はここです"); }; function dg(){ sweetAlert("電源の角度が違います"); }; ダブルクリックすれば、画像のサイズが横:450, 縦:150 に変更される。また、同時に電源の説明文も出力される。 ドラッグを終了したとき、いくつもの if 分が実行される。動かした画像の角度が-40 度∼40 度の時は自動で 0 度 になる。PC ケース上に入り、電源であるべき場所で動かしている画像のドラッグを終了すると判定式が実行され る。動かした画像を 180 度で割って、答えが奇数だった場合は、"電源の場所はここです"とアラートが出力され、 偶数だった場合は、"電源の角度が違います"と出力される。
2.6.2.
ハードディスク
obj.drawImage({ draggable: true, source: ’hdd-01.jpg’, x:10, y:400, width: 150, height:150, fromCenter: false, rotate:180,dblclick:function(layer){ source: ’hdd-02.jpg’; obj.drawText({ strokeStyle:"black", fillStyle:"black", strokeWidth:1, x:240,y:500, fontSize:30, text:"HDD とはパソコンのデータを保存する", name:"setsumei5"});}, dragstart:function(layer){omx=layer.eventX;omy=layer.eventY;}, drag:function(layer) {kaki(layer);}, dragstop:function(layer){
if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;};
if(yoko/2 && tate/2){ //pc ケース上
if(yoko*1059/1680&&tate*554/873){ //HDD であるべき場所 if(-10<=layer.rotate%360 && layer.rotate%360<=10){
if(layer.width==170*yoko/1680 && layer.height==50*yoko/1680){ //判定式 haad();} } if(layer.rotate%180){ dk();} else{ obj.removeLayer("eo");} } }}}); function haad(){ sweetAlert("HDD の場所はここです"); }; function dk(){ sweetAlert("HDD の角度が違います"); };
ダブルクリックすれば、画像のサイズが横:200, 縦:40 に変更される。また、同時にハードディスクの説明文も出 力される。ドラッグを終了したとき、いくつもの if 分が実行される。動かした画像の角度が-40 度∼40 度の時は 自動で 0 度になる。PC ケース上に入り、HD であるべき場所で動かしている画像のドラッグを終了すると判定式が 実行される。動かした画像を 180 度で割って、答えが奇数だった場合は、"HDD の場所はここです"とアラートが 出力され、偶数だった場合は、"HDD の角度が違います"と出力される。
