Embed Size (px)
Citation preview
はじめに
1
第 1 章 jQueryと jCanvas
1.1. jQuery jQueryとは、人間が理解しやすい言語で書かれたコンピュータプログラムであるソースコードを広く一般に公
開し、誰でも自由に扱ってよいとする考え方のオープンソースソフトウェアとして公開されている、JavaScriptの
ライブラリのひとつである。
1.1.0.1. jQueryの特徴
1. さまざまなブラウザやスマートフォン/タブレットなど多くの環境に対応している。
jQueryは数多くの環境で動作するように作成されており、制作者がブラウザの違いやバージョンごとの違
いをあまり気にせずに利用することができる。「Googlr Chromeでは動いたが、Eddge(Enternet Explorer)
では動かなかった。」という例がなくなるとされている。
2. 処理を短いプログラムで記述できる。
jQueryは一般的な JavaScriptプログラムで同じ処理を作成した場合、よりシンプルで短いコードで記述
できるようになっている。実際のプログラムで比較してみる。以下の HTML の div 要素のクラス名を取得
してコンソールで表示するコードを例に、JS と jQuery それぞれの記述の違いを見てみる。
¡!– 以下の div 要素のクラスを取得したい –¿
<div id="test" class="sample sample-test">
...
</div>
実行結果として得たいものは、ID名 test の div 要素のクラス名 sample sample-test より、
// JavaScript で取得する場合 (jQuery 未使用)
var target = document.getElementById(’test’)
console.log(target.getAttribute(’class’));
// jQuery で取得する場合
console.log($(’#test’).attr(’class’));
簡単なコードの実行にも関わらずコード量が少なくなっている。プログラムが短く見通しが良ければバグが
入り込みにくくなり、制作期間の短縮にもなる。
3. 豊富な jQueryプラグイン (ライブラリ)がある。
jQueryが人気が出たのは、様々な機能を実現するプラグインという形で機能を拡張するという仕組みを
持たせたことがひとつの理由である。加えて、次々に便利な機能を持ったプラグインが公開されたことも理
由であるとされている。jCanvasがその jQueryのプラグインのひとつである。
4. スマートフォン/タブレットの UIに対応 (統一感のある UI)している。
jQueryはスマートフォン/タブレットに関しては jQuery Mobileが用意されている。スマートフォン用
の UIを持つページを作成することができる。なお、jQuery Mobileはパソコンでも使用することができる。
jQuery Mobileは jQueryライブラリをベースにしており、使用する場合は jQueryライブラリを読み込ませ
た後で jQuery Mobileのライブラリを読み込ませることになる。jQuery Mobileを使えば、タッチ操による
インターフェースをプログラムを作成することなく利用できる。jQuery、jQuery UIは JavaScriptプロ
グラムを使ってインターフェースを構築する必要があった。jQuery Mobileでは HTML5のカスタムデータ
属性を利用することでプログラムを作成しなくてもモバイル用の UIを生成・使用することができるように
なっている。
5. ファイルサイズが軽量でコンパクトである。
一般的な JavaScriptライブラリのファイルは数百 KB～数MBにまでなることがある。jQueryでは最新
の 3.0でも 30KB程度という非常に少ないファイルサイズになっている。
2
6. 非同期通信が簡単に処理できる (Ajax)。
非同期通信処理は Ajax(Asynchronous JavaScript+XML)と呼ばれページを切り替えることなく必要な
データを読み込み画面を表示することができる。
ここで、jQueryのプログラム例を挙げる。
1.1.0.2. jQueryのプログラム例
下記のプログラムを実行すると、Hello World!と表示される。このスクリプトで「Hello World!」を書き出して
いるのは、「$("#test").html("Hello World!")」 の部分である。$("#test") で、id名が「test」の要素を
選択し、.html(”Hello World!”) で括弧内の文字をその要素へ出力している。
<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>
また、jQuearyに加えて JavaScriptと HTML5についても述べる。
1.1.1. JavaScript
JavaScriptとは、主にWebページに組み込まれたプログラムをWebブラウザ上で実行するために用いられ
るプログラミング言語の一つである。実行環境をWebブラウザに組み込んで利用されることが多く、JavaScript
はWebページの HTMLファイル内に特殊な記法を用いて埋め込まれて記述され、Webブラウザに内蔵された
JavaScript処理系によってページの表示時に解釈・実行されることが多いとされている。
1.1.1.1. HTML5の特徴
1. 初心者であっても学びやすい。
JavaScriptは特殊な開発環境を必要としないので、メモ帳とブラウザで簡単動きのあるページを作成する
ことが可能である。よって、初心者であっても学びやすく、様々な人に広く使われている。
2. スクリプト言語である。
JavaScriptはその名の通りスクリプト言語である。スクリプト言語で作成されたソースコード（スクリプ
ト）はいわゆる、インタープリタ型で実行時に機械語に変換される。その為、プログラム作成時にコンパイ
ルする必要がなく、プログラムの作成者はソースを HTMLの中に直接書き込むか、外部ファイルに書き込
んだものを HTMLファイルから呼び出す。よって、プログラムの作成や修正などが比較的容易に行える。
3. オブジェクト指向言語（オブジェクトベース）である。
JavaScriptはプログラムでモノ（オブジェクト）を組み立てていくというプログラミングの考え方とされ
る、オブジェクト指向の簡易プログラミング言語（スクリプト言語）である。
3
4. 実行速度が遅い。
JavaScriptは対応ブラウザが限られてしまう可能性があり、実行時にやや重く、実行速度が遅いというデ
メリットがある。その中でも、解釈・解析・変換が必要とされる、インタープリタ型であることが、実行速
度が遅くなる理由の 1つとして挙げられている。
1.1.2. HTML5
HTML5とは、ウェブを記述するための言語の一種であるHTMLの 5回目の改訂の名称で、規格の標準化団体
W3Cが策定を進めている次世代の HTMLが HTML5である。今まで難しかったとされる処理が簡単に出来て、
長かったコードが短く書けるものである。 HTML5は、人間にも、コンピューターにも馴染みやすい言語とす
ることが目的とされた。ここでの人間とはコーダーやフロントエンドエンジニアなどウェブサイトを作る人であ
り、コンピューターとはウェブブラウザや検索エンジンのクローラーを指し示す、と考えられる。
1.1.2.1. HTML5の特徴
1. 様々な APIが追加された。
位置を取得したり、マルチメディア機能やウェブアプリケーションをオンラインで使用するために、それ
ぞれの APIで定められた命令や関数を指定すれば、 簡潔な記述でこれらの機能を実現することができる。
2. 文書構造が明確的になった。
これまでの HTML以上に文書構造を表わす新しい要素が追加されたことにより、Webページの構成をタ
グで対応できるようになった。よって、長かったコードが短く書けるようになった。また、これらの要素を
使用したWebページを作成すると、検索エンジンの精度を上げることが可能になるなどのメリットも出て
くる。
3. 動画や音声データを HTMLから扱える。
従来音声や動画の再生、数字や文字だけでなく図形等を用いるグラフィックの描画をするには、特別なプ
ラグインを利用していたが、その必要がなくなった。画像を貼る ⟨img⟩タグのように、⟨video⟩や ⟨audio⟩といったタグによって動画や音声をページに埋め込むことが可能になった。
4. 一部のブラウザでは非対応。 一部のブラウザでは対応しておらず、対応済みのブラウザでもすべての機能
は対応していない場合がある。対応していない主要ブラウザは Internet Explorer7や Internet Explorer8で
ある。そのシェアは年々下がっているといわれるが、IE8にも対応させたい場合も想定される。その場合は、
HTML5でコーディングすることにより IE8以下でも対応できるようになる。
まとめると、今まで制作する側が苦労していた部分の改善や、よく使う機能などが追加されたものである。対応ブラ
ウザについても、要素ごとにばらつきがあり、完全に対応しているとは言い難いが、全てのブラウザが「HTML5」
への対応に向かっている。
1.2. jCanvas jCanvasとは、jQueryのプラグインとして作成されていて、HTML5から Canvasが追加されたことによって、
それをもう少し楽に扱えるものである。Canvasは、HTMLと JavaScriptを用いてWebページ内に複雑な図など
をブラウザ上で描画できる機能があり、それは、HTMLの代表的な機能として紹介されている。
1.2.1. Canvas
Canvasとは、HTML5から追加された図形を描くための技術仕様である。Canvas機能を用いると JavaScript
で以下のような描写処理を行うことができる API(アプリケーションプログラミングインターフェース)が提供さ
れている。
・線（直線、曲線、実線、点線）
・四角形 (角丸)
4
・円 (楕円、弧)
・色とスタイル（単色、グラデーション、影）
・文字の描画（サイズ、フォント、ゆがみ、色の指定）
・変形（拡大、回転）
1.2.1.1. Canvasの特徴
1. 図形をスクリプトで指定する。
スクリプトで図形を描くため、多くの場合、画像に比べてデータ量を軽くすることができるだろう。
2. アニメーション機能がない。
書いた図形を動かしたりする、アニメーション機能がないことである。もし図形を動かしたいなら、一コ
マずつ消して、再描画する処理をする必要がある。またこれは、デメリットとも考えられ、どんなことも出
来るわけではないことがわかる。
また、今回使用する 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();
}
5
• 実行結果
• jCanvas使用時例
$("canvas").drawArc({
fillStyle: "red", //赤
strokeWidth: 2,
x: 150,
y: 100,
radius: 50
});
$("canvas").drawArc({
fillStyle: "green", //緑
strokeWidth: 2,
x: 110,
y: 160,
radius: 50
});
$("canvas").drawArc({
fillStyle: "blue", //青
strokeWidth: 2,
x: 190,
y: 160,
radius: 50
});
• 実行結果
6
上記はそれぞれ、三つの円を違う色で描写する例である。Canvasは描く図形の色は、デフォルトでは黒となる。
よって、黒以外の色を指定する場合は、描画する前に次のプロパティに色情報を指定する必要がある。Canvasは、
Canvas要素から描画のためのコンテキストを取得し、それを用いて上から順番に描画処理を記述するため、コー
ド量が増えた時に記述内容から描画内容を把握するのが難しくなる場合がある。Canvasは最初に指定された色が、
それぞれ描画される図形によって指定しない限り、ずっと残る。一方、jCanvasは、Canvas要素に対して描画処
理を直接記述するため、複数の描画処理をわかりやすく記述出来る。jCanvasは図形ごとに描写処理をするので、
プロパティが独立している。また、上記の例からは、コードの記述方法の簡易さの違いが見て取れる。使用する
側からすると、短くまとめられ、簡単にわかりやすく書けるコードの方がエラーも少なく、作成へのストレスも
少なくなるだろう。なので私は、jCanvasを使用して本ソフトを制作できると考え、jCanvasについて調べた。
1.2.2. jCanvasのダウンロードjCanvasを入手するには、まず、http://projects.calebevans.me/jcanvas/へ行く。
「Download jCanvas」と書かれたリンクがあるので、そこからダウンロードする。jcanvas.jsまたは jcanvas.min.js
が配布されている。min の部分は圧縮方式を表している。実際に使用するときはファイルサイズが 小さいほうが
よいので、一般的には圧縮版を使用する。ダウンロードしたものを HTMLファイルに保存する。
1.2.3. 設置方法ダウンロードしたファイルは 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>
7
1.2.4. 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’,
8
’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});
9
• 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(関数設定) コールバック関数を受け入れる。
10
• getLayer(レイヤー ) 特定のレイヤーを取得する関数である。
• getLayerGroup( ) グループ登録して、レイヤーを取得する関数である。
• getLayerIndex( ) レイヤー配列において、レイヤーのインデックスを取得する関数である。
• getLayers(関数設定) コールバック関数を受け入れる。
• stopLayer(レイヤー) アニメーションを停止する関数である。
• stopLayerGroup( ) グループアニメーションを停止する関数である。
• setEventHooks(add:function(layer)レイヤーが設定された時の処理 ) jCanvasの全てのレイヤーに適用されるコールバック関数である。
• イベント項目
– click クリックしたときに反応するイベント。
– dblclick ダブルクリックしたときに反応するイベント。
– mousedown マウスのボタンを押したときに反応するイベント。
– mouseup マウスのボタンを離したときに反応するイベント。
– mousemove マウスを動かしているときに反応するイベント。
– mouseover マウスが canvas要素上にいるときに反応するイベント。
– mouseout マウスが canvas要素上にいないときに反応するイベント。
– dragstart ドラッグし始めたときに反応するイベント。
– drag ドラッグしたときに反応するイベント。
– dragstop ドラッグをやめたときに反応するイベント。
– dragcancel ドラッグしたものが canvasの外に出たときに反応するイベント。
11
(例)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… のようにも指定することもできる。
12
• 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なら不透明である。
13
– 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’は丸い
状態を指す。
14
– 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を指定することで、図形の上にない。た
だし、読み込み専用である。
15
第 2 章 シミュレーションによる学習ソフト
2.1. 本ソフトの機能var yoko=obj[0].width=1920
var tate=obj[0].height=943
var ybai=1; //yoko/1920
var tbai=1; //tate/943
yoko:1920 //元の画面の横のサイズ
yoko/2:960 //横/2のサイズ
tate:943 //元の画面の縦のサイズ
tate/2:471 //縦/2のサイズ
yoko/2-n:中心から x分
tate/2-n中心から y分
(yoko/2-n)*ybai:画面のサイズが変わっても x倍されるようにするため
(tate/2-n)*tbai:画面のサイズが変わっても y倍されるようにするため
16
第 3 章 シミュレーションによる学習ソフト
3.1. 光について光は「波」の性質を持っている。 その波としての性質を「波長」という言葉で表わされる。波長は、光が 1回振
動する間に進む距離のことであり、10億分の 1メートルのことであるナノメートル（nm）という単位がよく使わ
れる。人間の目に見える光は、波長が約 400 nmから 700 nmの間の光だけで、可視光と呼ばれるものである。そ
れ以外の波長の光には、X線や紫外線、赤外線などがあり、目には見えないが、これらも光の仲間である。
光の進む速さのことである光速というのがある。光速度は秒速約 30万 kmと定義されている。俗に「1秒間に地
球を 7回半回ることができる速さ」とも言われている。この性質は、大量のデータを短時間で伝送する光通信な
ど、さまざまな技術で活用されている。
光は空気中水中ガラス中を進むとき、直進する。光の進む道すじを直線で表したものを光線という。
光は異なる物質との境界面で光が反射する。それを図示したのが下の図である。法線と呼ばれる異なる物質の境
界に対して垂直な線を引く。光が水面に当たった光線である入射光線と、光が水面に反射した光線である反射光線
がある。
光は通常なら直進するが、物質に当たればはね返る。これを光の反射という。入射光線の入る角度である入射角
と、異なる物質の境界にはね返って出て行く反射光線がなす反射角が同じになる「反射の法則」というのがある。
空気から水へ光が入るとき、入射角のほうが屈折角より大きくなる。・反射の法則…入射角＝反射角
入射角を j、反射角を kとしたとき、j = kである。
17
異なる物質を通り過ぎると光は曲がって進む。例えば、空気中から水中へ、空気中からガラスの中へ、ガラスの
中から空気中へ、など異なる物質に入るとき、光は曲がって進む。これを光の屈折という。 光が水面で屈折した
光線である屈折角がある。異なる物質の面との垂線と屈折光線とがなす屈折角というのがある。空気中から物質
に光が進む場合、入射角＞屈折角である。逆に、物質から空気中に光が進む場合、入射角＞屈折角である。
入射角＞屈折角 入射角＜屈折角
しかし、入射角を (1)～(4)のように大きくすると、屈折角も (5)～(8)のように大きくなり、屈折角が入射角より
も先に 90度に達する場合がある (7)。屈折角が 90度になったときの入射角よりも大きな入射角で光線を進ませる
と、光線は屈折して空気中に出ることができなくなる (8)。これを全反射という。
全反射
18
3.2. 主虹の赤色について
円は水滴で、黒い線は光が進んでいることを表わす線である。
黒い光線が円と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（x1）という。空気中と水中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目
の赤い線からなる角を屈折角（y1）という。二本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（x2）という。反射していることを表わす二本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（y2）という。。三本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（x3）という。水中と空気中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の三本目の赤い線からなる角を屈折角（y3）という。
光が進んでいることを表わすそれぞれの線と円が交わる点を通るように、円の中心から引いた線によってできた
三角形は、同じ円の半径から出来ている。よって、三角形の二辺が等しい。空気中と水中の境界面で光が屈折する
とき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の赤い線からなる角を屈折角（y1）と、二本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（x2）と、反射していることを表わす二本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（y2）と、三本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（x3）は、全て同じ角度であることがわかる。
y1 = x2 = y2 = x3
以上のことから、180-(y1+x2)の解と、180-(y2+x3)の解は同じであるので、合同条件「二辺とその間の角がそれぞれ等しい」に当てはまる。よって、円の中に作られた二つの三角形が合同であることが証明された。
19
入射角を i、屈折角を rとしたとき、相対屈折率による関係性はsini
sinrである。
上位の式を x1 と、y1 に置き換えると、sinx1
siny1になる。
また、x3 と、y3 に置き換えると、sinx3
siny3になる。
光の屈折の水中→ガラス中の場合は、sinx1
siny1= aとする。
光の屈折のガラス中→水中の場合は、sinx3
siny3=
1
aとする。
このとき x1 と y3 の関係性は、x1 = y3 より、sinx1 , siny3 = sinZとすると、
sinx1
sinZ= a
sinZ
siny3=
1
aになる。
よって、sinZ
siny3=
1
sinx1
sinZ
になるので、右辺の分母・分子共にsinZ
sinx1をかける。
sinZ
siny3=
1
sinx1
sinZ
× sinZ
× sinx1
sinZ
sinx1
右辺の分母が約分され、sinZ
siny3=sinZ
sinx1になるので、両辺に
1
sinZをかける。
1×
sinZ ×
sinZ
siny3=sinZ
siny3
× 1
× sinZ
1
siny3=
1
sinx1になるので、両辺共に分母・分子を入れ替える。
siny3 = sinx1
以上より、x1 = y3 であることがわかる。
また、平行な 2本の直線m直線 nとそれらに交わる 1本の直線が作る角のうち、同位角は等しいので、
A = 180 - x1 である。
20
次に、y1とx2からなる三角形の残りの角の角度は、180 - (y1 + x2)から算出することができ、y1 = x2= y2 = x3 なので、y2 と x3 からなる三角形の場合も同様に残りの角の角度は、180 - (y2 + x3)から算出することができる。二つの三角形の残りの角度がこの場合での Bになるので、
y1 + x2 + y2 + x3 = e + e + e + e = 4e とすると、B = 360 - 4eになる。
Cは、B - Aなので、C = {(360 - 4e) - (180 - x1)= 360 - 180 - 4e + x1C = 180- 4e + x1 になる。
平行な 2本の直線mと直線 nとそれらに交わる 1本の直線が作る角のうち、錯角は等しいので、
D =180 - { y3 + (180 - 4e + x1)= 180 - y3 - 180 + 4e - x1= -y3 + 4e - x1(ここで、y3 , x1 = fとする。)
= 4e - 2fになる。
入射角を i、屈折角を rとしたとき、相対屈折率による関係性はsini
sinrである。
上位の式を入射角 fと、屈折角 eに置き換えると、sinf
sineになる。
水に対する赤い光の屈折率は 1.33なので式に置き換えると、sinf
sine= 1.33になる。
sinf が知りたいので、両辺に sineをかける。
sine ×sinf
sine= 1.33 × sine
左辺の分母が約分され、sinf =1.33(sine)になる。
f = sin−1 {1.33 (sine) となり、よって、D = 4sin−1 {1.33 (sine) - 2e になる。
ここで sineを 0度から 90度まで変化させれば、sine ≒ 60度のとき、sineが最大値となる。この最大値付近が一番たくさん赤色の光が集まるため、sine≒ 60度のとき、赤色の光が一番強くなることがわかる。
sine ≒ 60度のときを最大とすると、sine≒ (3/4)sin60
= (3√3/8)sine = 0.6495 より、sinf ≒ 40.5度になる。
sine = 40.5 sinf = 60をD = 4e - 2fに代入する。D = 4(40.5) - 2(60)= 162 - 120 = 42よって、世間一般に言われる虹の赤い光線の目に見える角度である 42度と一致することが分かる。しかし、同じ
太陽の光からなる光線であっても、水滴に入る角度が違うと、最終的に目に見える角度とされる 42度に必ずしも
なるとは限らないと考える。
21
3.3. 主虹の紫色について
円は水滴で、黒い線は光が進んでいることを表わす線である。黒い光線が円と交わる点を入射点、この線が入射
点で円の中心から引いた法線からなる角を入射角（p1）という。空気中と水中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の紫色の線からなる角を屈折角（q1）という。二本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（p2）という。反射していることを表わす二本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角
（q2）という。三本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（p3）という。水中と空気中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の三本目の紫色の線からなる角を屈折角（q3）という。
光が進んでいることを表わすそれぞれの線と円が交わる点を通るように、円の中心から引いた線によってできた三
角形は、同じ円の半径から出来ている。よって、三角形の二辺が等しい。空気中と水中の境界面で光が屈折すると
き、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の紫色の線からなる角を屈折角（q1）と、二本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（p2）と、反射していることを表わす二本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角（q2）と、三本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（p3）は、全て同じ角度であることがわかる。
q1 = p2 = q2 = p3
以上のことから、180-(q1+p2)の解と、180-(q2+p3)の解は同じであるので、合同条件「二辺とその間の角がそれぞれ等しい」に当てはまる。よって、円の中に作られた二つの三角形が合同であることが証明された。
22
入射角を i、屈折角を rとしたとき、相対屈折率による関係性はsini
sinrである。
上位の式を p1 と、q1 に置き換えると、sinp1
sinq1になる。
また、p3 と、q3 に置き換えると、sinp3
sinq3になる。
光の屈折の水中→ガラス中の場合は、sinp1
sinq1= bとする。
光の屈折のガラス中→水中の場合は、sinp3
sinq3=
1
bとする。
このとき p1 と q3 の関係性は、p1 = q3 より、sinp1 , sinq3 = sinRとすると、
sinp1
sinR= b
sinR
sinq3=
1
bになる。
よって、sinR
sinq3=
1
sinp1
sinR
になるので、右辺の分母・分子共にsinR
sinp1をかける。
sinR
sinq3=
1
sinp1
sinR
× sinR
× sinp1
sinR
sinp1
右辺の分母が約分され、sinR
sinq3=sinR
sinp1になるので、両辺に
1
sinRをかける。
1×
sinR×
sinR
sinq3=sinR
sinq3
× 1
× sinR
1
sinq3=
1
sinp1になるので、両辺共に分母・分子を入れ替える。
sinq3 = sinp1
以上より、p1 = q3 であることがわかる。また、平行な 2本の直線m直線 nとそれらに交わる 1本の直線が作る角のうち、同位角は等しいので、
A = 180 - x1 である。
23
次に、y1とx2からなる三角形の残りの角の角度は、180 - (y1 + x2)から算出することができ、y1 = x2= y2 = x3 なので、y2 と x3 からなる三角形の場合も同様に残りの角の角度は、180 - (y2 + x3)から算出することができる。二つの三角形の残りの角度がこの場合での Bになるので、
y1 + x2 + y2 + x3 = e + e + e + e = 4e とすると、B = 360 - 4eである。
Cは、B - Aなので、C = {(360 - 4e) - (180 - x1)= 360 - 180 - 4e + x1= 180- 4e + x1
平行な 2本の直線mと直線 nとそれらに交わる 1本の直線が作る角のうち、錯角は等しいので、
D =180 - { y3 + (180 - 4e + x1)= 180 - y3 - 180 + 4e - x1= -y3 + 4e - x1 (ここで、y3 , x1 = fとする。)
=4e - 2f
24
3.4. 副虹の赤色について
円は水滴で、黒い線は光が進んでいることを表わす線である。
黒い光線が円と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u1）という。空気中と水中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の
赤い線からなる角を屈折角（v1）という。二本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u2）という。反射していることを表わす二本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（v2）という。三本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u3）という。反射していることを表わす三本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（v3）という。四本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u4）という。水中と空気中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の四本目の赤い線からなる角を屈折角（v4）という。
光が進んでいることを表わすそれぞれの線と円が交わる点を通るように、円の中心から引いた線によってできた
三角形は、同じ円の半径から出来ている。よって、三角形の二辺が等しい。空気中と水中の境界面で光が屈折する
とき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の赤い線からなる角を屈折角（v1）と、二本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u2）と、反射していることを表わす二本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（v2）と、三本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u3）と、反射していることを表わす三本目の赤い線の進行方向と、円の中心から引いた法線からなる角を反射角（v3）と、四本目の赤い線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（u4）は、全て同じ角度であることがわかる。
v1 = u2 = v2 = u3 = v3 = u4
以上のことから、180-(v1+u2)の解と、180-(v2+u3)の解と、180-(v3+u2)の解とは同じであるので、合同条件「二辺とその間の角がそれぞれ等しい」に当てはまる。よって、円の中に作られた三つの三角形が合同
であることが証明された。
25
入射角を i、屈折角を rとしたとき、相対屈折率による関係性はsini
sinrである。
上位の式を u1 と、v1 に置き換えると、sinu1
sinv1になる。
また、u4 と、v4 に置き換えると、sinu4
sinv4になる。
光の屈折の水中→ガラス中の場合は、sinu1
sinv1= aとする。
光の屈折のガラス中→水中の場合は、sinu4
siny4=
1
aとする。
このときu1 と v3 の関係性は、u1 = v4 より、sinu1 , sinv4 = sinZとすると、
sinu1
sinZ= a
sinZ
sinv4=
1
aになる。
よって、sinZ
sinv4=
1
sinu1
sinZ
になるので、右辺の分母・分子共にsinZ
sinu1をかける。
sinZ
sinv4=
1
sinu1
sinZ
× sinZ
× sinu1
sinZ
sinu1
右辺の分母が約分され、sinZ
sinv4=sinZ
sinu1になるので、両辺に
1
sinZをかける。
1×
sinZ ×
sinZ
sinv4=sinZ
sinv4
× 1
× sinZ1
sinv4=
1
sinu1になるので、両辺共に分母・分子を入れ替える。
sinv4 = sinu1
以上より、u1 = v4 であることがわかる。
26
次に、v1とu2からなる三角形の残りの角の角度は、180 - (v1 + u2)から算出することができ、v1 = u2= v2 = u3 = v3 = u4 なので、v2 とu3、v3 とu4 からなる三角形の場合も同様に残りの角の角度は、180 - (v2 + u3)、180 - (v3 + u4)から算出することができる。三つの三角形の残りの角度がこの場合での Aになるので、
v1 + u2 + v2 + u3 + v3 + u4= e + e + e + e + e + e = 6e とすると、A = 360 - 6eである。
B = (180 - u1)C = (180 - v4)u1 , v4 = f とすると、B = (180 - f)C = (180 - f) になる。
D = 360 - (A + B + C)= 360 - { (180 - 6e) + (180 - f) + (180 - f)= 360 - 360 + 6e - 180 + f - 180 + f= -360 + 6e + 2f= 360 - 6e - 2e
D = 6sin−1 {1.33 (sine) - 2e より、sine≒ 45.5度、sinf ≒ 72度のとき、sineが最小値になる。F = 180 - （3× 45.5） = 43.5G = 90 - 43.5 = 46.5E = 90 - 72 = 18C = 46.5 + 18 = 64.5D = 180 - 2(64.5) = 51
よって、世間一般に言われる副虹の赤い光線の目に見える角度である 51度と一致することが分かる。しかし、同
じ太陽の光からなる光線であっても、水滴に入る角度が違うと、最終的に目に見える角度とされる 42度に必ずし
もなるとは限らないと考える。
27
3.5. 副虹の紫色について
円は水滴で、黒い線は光が進んでいることを表わす線である。
黒い光線が円と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r1）という。空気中と水中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目
の赤い線からなる角を屈折角（s1）という。二本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r2）という。反射していることを表わす二本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角（s2）という。三本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r3）という。反射していることを表わす三本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角（s3）という。四本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r4）という。水中と空気中の境界面で光が屈折するとき、円の中心から引いた法線からなる角と、屈折後の進行方向の四本目の紫色の線からなる角を屈折
角（s4）という。
光が進んでいることを表わすそれぞれの線と円が交わる点を通るように、円の中心から引いた線によってできた三
角形は、同じ円の半径から出来ている。よって、三角形の二辺が等しい。空気中と水中の境界面で光が屈折すると
き、円の中心から引いた法線からなる角と、屈折後の進行方向の一本目の赤い線からなる角を屈折角（s1）と、二本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r2）と、反射していることを表わす二本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角（s2）と、三本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r3）と、反射していることを表わす三本目の紫色の線の進行方向と、円の中心から引いた法線からなる角を反射角（s3）と、四本目の紫色の線と交わる点を入射点、この線が入射点で円の中心から引いた法線からなる角を入射角（r4）は、全て同じ角度であることがわかる。
s1 = r2 = s2 = r3 = s3 = r4
以上のことから、180-(s1+r2)の解と、180-(s2+r3)の解と、180-(s3+r2)の解とは同じであるので、合同条件「二辺とその間の角がそれぞれ等しい」に当てはまる。よって、円の中に作られた三つの三角形が合同
であることが証明された。
28
入射角を i、屈折角を rとしたとき、相対屈折率による関係性はsini
sinrである。
上位の式を r1 と、s1 に置き換えると、sinr1
sins1になる。
また、r4 と、s4 に置き換えると、sinr4
sins4になる。
光の屈折の水中→ガラス中の場合は、sinr1
sins1= aとする。
光の屈折のガラス中→水中の場合は、sinr4
sins4=
1
aとする。
このとき r1 と s3 の関係性は、r1 = s4 より、sinr1 , sins4 = sinZとすると、
sinr1
sinZ= a
sinZ
sins4=
1
aになる。
よって、sinZ
sins4=
1
sinr1
sinZ
になるので、右辺の分母・分子共にsinZ
sinr1をかける。
sinZ
sins4=
1
sinr1
sinZ
× sinZ
× sinr1
sinZ
sinr1
右辺の分母が約分され、sinZ
sins4=sinZ
sinr1になるので、両辺に
1
sinZをかける。
1×
sinZ ×
sinZ
sins4=sinZ
sins4
× 1
× sinZ1
sins4=
1
sinr1になるので、両辺共に分母・分子を入れ替える。
sins4 = sinr1
以上より、r1 = s4 であることがわかる。
29
次に、v1とu2からなる三角形の残りの角の角度は、180 - (v1 + u2)から算出することができ、v1 = u2= v2 = u3 = v3 = u4 なので、v2 とu3、v3 とu4 からなる三角形の場合も同様に残りの角の角度は、180 - (v2 + u3)、180 - (v3 + u4)から算出することができる。三つの三角形の残りの角度がこの場合での Aになるので、
v1 + u2 + v2 + u3 + v3 + u4= e + e + e + e + e + e = 6e とすると、A = 360 - 6eである。
B = (180 - u1)C = (180 - v4)u1 , v4 = f とすると、B = (180 - f)C = (180 - f) になる。
D = 360 - (A + B + C)= 360 - { (180 - 6e) + (180 - f) + (180 - f)= 360 - 360 + 6e - 180 + f - 180 + f= -360 + 6e + 2f= 360 - 6e - 2e
30
3.6. 虹について雨上がりには虹ができるために適度な大きさの水滴が数多くあるこの水滴に太陽光が入射すると，その中で屈折・
反射が起こる。この水滴から出てきた光を見ると虹に見えるである。いろいろな波長をもつ光の集まりである太
陽光線が、波長によって色が変わる。虹の七色は、波長の長い順に、「赤・橙・黄・緑・青・藍・紫」となってい
る。また、光は異なる物質の境界で進行方向が変わる屈折の度合いを「屈折率」という。その光の屈折率は、波長
が長いほど屈折率は小さく、波長が短いほど屈折率は大きい。屈折率の小さい順に、「赤・橙・黄・緑・青・藍・
紫」となっている。
太陽光線が水滴の表面で屈折して水滴内に入り、その光は反射し、さらに水滴内を出るときも屈折して観測者の
目に入ってくる。水滴内で二回の屈折と一回の反射によって作られる主虹 (図 1)と、水滴内で二回の屈折と二回
の反射によって作られる副虹 (図 2)の二本の光によって虹はできている。はっきりと見ることができるのは主虹
で、副虹は水滴内を二回反射するので光が散乱してしまい、あまりはっきり見ることができない。またほとんど
見えない場合もあるという。この時に光の色（波長）によって屈折率が違い、波長の長い赤い光は屈折率が小さ
いので、地平面に対して角度は大きくなる。逆に波長の短い紫の光は地平面に対して角度は小さくなる。よって、
主虹の場合赤色が外側で紫色が内側になる。副虹は二回反射するので色の順番は逆になり、紫色が外側で赤色が
内側になる。
虹がアーチ状に見える理由は角度にある。太陽と観測者を結ぶ直角上に虹の半円の中心になる。主虹の場合観測
者太陽光線に対して約 42度、副虹の場合 50度になったときに虹が見える。
赤い光線の屈折率=1.33
紫の光線の屈折率=1.34
31
3.7. いろいろな虹・過剰虹（干渉虹）…主虹の内側の紫色のすぐ近くに赤色や緑色の虹が部分的に現れる虹。この虹は主虹の下部
よりも上部に現れやすいとされてるという。光の屈折や反射に干渉が加わって生じた虹であることから干渉虹と
もいう。主虹の方向、すなわち対日点から半径約 42度のすぐ近くの角度で雨滴から出る光が互いに干渉して弱め
合ったり、強め合ったりして目に入るためにできる。副虹の外側にも出来場合があるが、ごくまれだといわれてい
る。(図 1)
・反射光虹…主虹の下部の位置から立ち上がり、主虹より高い位置によりまるく出る虹。色の配列は主虹と同じ
である。観測者の背後に海や湖などの水面があって、太陽光線がいったん水面で反射し、その反射光の反射対日
点の周り 42度にできた虹で、反射光主虹ともいう。副虹の下部の位置から立ち上がる反射光副虹もできることが
ある。反射光虹とは別に反射虹がある。これは、観測者の前面に湖などの水面があり、虹がいったん水面で反射し
て目に入ったものである。これは空の虹がそのまま水面で反射したものではなく、別の雨滴にできた虹が水面で反
射したものである。(図 2)
・霧虹 (きりにじ)…霧の幕の上に現れる虹。霧粒は雨粒に比べて小さいので、太陽光は霧粒の中で屈折反射しさ
らに回折によって虹ができる。対日点を中心として半径約 42度の白い帯になる。虹の幅は通常の虹より広く 2倍
くらいである。しかしよく見ると外側に薄い赤、内側に薄い青が見られる。色が薄いので白虹 (しろにじ)という
こともある。霧虹は御光 (ごこう)と同時に現れることがある。飛行機の窓から下の雲海を見下ろしたとき、雲海
の上に飛行機の影が映り、そのすぐ周りに色のついた光の輪が現れる。これは御光である。さらにその周りに大
きな白い光の輪が現れる。これが霧虹で、虹の形は普通、だ円形となる。これは目と雲海上の対日点を結ぶ半径
約 42度の円すいが雲海と切り合った曲線である。この切り口は太陽の高さが 42度以上になるとだ円になり、さ
らに高くなると円に近づく。 霧虹には過剰虹ができることがある。霧虹と過剰虹の中間の黒い帯の角度、すな
わち対日点からの角度を測って霧粒の直径を計算することができる。霧虹は気温が零下 10℃くらいのときでも現
れる。この場合の霧は氷晶ではなく、過冷却した水粒であることがわかる。(図 3)
・月の虹…月を光源としてできる虹。月の虹は非常に薄く、白色に見える。しかしカラーフィルムで撮影すると着
色された映像が得られるという。月の虹は月に薄い雲がかかった際にその周囲に光の輪が現れる大気光学現象の
32
ことである月の暈 (かさ)と間違いやすいが、月の虹は月を背にした側に出るので月の暈と区別できる。(図 4)
・水平虹…水面に浮かんだホコリなどに、朝方に露がつき、その露に太陽光が屈折反射してできた虹。この虹は
水平になる。(図 5)
・赤虹、赤外虹…夕方太陽が水平線に沈むころ東側の空の雲に出る赤色の虹。雲に出る虹は白虹に近いのが本来
の姿であるが、日没ごろは太陽光は長い距離の大気を通過してくるために散乱によって青色を失い、赤色となる。
そのため虹も白虹でなく赤虹となる。赤外線フィルムおよび赤外線用フィルターを組み合わせて、光の波長 800～
930ナノメートル（1ナノメートルは 10億分の 1メートル）のみに感光するように調整して虹を撮影すると、肉
眼では見えない赤外線領域にも虹が出ることが 1971年ごろ判明したという。(図 6)
図 1: 過剰虹 図 2: 反射光虹
図 3: 霧虹 図 4: 月の虹
図 5: 水平虹 図 6: 赤虹
33
おわりに
参考文献[1] 著者名, 論文名, 雑誌名, 号数 (2016), 0–16.
[2] 著者名, “本の題名”, 出版社, 2016.
[3] Webネーム, HPネーム http://www.url
34
![jQuery Fundamentals · jQuery Fundamentals Rebecca Murphey [] jQuery Fundamentals Rebecca Murphey [] Copyright © 2010](https://img.pdfslide.net/doc/110x75/5eb897bf41e49d450f44be28/jquery-fundamentals-jquery-fundamentals-rebecca-murphey-jquery-fundamentals.jpg)
![(jQuery Fundamentals) Fundamentos de jQuery191.13.234.92/.../Arquivos/LPA/JQuery/apostilas/apostila-jquery-br.pdf · Fundamentos de jQuery (jQuery Fundamentals) Rebecca Murphey []](https://img.pdfslide.net/doc/110x75/6077fbbcb4f4d25f0363d510/jquery-fundamentals-fundamentos-de-jquery1911323492arquivoslpajqueryapostilasapostila-jquery-brpdf.jpg)
