JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年11月 / 10月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>12月

アクセスランキング

[ジャンルランキング]
コンピュータ
261位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
37位
アクセスランキングを見る>>

JSONとAjaxを組み合わせた設定画面の実装

あけましておめでとうございます。なかなか気分が乗らず、ブログを更新していませんでした。

さて、新年さっそくですが、ちょっとしたWEB関連の開発をしています。半分以上が設定画面で構成されるようなソフトウェアですが、今回、設定画面の構成の方法を少し変えてみました。

これまでは、設定項目をHTMLのFORMに組み込み、そのままPOSTで送信したり、Ajaxを用いて送信する形をとっていました。
しかし、これは設定項目を変えるのが手間になりますし、複数の設定画面を作るとき無駄が増えます。

そこで今回の実装は以下にしました。
〔サーバ側、以下S〕
・設定ファイルのテンプレートファイル(デフォルトの設定値、設定値の説明、設定値の有効範囲)
・設定値を保持するファイル(設定された設定値)

〔クライアント側、以下C〕
・各種コードを記述(データは何も保持しない)

〔設定画面表示時の処理〕
C: サーバに設定項目のリストを要求
S: 既存の設定値を読み込み、テンプレートファイルの設定値の説明、設定値の有効範囲とともに設定項目のリストを生成、クライアントにAjaxで送信
C: サーバから受け取った設定項目のリストからHTML FORMを生成
C: ユーザからの入力を待機
C: ユーザの送信操作を検知すると、入力値のチェック後にAjaxでサーバに送信
S: 受信した値を、テンプレートファイルの設定値の有効範囲内か確認後、設定ファイルに反映

設定値の有効範囲は、正規表現でチェックしています。

今回はサーバにデータを保持する前提ですが、実装次第ではクライアントだけで完結する実装にすることもできます。

設定項目の一例
{
   "title": "設定1", //設定値のタイトル
   "desc": "input type=textのスタンダードな入力エリア。文字数制限:1-10字", //設定値の説明
   "name": "setting1", //送信時に設定値を示すための一意のID
   "type": "text", //設定値の種類
   "value": null, //デフォルトの設定値
   "pattern": "^.{1,10}$" //設定値の有効範囲
},


以下が、すべてのコードを含んだデモページです。設定項目の指定はコード上部のオブジェクトで指定しています。
140104 設定画面デモ
※正規表現の改行の判定はわかりやすいよう冗長に書いています

SettingsManagerのインスタンスにsetItemsToSetメソッドでデータを指定することで、HTML FORMが生成されます。
設定値が有効範囲であれば青の細い枠が、範囲外であればオレンジの太い枠が出ます。

フォームのonsubmitメソッドをオーバーライドしているため、送信の操作は実際には行われません。
このデモでは、入力値をアラートで表示します。
サーバ側で実際に保存するデータは、このアラートで表示される値のみで良いというわけです。

まだ開発途中のものですが、何かの参考になればと思い、公開しておきました。


三が日も終わり、2014年も本格的に始まります。今年も一年、よろしくお願いします。
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

JavaScriptでのクラスの実装とメモリ使用量の違い

最近、とある本を読みました。
JavaScript: The Good Partsという本です。

Douglas Crockford (著), 水野 貴明 (翻訳)
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス


主にはJavaScriptのコード記述のスタイルについての本です。本の感想はさておき(とても勉強になりましたが)、本の五章目に継承の方法についての記述があります。

続きは以下から。

   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

JavaScriptで簡易カレンダーを作ってみた

久々に技術系の記事です。

今制作しているWEBアプリで簡単なカレンダーが必要になったのですが、閏年の計算やら年ごとの曜日の移動やら処理が面倒だなあと考えていたところ、すべてJavaScript標準の機能で実装できるということに気づき、思ったよりシンプルに書くことができたので公開しておきます。
(表示は表を利用しています)

簡易カレンダー

var createCalendar = function(elem,isMonStart){
    //elem 対象のテーブル(tbody)
    //isMonStart 月曜日スタートか(指定がない場合日曜日スタート)
    
    var c,i,j,curRow,fstDay,eTd;
    var nDObj = new Date();
    var calTbl = elem;
    
    //今月 - 1
    var nMon = nDObj.getMonth();
    
    //今日
    var nDate = nDObj.getDate();
    
    //今月は何日まで?(閏年・2月なら28日まで)
    for(c=28;(new Date(nDObj.getFullYear(),nMon,c)).getMonth() == nMon;c++);
    
    //今月の1日の曜日
    fstDay = (new Date(nDObj.getFullYear(),nMon,1)).getDay();
    j = isMonStart ? (fstDay - 1 < 0 ? 6 : fstDay - 1) : fstDay;
    
    //セル挿入用のメソッド
    calTbl.createCell = function(value){
        var td = curRow.insertCell(-1);
        td.innerHTML = value;
        return td;
    }
    
    curRow = calTbl.insertRow(-1);
    for(i=1;i<=j;i++){
        calTbl.createCell("&nbsp;");
    }
    
    for(i=1;i<c;i++){
        if (j > 6){
            j = 0;
            curRow = calTbl.insertRow(-1);
        }
        eTd = calTbl.createCell(i);
        
        if (i == nDate){
            //今日は太字
            eTd.style.fontWeight = "bold";
        }
        
        switch(j){
            case (isMonStart ? 6 : 0):
                //日曜は赤字
                eTd.style.color = "#f00";
                break;
            case (isMonStart ? 5 : 6):
                //土曜は青字
                eTd.style.color = "#00f";
                break;
        }
        
        j++;
    }
}

window.onload = function(){
    createCalendar(document.getElementById("cal_table"),true);
    createCalendar(document.getElementById("cal_table2"),false);
}



カレンダーの表示等は一部のブラウザではまだ実装されていませんが、このようなシンプルなものでも、あると便利ですね。
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

JavaScriptでの配列/オブジェクト同士の比較の方法

今日、JavaScriptを少し書いていたのですが、そこで気づいたことを一つ。
配列同士の比較では、単にオブジェクト同士を比較しても正確な値を得ることができません。
(参照同士の比較を行っているようです。)

例えばこんな感じ。
var a = [1,2,3];
var b = [1,2,3];
document.writeln(a == b); //false

調べてみたところ、JavaScriptでは配列等のオブジェクト同士の比較をする機能は実装されていないようです。(Javaで言うところのequalsメソッド)
追記:文字列や数値型の配列であれば'' + a == bのように文字列に変換してから比較することもできます。

というわけで、比較用のメソッドを書いてみました。
Object.prototype.equals = function(obj){
    if (this instanceof String || typeof this == "boolean" || ! this){
        return (this == obj);
    } else if (this instanceof Number){
        if (!isFinite(this))
            return !isFinite(obj);
        return (this == obj);
    } else if (typeof this == "function"){
        return (this.toString() == obj.toString());
    } else if (this instanceof Array){
        if (this.length !== obj.length)
            return false;
        for(var i=0;i<this.length;i++){
            if (this[i] == null){
                return (obj[i] == null);
            }
            if (! this[i].equals(obj[i])){
                return false;
            }
        }
        return true;
    } else {
        for(var o in this){
            if (this[o] == null){
                return (obj[o] == null);
            }
            if (! this[o].equals(obj[o])){
                return false;
            }
        }
        return true;
    }
}



var a = [1,2,3];
var b = [1,2,3];
document.writeln(a.equals(b)); //true

初めはArray.prototypeに書いていたのですが、配列の内容が何かわからないので、考えられるすべてのオブジェクトに対応できるように書き直しました。

使う機会はあまりないかもしれませんが、このような記述を行わなければいけないということは、一つ覚えておいた方がいいなあと。

#JavaScriptでinstanceofメソッドが使えるということも知りませんでした
   JavaScript    TB(0)    CM(2)    EDIT    ページ↑

JS互換のオブジェクト指向言語 "TypeScript"

最近、"TypeScript"という言語が気になっています。

特徴としては、静的型付け、よりオブジェクト指向な書き方ができる、容易に開発ができるなど。
コードはすべてJavaScriptに変換でき、またJSにより書かれたコードもTypeScriptで動くということです。

まあ細かいことはこちらからどうぞ。

Welcome to TypeScript
http://www.typescriptlang.org/

開発環境は、Visual Studio 2012やWebMatrixにプラグインを追加するだけで用意できます。
http://www.typescriptlang.org/#Download


とりあえず、一年半ほど前に書いた「Select要素をListBoxっぽく使うコード」を元に書いてみました。
以下からどうぞ。
   JavaScript    TB(1)    CM(0)    EDIT    ページ↑

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。