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 kakki-
on 2012年06月18日 in HTML,IE6,WEB


先日、ページの作成をしていて確認してもらったら、レイアウトが崩れているというご指摘を受けました。

テーブル表記の代わりに使っているdt,ddなのですが、
こちらの環境では普通に表示されていました。
ん、もしや、と思ってIE testerにてIE6の表示を確認。
すると、ddの部分の頭の部分がそろっていない!!

こんな感じ。

これを回避するには、
/zoom:1;
これをdd部分に入れるだけで大丈夫。
まだまだ根強いシェアがあるIE6。油断は禁物です。

Posted by アイ・エス・シーシステム事業部
on 2012年03月20日 in HTML,HTML5/CSS3,WEB,技術


HTML5 ・・・なんだかんだ言っても、まだまだ実際のところHTML5でコーディングなんていうプロジェクトはそうそう無い。

そんな状態なので、一度かじったHTML5もいつの間にか・・・はてな?ハテナ?はて?おやまぁ?状態なのである。

まだまだ身についていない。

だがしかし!「HTML5できますか?」って案件が明日来たらどうする?
「出来ません!」なんてことなら仕事なんて一生来ない。

「出来ます!」って即答でなくても・・・
せめて
「で、で、で、出来ますよ。いえいえ。もちろんwww」と笑ってごまかす程度には知っていたい。

・・・というわけで、このサイトが役立ちます!

HTML5についてのおさらい – W3G Blog Studies.

なんともわかりやすい!
こんなドキュメントを書きたいものですなぁ~

オススメです。

元記事:

フリーフードファイター兼SE活動日記 » HTML5 おさらい!.

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年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年08月25日 in HTML,HTML5/CSS3,WEB,技術


ホームページ作る人のネタ帳さんより
CSS3で作成されたサンプル・チュートリアルを紹介している
CSS3で作るあんなものやこんなもの
という記事を見つけましたのでご紹介します。

中には画像のようなものを描いてしまうものや宇宙~まであるんですが
こちらがわかりやすかったのでご紹介します。

The Shapes of CSS
こちらでは丸や三角から始まって台形~ハートまでいろいろなソースをサンプル提示してくださっています。

こんなソースでハートが書けちゃうんですね・・・

[html]
<div id="heart"></div>
<style contenteditable>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
[/html]

—- ここからサンプルです。 — CSS3対応ブラウザにて御覧ください。



—- ここまで —- (表示されない方、ごめんなさい)
[大丈夫だったブラウザ]
Google Chrome では確認しました。
[ダメだったブラウザ]
InternetExplorer8 では四角に見えることを確認しました。

Posted by アイ・エス・シーシステム事業部
on 2011年08月17日 in HTML,HTML5/CSS3,WEB,デザイン


PHP SPOT開発日誌より
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル

こちらの記事で紹介されているドロップダウンメニューがすごいなーと思いご紹介します。

こちら(Creating CSS3 Drop sliding list Menu #6)が紹介先のページなんですが
CSS3だけで実装されている?
というのがソースコードを見るとよくわかります。

一見するとなんちゃらJSとか書いてあるんですが、それはメニューの中のリンクであってJavaScript自体は一切使っていないです。

デモサイトも見てみてください。

これは導入する際にjQueryなのかprototype.jsなのかを気にしないでいいですね。

Posted by アイ・エス・シーシステム事業部
on 2011年08月10日 in HTML,WEB,技術,雑記


こんな記事があったのでびっくりしました。
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル|PHP SPOT 開発日誌

ここで紹介されている本をめくっているような動きはFLASHではなくHTML5で作られているそうです。

上記のリンクから実際に見てみて下さい。

DEMOを元にサンプルを作ってみましたが日本語もOK(UTF-8)でページの追加は<section>から</section>までをコピペすればどんどん増やせます。
↓サンプル
サンプル

参考URL:
Create a page flip effect with HTML5 canvas ※本家英語サイト
※上記のデモページ

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


iframeタグにて他のページのコンテンツを取り込む際に
内容に応じてiframeの高さを自動調節してスクロールバーを出したくない時、ありますよね。
そんなときに重宝しそうなjQueryプラグイン「Auto iFrame Height」を見つけました。

こんなソースでiFrameに埋め込んだ中のコンテンツの高さを取得し自動で高さ調節してくれます。

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>autoheight</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoheight.js"></script>
</head>
<body>
IFRAME内のページの大きさに自動で高さ調整するサンプル<br />
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="1" scrolling="no" src="heightpage.html"></iframe>
</body>
</html>
[/html]

サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。

上記はJavaScriptで20段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・

iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか

中身がYahoo!だと高さ調節してくれないサンプル

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


Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

ページトップへ戻る

Get Adobe Flash player