Posted by いいづか
on 2012年06月28日 in HTML,JavaScript/Ajax,PHP,WEB


OWASPとは・・・
正式名称は「The Open Web Application Security Project」で
信頼できるアプリケーションの開発・購入・運用の推進を目的として
設立されたオープンなコミュニティです。

OWASP Japan
https://www.owasp.org/index.php/Japan

今回(6/27)で2回目のJapan Chapter Meetingとなります。
Chapter MeetingはWebセキュリティに関心がある方なら、人種、国籍、
性別、年齢に関係なく参加できるカジュアルな勉強会です。
(今回は約200名が参加したようです)

以下、今回の内容と公演資料です。 (さらに…)

Posted by アイ・エス・シーシステム事業部
on 2011年12月05日 in JavaScript/Ajax,jQuery,WEB,技術


おっと、こんなのを探していたところでした・・・

階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」:phpspot開発日誌.

しかし、記事中のArborescence.jsのリンク先が現在
「The plugins site is currently unavailable.」
となっていて見ることが出来ません。

後日あらためて・・・

Posted by アイ・エス・シーシステム事業部
on 2011年11月25日 in HTML,JavaScript/Ajax,jQuery,技術


いやぁーーーー
すばらしいものを提供されている方がいらっしゃってとても助かっています。

これです。
↓↓↓
どんなフォームにも使えるjQueryのフォームバリデーション exValidation

エラー項目にはバルーン表示でエラー通知してくれるというナウい(死語)もの。

このexValidationを利用して開発中のフォームに当てはめてみたんですが・・・
あ、この条件下では・・・ここは必須で・・・で、こうするとこの項目自体見えなくなって・・・・っていう感じになってしまい
なにをどーして良いのやら・・・という風になってしまいました。

そこで、いろいろ試しに試して出来たのがこのサンプルです。

exValidationサンプル

まず、御覧頂いて・・・っと

このフォームは下記のような動作をするものです。

1.まずはユーザーに区分を入力してもらう
2.入力してもらった区分によって異なる項目のフォームを表示する
3.項目の中にはある項目が特定の値のときだけ必須になるというものも存在する

このような場合にどうしたか・・・ということをご紹介します。

まず、サンプルの構造は下記のようになっています。
———————————————————————-
[切り替え] これ自体が必須項目でもあります。

[項目群1] 切り替えが「20歳未満」の時に表示されるフォーム
[項目群2] 切り替えが「20歳以上」の時に表示されるフォーム
———————————————————————-
[html]



<select id="sel" name="sel" onchange="changeDiv(this)">
<option value="">–</option>
<option value="1">20歳未満のお客様</option>
<option value="2">20歳以上のお客様</option>
</select>

<!– 20歳未満のお客様用項目 –>
<div id="scene1">



</div>
<!– 20歳以上のお客様用項目 –>
<div id="scene2">



</div>
[/html]

で、JavaScriptはこんな感じ

[html]
// 初期にフォームの分岐を非表示にする
$(document).ready(function() {
$("div[id*=scene]").css("display", "none");
});
// Validationの初期設定
$(function(){
var validation = $("form")
.exValidation({
rules: {
sel: "chkrequired",
name: "chkrequired",
name_: "laterCall",



},
stepValidation: true,
errTipCloseBtn: false,
errHoverHide: true,
scrollToErr: true
});
// イベントリスナー
$(‘input.laterCall’).click(function() {
validation.laterCall(‘#’ + this.id.replace(‘_’,”));
});
$(‘input[name=sake]’).change(function() {
changeSakeItem();
validation.laterCall(‘#sake_kind’);
});
// 一度動作し初期化する
changeDiv(document.getElementById(‘sel’));
});
// お酒を飲むかどうかで必須項目チェンジ
function changeSakeItem() {
clearErrors();
// alert($(‘input[name=sake]:checked’).val());
if ($(‘input[name=sake]:checked’).val() != "1") {
$(‘#sake_kind’).attr(‘class’, ”);
} else {
$(‘#sake_kind’).attr(‘class’, ‘chkrequired’);
}
}
// エラー削除
function clearErrors() {
// 表示されているエラーをフェイドアウト
$("div[id*=err_]").fadeOut();
}

// ユーザ区分変更
function changeDiv(elem) {
clearErrors();
var accNo = 0;
if (elem != null && elem.value =="1") {
accNo = 1;
} else if (elem == null || elem.value.length == 0) {
// N/A
accNo = 0;
} else {
accNo = 2;
}
$("div[id*=scene]").css("display", "none");
if (accNo > 0) {
$("div#scene"+accNo).css("display", "block");
}
// まずは必須項目チェック全外し
$(‘#name’).removeClass(‘chkrequired’);
$(‘#kana’).removeClass(‘chkrequired’);
$(‘#email’).removeClass(‘chkrequired’);
$(‘#birthday’).removeClass(‘chkrequired’);

// 20歳未満か20歳以上で必須項目条件切り替える
switch (accNo) {
case 1:
$(‘#name’).addClass(‘chkrequired’);
$(‘#kana’).addClass(‘chkrequired’);
$(‘#email’).addClass(‘chkrequired’);
break;
case 2:
$(‘#birthday’).addClass(‘chkrequired’);
break;
}
clearErrors();
}
[/html]

こんな感じの実装で出来ました。

要するに「class=chkrequired」っていうのを外せば必須項目にならないし
なんでもない項目に「class=chkrequired」を乗っけてあげればその時点から必須項目になります。

サンプルで「20歳以上」にしてから「飲む」を選択すると「お飲みになる種類」が必須になる・・・という感じです。

こちらからダウンロード出来るようにしておきましたのでご自由にご利用ください。
コメントいただけるとありがたいです。

Posted by アイ・エス・シーシステム事業部
on 2011年10月13日 in JavaScript/Ajax,WEB,WEBサービス,便利ツール,技術


JavaScriptのチェックツールです。
JSLint,The JavaScript Code Quality Tool.

全体的に英語なのでなにを言っているかわからないところだらけですが・・・

カッコ閉じ忘れとか
セミコロン抜けとか
なんだか動かないって言う時に役立ちそうです。

Posted by アイ・エス・シーシステム事業部
on 2011年10月12日 in Ext JS,JavaScript/Ajax,プログラミング,書籍


Ext JS 4で開発する際に日本語文献がなかなかなくて困っていました。

こんな本があったんですね!


これ良いです!!!

Posted by アイ・エス・シーシステム事業部
on 2011年09月18日 in JavaScript/Ajax,jQuery,WEB,技術


西畑一馬のjQuery Mobileデザイン入門より

下記の記事がすごーく参考になるのでご紹介します。

サンプルで学ぶjQuery Mobileまとめ(前編)
サンプルで学ぶjQuery Mobileまとめ(中編)

見るだけでjQuery Mobileでスマホサイト作りたくなります。
サンプル作りながら読み終わる頃には1サイトできそうな勢いです!

Posted by アイ・エス・シーシステム事業部
on 2011年09月17日 in JavaScript/Ajax,jQuery,WEB,技術


・jQueryをやってみようと思っている方
・いまさら聞けないけどAjax習得したい方
にオススメの記事がありました。

40分で覚える!jQuery速習講座

6ページもあるけど、どんどん読み進められますのでやる気モードでどうぞ!

まずはHTML変更するところからそれっぽく「アコーディオン」まで。

あー そーゆーことぉ!

ってなることうけあいです!

Posted by アイ・エス・シーシステム事業部
on 2011年09月16日 in HTML,HTML5/CSS3,JavaScript/Ajax,技術,雑記


これってHTML5で出来てる!? すげーなー
ってサイト多くなって来ましたね!

でも、Flashで作ったほうが良かったり・・・そもそもHTML5では出来なかったり、逆にFlashでは出来なかったり・・・っていうのをまとめてくださっているサイトがありましたのでご紹介します。

Flashだとここまでできる! HTML5とFlashの機能比較

こちらの記事でも書いてありますが、HTML5っていっても結局ブラウザ依存なわけで・・・
今のところ、HTML5だと・・・っていうより「現状このブラウザだと・・・」っていう感じになってしまっています。

ブラウザ間のHTML5対応が充実してこないと比較出来るものではない・・・かもしれません。

しかし、この記事内で紹介されている↓↓このサイトすごいな・・・
http://www.audiotool.com/

Posted by アイ・エス・シーシステム事業部
on 2011年09月02日 in JavaScript/Ajax,WEB,技術


過去記事に掲載していたサンプルソースに不具合があったので修正しました。

該当記事は「Twitter発言をjQueryとJSONPで取得して表示してみました」です。

記事内容の表示ソース及びサンプルページの挙動で複数のツイートを表示する場合に
同内容の発言が数件重複されて出力されていることがわかりました。

ちょっとしたコードのミスでした。
ごめんなさい。

現在のソースは正常でございます。

今回は記事+発言時刻を出したサンプルを追加で作りましたのでごらんください!
(ソースは勝手に使ってつかあさいな!)

Posted by アイ・エス・シーシステム事業部
on 2011年08月24日 in JavaScript/Ajax,jQuery,WEB,技術


先日 EXT JSすげーみたいなことを書きました。
参考記事こちら

そんな感じのjQuery版があったのでご紹介します。

本家のデモをはこちらです。

本家のページはこちらです。ダウンロードも出来ます。

ダウンロードして加工してみました・・・(加工と言っても名称変更してみただけ)
ちょいと日本語にしてみました・・・バージョン

jquery-desktop

ページトップへ戻る

Get Adobe Flash player