JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2014年01月 / 12月<< 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 31 >>02月

アクセスランキング

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

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

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    ページ↑

プロフィール

JDB Luigi

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

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

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