アマチュアは最初に細部にこだわりすぎて、全体が見えない。
プロは早い段階で80%程度の全体像を見せる。
という記事をみて、かたつむりの絵にしてみました。
まだ納期は遠いっとまったりせずに、スタートダッシュ！
かたつむりの殻の外側をまず作る。
http://www.facebook.com/photo.php?fbid=238092406260478&set=a.238092092927176.52818.100001791608400&type=1&theater
システムで問題が発生したら、 バグがどこにあるのか、一刻も早くみつけたいですよね。
そんな時に思い出したい３つのルールです。
あくまでも私なりの考えなので外れていたらゴメンナサイ！
そのルールとは次の３つです。
１．ソースコードは追わない。
２．エラーが発生する環境を手に入れる。
３．時間の公式をつくる。
バグを発見するために、ソースコード、真っ先に追いたくなりますよね。
でもガマン、ガマン。
なぜって、一度ソースコードの深みにはまると なかなか這いあがれないからです。
見ているうちに、別の問題を発見してしまったり、 知らないロジックにぶつかって、えーなんでなんでっと自分がループしてしまったり。
そんな経験ないですか？
だから、問題が発生したら、
ソースコードを追わない。
絶対に深追いしない！
と最初に念じるのです。
するとちょっと冷静になれます。
次にすべき事は、エラーが発生している環境や状態を手に入れることです。
当たり前って思いますか？
これをきちんとやるのは意外と難しいのです。
だからルールとしていつも思い浮かべるようにしています。
厄介なのは、環境を整えたたつもりになってる場合です。
部分的なデータしか入手していなかった。
ソースコードの一部が最新でなかった。
OSが違っていて動作が同じではなかった。
SSL環境で確認できなかった。
あとになって気づくんですよね。つもりだった、ってことに。
だから始めに「ここ重要だよ」っと毎回自分に注意喚起するのです。
ルール１・２がうまいいかない場合こそ、思い出したいルールがこれです。
Ａ：希望的観測（解決までの予想時間）
Ｂ：修正時間
気持ち的には、
Ａ．希望的観測 ＞ Ｂ．修正時間
この式は、希望的観測より修正時間が短くなっています。
つまり、少しでも早く修正して問題を解決したい、という心理を表しています。
でも・・・
トラブル発生時に思い出したいのは、こっち。
Ａ．希望的観測 ＜ Ｂ．修正時間
修正時間はかなりかかる。それを自分に認めさせる。
半ば開き直りつつ、受け入れる努力をします。
どうあがいたって、理想通り、お客様の期待には応えられないって事です。
そもそも、バグが出た時点で理想からほど遠いわけですが、
問題が明確になっても、これをプログラマーが受け入れるのは
結構きつくて、これが初動の判断を誤らせる原因になることも。
まじめな人ほど、そして、これまでそのシステムを作り上げてきた人ほど
受け入れがたいものです。バグなんてものは。
一番最悪なのは、
失敗は許されない！と強く思うばかりに、
修正するべきだ→修正したい→修正できるだろう。
と変化してしまうことです。
強い抑制から知らず知らずに生まれる「○○だろう」
これは本当に要注意です。
心に変なスキを作らない為にも
Ａ．希望的観測 ＜ Ｂ．修正時間
なのです。
これだけで終わってしまうと先に進まないので、
しっかり現実を受け止めたら、次にこの式をつくります。
Ａ．希望的観測 ＞ Ｂ．修正の代替案
Ａを増やす為に、お客様とご相談します。
Ｂは、無理して修正時間を減らすとろくな結果にならないので、
代替案を検討します。
もっとも簡単なのはサービスをストップさせることです。
メンテナンス中にしてしまう。
機能の一部を通らないようにしてしまう。など。
Ａ＞Ｂがしっかり成立したら、作業に専念します。
そして最終的に、修正を仕上げていきます。
Ａ＞Ｂが成立していると、十分な時間が確保されているわけなので、
安心して作業に専念できます。これはさらなるミスの上塗りをしない
大切なポイントです。
如何でしたでしょうか？
きっと、それぞれのルールとかコツがあるのでしょうね。
これが私のルール！というのがあれば是非おしえて下さい。
簡単にスライダーを表示することができるjQuery UI Sliderプラグインをご紹介します。
下記のファイルをダウンロードし、参照可能なディレクトリに展開してください。
CSSやJavaScriptは次のように読み込みます。
<link type="text/css" rel="stylesheet" href="../css/theme/smoothness/jquery-ui-1.8.9.custom.css" /> <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.9.custom.min.js"></script>
サンプルでは、入力フィールドと連動するように設定してみました。
<script type="text/javascript">
$(function(){
$('#slider').slider({
value: 50,
range: 'min',
min: 0,
max: 100,
slide: function(event, ui) {
$('#num').val(ui.value);
}
});
$('#num').bind("blur keyup change",function(){
$("#slider").slider("value",$("#num").val());
});
$('#num').val($('#slider').slider('value'));
});
</script>
スライドした時に現在のスライダー値を入力フィールドに反映させるためには、slideオプションでコールバック関数を設定します。(8～10行目)
また、入力フィールドの変更もスライダー値に反映させるために、blur、keyup、changeイベント発生時にスライダー値を設定するようにしています。(12～14行目)
スライダー値の取得／設定をする場合は、valueオプションを使用します。
・slider(‘value’)：現在のスライダー値を取得する(15行目)
・slider(‘value’, 数値 )：スライダー値を設定する(13行目)
HTMLは次のように記述するだけです。
<input type="text" name="slide" value="" id="num" /> <div id="slider"></div>
その他のオプションなどについては、配布サイト(英語サイト)を参考にしてください。
簡単にカレンダーを表示することができるjQuery UI Datepickerプラグインをご紹介します。
下記のファイルをダウンロードし、参照可能なディレクトリに展開してください。
※このファイルを読み込まないと、次のような英語のカレンダーが表示されます。
CSSやJavaScriptは次のように読み込みます。
<link type="text/css" rel="stylesheet" href="../css/theme/smoothness/jquery-ui-1.8.9.custom.css" /> <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript" src="../js/jquery.ui.datepicker-ja.js"></script>
サンプルでは、2011/1/5～2011/9/26のカレンダーを表示するように設定してみました。
<script type="text/javascript">
$(function(){
$('#datepicker1').datepicker({
minDate: new Date(2011, 1 - 1, 5),
maxDate: new Date(2011, 9 - 1, 26)
});
});
</script>
HTMLは次のように記述するだけです。
<p>
<input type="text" name="datepicker1" id="datepicker1"
autocomplete="off" value="#form.datepicker1#" />
</p>
その他のオプションなどについては、配布サイト(英語サイト)を参考にしてください。
グループ分類して選びやすいセレクトボックスを表示することができるjQueryのjQselectableプラグインをご紹介します。
select要素を拡張しているため、Javascriptが使えない環境では普通のセレクトボックスを表示し、使える環境ではすっきりしたデザインを表示してくれます。どのような環境にも対応できるので安心です。
下記のファイルをダウンロードし、参照可能なディレクトリに展開してください。
CSSやJavaScriptは次のように読み込みます。
<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jQselectable.js"></script>
サンプルでは、都道府県のセレクトボックスのために次のような記述をしています。
<script type="text/javascript">
$(function(){
$("#pref").jQselectable({
set: "fadeIn",
setDuration: "fast",
opacity: .9,
callback: function() {
validation.laterCall('#pref');
}
});
});
</script>
jQselectableプラグインでは、指定したselect要素をa+span要素とdiv要素等に置き換えているようです。
そのため、普通のセレクトボックスと違って、選択した時の処理をchangeイベントで設定する事はできません。
選択した時の処理を設定するためには、callback関数を利用します。サンプルでは、exValidationプラグインのlaterCallと併用して入力チェックを行っています。(7～9行目)
exValidationプラグインについては、「jQueryで入力チェックする方法」を参照してください。
次のようにoptgroupタグを利用して地域別にグループ分けするだけで、サンプルのような選びやすいセレクトボックスを表示してくれます。
<select id="pref" name="pref" class="selectable">
<optgroup label="---">
<option value="">---</option>
</optgroup>
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="02">青森県</option>
・
・
</optgroup>
</select>
サンプルでは、誕生日にもjQselectableプラグインを使用しています。
改行したい箇所に「br」classを設定するだけで改行してくれるので便利です。(7行目)
<select id="birthday_year" name="birthday_year"
class="selectable birthday_year">
<option value="1960">1960</option>
<option value="1961">1961</option>
・
・
<option value="1969" class="br">1969</option>
・
・
</select>
ここでご紹介したselectableとは別に、simpleBoxの表示形式もあります。
その他のオプションについても、配布サイトで詳しく解説されているので、参考にしてください。
簡単に入力チェックを行うことできるjQueryのexValidationプラグインをご紹介します。
exValidationプラグインを利用すると、エラー内容がわかりやすく表示され、エラー項目に自動的にスクロールもしてくれる機能もあるので、入力しやすいフォームを作ることができます。
プラグインで用意されている基本的なバリデーションルールだけでなく、独自に追加したルールを利用することも可能で、幅広く活用できます。
下記のファイルをダウンロードし、参照可能なディレクトリに展開してください。
CSSやJavaScriptは次のように読み込みます。
<link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/exvalidation.js" charset="utf-8"></script> <script type="text/javascript" src="js/exchecker-ja.js" charset="utf-8"></script>
文字コードがutf-8以外のページの場合は、文字化けを防ぐために「charaset」を指定する必要があります。
今回は使用していませんが、スクロールをスムーズにしたい場合はjQuery Easing Plugin(jquery.easing.js)も読み込むといいようです。
「err」classのスタイルを設定すると、エラー項目のスタイルを自分で好きなように変更する事ができます。
サンプルでは、入力項目の背景色を変えてみました。
.err {
background: #CC0A0C;
}
.err input {
background: #CC0A0C;
}
exChecker-ja.jsで基本のバリデーションルールが記述されています。
ルールのclassをフォーム要素に設定するか、rulesプロパティを指定する事でルールを設定できます。
サンプルでは、次のようにrulesプロパティを記述しています。
<script type="text/javascript">
$(function(){
var validation = $("form")
.exValidation({
rules: {
name: "chkrequired",
kana: "chkrequired chkkatakana",
email: "chkrequired chkemail chkhankaku chkgroup domain",
pass: "chkrequired chkmin6 chkmax12",
repass: "chkrequired chkretype-pass",
radio: "chkradio",
checkbox: "chkcheckbox",
birthday: "chkgroup date",
datepicker1: "date",
pref: "chkselect",
message: "chkmax140"
}
});
});
</script>
複数の項目をまとめてチェックする場合は、spanタグなどで囲んで、spanタグに指定したidに対してルールを設定します。同時に「chkgroup」classの設定も必要になります。
サンプルでは、rulesプロパティでid=”email”の要素に対して「chkgroup」classを設定しています。（「３．ルールの設定」のソース8行目を参考にして下さい。）
<span id="email"> <input type="text" id="email1" name="email1" value="#form.email1#" /> @ <input type="text" id="email2" name="email2" value="#form.email2#" /> </span>
ラジオボタン、チェックボックスは、必須項目としてのチェックしかできないので、「chkrequired」classは必要ありません。
「chkgroup」classを指定しなくても、spanタグなどで囲んだidにルールを設定するだけで、まとめてチェックしてくれます。
サンプルでは、rulesプロパティでid=”radio”の要素に対して「chkradio」、classid=”checkbox”の要素に対して「chkcheckbox」classを設定しています。（「３．ルールの設定」のソース11，12行目を参考にして下さい。）
<!-- ラジオボタン --> <span id="radio"> <input type="radio" id="male" name="sex" value="male" /><label for="male">男性</label> <input type="radio" id="female" name="sex" value="female" /><label for="female">女性</label> </span> <!-- チェックボックス --> <p id="checkbox"> <input type="checkbox" id="f1" name="fav" value="f1"><label for="f1">books</label> <input type="checkbox" id="f2" name="fav" value="f2"><label for="f2">music</label> <input type="checkbox" id="f3" name="fav" value="f3"><label for="f3">game</label> <input type="checkbox" id="f4" name="fav" value="f4"><label for="f4">study</label> <input type="checkbox" id="f5" name="fav" value="f5"><label for="f5">fishing</label> </p>
サンプルで指定している「date」と「domein」は、あらかじめ用意されているルールではありません。
exValidationプラグインでは、独自のルールを追加する事もできます。
ルールの追加には、２通りの方法があります。
(function($) {
$.exValidationRules = $.extend($.exValidationRules, {
・
・
( exChecker-ja.jsで用意されているルール )
・
・
date: [ // 日付チェック追加
'正しい日付を入力してください',
function(txt, t) {
// チェック日付編集
var chk_date, sYear, sMonth, sDay;
if ( $(t).hasClass('chkgroup') ) { // グループの場合
var date_group = $(t).find('select,input');
sYear = date_group.first().val() - 0;
// Javascriptは、0-11で表現
sMonth = date_group.eq(1).val() - 1;
sDay = date_group.last().val() - 0;
if ( sYear == "" && sMonth == "" && sDay == "" )
return true;
chk_date = sYear+'/'+sMonth+'/'+sDay;
} else { // グループでない場合
if ( txt == "" ) return true;
sYear = txt.split("/")[0] - 0;
// Javascriptは、0-11で表現
sMonth = txt.split("/")[1] - 1;
sDay = txt.split("/")[2] - 0;
chk_date = txt;
}
// YYYY/MM/DD形式チェック
// (年は数字4桁,月は01～12,日は01～31)
if(!chk_date.match(/^([0-9]{4})\/([0-9]|0[0-9]|1[012])\/([1-9]|0[1-9]|[12][0-9]|3[01])$/))
{ return false; }
//日付の妥当性チェック
var oDate = new Date(sYear, sMonth, sDay);
if (oDate.getFullYear() == sYear &&
oDate.getMonth() == sMonth &&
oDate.getDate() == sDay)
{ return true; }
else
{ return false; }
}
]
});
})(jQuery);
<script type="text/javascript">
(function($) {
$.extend($.exValidationRules, {
domain : [ // ドメインチェック
'携帯電話のメールアドレスは入力できません',
function(txt,t) { // チェック関数
var cfc = new formcheck();// cfcのインスタンスを作成
cfc.setSyncMode();// cfcの呼び出しモードを同期で設定
// CFC関数呼び出し
return cfc.checkDomain($("#email2").val());
}
]
});
})(jQuery);
</script>
サーバー側のプログラムを呼び出す場合は、同期モードで呼び出すようにします。
非同期モードで呼び出すと、他にエラーがない場合は、サーバーでチェックしている間にフォーム送信されてしまって、サーバーからの結果が返せなくなってしまうからです。いろいろな技を駆使すれば非同期でも実現できるのかもしれませんが、今回は同期モードを採用しました。
上のコードでは、8行目で同期モードの設定、10行目でサーバー側プログラムの呼び出しをしています。
サンプルでは、サーバー側のプログラムとして、ColdFusionのCFC関数を呼び出しています。
CFC関数を呼び出すためには、ColdFusionで次のようにcfcajaxproxyタグを記述します。
cfc属性には、呼び出すCFCファイルへのパスをドット区切り形式で指定します。
これだけで、JavaScriptからCFC関数を呼び出す事ができるようになります。
今回は、同じフォルダ内にあるformcheck.cfcファイル内の関数を呼び出すようにしています。
<!--- CFCメソッドの呼び出し ---> <cfajaxproxy cfc="formcheck">
CFC関数は、次のように記述しています。
「access=”remote”」の指定をしておかないと、関数を呼び出す事ができません。あとは、JavaScriptに返す値の形式を「json」形式にしている以外は、普通の関数と変わりません。
ここでは、ドメインを受け取って、エラーなら「false」、正常なら「true」を返す関数を作成しています。
<cffunction name="checkDomain" output="false" returntype="boolean"
access="remote" returnFormat="json">
<cfargument name="check_domain">
<cfset mobile_domain = "docomo.ne.jp,ezweb.ne.jp,"
& "d.vodafone.ne.jp,h.vodafone.ne.jp,t.vodafone.ne.jp,"
& "r.vodafone.ne.jp,c.vodafone.ne.jp,k.vodafone.ne.jp,"
& "n.vodafone.ne.jp,s.vodafone.ne.jp,q.vodafone.ne.jp,"
& "softbank.ne.jp,disney.ne.jp,pdx.ne.jp,wm.pdx.ne.jp,"
& "dj.pdx.ne.jp,di.pdx.ne.jp,dk.pdx.ne.jp,emnet.ne.jp,"
& "i.softbank.jp">
<cfif ListFindNoCase(mobile_domain,check_domain) NEQ 0>
<cfreturn false>
</cfif>
<cfreturn true>
</cffunction>
実行時にインスタンスを指定した上でlaterCallを利用すると、任意のタイミングで指定したフォーム要素の入力チェックを行う事ができます。
サンプルでは、jQselectableプラグインと併用しています。
jQselectableプラグインについては、「jQueryでセレクトボックスのデザインを変更する方法」を参照してください。
<script type="text/javascript">
$(function(){
var validation = $("form").exValidation(・・・);
$("#pref").jQselectable({
set: "fadeIn",
setDuration: "fast",
opacity: .9,
callback: function() {
validation.laterCall('#pref');
}
});
});
</script>
exValidationプラグインでは、ここで紹介した以外にも様々なオプションが用意されています。
配布サイトで詳しく解説されているので、参考にしてくださいね。
HTML5で、お問い合わせフォームなどの入力欄に、うっすらとガイドテキストを表示する方法をご紹介します。
<form action="#" name="f1" method="post" style="border:none;"> 名前<br /> <input name="name" type="text" placeholder="名前を入力してください" size="20" value="" /> <br /><br /> 住所<br /> <input name="address" type="text" placeholder="住所を入力してください。" size="40" value="" /> <br /><br /> メールアドレス<br /> <input name="email" type="text" placeholder="メールアドレスを入力してください。" size="40" value="" /> <br /><br /> コメント<br /> <textarea name="comment" cols="40" rows="10" placeholder="コメントを入力してください"></textarea> <br /><br /> <input type="submit" class="submit" value="送信する" /> </form>
HTML5フォーム新機能の各ブラウザの対応状況がまとめられています。
The Current State of HTML5 Forms
jQueryを使う方法は、jQueryで入力フォームにうっすらテキストを表示する方法をどうぞ。
お問い合わせフォームなどの入力欄に、うっすらとガイドテキストを表示するjQueryのプラグインをご紹介します。
<!--jQueryのjsを読み込みます。 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.formtips.1.2.4.js" type="text/javascript"></script>
このまま貼るだけでOKです。フォームのinputタグとtextareaタグにhelpクラスを設定した場合に動作するようになっています。
<!--うっすらテキストを表示するjsコード。このまま貼るだけでＯＫ -->
<script type="text/javascript">
$(document).ready(function() {
$('form input.help, form textarea.help').formtips({
tippedClass: 'tipped'
});
});
</script>
うっすら表示するテキストの色を指定します。好みの色に変更できます。
<!--テキストの色を指定 -->
<style type="text/css" media="screen">
.tipped {
color: #BBB;
}
</style>
<form action="#" name="f1" method="post" style="border:none;"> 名前<br /> <input name="name" type="text" class="help" title="氏名を入力してください。" size="20" value="" /> <br /><br /> 住所<br /> <input name="address" type="text" class="help" title="住所を入力してください。" size="40" value="" /> <br /><br /> メールアドレス<br /> <input name="email" type="text" class="help" title="メールアドレスを入力してください。" size="40" value="" /> <br /><br /> コメント<br /> <textarea name="comment" cols="40" rows="10" class="help" title="コメントを入力してください。"></textarea> <br /><br /> <input type="submit" class="submit" value="送信する" /> </form>
HTML5を使う方法は、HTML5で入力フォームにうっすらテキストを表示する方法をどうぞ。
ColdFusionでfacebook テストユーザーを削除するコード。
<a href="http://digital-moon.net/wp/?p=29">自分が登録したテストユーザーＩＤ、アクセストークンの取得方法はこちら。</a> <!--- １．設定 ---> <!--- 削除するテストユーザーＩＤ を設定します。---> <cfset test_user_id = "＊＊＊＊＊＊＊＊" > <!--- ユーザーまたはアプリのアクセストークンを設定します。---> <cfset accessToken= "＊＊＊＊＊＊＊＊" > <!--- ２．テストユーザーを削除する。 ---> <cfhttp url="https://graph.facebook.com/#test_user_id#?access_token=#accessToken#" method="DELETE" result="res" /> <!--- 結果 ---> <cfdump var="#DeserializeJSON(res.Filecontent)#">
facebookアプリ開発用にapiでテストユーザーを作る事ができます。
http://developers.facebook.com/docs/test_users/
こちらにapiの利用方法が書かれています。
実際にColdFusionで書くと以下の通りになります。
<!--- １．アプリ情報を設定（自分のアプリ情報をセット） ---> <cfset app_id = ""><!--- アプリID ---> <cfset app_secret = ""><!--- アプリのシークレットキー---> <!--- ２．アクセストークンを取得 【GET】---> <cfhttp url="https://graph.facebook.com/oauth/access_token?client_id=#app_id#&client_secret=#app_secret#&grant_type=client_credentials" method="get" result="res" /> <cfset accessTokenSt = res.Filecontent> <cfset accessToken = listgetat(accessTokenSt,2,"=")> <!--- ３．テストユーザーを取得【POST】 ---> <cfhttp url="https://graph.facebook.com/#app_id#/accounts/test-users/" method="post" result="newUser"> <cfhttpparam type="formfield" name="access_token" value="#accessToken#"> </cfhttp> <!--- ４．今作成したユーザーを表示 ---> <cfdump var="#DeserializeJSON(newUser.Filecontent)#">
作ったテストユーザーの一覧を見るコードは次の通りです。
<!--- １．アプリ情報を設定 ---> <cfset app_id = ""><!--- アプリID ---> <cfset app_secret = ""><!--- アプリのシークレットキー---> <!--- ２．アクセストークンを取得 【GET】---> <cfhttp url="https://graph.facebook.com/oauth/access_token?client_id=#app_id#&client_secret=#app_secret#&grant_type=client_credentials" method="get" result="res" /> <cfset accessTokenSt = res.Filecontent> <cfset accessToken = listgetat(accessTokenSt,2,"=")> <!--- ３．アプリに設定済みのテストユーザー一覧 ---> <cfhttp url="https://graph.facebook.com/#app_id#/accounts/test-users?access_token=#accessToken#" method="get" result="resultUser" /> <cfdump var="#DeserializeJSON(resultUser.Filecontent)#">