|
「藤原信二の体験談」へお越しいただきましてありがとうございます。このコンテンツは1999年当時、リンコムがColdFusionに取り組み始めたころのものです。現在はColdFusionベースのグループウェア
リンコム ネクストを基点ににFlexやAIRなどの技術を使った、顧客企業の情報共有アプリケーション開発を行っています。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
開発生産性の高いColdFusionはいままで、PerlやASPでWEBの開発をしてきたプログラマーの多くが今後開発言語・ツールとして利用していくでしょう。ColdFusionの大きな特徴は、タグベ ースで（HTMLのように）DB連携、メール連携などのインタラクティブなウェブペ
ージが作れることです。ということは、プログラミング経験のない人たちも、WE Bアプリケーション開発の垣根がとても低くなったということです。プログラマー
向けのCFの解説書はこれからいろいろ出てくるでしょうから、ここでは実体験を 通じて、まったくプログラミングを知らないコンピュータ音痴（藤原）がいかに、
CFを使ってMy First Web Applicationを作ったかを素人の視点でご紹介します。
Chapter1：白状しましょう
Chapter2：ColdFusionの設定
Chapter3：入力フォーム
Chapter4：検索
Chapter5：リンクから全フィールド表示
Chapter6：編集（内容変更）
Chapter7：コピー
Chapter8：メールと連携した受注システム
Chapter9：必須項目の入力チェック
Chapter10：製品の価格の合計を計算する
Chapter11：確認メールを送る
Chapter1：白状しましょう
何を隠そう、いつもえらそうにWEBだー、イントラネットだーと知ったかぶって営業
している藤原は、実はコンピュータのことはシロートなのです。お客様すいません。
こんな私でも、商売柄アメリカのイントラネット事情をWatchしているのですが、97
年の半ばぐらいからやたらとColdFusionというわけのわからない言葉があちこちのIn
tranetForumで交わされ始めたのです。「何じゃこれ？」とメーカのAllaire社からお
試し版をDownLoadしたのが、97年の9月ごろでした。悲しいかなコンピュータの素人は、
DownLoadしたはよいけれど、DBとの連携アプリケーションを作るツールということは分
かりましたが、何から始めてよいのか分からずにホッテおきました。
さて、忙しさにかまけてしばらくサボっていたのですが、今年に入って三菱商事さん
がColdFusionを日本で販売することが分かり、これはそろそろ手をつけなければと、
お試し版の評価を始めました。そう、私じゃないです。技術の河野でした。さっそく
日本語版ColdFusion3.0Jを購入し、解説書片手にいろいろ試し始めたおり、某SIさん
から、某県庁の在籍掲示板システムの開発を依頼され、気がついたときにはColdFusion
での初めての開発が始まっていたのでした。プログラムの知識のある人たちはいいで
すよね。パッケージに付いてきた解説本見ながら「こんなにリッチな関数がたくさん
あるのか〜」とか感動しながら、CFの本質を吸収していくのでした。
そもそもプログラマーたちは、関数とかよく言いますが、私にはいまいちピンときま
せん。関数というと、高校で習った三角関数とか、そういう数学用語のような気がし
て、どうしてプログラムと関係あるのかいまだよく分からないのです。ようやく、最
近プログラムのなかで何かを行なわすための機能だということが分かってきました。
ちょっと余談でした。
ではここで参考のために私のレベルを白状しましょう。ワードやエクセルは、どうに
か人並みに使っています。ウェブ関連はどうかというと、FrontPageのうわべだけ利用
して、LINKcomサイトの更新がやっとできる程度です。難しいことがあると、すぐ周り
に聞いてしまう情けないおやじです。ネットワークのことはほとんど分からず、IISの
設定とかNTとかだめですね〜。
そんな藤原ですが、ColdFusionがまったくプログラムを知らない人間がどれだけ使え
るのかを試してみる必要があると決意し（このへんが社長のえらさですか？）、自社
販売管理アプリケーションの作成へ孤独なTryが始まりました。
まずは、どのようなアプリケーションか前もって
ご確認ください。
Chapter2：ColdFusionの設定
まずはColdFusion3.0Jをインストールします。インストールすると、スタートメニュー
のプログラムにColdFusionのアイコンが入りますので、そこからアドミニストレータを
クリックし管理画面に入ります。“データソース”をクリ
ックして設定画面に入ります。以下次の手順で進めます。
１．．．．データソース名の指定。データソース名はアプリケーション（テンプレート）
の中で使う、そのDBにアクセスするための名称で適当につけます。私の場合はCustomerと
いうデータソース名をつけました。
２．．．．次にODBCドライバーを選択し“追加”を押します。このケースはAccessDBで
すので、MicrosoftAccessライバーを選択しました。ところでここに備わっているColdF
usionのODBCドライバーはリッチですよね。ソースの変更なしに、SQLでもOracleでもグ
レードアップできるのは魅力です。
３．．．．次に表示される画面で、パスを指定してOKです。
データベースファイルのテキストボックスにフルパスを指定するか、参照ボタンを押して
ファイルを指定するだけです。作成ボタンを押して完了です。
次の準備として、ColdFusionのページ（テンプレート）をしまっておくディレクトリをあ
らかじめ"wwwroot"の下に作っておき、IISの指定で実行権限を与えておきます。このケース
では"wwwroot"の下にCFというフォルダーを作っておきました。これから作るアプリはすべ
てここに入れます。
これで準備完了です。
Chapter3：入力フォーム
さて、いよいよ開発プロジェクトの開始です。まず、どのようなアプリケーションにした
いのか考えてみました。必要な機能は次のようなことです。
１．．．．レコードの入力：すでにACCESSデータベースにリンコムの販売情報を入れてい
るので、データベースはすでにあります。このデータベースのWEBページから入力するため
のフォームが必要です。
２．．．．検索：顧客名で検索する機能が必要です。このとき、1レコードのフィールド数
が10以上あるので、検索結果は重要なアイテムのみ表示させようと思いました。
３．．．．詳細表示：より詳しい内容は、顧客名クリックですべてのフィールドを表示さ
せます。
４．．．．編集：レコードの訂正ができる機能が必要です。
５．．．．コピー：同じ顧客がまた購入した場合、住所やTELなど同じ内容を再び入力した
くないので、レコードのコピー編集機能がほしいと思いました。
ということで、まずはColdFusionの分厚い本を開いてみました。この分厚い本は「The Cold
Fusion Web Application Construction Kit」というAmazon.comであらかじめ購入しておい
た本です。プログラムの経験者は、ColdFusion3.0Jに付いてくる、ユーザーガイドや言語リ
ファレンスでどんどん進めるのでしょうが、私のレベルでは具体的な単純な例を載せた解説
本がほしいと思いました。ようは真似をする元があれば何とかなると思ったのです。
ありました。ありました。社員データベースのサンプルのテンプレート（ColdFusionのアプ
リケーションをこう言います）が載っていました。内容は私がやりたいと思っていることを
大体カバーしていることが分かり、なんとかなるとほっとしました。
まずは、入力フォームです。テキストボックスやチェックボックスなどの書き方さえ知らな
かった藤原なので（静的なWEBページしか作ったことがなかった）、HTMLの本を見てみました。
<form action="XXXXXX" method="post">
"XXXXXX"にこの入力ページで記入した内容の送り先のページを指定すれば、レコー
ドがわたされるということ、
顧客名</TD><TD><INPUT TYPE="TEXT" NAME="company">
とかけば、“顧客名”というキャプションの後テキストボックスが表示され、POST後に
company
というパラメータでテキストに入力された内容が渡されるということ、
<INPUT TYPE="SUBMIT" VALUE="追加">
<INPUT TYPE="RESET" VALUE="RESET">
とかけば、ボタンが表示されることが分かりました。
データを渡す先のページを“CUS_INSERT.CFM”ときめて、次のようなHTML
入力ページを作成しました。
入力フォーム
<HTML>
<HEAD>
<TITLE>レコード入力フォーム</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3><FONT COLOR="000099">販売レコード入力</FONT></H3>
<HR>
<FORM ACTION="CUS_INSERT.CFM" METHOD="POST">
<TABLE>
<TR>
<TD>顧客名</TD>
<TD><INPUT TYPE="TEXT"NAME="company"></TD>
</TR>
<TR>
<TD>納入日(例3/3)</TD>
<TD><INPUT TYPE="TEXT"NAME="deliver"></TD>
</TR>
<TR>
<TD>購入金額(+TAX)\</TD>
<TD><INPUT TYPE="TEXT" NAME="SELL"></TD>
</TR>
<TR>
<TD>請求書発行日(例3/3)</TD>
<TD><INPUT TYPE="TEXT" NAME="billdate"></TD>
</TR>
<TR>
<TD>serial NO.</TD>
<TD><INPUT TYPE="TEXT" NAME="serial"></TD>
</TR>
<TR>
<TD>事業所</TD>
<TD><INPUT TYPE="TEXT" NAME="location">
</TD></TR>
<TR>
<TD>部署</TD>
<TD><INPUT TYPE="TEXT" NAME="dept"></TD>
</TR>
<TR>
<TD>担当</TD>
<TD><INPUT TYPE="TEXT" NAME="personel"></TD>
</TR>
<TR>
<TD>tel</TD>
<TD><INPUT TYPE="TEXT" NAME="tel"></TD>
</TR>
<TR>
<TD>fax</TD>
<TD><INPUT TYPE="TEXT" NAME="fax"></TD>
</TR>
<TR>
<TD>email</TD>
<TD><INPUT TYPE="TEXT" NAME="email"></TD>
</TR>
<TR>
<TD>住所</TD>
<TD><INPUT TYPE="TEXT" NAME="address"></TD>
</TR>
<TR><TD>ServerLicence\</TD><TD><INPUT TYPE="TEXT"
NAME="ServerLicence"></TD></TR>
<TR><TD>Source Code Kit\</TD><TD><INPUT TYPE="TEXT"
NAME="SCK"></TD></TR>
<TR><TD>Eliasオプションモジュール\</TD><TD><INPUT
TYPE="TEXT" NAME="option_amount"></TD></TR>
<TR><TD>オプションモジュール名</TD><TD><INPUT
TYPE="TEXT" NAME="option_product"></TD></TR>
<TR><TD>Active Server Component\</TD><TD><INPUT
TYPE="TEXT" NAME="asc_amount"></TD></TR>
<TR><TD>ASC名</TD><TD><INPUT TYPE="TEXT"
NAME="asc_product"></TD></TR>
<TR><TD>開発\</TD><TD><INPUT TYPE="TEXT"
NAME="dev"></TD></TR>
<TR><TD>コンサルティング\</TD><TD><INPUT
TYPE="TEXT" NAME="consulting"></TD></TR>
<TR><TD>サービス\</TD><TD><INPUT TYPE="TEXT"
NAME="service"></TD></TR>
<TR><TD>サービス内容</TD><TD><INPUT TYPE="TEXT"
NAME="Servicename"></TD></TR>
<TR><TD>SUPPORT\</TD><TD><INPUT TYPE="TEXT"
NAME="SUPPORT"></TD></TR>
<TR><TD>サポート期限(例99/3/3)</TD><TD><INPUT
TYPE="TEXT" NAME="SUPPORTEND"></TD></TR>
<TR><TD>仕入れ金額￥</TD><TD><INPUT TYPE="TEXT"
NAME="purchase"></TD></TR>
<TR><TD>仕入れ内容</TD><TD><INPUT TYPE="TEXT"
NAME="purchaseproduct"></TD></TR>
<TR><TD>請求書</TD><TD><INPUT TYPE="TEXT"
NAME="bill"></TD></TR>
<TR><TD>伝票</TD><TD><INPUT TYPE="TEXT"
NAME="denpyou"></TD></TR>
<TR><TD>支払日(例3/3)</TD><TD><INPUT TYPE="TEXT"
NAME="paydate"></TD></TR>
<TR><TD>支払予定日(例3/3)</TD><TD><INPUT
TYPE="TEXT" NAME="payplan"></TD></TR>
</TABLE>
<P>
<INPUT TYPE="SUBMIT" VALUE="追加">
<INPUT TYPE="RESET" VALUE="RESET">
</CENTER>
</BODY>
</HTML>
このように、入力フォームのHTMLページから入力されたデータは、CUS_INSERT.CFMに渡されるのですがまだこのページはできていません。さっそく作りましょう。このCFMという拡張子こそ、ColdFusionのページ（テンプレート）であることを示しています。CFMの拡張子を持ったページは、ColdFusionのアプリケーションサーバーで解釈され、DBとの通信（等）を行います。その後再びWEBページを作成し、表示します。それでは、早速私の作ったCUS.INSERT.CFMを見てみましょう。
CUS.INSERT.CFM
<CFINSERT DATASOURCE="CUSTOMER"
TABLENAME="CUSTOMER">
<HTML>
<HEAD>
<TITLE>CUSTOMER RECORD INSERT</TITLE>
</HEAD>
<BODY>
<font color="990000"><H3>レコードが追加されました</H3></font><br><p>
<a href="http://client1.linkcom.co.jp/LINK_CUS.HTM">トップへ戻る</A>
</BODY>
</HTML>
このページの最初にあるタグ<CFINSERT>がCFMLタグの一例です。ここでは、先ほど登録したデータソース"CUSTOMER"のCUSTOMERというテーブルに、入力ページで入ったデータが挿入されます。入力が正しく完了（<CFINSERT>のタグが正しく処理されれば)すれば、引き続き通常どおりのHTML文を解釈し表示します。もしなんらかのエラーが起こると、エラーメッセージを表示します。このページは、CFという先ほど作ったディレクトリに入れられます。
先ほどの入力フォームから適当に入力してみてください。
Chapter4：検索
次は顧客の名前で検索して、表示させる部分を作りました。顧客名を入力するフォーム:CUS.INPUT.HTMは、先ほど作成したレコード入力フォームCUS.SET.HTMの応用です。ただし、今回は入力データは一つだけです。CUS.INPUT.HTMを見る。
CUS.INPUT.HTM
<html>
<head>cus_result
<title>顧客検索</title>
</head>
<body>
<center>
<h3><font color="000099">顧客の名前の一部を入力してください</font></h3><hr><p><p>
<form action ="cus_result.cfm" method="post">
顧客:<INPUT TYPE="text" NAME="CUS_NAME"><BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="検索">
</FORM>
</center>
</BODY>
</HTML>
ここではCUS.RESULT.CFMというColdFusionテンプレートへCUS_NAMEというパラメータがテキストで入力されたデータといっしょに渡されます。出は早速CUS.RESULT.CFMを見てみましょう。
CUS.RESULT.CFM
<
CFQUERY
DATASOURCE="CUSTOMER"
NAME="CUSTOMER"
>
select company, deliver,sell,id ,denpyou,paydate,payplan from customer
WHERE COMPANY LIKE '%#CUS_NAME#%'
order by deliver
</CFQUERY>
<HTML>
<HEAD>
<TITLE>customer_list</TITLE>
</HEAD>
<BODY>
<center>
<h2><font color="000099">顧客リスト</font></h2>
<table border=5>
<tr>
<td>顧客</td>
<td>納入日</td>
<td>購入金額￥</td>
<td>伝票</td>
<td>支払日</td>
<td>支払予定</td>
</tr>
<cfoutput query="customer">
<tr>
<td>
<A href="customer_record.cfm?id=#id#">#company#
</A>
</td>
<td>
#deliver#
</td>
<td align="right">#sell#</td>
<td>#denpyou#</td>
<td>#paydate#</td>
<td>#payplan#</td>
<td><A href="cus_EDIT.cfm?id=#id#">編集</A></td>
<td><A href="cus_copy.cfm?id=#id#">コピー</A></td>
</tr>
</cfoutput>
</table>
<center>
<a href="http://client1.linkcom.co.jp/LINK_CUS.HTM">Return To
Top</a>
</center>
</BODY>
</HTML>
さて、このテンプレートではまず<CFQUERY>というタグが登場します。ここではデータソースCustomerのCustomerテーブルをこのタグでくくられたQuery文によって抽出されます。私自身SQL文はぜんぜん知らないのですが、例の解説本に似た例があったので助かりました。
select company, deliver,sell,id ,denpyou,paydate,payplan from
customer
WHERE COMPANY LIKE '%#CUS_NAME#%'
order by deliver
この意味はCUS_NAMEというパラメータで前ページから渡されたデータ（入力された顧客名）を含んだ（前後の%で前にも後ろにも何かの文字があってもよいことになります。）名称をcustomerというテーブルのCompanyというフィールドから抽出し、抽出されたレコードのComany,deliver,sell....というフィールドをあわせて持ってくるという意味だそうです。フィールド名はいちいち書かなくても*でもOKです。
select *
WHERE COMPANY LIKE '%#CUS_NAME#%'
order by deliver
*の場合はすべてのフィールドを持ってきます。
さて、次に<CFOUTPUT>があります。このタグは、<CFOUTPUT>と</CFOUTPUT>で囲まれた中にある#で囲まれたパラメータ（Select文でデータベースから抽出したもの）を表示します。
単純に検索結果だけを表示させるのであれば、たとえばcompanyのみ表示するのであれば次のように書けばOKです。
<cfoutput query="customer">
#customer#
</cfoutput>
あとは、ここの例でもあるようにテーブルなどを使えば揃えて表示されます。
CUS.INPUT.HTMで確かめてみてください。
Chapter5：リンクから全フィールド表示
さて、検索結果の顧客名の所にリンクが張られていますね。ここをクリックすると、販売実績レコードのすべてが表示されます。これは、どのように行っているのでしょうか？
CUS.RESULT.CFMでは、この部分は
<A
href="customer_record.cfm?id=#id#">#company#</a>
というように書かれています。この意味は<a
href=...は通常のハイパーリンクの初ですね。customer_record.cfmは、これから作成する全レコード表示のためのCFMテンプレートです。さて、?id=#id#の意味ですが、検索結果が複数のレコードを抽出した場合、それぞれのレコードに付いているid番号でレコードを識別します。idはAccessDBを作成するときデフォルトで作られますね。もし、詳細をみたい抽出された販売レコードのid番号が7であったら、
URLはcustomer_record.cfm?id=7となり、クリックによってcustomer_record.cfmにid=7という情報が送られます。
さて、それでは、customer.record.cfmを見てみましょう。
CUSTOMER.RECORD.CFM
<cfquery
datasource="customer"
name="customer"
>
select * from customer where id=#id#
</cfquery>
<cfoutput query="customer">
<HTML>
<HEAD>
<TITLE>custermer list</TITLE>
</HEAD>
<BODY>
<font color="000099"><H3>#company#</H3></font><br>納入日
<font color="dd0000">#deliver#</font>
<HR>
<P>
<center>
<table border=4>
<tr>
<td>
購入金額
</td>
<td>
#sell#</td></tr>
<tr><td>
請求書発行日
</td><td>#billdate#</td></tr>
<tr><td>serial</td><td>#serial#</td></tr>
<tr><td>事業所</td><td>#location#</td></tr>
<tr><td>部署</td><td>#dept#</td></tr>
<tr><td>担当</td><td>#personel#</td><tr>
<tr><td>tel</td><td>#tel#</td><tr>
<tr><td>fax</td><td>#fax#</td><tr>
<tr><td>email</td><td>#email#</td><tr>
<tr><td>住所</td><td>#address#</td><tr>
<tr><td>ServerLicence</td><td>#ServerLicence#</td><tr>
<tr><td>Sorce Code Kit</td><td>#SCK#</td><tr>
<tr><td>オプションモジュール￥</td><td>#option_amount#</td><tr>
<tr><td>オプションモジュール名</td><td>#option_product#</td><tr>
<tr><td>ASC￥</td><td>#ASC_amount#</td><tr>
<tr><td>ASC名</td><td>#asc_product#</td><tr>
<tr><td>開発</td><td>#dev#</td><tr>
<tr><td>コンサルティング</td><td>#consulting#</td><tr>
<tr><td>サービス</td><td>#service#</td><tr>
<tr><td>サービス内容</td><td>#servicename#</td><tr>
<tr><td>Support</td><td>#Support#</td><tr>
<tr><td>サポート期限</td><td>#supportend#</td><tr>
<tr><td>仕入れ金額</td><td>#purchase#</td><tr>
<tr><td>仕入れ内容</td><td>#purchaseproduct#</td><tr>
<tr><td>納入日</td><td>#deliver#</td><tr>
<tr><td>請求書</td><td>#bill#</td><tr>
<tr><td>伝票</td><td>#denpyou#</td><tr>
<tr><td>支払日</td><td>#paydate#</td><tr>
<tr><td>支払予定日</td><td>#payplan#</td><tr>
</table>
[<A href="cus_EDIT.cfm?id=#id#">編集
</A>][<a href="http://client1.linkcom.dom/LINK_CUS.HTM">Return To
Top</a>]
</center>
</cfoutput>
</BODY>
</HTML>
このCFMテンプレートは、検索のテンプレートと同じく、<cfquery>のタグを使って次のようにクエリ文を書いています。
<cfquery
datasource="customer"
name="customer"
>
select * from customer where id=#id#
</cfquery>
Where id=の所に、前ページCUS.RESULT.CFMで表示された、詳細をみたいレコードのid番号が入り、全フィールドを抽出します。後はお馴染みの<cfoutput query=customer>と</cfoutput>で囲まれた間にある##で挟まれたパラメータを表示するだけです。
Chapter6：編集
検索結果の表示CUS.RESULT.CFMには、レコードに“編集”のリンクが張ってあります。このリンクからは、すでに入力してあるすべてのフィールドをテキストボックス内に表示し、訂正や削除などが自由にできます。さてどのように作ればよいでしょうか？
まずは、CUS.RESULT.CFMのリンクですが、次のようになっています。
<A href="cus_EDIT.cfm?id=#id#">編集</A>
ここでは基本的には、先ほどの全フィールド表示の場合のリンクと同じ考え方です。ただし、今回はCUS_EDIT.CFMという編集用のテンプレートを指定します。
それではCUS_EDIT.CFMを見てみましょう
CUS_EDIT.CFM
<cfquery
datasource="customer"
name="customer"
>
select * from customer where id=#id#</cfquery>
<cfoutput query="customer">
<HTML>
<HEAD>
<TITLE>CUS_EDIT</TITLE>
</HEAD>
<BODY>
<center>
<H3>レコード編集</H3>
<FORM ACTION="CUS_CHANGE.CFM" METHOD=POST>
<table border=0>
<tr><td>会社名</td>
<td><INPUT TYPE="TEXT"
NAME="COMPANY" VALUE="#trim(company)#"></td></tr>
<tr><td>購入金額</td>
<td><INPUT TYPE="TEXT" NAME="sell"
VALUE="#TRIM(sell)#"></td></tr>
<tr><td>請求書発行日
</td>
<TD><INPUT TYPE="TEXT" NAME="billdate"
VALUE="#TRIM(billdate)#"></td></tr>
<tr><td>serial</td>
<TD><INPUT TYPE="TEXT" NAME="serial"
VALUE="#TRIM(serial)#"></td></tr>
<tr><td>事業所</td>
<TD><INPUT TYPE="TEXT" NAME="location"
VALUE="#TRIM(location)#"></td></tr>
<tr><td>部署</td>
<TD><INPUT TYPE="TEXT" NAME="dept"
VALUE="#TRIM(dept)#"></td></tr>
<tr><td>担当</td>
<TD><INPUT TYPE="TEXT" NAME="personel"
VALUE="#TRIM(personel)#"></td></tr>
<tr><td>tel</td><TD>
<INPUT TYPE="TEXT" NAME="tel"
VALUE="#TRIM(tel)#"></td></tr>
<tr><td>fax</td><TD>
<INPUT TYPE="TEXT" NAME="fax"
VALUE="#TRIM(fax)#"></td></tr>
<tr><td>email</td><TD>
<INPUT TYPE="TEXT" NAME="email"
VALUE="#TRIM(email)#"></td></tr>
<tr><td>住所</td><TD>
<INPUT TYPE="TEXT" NAME="address"
VALUE="#TRIM(address)#"></td></tr>
<tr><td>ServerLicence</td><TD>
<INPUT TYPE="TEXT" NAME="ServerLicence"
VALUE="#TRIM(ServerLicence)#"></td></tr>
<tr><td>Source Code Kit</td><TD>
<INPUT TYPE="TEXT" NAME="SCK"
VALUE="#TRIM(SCK)#"></td></tr>
<tr><td>オプションモジュール￥</td><TD>
<INPUT TYPE="TEXT" NAME="option_amount"
VALUE="#TRIM(option_amount)#"></td></tr>
<tr><td>オプションモジュール名</td><TD>
<INPUT TYPE="TEXT" NAME="option_product"
VALUE="#TRIM(option_product)#"></td></tr>
<tr><td>ASC￥</td><TD>
<INPUT TYPE="TEXT" NAME="ASC_amount"
VALUE="#TRIM(ASC_amount)#"></td></tr>
<tr><td>ASC名</td><TD>
<INPUT TYPE="TEXT" NAME="asc_product"
VALUE="#TRIM(asc_product)#"></td></tr>
<tr><td>開発</td><TD>
<INPUT TYPE="TEXT" NAME="dev"
VALUE="#TRIM(dev)#"></td></tr>
<tr><td>コンサルティング</td><TD>
<INPUT TYPE="TEXT" NAME="consulting"
VALUE="#TRIM(consulting)#"></td></tr>
<tr><td>サービス</td><TD>
<INPUT TYPE="TEXT" NAME="service"
VALUE="#TRIM(service)#"></td></tr>
<tr><td>サービス内容</td><TD>
<INPUT TYPE="TEXT" NAME="servicename"
VALUE="#TRIM(servicename)#"></td></tr>
<tr><td>Support</td><TD>
<INPUT TYPE="TEXT" NAME="Support"
VALUE="#TRIM(Support)#"></td></tr>
<tr><td>サポート期限</td><TD>
<INPUT TYPE="TEXT" NAME="supportend"
VALUE="#TRIM(supportend)#"></td></tr>
<tr><td>仕入れ金額</td><TD>
<INPUT TYPE="TEXT" NAME="purchase"
VALUE="#TRIM(purchase)#"></td></tr>
<tr><td>仕入れ内容</td><td>
<INPUT TYPE="TEXT" NAME="purchaseproduct"
VALUE="#TRIM(purchaseproduct)#"></td></tr>
<tr><td>納入日</td><TD>
<INPUT TYPE="TEXT" NAME="deliver"
VALUE="#TRIM(deliver)#"></td></tr>
<tr><td>請求書</td><TD>
<INPUT TYPE="TEXT" NAME="bill"
VALUE="#TRIM(bill)#"></td></tr>
<tr><td>伝票</td><TD>
<INPUT TYPE="TEXT" NAME="denpyou"
VALUE="#TRIM(denpyou)#"></td></tr>
<tr><td>支払日</td><TD>
<INPUT TYPE="TEXT" NAME="paydate"
VALUE="#TRIM(paydate)#"></td></tr>
<tr><td>支払予定日</td><TD>
<INPUT TYPE="TEXT" NAME="payplan"
VALUE="#TRIM(payplan)#"></td></tr>
</table>
<INPUT TYPE="SUBMIT" VALUE="更新"><INPUT
TYPE="RESET" VALUE="復元">
</center>
</cfoutput>
</BODY>
</HTML>
ここでは基本的には、全フィールド表示と同じですが、テキストボックスに表示するため、
<INPUT TYPE="TEXT" NAME="bill"
VALUE="#TRIM(company)#"></td></tr>
のように、INPUTタグが用いられています。ここでVALUE="company"でも良いのですが、TRIMを使うと文字の前後にある不要なスペースをトリミングしてくれます。更新後のページは<form>タグ内でCUS.CHANGE.CFMを指定しています。
CUS_CHANGE.CFM
<CFUPDATE DATASOURCE="CUSTOMER"
TABLENAME="CUSTOMER">
<CFOUTPUT>
<HTML>
<HEAD>
<TITLE>CUS_CHANGE</TITLE>
</HEAD>
<BODY>
<H3><FONT COLOR="000099">#COMPANY#(#DELIVER#) 更新されました</FONT></H3>
<HR>
<A HREF="../LINK_CUS.HTM">RETURN TO TOP</A>
</CFOUTPUT>
</BODY>
</HTML>
ここでは新しいタグ<CFUPDATE>が使われています。このタグによってDBのレコードが更新されます。
Chapter7：コピー
検索結果の表示CUS.RESULT.CFMには、レコードに“コピー”のリンクも張ってあります。このリンクからは、すでに入力してあるすべてのフィールドをテキストボックス内に表示し、それをもとに新しいレコードを追加する機能です。テキストボックスに表示された内容は削除、編集が可能です。
まずは、CUS.RESULT.CFMのリンクですが、次のようになっています。
<A href="cus_copy.cfm?id=#id#">編集</A>
実はCUS_COPY.CFMの内容は、編集でCUS_EDIT.CFMとほとんど同じです。つまり、レコードのフィールドをテキストボックスに表示しているだけですからそうですよね。違うのは、POST先のCFMファイルだけです。編集の場合は、<CFUPDATE>のタグを使うためにCUS_CHANGE.CFMというテンプレートを用意しましたが、今回やりたいのは、テキストボックスに入っている内容で新しいレコードを作ることです。
これどこかで作りましたよね．．．．そうです。最初に作った初期レコードの登録用のテンプレートで良いわけです。つまり、Formタグ次のようになります。
<form action="cus_insert.cfm" method=post>
Chapter8：メールと連携した受注システム
これまでご紹介してきたシステムは、社内に限定したいわばイントラネット的なアプリケーションでした。次に調子に乗ってトライしたのがWebからのELIAS受注システムです。これは、もうインターネット上でお客様とインタラクティブに受注をとるアプリケーションですのでちょっと素人の私には、大丈夫かなという心配はありましたが、とりあえず、クレジットカードとかの連携は考えずに、「とりあえず、FAXで受注していたものをWEBに置き換えてみよう。」という軽い気持ちでやってみました。このシステムで行いたいことは．．．
１．WebからELIAS関連製品の注文をチェックボックス、テキスト入力のコンビネーションで行う。その際、顧客名など必須入力パラメータを指定し記入漏れのないようにする
２．発注ボタンを押す前に確認ページで、入力の内容確認と合計金額を表示する。
３．確認ボタンを押す事で、自分（私）と発注者に発注内容の記載されたメールを自動配信する。
以上を念頭において作成を開始しました。まずは、
どのようなシステムかちょっと触ってみてください。（これはサンプルですので、実際のオーダーとはなりませんのでご自由にいじってください。本物のオーダーシステムもPurchaseのセクションにありますので気が向いたらそのうちオーダーしてください（笑））
入力フォームは今まで出てきた通常のHTMLの入力フォームと何ら変わりはありません。唯一新しい事は、チェックボックスを使った事ぐらいです。実はこれも私にとっては初体験でしたが．．．
では、まず入力フォームを見てください。
eli_orderform1.htm
<html>
<head>
<title>ELIAS Order Form</title>
<meta http-equiv="Content-Type" content="text/html;
charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<meta name="Microsoft Theme" content="waves 000"><meta
name="Microsoft Border" content="none"></head>
<body bgcolor="#FFFFFF" text="#000000" link="#3300CC"
vlink="#999999" alink="#FF9900"><!--mstheme--><font
face="ＭＳ Ｐゴシック">
<p><font color="#0000A0" size="+1"><b>ELIAS Order
Form （On-Line）</b></font></p>
<form action="eli_order_a1.cfm" method="post">
<p>会社名<br>
<input type="text" name="company" size="40">
<br>
部署名<br>
<input type="text" name="div" size="40"><br>
ご担当者氏名<br>
<input type="text" name="nam" size="20"> <br>
E-mail<br>
<input type="text" name="abc" size="30"> <br>
住所<br>
<input type="text" name="address" size="60">
<br>
TEL<br>
<input type="text" name="tel" size="15"> <br>
FAX<br>
<input type="text" name="fax" size="15"> </p>
<p>購入する製品サービス</p>
<p><input type="checkbox" name="server"
value="198000">OOOサーバーライセンス<br>
<input type="checkbox" name="support"
value="70000">OOO年間サポート<br>
<input type="checkbox" name="CD" value="30000">OOO
CD-ROM＋Manual<br>
<input type="checkbox" name="sck" value="298000">OOO
ソースコードキット </p>
<p>その他の製品サービス1<br>
<input type="text" name="others1" size="30"><br>金額￥<input
type="text" name="amount1" size="10" value="0">数字（または0）を入力してください<br>
<p>その他の製品サービス2<br>
<input type="text" name="others2" size="30"><br>金額￥<input
type="text" name="amount2" size="10" value="0">数字（または0）を入力してください<br>
<p>その他の製品サービス3<br>
<input type="text" name="others3" size="30"><br>金額￥<input
type="text" name="amount3" size="10" value="0">数字（または0）を入力してください<br>
<p>コメント<br>
<textarea name="comment" rows="5"
cols="40"></textarea> <br>
</p>
<p><input type="submit" value="入力確認"> <input
type="reset" value="やり直し"> </p>
</form>
<!--mstheme--></font></body>
</html>
Chapter9：必須項目の入力チェック
入力フォームから送られたデータは"eli_order_a1.cfm"に送られるように指定してありますね。
<form action="eli_order_a1.cfm"
method="post">
それでは、eli_order_a1.cfmはどのようになっているかまず見てください。
eli_order_a1.cfm
<HTML>
<HEAD>
<TITLE>CUSTOMER RECORD INSERT</TITLE>
</HEAD>
<BODY>
<cfif #company# is "" >
会社名は必須入力項目です。
<cfelseif #nam# is "">
担当者名は必須項目です。
<cfelseif #address# is "">
住所は必須項目です。
<cfelseif #tel# is "">
TELは必須項目です
<cfelse>
<font color="990000"><H3>次のように入力されています。内容をご確認ください。</H3></font><br>
<blockquote>
<CFOUTPUT>
<table border="0">
<tr><td><b>会社名
</b></td><td>#company#</td></tr>
<tr><td><b>部署名
</b></td><td>#div#</td></tr>
<tr><td><b>担当者氏名
</b></td><td>#nam#</td></tr>
<tr><td><b>E-mail
</b></td><td>#abc#</td></tr>
<tr><td><b>住所
</b></td><td>#address#</td></tr>
<tr><td><b>TEL
</b></td><td>#tel#</td></tr>
<tr><td><b>FAX
</b></td><td>#fax#</td></tr>
</table>
</cfoutput>
<form action="eli_order_b1.cfm" method="post">
<p><hR>
<b>購入する製品・サービス</B><br><p>
<CFset total=0>
<table border=0>
<cfif (parameterexists(server))><tr><td>◆OOO
サーバーライセンス</td>
<td align="right">￥198000</td></tr>
<CFset total=evaluate(total+198000)>
</cfif>
<cfif (parameterexists(support))><tr><td>◆OOO
年間サポート</td>
<td align="right">￥70000</td></tr>
<CFset total=evaluate(total+70000)>
</cfif>
<cfif (parameterexists(cd))><tr><td>◆OOO CD-ROM+Manual</td>
<td align="right">￥30000</td></tr>
<CFset total=evaluate(total+30000)>
</cfif>
<cfif (parameterexists(sck))><tr><td>◆OOO ソースコードキット</td>
<td align="right">￥298000</td></tr>
<CFset total=evaluate(total+298000)>
</cfif>
<cfif #amount1# is not "0"><cfoutput><tr><td>◆#others1#</td>
<td align="right">￥#amount1#</td></tr>
</cfoutput>
<CFset total=evaluate(total+amount1)>
</cfif>
<cfif #amount2# is not "0"><cfoutput><tr><td>◆#others2#</td>
<td align="right">￥#amount2#</td></tr>
</cfoutput>
<CFset total=evaluate(total+amount2)>
</cfif>
<cfif #amount3# is not "0"><cfoutput><tr><td>◆#others3#</td>
<td align="right">￥#amount3#</td></tr>
</cfoutput>
<CFset total=evaluate(total+amount3)>
</cfif>
<tr><td><b><font color="ffffff">◆</font>TOTAL<td
align="right"></b><b><cfoutput>￥#total#</cfoutput></b></td></tr>
</table>
<p>
<cfif #comment# is not "">
<cfoutput>
コメント：#comment#<br>
<p></p>
</cfoutput>
</cfif>
<cfset time=now()>
内容を訂正する場合はブラウザーの戻りボタンを押してください。<br><p>
"order"で送信されます<br>
<INPUT TYPE="SUBMIT" name="confirm" VALUE="order">
<INPUT TYPE="SUBMIT" name="confirm" VALUE="cancel">
<cfoutput>
<input type="hidden" name="company" value="#company#">
<input type="hidden" name="div" value="#div#">
<input type="hidden" name="nam" value="#nam#">
<input type="hidden" name="abc" value="#abc#">
<input type="hidden" name="address" value="#address#">
<input type="hidden" name="tel" value="#tel#">
<input type="hidden" name="fax" value="#fax#">
<cfif (parameterexists(server))>
<input type="hidden" name="server" value="YES">
</cfif>
<cfif (parameterexists(support))>
<input type="hidden" name="support" value="YES">
</cfif>
<cfif (parameterexists(cd))>
<input type="hidden" name="cd" value="YES">
</cfif>
<cfif (parameterexists(sck))>
<input type="hidden" name="sck" value="YES">
</cfif>
<cfif #amount1# is not "0">
<input type="hidden" name="others1" value="#others1#">
<input type="hidden" name="amount1" value="#amount1#">
</cfif>
<cfif #amount2# is not "0">
<input type="hidden" name="others2" value="#others2#">
<input type="hidden" name="amount2" value="#amount2#">
</cfif>
<cfif #amount3# is not "0">
<input type="hidden" name="others3" value="#others3#">
<input type="hidden" name="amount3" value="#amount3#">
</cfif>
<input type="hidden" name="total" value="#total#">
<cfif #comment# is not "">
<input type="hidden" name="comment" value="#comment#">
</cfif>
</cfoutput>
</form>
</blockquote>
</cfif>
</BODY>
</HTML>
まずここで新しく出てきたタグに<cfif>というものがあります。
<cfif #company# is "" >
会社名は必須入力項目です。
<cfelseif #nam# is "">
担当者名は必須項目です。
<cfelseif #address# is "">
住所は必須項目です。
<cfelseif #tel# is "">
TELは必須項目です
<cfelse>
このタグは、条件文を作成するのに利用します。この部分では<cfif>のタグを使って、必須入力項目のチェックを行っています。<cfif
#company# is "" >では、もしcompanyが""つまりブランクであるなら、「会社名は必須入力項目です。」と表示されます。もし、ここがOKつまりブランクでなくても次に<cfelseif
#nam# is "">でnamにチェックが入ります。このように、<cfelseif>はいくつでも続けられます。最後に全部パスしたところで<cfelse>で次の処理に進みます。
Chapter10：製品の価格の合計を計算する
次の処理は、入力された値の表示と計算です。
<CFset total=0>
<table border=0>
<cfif (parameterexists(server))><tr><td>◆OOO
サーバーライセンス</td>
<td align="right">￥198000</td></tr>
<CFset total=evaluate(total+198000)>
</cfif>
新しいタグがまたでました。<cfset total=0>です。Cfsetはパラメータの値を設定するタグです。ここではTotalというパラメータを０に設定しました。次に<cfif>で、もしserverというパラメータが存在したら、<tr><td>◆OOO
サーバーライセンス</td><td align="right">￥198000</td></tr>と、表示させて、再び<CFset
total=evaluate(total+198000)>で、新しいtotalの値を、今までのtotalの値に198000を足したものにセットされます。これが、数回繰り返され最終的なtotalの値が算出されます。
ところで、次のページにcompanyやfaxや、others1などの最初のページで入力した値を送るには次のようなタグ<input
type="hidden" name="company" value="#company#">を用います。これは、通常のHTMLのFormタグの一種ですが便利です。ページには一切表示されません。
Chapter11：確認メールを送る
データの送られる次のページは"eli_order_b1.cfm"です。ここでは、オーダーの完了のメッセージページの表示とメール処理を行います。
eli_order_b1.cfm
<HTML>
<HEAD>
<TITLE>Order record DBinput</TITLE>
</HEAD>
<BODY>
<cfif #confirm# is "order">
オーダーが完了しました。ありがとうございました。確認の電話またはメールをさし上げます。<br><p>
<a href="http://www.linkcom.co.jp/purchase_elias.htm">元の画面に戻る</a>
<cfmail from="cf@linkcom.co.jp" to="fujiwasn@linkcom.co.jp"
subject="Elias order">
ELIASのオーダー
会社名 ： #company#
部署名 ： #div#
担当者氏名 ： #nam#
E-mail ： #abc#
住所 ： #address#
TEL ： #tel#
FAX ： #fax#
<cfif (parameterexists (server))>
サーバー ：#server#
</cfif>
<cfif (parameterexists (support))>
サポート ：#support#
</cfif>
<cfif (parameterexists (cd))>
CD＋manual ：#cd#
</cfif>
<cfif (parameterexists (sck))>
ソースコードキット ：#sck#
</cfif>
<cfif (parameterexists (amount1))>
#others1# ： #amount1#
</cfif>
<cfif (parameterexists (amount2))>
#others2# ： #amount2#
</cfif>
<cfif (parameterexists (amount3))>
#others3# ： #amount3#
</cfif>
<cfif (parameterexists (comment))>
#comment#
</cfif>
</cfmail>
<cfmail from="cf@linkcom.co.jp"
to="#abc#" subject="Elias order">
#nam#様、ELIASのオーダーを次のように承りました。ありがとうございました。
会社名 ： #company#
部署名 ： #div#
担当者氏名 ： #nam#
E-mail ： #abc#
住所 ： #address#
TEL ： #tel#
FAX ： #fax#
ご購入される製品・サービス
<cfif (parameterexists (server))>サーバー ：￥198000</cfif>
<cfif (parameterexists (support))>サポート ：￥70000</cfif>
<cfif (parameterexists (cd))>CD＋manual ：￥30000</cfif>
<cfif (parameterexists (sck))>SCK ： \298000</cfif>
<cfif (parameterexists (amount1))>#others1# ： ￥#amount1#</cfif>
<cfif (parameterexists (amount2))>#others2# ： ￥#amount2#</cfif>
<cfif (parameterexists (amount3))>#others3# ： ￥#amount3#</cfif>
Total ： #total#円
<cfif (parameterexists (comment))>コメント ： #comment#</cfif>
</cfmail>
</cfif>
<cfif #confirm# is "cancel">
オーダーはキャンセルされました。<br><p>
<a href="http://www.linkcom.co.jp/cf/eli_order1.htm">元の画面に戻る</a>
</cfif>
</BODY>
</HTML>
ここで便利なのは<cfmail>タグです。このタグを使うにはまずアドミニストレータの画面で
メールサーバーの設定を行います。ここの例ではまず自分（藤原）と発注者に別々のメールを出しています。下の抜粋は発注者に対するメールです。
<cfmail from="cf@linkcom.co.jp" to="#abc#"
subject="Elias order">
#nam#様、ELIASのオーダーを次のように承りました。ありがとうございました。
会社名 ： #company#
部署名 ： #div#
担当者氏名 ： #nam#
E-mail ： #abc#
住所 ： #address#
TEL ： #tel#
FAX ： #fax#
ご購入される製品・サービス
<cfif (parameterexists (server))>サーバー ：￥198000</cfif>
<cfif (parameterexists (support))>サポート ：￥70000</cfif>
<cfif (parameterexists (cd))>CD＋manual ：￥30000</cfif>
<cfif (parameterexists (sck))>SCK ： \298000</cfif>
<cfif (parameterexists (amount1))>#others1# ： ￥#amount1#</cfif>
<cfif (parameterexists (amount2))>#others2# ： ￥#amount2#</cfif>
<cfif (parameterexists (amount3))>#others3# ： ￥#amount3#</cfif>
Total ： #total#円
<cfif (parameterexists (comment))>コメント ： #comment#</cfif>
</cfmail>
まずcfmailの後に続けて、from、to、subjectを指定します。#abc#は入力してもらったe-mailアドレスです。後はこのれいのように<cfmail>と</cfmail>で囲まれたものをメール内に表示するだけです。
以上で藤原のMy first CFを終わります。これほど簡単にインタラクティブなWEBアプリケーションが作れるツールは他にはありません。ぜひ皆さんもColdFusoinの世界を味わってください。LINKcomでは、ColdFusionのトレーニングを始め様々なColdFusion上で動作するアプリケーションやサポートビジネスを今後展開していきます。どうぞご期待ください。
→ リンコム通信 「藤原信二の今日の一言」連載 もお楽しみください。
|
