1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquer

第

1

章 

jQuery

と

jCanvas

1.1.

jQuery

とは

 人間が理解しやすいプログラミング言語で書かれたコンピュータプログラムであるソースコードを広く一般に公 開し、誰でも自由に扱ってよいとする考え方のオープンソースソフトウェアとして公開されている、javaScript の ライブラリのひとつである。jQuery の特徴とメリットは、他のライブラリに比べて軽量であり、シンプルなコー ドで、より多くのことを実行できる点にある。長いコードのように読みにくいこともなく、エラーの数も少なくな り、実行効率が良い。デメリットは、JavaScript の記述を少なくするために、jQuery 独自のプログラムの記法があ る。よく使われるもので例を挙げるならば、オブジェクトを指定する$() である。また、メソッドには JavaScript では使えないものもあり、JavaScript に加えて、jQuery の記法も学ぶ必要があるとされる。さらに、色々あるブラ ウザによって挙動の差異をなくすように設計されているので、「Googlr Chrome では動いたけど Eddge(Enternet Explorer) では動かなかった。」という例がなくなる。Web サイトや、特に動的な Web サイトを作成するには最も 利用価値があると言われている。jQuery が人気が出たのは、様々な機能を実現するプラグインという形で機能を 拡張するという仕組みを持たせたことがひとつの理由である。加えて、次々に便利な機能を持ったプラグインが 公開されたことも理由であるとされている。jCanvas がその jQuery のプラグインのひとつである。その jCanvas については、以下で説明する。  

1.2.

jCanvas

とは

  HTML5 から Canvas が追加された。まず HTML5 とは、今まで難しかったとされる処理が簡単に出来て、長 かったコードが短く書けるものである。動画や音声、数字や文字だけでなく図形等を用いるグラフィックの描写 が可能になり、HTML4 では実現するのが難しかったとされる、位置を取得したり、大量のデータを保持させる ことも可能になった。まとめると、今まで制作する側が苦労していた部分の改善や、よく使う機能などが追加さ れたものである。その HTML5 から追加された Canvas をもう少し楽に扱えるものが、jCanvas である。Canvas は、HTML と JavaScript を用いて Web ページ内に複雑な図とかをブラウザ上で描画できる機能があり、それは、 HTML の代表的な機能として紹介されている。Canvas 機能を用いると JavaScript で以下のような描写処理を行 うことができる API(アプリケーションプログラミングインターフェース) が提供されている。 ・線（直線、曲線、実線、点線） ・四角形 (角丸) ・円 (楕円、弧) ・色とスタイル（単色、グラデーション、影） ・文字の描画（サイズ、フォント、ゆがみ、色の指定） ・変形（拡大、回転） しかし、Canvas 描画処理の JavaScript はグラフィック処理独自の記法になっていて、学習は難しいものだと言わ れている。今回使用する jCanvas は、HTML5Canvas の機能を jQuery により使いやすくプラグインできるものと して作成されてあり、Canvas への描画処理を少し軽めの API で実現できる。

jCanvas 未使用時 (Canvas 使用時) と、jCanvas 使用時の違いを以下にまとめる。 ・jCanvas 未使用時例

var context = $("#canvas")[0].getContext("2d");// 描画するためのコンテキストを取得

1. 赤い円を描画する

context.fillStyle="red";// 塗りつぶしの色（赤） context.strokeStyle="black";// 枠線の色（黒） context.lineWidth=2;// 枠線の太さ（2px）

context.arc(240, 120, 50, 0, 2 * Math.PI, true);// 円を描画 context.fill();// 描画実行（塗りつぶし） context.stroke();// 描画実行（枠線） 2. 文字を描画 context.fillStyle="blue";// 文字色（青） context.font="24px Arial";// フォントサイズ、フォントファミリー context.textAlign = "center";// 位置（上下・左右中央） context.textBaseline = "middle";//整列線の位置 (線上) context.fillText("Canvas による描画", 240, 280);// 描画実行 ・jCanvas 使用時例 $("#canvas").drawArc({ // 1. 円を描画する fillStyle: "red", // 塗りつぶしの色（赤） strokeStyle: "black", // 枠線の色（黒） strokeWidth: 2, // 枠線の太さ（2px） x: 240, // x 方向位置（240px） y: 120, // y 方向位置（120px） radius: 50 // 半径（50px） }). drawText({ // 2. 文字を描画する fillStyle: "blue", // 文字色（青） fontSize: 24, // フォントサイズ（24px） fontFamily: "Arial", // フォントファミリー（Arial） x: 240, // x 方向位置（240px） y: 280, // y 方向位置（120px） text: "Canvas による描画" // 文字文言 }); 上記の例から、コードの長さや記法の簡易さの違いが見て取れる。使用する側からすると、短くまとめられ、簡単 にわかりやすく書けるコードの方がエラーも少なく、作成へのストレスも少なくなるだろう。なので私は、jCanvas を使用して本ソフトを制作できると考え、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.

図形描写

•

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}});

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; }});

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( )

ドット処理。 4.

戻り値がないメゾット

•

createGradient( )

 指定した形のグラデーションを描画する。

•

createPattern( )

 指定した画像を塗りつぶす。 •

getCanvasImage( )

 画像の Base64 文字列生成する。 •

getEventHooks( )

 イベントオブジェクトの取得。 •

measureText( )

 名前の付いたテキスト文字列の取得。 •

jCanvas.extend( )

 命令拡張用 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

章  試作プログラム

1—

パソコンの自作学習ソフト

2.1.

教育方針

  最近、日本はスマートフォンやパソコンの普及により、高度情報化社会になっている。生活のあらゆる モノがインターネットに繋がり、進化した人工知能が最適化に向けて様々な判断を行うようになろうとして いる。文部科学省が有識者会議で 2020 年度から、小学校におけるコンピューターのプログラミング教育を 必修化する方針であると発表した。そのことから、小さい子どもにとっても情報科教育が身近になっている。 インターネットで調べてみれば海外ではすでに、プログラミングをはじめとする、情報化教育に力を入れて いる国が多いとのことだった。プログラミング教育の必修化を推進する背景として、Web エンジニアをはじ めとする IT 人材の不足があると言われている。  この課題は日本だけでなく、海外でも予測されている。アメリカでプログラミング教育の推進を進める NPO 法人の Code.org の調査によると、2020 年には 40 万人のプログラマーが足りなくなると言われている。 プログラミング教育の海外事情について述べていく。 アメリカは上記で示したように、NPO 法人の Code.org の働きが活発である。プログラミングができると就 職にも有利になるということから、コーディングブートキャンプと呼ばれる短期集中型のプログラミングス クールが急激に増えている。 シンガポールは、経済の活性化を目的としてプログラミング教育が推進されている。インターネット産業を 担う国家機関の Infocomm Development Authority of Singapore(IDA) では、公立学校にプログラミングの 授業を積極的に導入することを検討しているということ。 フィンランドは、2016 年から小学校でプログラミングが必修科目になった。元々フィンランドは、インター ネットに接続する権利を国が保証すると宣言するなど IT に力を入れている国の 1 つである。 イギリスは他の国と違って、まずは子どもたちを教える先生へのプログラミング教育を進めようとしている。 財務長官と教育長官が教師を対象にするプログラミングの教育訓練を開始すると発表した。  日本は、先日経済産業省が発表した、IT 人材の最新動向と将来推計に関する調査結果によると、2020 年 に 36.9 万人、2030 年には 78.9 万人の IT 人材が不足すると予測しているという。また、プログラミング教 育必修化の賛成・反対について、TechAcademy で実施されたアンケートを見てみる。なお、このアンケー トは既にプログラミングを学習している人へのアンケートである。「小学校でのプログラミング教育の必修 化に賛成ですか？反対ですか？」という質問には、81.5 ％が賛成と答えた。「プログラミングをいつ頃から 勉強したかったと思いますか？」という質問には小学生の頃から、と 38.4 ％の人が答えた。次に多かった、 中学生の頃から、と答えたのは 31.1 ％となった。「自分に子どもがいたとして、自分の子どもにプログラミ ングを勉強させたいですか？」という質問には、86.8 ％の人が勉強をさせたいと答えたという。これらのこ とから、日本では情報化教育に力を入れようとしていることが分かる。 しかし、プログラミングを学習させたくないと答えた人の解答例も見てみる。「プログラミングよりも英語 力の強化などに力を入れるべきである。」、「教員にどれだけのスキルが身についているのかが不安。」、「IT 技術関係に就職するわけでもないのに、プログラミングを学ぶメリットがない。」という意見もあるようだ。 以上の意見を元に、プログラミング教育に対して、納得のしてもらえるようなメリットを見つけることが今 後の課題であると私は考える。しかし、少なくとも、プログラミングを勉強した人はプログラミング教育の 必修化に賛成している。   NPO 法人 CANVAS 理事長の石戸氏は、インターネットを初めて使った子どもたちは受動的に使ってい ることが多いと話した。さらに、受動的になってる理由として、パソコンやインターネットの可能性を知ら ないことだと挙げた。実はこんなものが作れるんだ、自分のアイディアを世界中の人たちに知ってもらえる ことができる、他人と何かを一緒に作ることができるんだ、ということを一度知ると、子供たちは世界が急 に広がると言う。まずはパソコンやインターネットの可能性の世界を子供たちに体験してもうことを心掛け ていると言っていて、納得させられた。

2.2.

設計方針

,

目的・本ソフトの機能

設計方針, 目的  上記の教育方針に加えて、Web エンジニアをはじめとする IT 人材の不足のためにプログラミングなどの ソフトウェア面を学んだとしても、パソコンのハードウェア面にも詳しくあるべきだと私は考えた。しかし、 高校生の情報の授業において、プログラミングなどのソフトウェア面と比較して、ハードウェア面について 教わることは少なかったので、小学生の情報の授業でも同じであろうと考えた。そこで私は、ハードウェア 面に着目することに決めた。  問題点であるハードウェア面について教わることが少ないという事実の理由は、ハードウェア面について 教えることの出来る教師が少ないことであると私は考える。現に、私たちのように情報科学を専攻している 人間であっても、プログラミングは得意としていくつもの言語で書くことが出来るが、ハードウェア面に強 かったり、パソコンを組み立てることが得意という人は、私の周りには少なくとも多くはいない。なのでイ ギリスの、まずは子どもたちを教える先生へのプログラミング教育を進めるということのように、子どもた ちを教える先生へのハードウェア教育を進めることも大事だと考える。ハードウェア面に詳しい人が多くな い理由としては、教師になろうとしている私たちが、ハードウェア面について学ぶ機会がなかったからとも 言えるだろう。パソコンを組み立てるということは、パソコンを動かすために決まった種類のパーツを揃え ることにそれなりの金額がかかり、組み立てる細かい作業をするという気力も必要となってくる。  さらに、もしかしたら、小学生などの子どもにパソコンを組み立てさせることは難易度が高く、無防備で はないかと言われることがあるかもしれない。そこで私は、実際に組み立てるのではなく、パソコンにはど のような部品があるのかを学べる教育ソフトを制作した。本ソフトを使うことによってハードウェア面につ いて知ってもらい、それが勉強するきっかけになることを一番の目的とする。プログラミングなど、ソフト 面でパソコンを使えるようになることも大切だが、ハード面にも詳しくなることで、またさらに、プログラ ミングに興味を持ってもらえると良いだろう。 本ソフトの機能は 4 つある。 • アイコンをドラッグする。（図 1） 図 1 のように、画面上にあるアイコンの真ん中をドラッグすることで、アイコンを移動させることがで きる。生徒たちに、授業の資料として見るだけでなく、自分で手を動かすことで学習して欲しいと考え たことから、ドラッグをすることが出来るようにした。また、ドロップすることによって、アラート表 示される処理にした。アラート表示の処理については、後で述べる。ドラッグ＆ドロップとは、画面上 にあるファイルのアイコンなどに重なった状態でマウスのボタンを押し、そのままの状態でマウスを移 動（ドラッグ）させ、別の場所でマウスのボタンを離す（ドロップ）ことである。 • アイコンを回転する。（図 2） 図 2 のように、画面上にあるアイコンの角をドラッグしながら動かすと、アイコンが回転する。すべ てのアイコンは真ん中ドラッグすれば移動で、角をドラッグすれば回転するようにした。移動させる だけでなく回転するようにしたことで、生徒たちがさらに興味を持ってくれると良いと考えた。また、 回転させた後のアイコンの傾きの角度が-40 度∼40 度の時は自動で 0 度になるように処理をしてある。

図 1: アイコンをドラッグする 図 2: アイコンを回転する • アイコンのサイズを変更、部品の意味を表示する。（図 3,4） 図 3,4 のように、画面上にあるアイコンをダブルクリックすることで、アイコンのサイズが変わる。サ イズ変更もせずに画面上にアイコンをいくつも並べておくと、ドラッグして移動することが出来るアイ コンだけで画面上がいっぱいになり、見にくいと考えた。また、一目見ただけで、アイコンをどこに置 くべきか分かってしまうので、そうすると学習のし甲斐がないと考えたことから、アイコンのサイズ を変更出来るようにした。同時に、その部品の意味が簡易に表示される。ただ、アイコンをドラッグ ＆ドロップしたり、サイズの変更だけをするよりも、簡易とはいえ意味を表示されるように処理するこ とで、その部品の働きについて知ってもらえると良いと考えた。 図 3: アイコンのサイズを変更する。 図 4: アイコンの部品の意味を表示する • アラート表示する。（図 5,6） 図 5,6 のように、アイコンをドラッグして、回転させながら移動し、ドロップするとアラートが表示さ れる。アイコンが置かれた場所が PC ケースに入れられるべき場所であるかどうかを、アラートが表示 してくれるので、一目で分かる。画面上に正否の文章を表示するようにしていたが、それだと移動さ せたアイコンが邪魔になり、分かりにくいことから、アラート表示するように編集した。ドラッグ＆ド ロップ、回転させたアイコンの傾きの角度をを 180 度で割って、答えが奇数だった場合は、”〇〇〇の 場所はここです”とアラートが出力される。また、答えが偶数だった場合は、”〇〇〇の角度が違いま す”と出力されるようにした。アイコンを置く場所は正しくても、角度が違うと間違っていることを理 解させたく思い、上記のアラート表示の言葉を考えた。 図 5: アラート表示する（正しい場合） 図 6: アラート表示する（正しくない場合）

2.3.

本ソフトを用いた指導例

時間 ＊学習活動 ○発問 ・指示 ●指導上の留意点 ◎評価 ◇支援 準備物・資料等 導入 (20 分) ・本ソフトの導入 ○生徒全体に、「ブラウザ上で、ソ フトを開けましたか？」と聞く 。 ・本ソフトの操作説明 ＊生徒全体に、「画面上にあるアイ コンをドラッグして移動させたり、 回転させたりしてみましょう。」と 投げかけ、生徒と一緒に操作方法 を確認しながら、解説する。 ・「アイコンをダブルクリックして みてください。」 〇「アイコンはどう変化しました か？また、解説文が表示されまし たか？」 ◇机間巡視し、本ソフトの導入、 または操作方法に悩んでいる生徒 に、「どこがわからないのか？」「何 に悩んでいる？」など積極的、か つ、具体的に指導する。 ●授業のペースについて来れてい ない生徒がいないか確認する。 ◎生徒が自ら主体的、意欲的に取 り組んでいるか確認する。 展開 (25 分) ・「CPU と書かれたアイコンの置 くべき場所は黄色の四角形の中で す。正しい向きになるように、回 転させながら、黄色い枠に入るよ うに、移動させてみましょう。」と 指示する。 〇「CPU を正しい場所に移動させ ることはできましたか？」 〇「CPU とは、どういうものです か？」 〇「CPU がパソコンになぜ内蔵さ れないといけないのか、考えてみ ましょう」 ＊「CPU と同じ要領で、他のアイ コンも移動させてみましょう。」 〇「緑色の枠内に入るアイコンは、 どれだと思いますか？」 ＊「その他のアイコンも移動させ て、正しい場所であろう四角形に 入れてみましょう。」 ◇机間巡視し、質問や不明な点が ある際は積極的に質問するように、 声かけを行う。 ●授業のペースについて来れてい ない生徒がいないか確認する。 ◎本ソフトに関心を持ち、問題に 対する解決を図ろうとしている。 まとめ (5 分) ＊本日の学習内容を振り返る。

2.4.

試作

図 7: 電源 図 8: ハードディスク 図 9: メモリ 図 10: ビデオカード 図 11: CPU 上の 5 つのアイコンを動かすために、どのようにプログラミングしたかを以下にまとめる。

2.4.1.

電源 (図 7)

obj.drawImage({ draggable: true, source: ’dengen.jpg’, x:50, y:70, width: 100, height: 100, fromCenter: false, rotate:180, dblclick:function(layer){ layer.width=400*yoko/1680; layer.height=150*yoko/1680; 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.4.2.

ハードディスク (図 8)

obj.drawImage({ draggable: true, source: ’hd.jpg’, x:10, y:400, width: 150, height:150, fromCenter: false, rotate:180, dblclick:function(layer){ layer.width=170*yoko/1680; layer.height=50*yoko/1680; 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 の角度が違います"と出力される。

2.4.3.

メモリ (図 9)

obj.drawImage({ draggable: true, source: ’memori01.jpg’, x:1100, y:350, width: 70, height: 330, fromCenter: false, rotate:180, dblclick:function(layer){ layer.width=20*yoko/1680; layer.height=300*yoko/1680; obj.drawText({ strokeStyle:"black", fillStyle:"black", strokeWidth:1, x:1500,y:500, fontSize:30, text:"メモリとはデータを記憶する", name:"setsumei1"});},

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*817/1680&&tate*280/873){ //メモリであるべき場所 if(-10<=layer.rotate%360 && layer.rotate%360<=10){

if(layer.width==20*yoko/1680 && layer.height==300*yoko/1680){ //判定式 aiu();} } if(layer.rotate%180){ mm();} else{ obj.removeLayer("eo");} } }}}); function aiu(){ sweetAlert("メモリの場所はここです"); }; function mm(){ sweetAlert("メモリの角度が違います"); }; ダブルクリックすれば、画像のサイズが横:20, 縦:330 に変更される。また、同時にメモリの説明文も出力 される。ドラッグを終了したとき、いくつもの if 分が実行される。動かした画像の角度が-40 度∼40 度の 時は自動で 0 度になる。PC ケース上に入り、メモリであるべき場所で動かしている画像のドラッグを終了す ると判定式が実行される。動かした画像を 180 度で割って、答えが奇数だった場合は、"メモリの場所はこ こです"とアラートが出力され、偶数だった場合は、"メモリの角度が違います"と出力される。

2.4.4.

ビデオカード (図 10)

obj.drawImage({ draggable: true, source: ’videocard.png’, x:1100, y:50,

width: 500, height:140, fromCenter: false, rotate:180, dblclick:function(layer){ layer.width=200*yoko/1680; layer.height=20*yoko/1680; obj.drawText({ strokeStyle:"black", fillStyle:"black", strokeWidth:1, x:1470,y:150, fontSize:30, text:"ビデオカードとは絵や文字を画面に表示するための処理を行う", name:"setsumei2"});}, 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*691/1680&&tate*434/873){ //ビデオカードであるべき場所 if(-10<=layer.rotate%360 && layer.rotate%360<=10){

if(layer.width==200*yoko/1680 && layer.height==20*yoko/1680){ //判定式 aii();} } if(layer.rotate%180){ vc();} else{ obj.removeLayer("iueo");} } }}}); function aii(){

sweetAlert("ビデオカードの場所はここです"); }; function vc(){ sweetAlert("ビデオカードの角度が違います"); }; ダブルクリックすれば、画像のサイズが横:200, 縦:20 に変更される。また、同時にビデオカードの説明文 も出力される。ドラッグを終了したとき、いくつもの if 分が実行される。動かした画像の角度が-40 度∼40 度の時は自動で 0 度になる。PC ケース上に入り、ビデオカードであるべき場所で動かしている画像のドラッ グを終了すると判定式が実行される。動かした画像を 180 度で割って、答えが奇数だった場合は、"ビデオ カードの場所はここです"とアラートが出力され、偶数だった場合は、"ビデオカードの角度が違います"と 出力される。

2.4.5.

CPU(図 11)

obj.drawImage({ draggable: true, source: ’cpu01.jpg’, x:1100, y:230, width:100*yoko/1680, height:110*yoko/1680, fromCenter: false, rotate:180, name:"kakudo", dblclick:function(layer){ obj.drawText({ strokeStyle:"black", fillStyle:"black", strokeWidth:1, x:1550,y:260, fontSize:30, text:"CPU とは各装置の制御やデータの演算を行う", name:"setsumei3"});}, dragstart:function(layer){omx=layer.eventX;omy=layer.eventY;obj.removeLayer("setsumei");},

drag: function(layer) {kaki(layer);},

if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;};

if(yoko/2 && tate/2){ //pc ケース上

if(100*yoko/168&&110*yoko/168){ //cpu であるべき場所 if(-10<=layer.rotate%360 && layer.rotate%360<=10){ ai();} if(layer.rotate%180){ cp();} } else{ obj.removeLayer("ueo");} } }}); ダブルクリックすれば、CPU の説明文も出力される。ドラッグを終了したとき、いくつもの if 分が実行さ れる。動かした画像の角度が-40 度∼40 度の時は自動で 0 度になる。PC ケース上に入り、CPU であるべき 場所で動かしている画像のドラッグを終了すると判定式が実行される。動かした画像を 180 度で割って、答 えが奇数だった場合は、"CPU の場所はここです"とアラートが出力され、偶数だった場合は、"CPU の角度 が違います"と出力される。

2.5.

まとめ（考察・今後の課題）

 以上に論じたように、現在の教育場ではプログラミング教育に比べて、ハードウェア面について学ぶ授業 が少ないことが分かる。  今後の課題  ハードウェア面について教わることが少ないという事実の理由は、ハードウェア面について教えることの 出来る教師が少ないことであると私は考える。現に、私たちのように情報科学を専攻している人間であって も、プログラミングは得意としていくつもの言語で書くことが出来るが、ハードウェア面に強かったり、パ ソコンを組み立てることが得意という人は、私の周りには少なくとも多くはいない。なのでイギリスの、ま ずは子どもたちを教える先生へのプログラミング教育を進めるということのように、子どもたちを教える先 生へのハードウェア教育を進めることも大事だと考える。ハードウェア面に詳しい人が多くない理由として は、教師になろうとしている私たちが、ハードウェア面について学ぶ機会がなかったからとも言えるだろう。 パソコンを組み立てるということは、パソコンを動かすために決まった種類のパーツを揃えることにそれな りの金額がかかり、組み立てる細かい作業をするという気力も必要となってくる。 最近、日本はスマートフォンやパソコンの普及により、高度情報化社会になっている。文部科学省が有識者 会議で 2020 年度から、小学校におけるコンピューターのプログラミング教育を必修化する方針であると発 表した。上記のことから、日本がプログラミングに力を入れようとしていることが分かる。しかし、ハード ウェア面についてはどうだろうか。ハードウェア面について知ってからといって、メリットはあるのか、と 尋ねられれば答えられる教師はいるのだろうか。私は、ハード面にも詳しくなることで、またさらに、プロ

グラミングに興味を持ってもらえるだろうと考えた。

参考文献

[1] 著者名: 論文名, 論文誌名, 巻数（西洋年号）, 開始ページ数–終了ページ数. [2] 著者名:「本の題名」, 出版社, 出版年度.