電網通信あみあみ
これならできちゃう!

【 eリザーブ改造計画 --予約申込ボタンをつける!その2 [中上級] 】

前回に引き続き、eリザーブの予約申し込みボタンの説明を受けるあみですが...

ami
予約ボタンって、割とシンプルというか、もうちょっとかわいくしたいというか。
画像とかつかってボタンにできないかな。
gen
そうだね。
画像などのイメージを使えると、もっとアピールできそうだね。
ami
そうなの!
ショッピングカートなんかでも、結構画像使うとわかりやすくなるし。
ボタンを画像にする方法ってないかな。
gen
それならできるよ。
実はすでにサンプルが存在してるんだ。
ami
え!どこに?
gen
ASJのeリザーブのサイトだよ。
https://www.asj.ne.jp/ereserve/
ここのページの「ご利用可能な業種」に「予約サンプルにはいるリンクがあるでしょ。
そこにある写真が画像ボタンになっているんだ。
サンプル
ami
あ。気がつかなかった
gen
これを基本に、自分のサイト用に変更すれば利用できるよ。
ami
わあ、ありがとう!お友達も喜ぶよ!
gen
ただ、前回の変更の仕方とはちょっと違う方法になるから、混乱しないようにね。
ami
了解でーす。
gen
さて、まずはHTMLソースを見てみよう。
今回は宿泊施設なので、「ホテル・旅館の予約」を参考にするよ。
(関係のないHTMLタグはあらかじめ削除してあります)

<form action="http://ereserve.admiral.ne.jp/reserve/cgi-bin/rsv_reserve.cgi" method="post" target="_blank">
<input type="hidden" name="type" value="1">
<input type="hidden" name="no_login" value="会員登録せずに予約へ">
<input type="image" src="images/pt_hotel.gif">
</form>

※「会員登録の使用」をに設定されている場合、会員登録せずに予約ができることになります。 この点はご注意ください。

ami
これはまた・・・
gen
ちょっと難しいかもしれないけど、分けて解説するからがんばろうね。
まず最初。

<form action="http://ereserve.admiral.ne.jp/reserve/cgi-bin/rsv_reserve.cgi" method="post" target="_blank">

これは、eリザーブの予約画面を呼び出すソースなんだ。
赤文字の部分は、自分のドメイン名を記載してね。
例えばドメイン名が「example.jp」だったら

<form action="http://www.example.jp/reserve/cgi-bin/rsv_reserve.cgi" method="post" target="_blank">

となります。
ami
はー。
gen
次行って良いかな?

<input type="hidden" name="type" value="1">
これは、「ホテル・旅館」を意味します。
ホテル以外の場合は、前回を参考にしてください。

<input type="hidden" name="no_login" value="会員登録せずに予約へ">
これは、ソース内に記載されてるように「会員登録せずに予約へ」を意味します。
なのでこのソースをつける場合は、会員登録されているお客さんの場合でも関係なく予約できてしまうので、会員制を設定している場合は注意しくださいね。

<input type="image" src="images/pt_hotel.gif">
これは、ボタンとなる画像を指定しています。

「pt_hotel.gif」がここでの画像ファイル名です。
ボタンの画像は、自分のサーバーの任意の場所に置いてください。

</form>
最後は、最初にあった<form>タグを閉じるものです。
これも忘れずにつけてください。

ami
いろいろお約束ごとがあるんだねー。
gen
そうなんだ。
約束事は守らないと、ちゃんと動いてくれないんだよね。
ami
これで画像が予約画面へのボタンになるんだね。
gen
そうなんだ。
画像はあらかじめ用意しておくか、または既にある画像でもいいんだよ。
ami
これなら結構応用できそうだね!
次回をお楽しみに!

このページのトップへ▲

あみあみの目次へ