[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
私は仕事で開発者向けの研修を担当している。研修には合否判定試験があり、そこではソースコードレビューを行う。しかし、これがなかなか大変であり、時間がかかる。受講生がたくさんいた場合は夜遅くまで会社に残ることになる。そこで、ソースコードレビューを自動化したいがなかなかうまくいかない。gjslint 等を導入してはいるが、壊滅的に [自主規制] なコードはそれだけではフィードバックできないのだ。
そんな経緯で綺麗なコードは自動採点にお任せ、壊滅的なコードはキチッと目視確認して丁寧にフィードバックする、というアイディアが出てきた。だが、採点対象が壊滅的なコードが否かを測る手段が難しい。その為の手段として今検討しているのが plato と呼ばれるライブラリである。
HTML によるレポートと json 形式の情報の双方を出力する。
HTML の形式は jQuery を使ったサンプルがあるのでそれをみると感じがつかめるだろう。
JSON 形式はファイルごとに分割して出力される。HTML でも各ファイルごとのレポートが出せるが (例： jQuery の src/ajax.js)、各ページの元になっているようだ。各ファイルごとに以下の情報が出力されていた。
今回の場合 complexity が主要な情報となるわけだが、情報が多い。とりあえず、 effort という値が大きければ大きいほどコードは複雑さを増し読みにくくなる。これはコードの長さと複雑さを乗算した値なので、これを使うのが一番評価は容易だと思われる。より詳細な評価や関数ごとの評価も出力されているので、使えばより細かく評価をやれそう。
提出された各ソースコードに対して effort の値を出力、一定以上ならば手動で評価するように採点者には依頼し、そうでなければ自動採点で済ませる。どこをラインにするかは難しいが、そこはもはや自動採点と手動採点を並行運用して見つけるしかない……
Boolean({}); // => true
これが true になるのがつらいことがあった。 false になるのもおかしな話ではあると思うけれども、その辺の判定が難しくてちょっと辛いです。
何かを選択した場合、select の値をあわせて変更したい、とかそういったことがあってやってみた話。普通にやるのは簡単だったが、 jQuery Mobile 使っていた時が面倒だった。
<select id="change-select-from-out-of-select">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<span id="change-select-from-out-of-select-button-1" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">1に変更</span>
<span id="change-select-from-out-of-select-button-2" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">2に変更</span>
<span id="change-select-from-out-of-select-button-3" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">3に変更</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>
var $select = $('#change-select-from-out-of-select');
$('#change-select-from-out-of-select-button-1').click(function(e) {
$select.val(1);
});
$('#change-select-from-out-of-select-button-2').click(function(e) {
$select.val(2);
});
$('#change-select-from-out-of-select-button-3').click(function(e) {
$select.val(3);
});
jQuery Mobile を使っている場合は次のように書いたらうまくいった。
var $select = $('#change-select-from-out-of-select');
$('#change-select-from-out-of-select-button-1').click(function(e) {
var $selected = $switcher.children('[value="1"]');
var caption = $selected.text();
$select.val(1);
$($select.parent().find('span>span')[0]).text(caption);
});
// value を引数として一般化する
function changeJQueryMobileSelect(value) {
var $selected = $switcher.children('[value="' + value +'"]');
var caption = $selected.text();
$select.val(value);
$($select.parent().find('span>span')[0]).text(caption);
}
$('#change-select-from-out-of-select-button-2').click(function(e) {
changeJQueryMobileSelect(2);
});
crypto-js が手軽。
<script src="./js/lib/crypto-js/core.js"></script>
<script src="./js/lib/crypto-js/sha256.js"></script>
<script>
// 5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8
alert(CryptoJS.SHA256('password'));
</script>
個人的には TRPG 等で「ボスデータを戦闘中にいじったりしていない」を明示するために使うなどを考えている (それがいいことか悪いことかはまた別の話だ)。戦闘開始時にボスデータのハッシュ値だけ公表し、戦闘後にボスデータを公開。ハッシュ値を照合して変化のないことを確認する、といった使い方である。
編集可能な要素。例えば、この赤い文字は contenteditable なので編集できるはず。
input じゃない要素を入力欄にしたい時に contenteditable は便利に見える。しかし、こいつ、 change イベントが発火しないのだ。change イベントをトリガーにして何かするのには使えない。
<div id='all'>
<div name='a' contenteditable='true' style='border:3px solid black;'>ひつつん</div>
<div name='b' contenteditable='true' style='border:3px solid black;'>ちわわとちくわ</div>
<div name='c' contenteditable='true' style='border:3px solid black;'>ひよよん</div>
<input name='d' type='text' value='これは特に設定しなくても change イベントが発生する' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#all').change(function(e){alert($(e.target).attr('name'));});
</script>
次の JavaScript を埋め込むことで contenteditable に変更が発生した場合に change イベントを発火させられる。とりあえず手元の Google Chrome と FireFox では問題なく動いた。
function bindContenteditableChangeEvent(){
var $contenteditables = $("[contenteditable='true']");
var text = '';
$contenteditables.on('focus', function(e){
text = $(e.target).html();
});
$contenteditables.on('focusout', function(e){
if(text !== $(e.target).html()){
$(e.target).trigger(new $.Event('change'));
}
});
}
bindContenteditableChangeEvent();