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

普段のレポートファイルひな形（卒論資料）

指導案や、本ソフトの機能、教育方針、操作マニュアルについては今後内容を増やして行く予定です。

0.1.

はじめに

第一章  jQuaery と jCanvas

jQuery とは、ジョン・レッシグ（John Resig）らによって開発され、オープンソースソフトウェア（OSS）として 公開されている JavaScript のライブラリである。より少ないコーディング分量で様々な処理を記述できる。また、 主要な Web ブラウザにおける JavaScript の解釈の違いを jQuery が吸収することで、クロスブラウザなプログラ ムを実現しやすい点や、jQuery 自体のファイルサイズが軽量である点なども、利点として挙げることができる。 第二章 試作プログラム 1–パソコンの自作学習ソフト

0.2.

プログラム設計方針

・ドラッグ  アイコンをドラッグできるようにした。ドラッグするだけの教育ソフトだと、簡易すぎる内容なのでドラッグ すれば回転するように、プログラムを書いた。 ・サイズ変更  ダブルクリックすれば、アイコン画像のサイズを変換できるようにした。サイズ変更もせずに画面上にアイコ ンを並べると、アイコンだけで画面がいっぱいになり、見にくいことと、すぐにどの場所に置くべきかが、一目で わかってしまうと、学習のし甲斐がないと考えたことから。 ・解説文  サイズ変更と同様、解説文を表示できるようにした。アイコンの場所を学ぶだけでなく、そのアイコンである 部品の意味も一緒に学べると良いと考えた。 ・アラート表示  アイコンを移動させた後、そのアイコンが置かれた場所（ドラッグをやめた場所）が、正しいか否かを表示さ れるようにした。  生徒達に、それぞれ自分で手を動かしてパソコンのことを知ってもらいたく思ったので、図形や画像を簡単に 描けて、かつ自由に動かせる jCanvas に着目して、本ソフトを制作した。その jCanvas については、以下で詳し く説明する。

0.3.

jCanvas

とは

  HTML5 から Canvas が追加され、複雑な図とかをブラウザ上で生成できるようになった。その Canvas をもう 少し楽に扱えるものが、jCanvas である。jCanvas とは、jQuery のプラグインとして作成されてあり、Canvas へ の描画処理を少し軽めの API で実現できる。jCanvas を使うと、Grouping、Layer などの機能が使える。   jCanvas で描画をする前に、まずはキャンバスを作成する。 $("canvas")[0].width = $(window).width(); で、キャンバスの幅を最大にし、 $("canvas")[0].height = $(window).height(); で、キャンバスの高さを最大にする。  さらに、図形を描くには共通のプロパティがある。strokeStyle:”色”で線色を指定、 fillStyle:”色”で塗りつぶす 色を指定、 strokeWidth:で線幅を指定、 x:値で点の x 座標を指定、 y:値で点の y 座標を指定。 以上は必須であ る。ただし、fillStyle と strokeStyle は選択可能である。 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 を指定することで、図形の上にない。 ただし、読み込み専用である。

0.4.

本ソフトの機能

本ソフトの機能は 4 つある。 • アイコンをドラッグする。 画面上にあるアイコンをドラッグすることで、アイコンを移動させることができる。 • アイコンを回転する。 画面上にあるアイコンをドラッグしながら動かすと、アイコンが回転する。 • アイコンのサイズを変更、解説を表示する。 画面上にあるアイコンをダブルクリックすることで、アイコンのサイズが変わる。同時に、そのアイコ ンの働きの解説が表示されう。 • アラート表示する。 アイコンをドラッグして、回転させながら移動し、ドラッグをやめるとアラートが表示される。アイコ ンが置かれた場所が正しいか否かを、アラートが表示してくれるので、一目でわかる。

0.5.

教育方針

 本ソフトを使って学習することで、生徒達にパソコンにはどのような部品があるのかを知ってもらうこと ができる。プログラミングなど、ソフト面でパソコンを使えるようになることも大切だが、ハード面にも詳 しくなることで、またさらに、プログラミングに興味を持ってもらえると良いと考えた。

0.6.

本ソフトを用いた指導例

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

0.7.

本ソフトの操作マニュアル

1. 画面上に表示されている 4 つの部品のアイコンはそれぞれドラッグすることができる。 2. アイコンをダブルクリックすれば、アイコンのサイズが変わる。また、同時に部品の働きが表示される。 3. アイコンの角をドラッグしながら動かすと、回転する。 4.PC ケース上に書かれた枠にそれぞれのアイコンを正しい向きで配置すると、アラートが表示される。ま た、配置された向きが違う場合もアラートが表示される。

0.8.

プログラム例

5 つのアイコンを動かすために、どのようにプログラミングしたかを以下にまとめる。

0.8.1.

電源

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 度で割って、答えが奇数だった場合は、"電源の場所はここで す"とアラートが出力され、偶数だった場合は、"電源の角度が違います"と出力される。

0.8.2.

ハードディスク

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 の角度が違います"と出力される。

0.8.3.

メモリ

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 度で割って、答えが奇数だった場合は、"メモリの場所はこ こです"とアラートが出力され、偶数だった場合は、"メモリの角度が違います"と出力される。

0.8.4.

ビデオカード

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 度で割って、答えが奇数だった場合は、"ビデオ カードの場所はここです"とアラートが出力され、偶数だった場合は、"ビデオカードの角度が違います"と 出力される。

0.8.5.

CPU

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

dragstop:function(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 の角度 が違います"と出力される。

0.9.

まとめ

参考文献

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