アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2008年11月

2008年11月22日

jQueryのプラグイン「jquery.validate.js」を使って、フォームチェックする。さらに一部の項目の表示・非表示も。

成功者になるための必読ブログとは?

お客さん仕事でイベント申し込みのフォームをカスタマイズ。

あるお客さんのサイトで、イベント申し込み用のフォームを使っていたんだけれど、お客さんのお客さん(つまりエンドユーザー)から、

「以前に申し込んだことがあるのに、毎回毎回住所とか入れなきゃいけないのがめんどくちゃい!」

という改善要望がきたらしい。

もともとは

「参加イベント」
「お名前」
「住所」
「電話番号」
「メールアドレス」

といった、フォームの必須項目をCGIの設定ファイルで制御していたんだけど、これだと毎回住所とか入れないと申し込みができない。
確かに、いままで何度もイベントに参加しているような熱心なユーザーは不便だったりする。

かといって、お客さん側のCGIはセキュリティの関係でいじれないので、「既存顧客」か「初めて」を選んでもらって、クライアント側(JavaScript)でフォームの入力項目チェック(バリデーション)をすることに。

さらに、どうせだったら一部の入力項目自体の表示・非表示もできればさらに親切なのでは?
(例えば、新規のユーザーは必須項目を全て表示、既存顧客は必要最低限の「イベント」と「名前」と「電話番号」を必須項目として表示して、他の項目は非表示…みたいに。)
ということで、jQueryのプラグインを使って実装することにしました。
(まぁ、もともとプログラマーじゃないので、ソース的にはあまり美しくないけれど。)

JSカスタマイズの備忘録。

まず、フォームの入力項目をチェックするために、「jquery.js」本体と「jquery.validate.js」をダウンロード。

「jquery.validate.js」は、必須項目にクラス「required」を設定しておくと、未入力状態のときは「未入力だよー」というメッセージがクラス「error」のラベルに表示される仕組み。

ちなみに、表示されるメッセージはデフォルトでは英語なので、日本語化のプラグイン「messages_ja.js」を使って日本語に。

あとは、チェックしたいフォームにid(今回は「form1」)を設定しておいて、html側に

<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>

と記述して完了。

これ…めちゃくちゃラクチン!昔はアラート出したりして対応していたけど、唐突にアラートが出たり、ページ遷移したりしないのでスマートな感じがします。

んで、普通に使う場合はそれだけでいいんだけど、既存か新規のユーザーかで、一部の項目を表示・非表示したいという要望だったので、jQueryの構文

$(対象オブジェクト).show();
$(対象オブジェクト).hide();

を使って、対象オブジェクトの表示・非表示を制御。

具体的には、新たに作ったshowhide.jsで、関数showhide(disp);を定義して、必須項目の部分は、デフォルトの状態(初めてアクセスしたとき)は表示されていて、そこに設定しているクラス「newentry」の表示・非表示を切り替えています。
(dispの値がhideだったら非表示に、それ以外(showまたはnull)だったら表示って感じです。)
今回はフォーム・レイアウト用のテーブルの「tr」にnewentryを指定しているので、「行]をまるっと表示・非表示にしてます。(テーブルを使っていて、htmlが古くさいのはかんべん。)

targetClass=".newentry";//対象となるクラスを変数targetClassに代入

function showHide(disp){
if(disp=="hide") {
$(targetClass).hide();
} else {
$(targetClass).show();
}
}

単純に項目を表示・非表示するだけだったらこれでOKなんだけど、仮に非表示になった場合でも、jQuery.validate.jsの「required」は生きたままで、これだと項目が表示されていないのに必須状態なので送信できないという事態が。(汗)

そこで、jQueryの「addClass」と「removeClass」でクラス「required」を加えたり削除したりして対応。
※ひとつずつ指定するのは煩雑になるので配列「requiredId」を作って、for文で回す。

targetClass=".newentry";//対象となるクラスを変数targetClassに代入

requiredId=new Array();//対象となるidを格納する配列requiredIdを生成
requiredId[0]="#lastname_f";
requiredId[1]="#firstname_f";
requiredId[2]="#zip";
requiredId[3]="#state";
requiredId[4]="#address1";
requiredId[5]="#address2";
requiredId[6]="#address3";
requiredId[7]="#mail";

rqIdMaxNum = requiredId.length;//配列の最大値

function showHide(disp){
if(disp=="hide") {
$(targetClass).hide();
for (i=0; i<=rqIdMaxNum; i++) {
$(requiredId[i]).removeClass("required");
}
} else {
$(targetClass).show();
for (i=0; i<=rqIdMaxNum; i++) {
$(requiredId[i]).addClass("required");
}
}
$.cookie('disp',disp,{expires:365,path:'/'});
}

あとは、毎回「既存顧客」「初めて」を選んでもらうのも申し訳ないので、以前使ったjquery.cookie.jsで、選択した状態を1年間(長!)クッキーに保存するように。
(「$.cookie('disp',disp,{expires:365,path:'/'});」の部分)

※たぶんスクリプトとかjQueryがガッツリわかる人は、もっと汎用的に作れるはず。(汗)

…と、長々と書いたってイマイチ良く分からない(説明がヘタ?)と思うので、サンプルをアップしました。
(ちなみに、サンプルではなにも送信されずに、ただurlにジャンプします。※サンプルにある「講座」は存在しないのであしからず。w)

とりあえず必須項目をブランクのままで送信ボタンを押したり、ページ上部にある「ご利用者の方」「初めての方」を押して確認してください。一度選択すると、次にアクセスしたときはcookieが効いているので表示・非表示の状態が継承されているはずです。

※言っとくけど、htmlはお客さんの昔のデータの流用なので美しくないし(フォームは部分はテーブル)、スクリプトは苦手なので、とりあえず動きゃいいっていうテイで。

独り言。

実は、「jquery.validate.js」には、ある項目にチェックが入っていると(今回であれば「既存」「新規」の選択)動的に表示・非表示をさせたり、チェックできたり出来なかったり(つまり必須・任意)を切り替えることもできる…みたい。

でも、サンプルが英語(汗)&設定が難しい(ボクには)ので、こんな感じにしちゃいました。

関連サイト
 

投稿者 kuro : 14:31 | 固定リンク | コメント (0) | トラックバック(0) | ID:372

ページトップ△

2008年11月18日

最近気づいたこと。今、ED業界(?)が熱い!

成功者になるための必読ブログとは?

最近多く見かける広告。

ヤフーとかgooとかライブドアとか、いろんなポータルサイトのサイドエリアは広告が挿入されています。

一昔前はGIFアニメーションが多かったんだけど、最近はプラグインの普及率が上がってきたので、だいたいフラッシュバナーが多い。

派手な動きや絶妙なプロモーション、興味喚起させるギミックなど、見ているだけでもおもしろかったりします。

...って、こんなことはみんなもご存知の通り。

先月ぐらいからちょっと気になったのは、その広告エリアにある特定のジャンルの広告が頻繁に表示されたことです。

それは...

EDとは「勃起不全」のことを言います。

ズバリ、ED治療薬の広告です。

ご存知じゃない人のために説明すると、EDとは「勃起不全」のことです。
このED、実は先進国において男性の1割を占めるといわれ、歳をとるにともなって増加傾向にあります。また、日本では40~50代の男性の約半数がEDに悩んでいるという報告もある、男性であれば誰でもかかりうる病気です。

先進国に多いことからもわかるように、EDの原因の多くは、ストレスなどの精神的・心因性のものも多く、最近では若年化がすすんでいるそうです。
(日本はまさにストレス社会だから...潜在患者はかなり多そう。汗)

んで、最近ヤフーでよく見かけたのは、バイエル社のEDに関する情報サイトへの誘導バナーで、ちょっと前にはイーライリリー社のED情報サイトの広告もありました。
各社かなり力を入れて「ED治療」の認知度の向上に力を入れているみたいです。

バイエル社の広告

イーライリリー社の広告

ED治療薬といえば...。

ところで、ED治療薬の代名詞といえば、ファイザー社の「バイアグラ」です。

バイアグラは1998年に発売され、それまで日陰者だった(?)EDという"病気"が一気に認知されることになった革命的な製品です。

んで、調べてみるとこの世界(どの世界?)、結構奥が深い。

まず、開発に至る経緯がおもしろい。
もともとバイアグラは狭心症の血圧コントロールの薬として研究されていたけど、その過程で「異常勃起」(なんかすごそう!)という副作用が見つかって、ED治療薬としての開発に切り替えたという代物です。
つまり...いわば「偶然の産物」ってやつです。w

バイアグラ以前のEDの治療には、辛い外科治療という選択肢しかなかったり、医師に診てもらうということが屈辱的だったため、さまざまな理由で治療に踏み出せなかった男性も多くいたそうです。

それが、偶然の産物として生まれたバイアグラによって、今まで限定的だった治療方法の枠を広げ、ED(勃起不全)そのものの治療だけではなく、ED患者が抱えるコンプレックスを解消するという意味でも、革新的な製品として爆発的に普及しました。

実はいろんなED治療薬があるんです。

バイアグラが日本で認可・発売されてから10年。今では、「ED治療薬といったらバイアグラ」...と言われるほどにまで認知されていますが、さらに調べてみるとさまざまな製薬会社から同様のED治療薬が発売されていました。

まず、バイアグラから遅れること6年。2004年にバイエル社の「レビトラ」が認可され、が発売されました。

特筆すべきはその即効性。通常、バイアグラは効果が現れるまでに1時間程度かかるところ、レビトラはなんと最短で15分で効きはじめるというツワモノです。

効果持続時間もバイアグラと同等かそれ以上の5時間で、バイアグラではあまり効果がなかったというED患者にも広く受け入れられることになったそうです。

そして、去年2007年に認可・販売が始まったイーライリリー社の「シアリス」。
この治療薬の特徴は、なんと言ってもその効果持続時間です。
他の薬では考えられない「最長36時間」という持続性から、欧米では「ウィークエンド・ピル」という愛称で親しまれています。

ジェネリック医薬品という選択肢。

バイアグラ、レビトラ、シアリスなどは、日本の厚生省の認可されて販売されている、れっきとした医薬品です。なので、購入の際は必ず医師の診察と処方箋が必要になります。

この医薬品業界、開発に莫大なお金と時間がかかるので、単価が高いのがネックでした。
(まぁ、しっかりと実験、検証して発売されなければならないものなので仕方がないですけど。)

んが、最近テレビCMなどで耳にする「ジェネリック医薬品」というものが、この問題を解消する選択肢として注目されています。
ジェネリック...とは、いわば後発製品のことで、医薬特許が切れた製品や、特許法の制約を受けない海外のメーカーが、純正品と同じ成分を使って製造した医薬品のことを言います。

各メーカーごとにパッケージや商品名は違いますが、通常は混乱を避けるため、「ジェネリック・バイアグラ」「ジェネリック・レビトラ」「ジェネリック・シアリス」など、「ジェネリック・○○(純正品名)」と呼ばれることが多いみたいです。

純正品と違い、開発コストが少なくて済む(既存の製品成分を元に製造される)ので、先発の治療薬よりも40%~80%の値段で販売することができて、エンドユーザー(患者)にも広く受け入れられてきているそうです。

もちろん、含有成分は同じなので、その効果・効能は純正品に引けをとりません。
(モノによっては、服用方法の違いなどから、純正品よりも効きが早い・長いという報告もあります。)

日本での販売・購入はできない?

さきほど書いたとおり、ED治療薬は厚生省の認可を受けた医薬品なので、日本国内で医師免許などを持たない人が「販売」などをした場合、逮捕されちゃいます。

ここで「あれ?」と思った方。かなり鋭いです。

インターネットで調べてみると、いろいろな「ED治療薬のサイト」があることに気づくかもしれません。

んが、実はあれ、「販売」しているんじゃないんです。

個人輸入という選択肢。

ED治療薬の場合、自分自身が使用する分を個人で輸入することは法律でも認められています。そして、インターネットで見かけるサイトは、実は「個人輸入の代行」をしているのです。

高価な治療薬の場合、毎回医師の診断を受けて処方してもらって(購入して)いたら、お財布が寂しくなってしまうかもしれません。
(バイアグラは1錠1500円、レビトラ、シアリスなどは1錠2000円ぐらい!)

そこで、自分自身で必要な薬を海外から直接輸入するわけですが、注文方法の煩雑さや英語でのやりとりなど、障害が多いのも事実。
そこで、「個人輸入の代行」という方法があるのです。

もちろん、医薬品の個人輸入に関しては十分な注意が必要です。
できれば、事前に医師の診断を受けて、まずは処方してもらった薬で試したうえで、信頼のおけるサイトで、輸入代行サービスを利用することが前提です。

テレビCMでもよく耳にしますが、

「服用に当たっては医師、薬剤師の説明を十分に受け、用法用量を守って正しくお使いください。」

 

投稿者 kuro : 20:44 | 固定リンク | コメント (0) | トラックバック(0) | ID:353

ページトップ△

2008年11月11日

夢・目標を実現する!あなたの目標達成リマインダー「アファメール」

成功者になるための必読ブログとは?

目標達成リマインダー「アファメール」

久々のエントリーです。(汗)

そして…ずいぶんと時間がかかってしまいましたが(汗)、

ず~~~~~~~~っと前から言っていた「アファメール」がひっそりと
オープンしました。

目標達成リマインダー「アファメール」

やりたことは山のようにあるんですが、とりあえず最低限の機能を実装しての公開です。

あなた自身の言葉で肯定宣言(アファメーション)をするツール。

自分の夢や目標を管理するために、自分の言葉で肯定宣言(アファメーション)をするツール。

メール送信設定をすることで、自分の指定した時間にあなたの言葉で
その夢や目標を教えてくれる、シンプルな「目標達成リマインダー」です。

まだまだ不具合やら、欲しい機能などはあるかと思いますが、ぜひ登録して
使ってください。

※不具合や要望などがあったら、問い合わせフォームよりどしどし報告してくらはい。

http://www.affirmail.jp/inquiry_after.php

よろぴくメカドック!

 

投稿者 kuro : 18:26 | 固定リンク | コメント (0) | トラックバック(0) | ID:352

ページトップ△