単位の達人ジェネレーター作ってみた
- あつし
- 2018年8月22日
- 読了時間: 6分
こんにちは、あつしです。
初めての投稿です。
夏休みですが皆さんいかがお過ごしでしょうか。
あつしはこのようなものを作ってみました。
↓こんな画像を作ることができます。
自分の成績を入力してSNSでシェアしてくれたら嬉しいです。
-----------忙しい人はここまで-----------
さて、このジェネレーターはHTMLとJavaScriptで作っています。
前期ではHTMLの勉強をしたのですが、夏休みはJavaScriptの勉強をしようと思って、習作としての製作です。
自分の成績を簡単にシェアできるようなツールがあったら便利かなと思い、もともと好きだった太鼓の達人のリザルト画面と絡めて作ってみました。
次作るときは画像をジェネレートしてそのままSNSで自動的に共有できるようにしたらもっといいのかなと思いますね。
ここから下は自分の備忘録的な意味でコードの解説をします。
正直興味のある人はいないと思うし、大したコードじゃないので読まなくて全然いいです。ジェネレーターで遊んでくれたら嬉しいです。
-----------ジェネレーターを作ってみたい人以外はここまで-----------
こんな人に読んでほしい
・canvas要素の使い方がよくわからない
・ジェネレーターを作ってみたいけど何からしたらいいかわからない
・htmlを記述する上で変数を使いたいけどどうしたらいいかわからない
・canvas要素のダウンロードの仕方が分からない
そんな人いるのか…？？
では、始めます。
最初にことわっておきますが、jQueryは一切使用してません。使い方が知りたい人は他をあたってください。
トップページは大したことしてないので解説しません。
むしろ、所属大学をチェックして選択すると別タブで開いてしまうというまずい仕様になってるので、window.open()で同一タブで開く方法をご存知の方はコメント欄で教えてください。
大学が違ってもコードはほとんど同じなので、その中で一番ややこしい”その他の大学”の解説をします。
１．html
<html> <head> <!-- 省略 --> </head> <body> <h3>その他の大学</h3> 下のフォームを記入してGENERATEを押してください。<br> 画像表示後、ダウンロードを押すことでダウンロードができます。<br><br> <form> <label for="userForm">名前: </label> <input type="text" id="userForm" value="名無しの学生"> <br> <label for="titleForm">期間: </label> <input type="text" id="titleForm" value="2018年度前期"> <br> <label for="uniForm">大学:</label> <input type="text" id="uniForm" value="国信大"> <br> <br> 評価名・GP・単位数 <br> <label for="nameForm1">1:</label> <input type="text" id="nameForm1" value="S" placeholder="評価名"> <input type="text" id="gpForm1" value="4.0" placeholder="GP"> <input type="text" id="scoreForm1" value=0 placeholder="単位数"> <br> <!-- 以下２から６は省略 --> <button id="button">GENERATE</button> </form> <canvas id="canvas"></canvas> <br> <a id="download-button" href="" download="">ダウンロード</a> </body> <script> ///後述 </script> </html>
説明することないですね…
強いて言うならplaceholderでフォームの背景文字を設定しています、くらいです。
ダウンロードボタンについてはscriptで解説します。
２．Javascript
<script> //canvasの準備 var canvas = document.getElementById('canvas'); var canvasWidth = 506; var canvasHeight = 253;
canvas.width = canvasWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d');
var button = document.getElementById("button"); //buttonクリック時の動作 button.addEventListener("click", function(e) {
//おまじない e.preventDefault(); //変数の設定 var uniForm = document.getElementById("uniForm").value; var nameForm1 = document.getElementById("nameForm1").value; //省略
var gpForm1 = document.getElementById("gpForm1").value; //省略
var titleForm = document.getElementById("titleForm").value; var userForm = document.getElementById("userForm").value; var scoreForm1 = document.getElementById("scoreForm1").value; //省略
//履修単位数の定義 var sum = parseInt(judgenull(scoreForm1),10) + parseInt(judgenull(scoreForm2),10) + parseInt(judgenull(scoreForm3),10) + parseInt(judgenull(scoreForm4),10) + parseInt(judgenull(scoreForm5),10) + parseInt(judgenull(scoreForm6),10); //取得単位数の定義 var getsum = judgezero(judgenull(gpForm1))*parseInt(judgenull(scoreForm1),10) + judgezero(judgenull(gpForm2))*parseInt(judgenull(scoreForm2),10) + judgezero(judgenull(gpForm3))*parseInt(judgenull(scoreForm3),10) + judgezero(judgenull(gpForm4))*parseInt(judgenull(scoreForm4),10) + judgezero(judgenull(gpForm5))*parseInt(judgenull(scoreForm5),10) + judgezero(judgenull(gpForm6))*parseInt(judgenull(scoreForm6),10);
//単位取得率、GPAの定義 if(sum == 0) { var percent = (0).toFixed(1); var gpa = (0).toFixed(2); }else { var percent = (getsum/sum*100).toFixed(1); var gpa = ((judgenull(gpForm1)*parseInt(judgenull(scoreForm1),10)+judgenull(gpForm2)*parseInt(judgenull(scoreForm2),10)+judgenull(gpForm3)*parseInt(judgenull(scoreForm3),10)+judgenull(gpForm4)*parseInt(judgenull(scoreForm4),10)+judgenull(gpForm5)*parseInt(judgenull(scoreForm5),10)+judgenull(gpForm6)*parseInt(judgenull(scoreForm6),10))/sum).toFixed(2); }
//imgの読み込み var img = new Image();
//フルタンイかどうかの判定 if(percent==100){img.src="data:image/png;base64,//省略"} else {img.src="data:image/png;base64,//省略"}
//img読み込み後の挙動 img.onload = function() { //imgの描写 ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); //文字の描写 addTitle(); addUser(); addScore(); addGPA(); addGrade(); addUni(); addName();
//ダウンロードボタンクリック時 document.getElementById('download-button').addEventListener('click', function(e) { var url = canvas.toDataURL(); var elem = e.target; elem.href = url; elem.download = new Date().getTime() + '.png'; }); }
//文字入力関数 function addTitle() { ctx.font = "bold 20px 'MS Pゴシック'"; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'white'; ctx.fillText(titleForm, 350, 22); } //省略 //引数が0なら0を、他なら1を返す関数 function judgezero(x) { if(x==0) { return 0; } else { return 1; } }
//引数が空なら0を、それ以外なら引数自体を返す関数 function judgenull(x) { if(x=="") { return 0; } else { return x; } } }); </script>
中身はまあコード読みながらクイックリファレンスとかで調べたらわかると思うんで（解説記事とは）、工夫したことを書きます。
まずは成績の項目数が大学によって違うので、空欄でもうまく挙動するように、というのが一番苦労したところです。用いているのはjudgezeroとjudgenullっていう関数。
judgenullは空欄時に０を返してエラーが起きないようにする関数です。じゃあ変数の段階で0を代入すればいいと思われるかもしれないですけど、そしたらcanvas上に文字を描写するときに0が描写されるのでそれを避けるためです。
judgezeroは取得単位数とかで活躍しています。GPが０の成績の単位は取得単位数に入らないよ、っていうのを決めています。
単位取得率、GPAの定義をsum==０で場合分けしているのは、履修単位数が０なのにフルタンイはおかしいだろう、というのと０でわるのを避けるため（GPAの定義より）です。
これは結構重要なところなんですが、用いているimgはBase64でエンコードしたものを用いています。最初はGoogle driveにアップしてアドレスを引っ張ってこようかと思ったんですが、動作が重くなりすぎたのでこういう形になりました。
ダウンロードは一番苦労したんですが、最後までEdgeではダウンロードできないままでした。よくわかりません。Edge民じゃないので対応させるやる気が起きませんでした。ごめんなさい。
参考にしたサイト一覧
ここまでコードの話をしました。最後におまけで画像の話をします。
今回用いた画像はこんなの。
ど○ちゃんは CorelのPaint Shopを使って描きました。
全体の画像はaviutlで作ってます。フリー素材の使用はなしで、全て自作です。
SNSで共有、を念頭に置いてシンプルなデザインにしましたが、初期案は違っていて、こういうのにする予定でした。
これも明らかにわかるように手描きしました。今回Paint Shopを初めて使ったので、使いたてで慣れてなくて酷い絵になっています。元から絵が下手ってこともありますが…
こちらはこちらで面白いと思いますが画面がごちゃつくのでやめました。
長々と読んでいただきありがとうございました。
次はこんな需要のない記事じゃなくてもっと万人受けする、役に立つ記事を書きたいですね。
それではまた次回。
Comentarios