投稿

1月, 2018の投稿を表示しています

ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ありません。

このブログではサイドバーに広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLatexのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

生徒の成績表を作成し、偏差値を計算する LibreOffice Calc編

イメージ
ここで使用する表計算ソフトはLibreOfficeのバージョン4.3.3.2。これらのやり方はApache OpenOfficeやNeoOfficeにも適用可能かもしれない。 試験のスコアを入力する表を作る 例えば次のような項目を用意する。 生徒のIDを入力する。 ※ ※　成績は生徒の極めて重要なプライバシーに関わる情報であるため、ここに生徒の名前は直接入力せず、代わりに生徒IDを入力してダミー変数として管理する。生徒IDと生徒名との対応表は別途作成し、印刷するか別の記録媒体に保存して安全な場所で厳重に保管し、その対応表はなるべく持ち歩かない。いくつかの重要な情報を分散し、他方を記号化して管理することで、外部の人々にはちょっとした暗号として働くので、試験のスコア表や偏差値が外部に流出してしまってもそれらの個々の情報がどの個人に関連しているのかがすぐには特定されにくく、情報の安全性を、この場合は外部における匿名性を、いくらか高めることができる。 例えば２年A組男子を2AM01として最初のセルに入力する。 そしてそのセルの右下端の■にマウスポインタを合わせて下へドラッグする。 上のような機能はマイクロソフトの表計算ソフトウェアExcelでは「オートフィル」として知られている。 そうすると2AM01から2AM10までのIDが自動的に生成される。 女子は例えばMをFにして2AF01と入力して同様に入力する。 表全体を、例えばマウスの左クリックとドラッグによって、選択する。 外枠や格子状の線を引くために外枠のボタン を左クリックする。 次のように右下の格子状を左クリックして選択する。 スクロールしても項目が動かないように固定するため、項目のすぐ下の行を選択する。 メニューバーの「ウィンドウ」を左クリックし、そのメニューから「固定」を左クリックして選ぶ。 こうするとスクロールしても項目は固定されるので見やすくなる。 偏差値を計算するために平均点と標準偏差が必要になるので、そのための表も作っておく。 これで表が完成したので、次に生徒の試験のスコアを入力していく。 合計点、平均点、標準偏差、偏差値を計算する 教科ごとのスコアの合計を計算するため、合計点の項目の先頭のセルを左クリックして選ぶ。 シグマのボタン を左クリックする。Exce
コメントを投稿
続きを読む

HTML5のCanvas 2Dで画像を表示

HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様である HTML5 にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。 必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。 下準備 最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述したつもり。そのファイルの内容は次のとおり。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> </head> <body> <canvas id="canvas_rectangle" width="250" height="250"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_rectangle.js"></script> </body> </html> canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。widthが幅でheightが高さ。script要素を記述し、そのsrc属性にJavaScriptのソースファイル名を指定した。このファイルにJavaScriptでコー
コメントを投稿
続きを読む

HTML5のCanvas 2DのAPIを利用して文字列を描く

HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様である HTML5 にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。 必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。 下準備 最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述した。そのファイルの内容は次のとおり。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <canvas id="canvas_letter" width="380" height="120"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_letter.js"></script> </body> </html> canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定
コメントを投稿
続きを読む

HTML5のCanvas 2Dを利用して図形を描く

HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様である HTML5 にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。 必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。 下準備 最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述した。そのファイルの内容は次のとおり。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <canvas id="canvas_figure" width="250" height="250"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_figure.js"></script> </body> </html> canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。w
コメントを投稿
続きを読む

HTML5のCanvas 2Dを利用して直線を描く

Canvas 2Dを表示するためのHTML文書は次のとおり。body要素の中にcanvas要素を設け、id属性とCanvasの大きさをwidth（幅）とheight（高さ）で指定する。このid名はJavaScriptのソースから参照するために使う。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> </head> <body> <canvas id="canvas" width="350" height="350"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_straight_line.js"></script> </body> </html> canvas_straight_line.jsという名のファイルに次のようなコードを記述して保存。最初の2行はCanvasで2D画を描くときのお決まりのコード。lineWidthプロパティで線幅を指定している。beginPathメソッドで初期化。moveToメソッドの引数で線の視点をxy座標の値として指定し、lineToメソッドの引数で線の終点をxy座標の値として指定している。xy座標系はCanvasの左上端が(0,0)となる。そこから下へ伸びるほど(0,100)のようにyの値が増し、右へ伸びるほど(100,0)のようにxの値が増す。そして最後にstrokeメソッドを使って線を描いている。 let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // x軸 context.beginPath(); //パスのリセット context.lineWidth
コメントを投稿
続きを読む