KDDI au: CGIの利用

EZfactoryサイト内検索

「壁紙をダウンロードするサイト」を例にCGIを使ったサイトを構築する方法をご紹介します。

■壁紙王国

画面の遷移図は以下のようになります。

CGIを使う部分

■カラー/モノクロ画像表示切替CGI

使用している機種によりカラーかモノクロかを判定し、表示するファイルを自動的に選択し表示するCGIです。

■カラー/モノクロ別ダウンロード画面表示切替CGI

使用している機種により、カラーかモノクロかを判定し、ダウンロードする画像を表示した上でダウンロードするための画面を表示するCGIです。

■画像のダウンロードCGI

画像をダウンロードするCGIです。

このCGIについての詳細は、技術情報の「ダウンロードCGI」についてを参照してください。

ここからはCGIに関するHDML記述についてご紹介します。

■DISPLAYカードで「カラー/モノクロ画像表示切替CGI」を呼ぶ (top.hdml)

01	<HDML VERSION="3.0" MARKABLE="TRUE">
02	<HDML VERSION="3.0" MARKABLE="TRUE">
03	<DISPLAY NAME="top" TITLE="壁紙王国へようこそ">
04	<CENTER><IMG SRC="img.CGI?fn=top"><BR>
05	<CENTER>壁紙王国へようこそ<BR>
06	<A TASK="GOSUB" DEST="password.hdml" LABEL="会員"><IMG ICON=1>会員ﾍﾟｰｼﾞ</A>
07	<A TASK="GOSUB" DEST="sample.hdml" LABEL="ｻﾝﾌﾟﾙ"><IMG ICON=48>ｻﾝﾌﾟﾙ画像</A>
08	<A TASK="GOSUB" DEST="entry.hdml" LABEL="登録"><IMG ICON=151>会員登録</A>
09	</DISPLAY>
10	</HDML>

このデッキ (top.hdml) は、『壁紙王国』の先頭ページで「カラー/モノクロ画像表示切替CGI」を呼んで端末の種類にそった画像を表示します。

04	<IMG SRC="img.CGI?fn=top">

ここでIMG SRC="img.CGI?fn=top"とすることで、CGIを呼んでいます。

06	<A TASK="GOSUB" DEST="password.hdml" LABEL="会員"><IMG ICON=1>会員ﾍﾟｰｼﾞ</A>
07	<A TASK="GOSUB" DEST="sample.hdml" LABEL="ｻﾝﾌﾟﾙ"><IMG ICON=48>ｻﾝﾌﾟﾙ画像</A>
08	<A TASK="GOSUB" DEST="entry.hdml" LABEL="登録"><IMG ICON=151>会員登録</A>

正解したのだけれど、途中でやめたい・・そんな時にこの終了キーを押されるとTASKで示したように"RETURN"としてGOSUBで呼び出されたアクティビティ<quizカード>に戻ります。

■ENTRY・NODISPLAYカードでパスワードチェックをする (password.hdml member.hdml)

ここでは、ENTRY・NODISPLAYのカードを利用して、パスワードチェックをするアクティビティを使用します。

パスワードチェックに関する詳細は、HDMLの「応用機能の使用」の「ENTRYカード、NODISPLAYカードを利用する」を参照してください。

■CHOICEカードを使ってダウンロードする画像の表示をする (member.hdml)

01	<HDML VERSION=3.0 MARKABLE=TRUE>
02	<DISPLAY NAME="xxxxx">
03	<ACTION TYPE="ACCEPT" TASK="GO" LABEL="リトライ" DEST="#clear">
04	パスワードﾞが間違っています
05	</DISPLAY>
06	<NODISPLAY NAME="clear">
07	<ACTION TYPE="ACCEPT" TASK="RETURN" CLEAR="TRUE">
08	</NODISPLAY>
09	<CHOICE NAME="kabegami">
10	<ACTION TYPE="SOFT1" TASK="GO" DEST="top.hdml" LABEL="戻る">
11	<CENTER><IMG ICON=1>会員ﾍﾟｰｼﾞ<BR>
12	カッコイイものからカワイイ壁紙まで、取りそろえてますのでダウンロードしてね<BR>
13	<CE TASK="GOSUB" DEST="display.CGI?file=f1&title=gazou1" LABEL="選択">画像1
14	<CE TASK="GOSUB" DEST="display.CGI?file=f2&title=gazou2" LABEL="選択">画像2
15	<CE TASK="GOSUB" DEST="display.CGI?file=f3&title=gazou3" LABEL="選択">画像3
16	</CHOICE>
17	</HDML>

このデッキ (member.hdml) はパスワードチェックの結果により処理を分岐するデッキで、正しいパスワード「kabegami」を入力した場合は、ダウンロードする画像を選択する画面を表示します

13	<CE TASK="GOSUB" DEST="display.CGI?file=f1&title=gazou1" LABEL="選択">画像1
14	<CE TASK="GOSUB" DEST="display.CGI?file=f2&title=gazou2" LABEL="選択">画像2
15	<CE TASK="GOSUB" DEST="display.CGI?file=f3&title=gazou3" LABEL="選択">画像3

DEST="display.cgi?file=xx&titlexxxxxx"とすることで、CGIを呼んでダウンロード画像表示画面を表示するカードに移行します。

display.cgiについての詳細は、「カラー/モノクロ別ダウンロード画面CGIについて」を参照してください。