au by KDDI EZfactory

ヘルプ | サイトマップ

EZfactoryサイト内検索

XHTML HDML マルチメディア・コンテンツ 技術情報 ダウンロード
HDML
HDMLについて

コンテンツの制作

HDMLの基本

デザインと装飾

応用機能の使用

CGIの利用


制作例


概要 制作 制作例

CHOICEカードを使ってサンプル画像の表示をする (sample.hdml)


01
<HDML VERSION="3.0" MARKABLE="TRUE">
02
<CHOICE NAME="sample" KEY="fname">
03
<ACTION TYPE="SOFT1" TASK="RETURN" LABEL="戻る">
04
<CENTER><IMG ICON=48>サンプル画像<BR>
05
こちらはサンプルですので壁紙をダウンロードしたい方は、会員登録をして下さい。
06
<BR>
07
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f1s" VARS="filename=$fname&name=1" LABEL="選択">画像1
08
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f2s" VARS="filename=$fname&name=2" LABEL="選択">画像2
09
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f3s" VARS="filename=$fname&name=3" LABEL="選択">画像3
10
<CE TASK="GO" DEST="entry.hdml" LABEL="登録">会員登録
11
</CHOICE>
12
<DISPLAY NAME="sdisp">
13
<ACTION TYPE="ACCEPT" TASK="#sample" LABEL="戻る">
14
<CENTER><IMG ICON=48>サンプル画像<BR>
15
<CENTER>画像$name<BR>
16
<CENTER><IMG SRC="img.cgi?fn=$filename"><BR>
17
</DISPLAY>
18
</HDML>

このデッキ (sample.hdml) はサンプル画像を表示するデッキで、選択した画像を「カラー/モノクロ画像表示切替CGI」を呼んで端末の種類にそったものを表示します。

07
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f1s" VARS="filename=$fname&name=1" LABEL="選択">画像1
08
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f2s" VARS="filename=$fname&name=2" LABEL="選択">画像2
09
<CE TASK="GOSUB" DEST="#sdisp" VALUE="f3s" VARS="filename=$fname&name=3" LABEL="選択">画像3

VALUE="xxx"で、表示するファイル名 (fname) をセットし、VARS="filename=$fname&name=x"次のカードに変数としてfnameと名称 (name=x) を渡しています。変数を複数渡す場合は「&」でつなぎます。

15
<CENTER>画像$name<BR>

$nameは、CHOICEカードでセットしたファイルの名称 (name) の変数で、$をつけることで使用することが出来ます。

16
<CENTER><IMG SRC="img.cgi?fn=$filename"><BR>

ここでIMG SRC="img.cgi?fn=$filename"とすることで、CHOICEカードで代入したファイル名をCGIに渡しています。

DISPLAYカードでphone to/mail to機能を使う (entry.hdml)


ここでは、DISPLAYのカードで、phone to機能とmail to機能を使用します。

phone to/mail to機能に関する詳細は、技術情報の「Phone to機能/mail to機能」を参照してください。

HDMLについて > Phone to機能/mail to機能

カラー/モノクロ 画像表示切替CGIについて


同じURLでカラー用とモノクロ用のコンテンツを作りたい時に利用できます。
端末のヘッダー情報を見て、拡張子が「.png」「.bmp」いずれを表示させるべきを判断します。

画面フロー

図: カラー/モノクロ 画像表示切替CGIについて

プログラムをカスタマイズする際の注意事項

まず、あなたが契約しているプロバイダで、HDMLのファイルを扱えること、オリジナルCGIが使えることが前提です。
プログラム及びプログラムに関するファイルをサーバにアップロードした後に、動作させるためのパーミッションの設定が必要です。 (実行パーミッションをONにする)
FTPの際、プログラムファイルはすべてASCII (アスキー、テキスト形式) モードで転送してください。
各プログラムの1行目は #!/usr/local/bin/perl となっています。契約しているプロバイダのサーバにあわせて変更してください。
プログラムで記述しているディレクトリの指定などは、サーバの設定に合わせて変更してください。
その他、プログラムのカスタマイズ方法、サーバにアップロードする際の注意事項は、ダウンロードファイルの「README.txt」に書いてありますので、 そちらを参照してください。

ダウンロードファイルに含まれるもの
.htaccess
README.txt
cgi-bin/
img.cgi
test.bmp
test.png

ダウンロードファイルはLHAで圧縮しています。ダウンロード後は、各種圧縮解凍ソフトをご利用ください。
改行コードがEUCになっているものがあります。ファイルを編集する際は、改行コードを変換できるエディターをご使用ください。
カスタマイズをする際は、README.txtをよく読んでからご使用ください。

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

カラー/モノクロ別ダウンロード画面CGIについて


携帯のカラー・モノクロを判別して、モノクロ用 (bmp) かカラー用 (png) の画像をそれぞれの端末機種によって表示し、ダウンロードCGIを呼ぶ画面を表示するCGIです。

画面フロー

図: カラー/モノクロ別ダウンロード画面CGIについて

プログラムをカスタマイズする際の注意事項

まず、あなたが契約しているプロバイダで、HDMLのファイルを扱えること、オリジナルCGIが使えることが前提です。
プログラム及びプログラムに関するファイルをサーバにアップロードした後に、動作させるためのパーミッションの設定が必要です。 (実行パーミッションをONにする)
FTPの際、プログラムファイルはすべてASCII (アスキー、テキスト形式) モードで転送してください。
各プログラムの1行目は #!/usr/local/bin/perl となっています。契約しているプロバイダのサーバにあわせて変更してください。
プログラムで記述しているディレクトリの指定などは、サーバの設定に合わせて変更してください。
このCGIを利用する場合は、download.cgiが必要になります。download.cgiは、CGIスクリプト集の「ダウンロードCGI」にありますのでそちらからダウンロードしてください。
download.cgiと同一のディレクトリーに設置してください。
画像をダウンロードするには、画像データにCRCチェックデータを付加する必要があります。「CRCチェックデータ」については、マルチメディア・コンテンツの「ダウンロードCGI」、技術情報の「ダウンロードCGI」を参照してください。

マルチメディア・コンテンツ > ダウンロードCGI
技術情報 > ダウンロードCGI

ダウンロードファイルに含まれるもの
display.cgi

パラメータfileにファイル名をセットして渡すとダウンロードページが生成されます。
display.cgi?file=ファイル名&title=タイトル
ファイル名は拡張子をはずした名前を指定します。
タイトルは英数字のみ有効です。

今回は、CGIを中心に第1回から第3回までにご紹介した機能を使い本格的なサイトの構築をご紹介をしました。組合せやアイデア次第でより魅力的なサイトの作成が出来ます。
ぜひ、チャレンジしてみて下さい

今回サンプルとして作成したコンテンツは、下記のダウンロードボタンより、HDMLファイル一式をダウンロードすることができます。

コンテンツの制作 > CGIの利用
28KB

概要 制作 制作例

このページの先頭へ



KDDI: ユビキタス・ソリューション・カンパニー
au 電話・インターネット 法人サービス 会社情報
Designing The Future ここから当ウェブサイトの情報についてのメニューです。
免責事項 リンクについて 推奨環境 プライバシーポリシー Copyright © KDDI CORPORATION. All Rights Reserved.