2016-09-11

月・週・日・時・分の単位に応じてセレクタの値を変えるJava Sctipt

selectタブで選択している値に併せて、別のselectタブのvalueを変えたい場面に出くわしました。
日付のように連続した数字を扱う時に使えるメソッドを考えたので、忘備録としてメモします。

必要なoptionタグをhtmlに用意しておいて表示・非表示を切り替えるとhtmlの可読性が落ちるなあと思ったので、親のselectが変わる度にJSで子selectのoptionタグを生成しています。
処理としては単純で、selectの値に併せて配列を生成して、それを元にoptionタグを生成しています。
それらを親selectの値が変わった時に実行してあげる、といった流れです。

/**
 * 親selectの単位に応じて、optionの値を変更する
 * 選択された単位ごとに数値となる配列を生成し、optionタグを書き換える
 */
function setSelectSetting() {
    $('#selectUnit').change(function() {
        var selectUnit = $('#selectUnit').val();

        $('#selectTime').html($('<option></option>'))
            .val('')
            .text('-');

        if(selectUnit == '分') {
            var content = valueMaker(60);
            optionMaker(content);
        }
        else if(selectUnit == '時') {
            var content = valueMaker(24);
            optionMaker(content);
        }
        else if(selectUnit == '日') {
            var content = valueMaker(31);
            optionMaker(content);
        }
        else if(selectUnit == '週') {
            var content = valueMaker(4);
            optionMaker(content);
        }
        else if(selectUnit == '月') {
            var content = valueMaker(12);
            optionMaker(content);
        }
    });
}

/**
 * selectの値を生成するための配列生成メソッド
 * @param {integer} maxNum Number to array
 */
function valueMaker(maxNum) {
    var numbers = [];
    for( var i=1; numbers.push(i++) < maxNum;);
    return numbers;
}

/**
 * selectの値を書き換えるためのメソッド
 * @param {array} content Create option's values and names from content
 */
function optionMaker(content) {
    $.each(content, function() {
        $('#selectTime').append($('<option></option>')
                .val(this)
                .text(this));
    });
}

変更する度にoptionタグが増える、なんてことがないように実行時には必ずhtmlでoptionを空上書きしてから生成しています。
また使うことありそうです。

最初はよく分からない子だな、と思っていたJava Scriptちゃんですが、最近は結構好きです。
なかなか楽しい。

【余談】
コメントが緑でハイライトされるのすごい違和感が、、。

2016-09-11

議事録の管理ツール「gijilog」

サービスチェック

これは便利かも。
議事録を管理するツールで、触った感覚けっこう使いやすい。

f:id:masayannuu:20160911133410p:plain

気に入ったポイントはこれ。
・フォルダで日付やカテゴリーを分けて管理できる。ツリー状で見やすい。
・TODOをつけられる。
・議事録に特化しているだけあって、箇条書きがデフォ。これが意外と使いやすい。
・ショートカットキーが充実しているというか、キーボードでさくさく動かせる。
・webhockでslackとchatworkに連携ができ、共有が簡単。

というわけで、つなげてみた。 webhockURLを入れるだけでした。
f:id:masayannuu:20160911133438p:plain