Qualia Blog

使用する場合と致しましては、、

リンクのデザインを保持したままPOSTデータを送信したーい！という時に使っちゃいます。

（ボタンを使用しない）

（例）index.phpへ送信する場合

<form name="form1" method="POST" action="index.php" >
<a href="javascript:document.form1.submit()">Submit</A>
<input type="hidden" name="hogehoge_status" value="1">
</form>

普通にformでかこってあげます。

そして、リンクの<a href =””>のなかにJavaScriptの処理をいれることで

リンクをクリックすると同時にPOSTデータを送ることができます。

テキストボックス

<input type="text" name="name" size="30">

チェックボックス

<input type="checkbox" name="cat" value="アメリカンショートヘア">アメリカンショートヘア
<input type="checkbox" name="cat" value="マンチカン">マンチカン
<input type="checkbox" name="cat" value="ペルシャ">ペルシャ"
<input type="checkbox" name="cat" value="スフィンクス">スフィンクス

ラジオボタン

<input type="radio" name="sex" value="オス">オス
<input type="radio" name="sex" value="メス">メス

セレクト

<select id="occupation" name="occupation">
<option value="" selected="selected">選択してください</option>
<option value="1">猫</option>
<option value="2">犬</option>
<option value="3">ウサギ</option>
<option value="4">ハムスター</option>
<option value="5">ゾウ</option>
<option value="6">その他</option>
</select>

テキストエリア

<textarea rows=”10″ cols=”60″>ここの文字はテキストエリア内に表示されます</textarea>

ヒデゥン

<input type="hidden"name="hid" value="猫隠し">

ボタン

<input type="submit" value="送信">

リセット

 <input type="reset" value="リセット">

HTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。
checkboxとradioの見た目を変更したいという要望がある。

だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。

ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。
（phpなどでサーバ側でチェックされている状態が受け取ることができることが重要）

実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。

ということになります。

もうちょっと具体的には、以下。

1. チェックボックスチェックされた画像、チェックが外れた画像を用意。
2. チェックボックスを消します。display:noneにて。
3. １で用意した画像をLABELタグに配置。(background-image)
4. CSS内で、checkedセレクタにてチェックされた時の画像に切り替えるようにする。

通常、checkboxやradioボタンについては、LABELタグを用います。そのLABELタグに対してデザインされたチェックボックスの画像を用意し、チェックされた時、チェックされないときをCSSのセレクタを利用して定義するのです。そうすることでチェックボックスを疑似的にデザインしたことになります。LABELをクリックしているので、当然、input type=checkboxのチェック状態も変更され、サーバ側での状態取得も可能です。

ここで問題なのは、IE8。IE8には、input[type=checkbox]:checkedというcheckedセレクタがありません。IE9以降対応でよければ問題ないのですが、IE8に対応させるためにはどうすればいいのか。
これはもう力技ということになります。クリックイベントを用意して、checkboxをクリックする処理を追加してあげる必要がありますね。jQueryにて。
ただ、この処理を追加するならば、CSSのcheckedセレクタは不要ですね。ぜんぶこっちで動作するようになりますので。

以下、jQueryのコードです。※jQueryは1.x系ですよ。IE8対応なので。

$(function(){
	$('#labelCheckbox1').mouseup(function(){
		$('#checkbox1').click();
	});
});

本日もホットな案件情報をお届けします。（社員も募集中！）

本日注目したのはSAP案件

SAPとは、サップと読んではいけません。「えすえーぴー」と呼びます。とSAPの資格保有者に言われました。

SAPはドイツの会社が開発した基幹業務システム。どこが押してきたのかよく知りませんが大手IT企業を中心にものすごい勢いで浸透していきました。こういう海外のものを導入する勢いはずっと昔からあったんですが、日本企業にはなじみませんでした。

そこで第2次世界大戦同盟国でもあるドイツが浮上。ドイツのシステムならということで導入されたSAP。これまでのアメリカ製の基幹業務システムではどうも慣れない日本企業だったのがなんとSAPでは（これまでに比べると）抵抗がない。

ということで、SAP絡みの資格制度など成立し、SAPの資格を持っているだけで高単価で仕事ができるなどいわゆるひとつの文化として確立していったという経緯です。大企業の基幹業務向けなので中小企業の方にはまったくもって興味のないところかもしれませんが、SAPの資格は情報処理技術者試験（国家試験）よりも高価なイメージです。（私の個人的な見解です）

というのは私の10年前の知識です。現在の基幹業務ってどうなってるの？もしかしてCOBOL的な扱い？最新の本を検索してみて1年前のこの本。「図解IT担当者のためのSAP ERP入門」

—————————-

○アンケート集計システムの開発（C#.net、PHP）
○webディレクター、デザイナー（HTML知識）
○医療系公益社団法人運用サポート（インフラ運用、ヘルプデスク）
○システム再構築、データ移行（ストアドプロシージャ、Shell、SQL）
○メール配信システムのリニューアル対応開発（Ruby on rails）
○レンタル業向けシステム開発（C#.NET）
○監視サーバーの新規構築（Tivoli Netcool）
○SAP(FI,CO)開発支援（SAP(FI.CO)）

ちょっとした動作確認や実験をしたいとき、テキストを編集して、ブラウザで表示してみて、、という作業になると思います。

パラメータを変更したり、ミスを直したりするのにも若干煩わしさがあったり。

jsbinというサイトでは、直接ブラウザ上でHTMLやJavaScript、CSSを書くことができ、リアルタイムでその実行結果を確認できます。
されに面白いところは、jQueryが使えるところ。
もちろんバージョンもいくつか選べます。

JQuery UIやbootstrap、prototype,YUI,dojoなどなど。あらゆる有名どころはすべて使えます。
もちろん自分で使いたいものを「Add library」にて選ぶだけ。

まずは、使ってみましょう。

http://jsbin.com/

このjsbin、さらに面白いことにこのシステム全体がオープンソース（OSS）で公開されました。
DB（MySQL）+web(apache)を使ったシステムになるようです。

ダウンロードはこちらから。
jsbin -GitHub
(https://github.com/remy/jsbin)