ケータイ対応サイトの作り方〜EZweb HDML編〜

2.基本編1

ここで基本を学んでいただくために、見本を見ながら解説していきましょう。
手前味噌ながら、ここSHUTTERのHDMLトップページです。

画面表示 ソース

※シミュレータ画面のため、実際とは少々異なります。 		<HDML VERSION="3.0" MARKABLE="TRUE" PUBLIC="TRUE" TTL="30">
<DISPLAY name=top title="SHUTTER携帯版">
<CENTER><IMG src="http://cgi.linkclub.or.jp/~kimkim/k/sh_rogok.gif" alt="SHUTTER"><BR>
<BR>
<CENTER><img icon=80>ようこそ<BR>
こちらはkimが運営する個人サイトです。<BR>
<center>････････････<BR>
雑談掲示板<BR>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cgi-bin/sbbs/shutterbbs.cgi" accesskey=1 LABEL="おいで"><img icon=93>SHUTTER BBS</A><br>
ネタ掲示板<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cgi-bin/cbk/cbk.cgi" accesskey=2 LABEL="おいで"><img icon=259>トホホめも</a><BR>
<center>････････････<BR>
携帯電話対応CGI配布中<BR>
★ふりりん★<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/furi/furi_e.shtml" LABEL="読む">解説</a><br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/furi/furi_sample.cgi" accesskey=3 LABEL="見る">サンプル</a><br>
<br>
★CBK★<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cbk/cbk_e.shtml" LABEL="読む">解説</a><br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cbk/cbk_sample.cgi" accesskey=4 LABEL="見る">サンプル</a><br>
<br>
★LineBK★<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/linebk/linebk_e.shtml" LABEL="読む">解説</a><br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/linebk/line_bk_sample.cgi" accesskey=5 LABEL="見る">サンプル</a><br>
<br>
★K-db★<BR>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/kdb/kdb_e.shtml" LABEL="読む">解説</A><BR>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/kdb/k_db_sample.cgi" accesskey=6 LABEL="見る">サンプル</A><BR>
<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cgi/cgi_bbs/" accesskey=7 LABEL="ｻﾎﾟｰﾄ">サポートBBS</A><BR>
※ﾀﾞｳﾝﾛｰﾄﾞはPCからのみとなっております。<BR>
PC URL=http://cgi.linkclub.or.jp/~kimkim/index2.shtml<br>
<center>････････････<BR>
SHUTTER管理人<br>
kim<br>
<A task=go dest="mailto:kimkim@air.linkclub.or.jp" accesskey=8 LABEL="ﾒｰﾙ"><img icon=108>メール</a><br>
<br>
<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/cgi-bin/tubu/">(^_^;</A><BR>
<BR>
<center>(c)2002&nbsp;kim
</DISPLAY></HDML>

いきなりちょっと難しいかもしれませんが、これが理解できたらけっこうデキルようになります。
順に解説していきますので、ゆっくりじっくり読んでくださいね。

　
私はHDMLです。

<HDML VERSION="3.0" MARKABLE="TRUE" PUBLIC="TRUE" TTL="30">

HTMLの<html>タグにあたる部分ですね。
この例ではいろんなオプションがついてますが、TTL以外は必須です。今はこのまま覚えておきましょう。
TTLはキャッシュの時間を指定してます。HDMLではデフォルトのキャッシュ時間は30日なので、とてもじゃないけど実用的ではありません。単位は秒です。ここでは30秒としています。

</HDML>

で閉じます。

　
私はディスプレイカードです。


ってなんやねん？

HDMLには、「カード」という概念があります。

ハイここ重要!!

カードにはいくつか種類があります。
表示内容は全て、カード内に書きます。
というとHTMLの<body>とちゃうの？と思うかもしれませんが、似ているようでもあり、違うものであり........
<body>は<head>部分との区別、表示内容の色などの基本設定を指定するためにありますが、カードはどの種類のカードで表示するのかを指定します。

<DISPLAY name=top title="SHUTTER携帯版">

ここでは<DISPLAY>カードを使っています。
とりあえず基本編では、ディスプレイカードだけを覚えておきましょう。一番よく使う形式です。
name属性はなくてもかまいません（今のところ）。
title属性はおわかりのとおり、ページタイトルです。画面には表示されませんが、お気に入りに保存する名前になります。

</DISPLAY>

で閉じます。

ここまでベースができれば、<DISPLAY>〜</DISPLAY>間に、表示テキストを書き込むことができます。
半角カタカナも自由に使用できます。ただし、機種依存文字には気をつけてくださいね。特にMacの人。
　
改行したいのである。

<BR>

こうすればOK。一番多く使うタグだと思います。
パソコンHTMLの<p>のような、段落タグはありません。
空白行が欲しい場合は、もう一回<BR>しましょう。

　
本文の色を設定したいのである。


できません。

なんですと!?

マジです。HDMLには色を指定するタグがありません。あきらめましょう。
彩りが欲しい場合は、画像とアイコン（絵文字）を使います。
　
リンクさせてください


<A task=go dest="http://cgi.linkclub.or.jp/~kimkim/furi/furi_e.shtml" LABEL="読む">

これでリンクします。

taskという属性は、今はこういうもんだと覚えてください。必須です。
destでリンク先のURLを記述します。

LABELとは何でしょうか？

EZweb以外の人にはわかりづらいかも知れませんが、画面最下部にボタンの説明が出るのですが、このボタンの説明をこのLABELで指定しています。
このリンク行に選択をあわせると、ボタンの説明が、「読む」と変わります。
LABELには、英数字で6文字、日本語で3文字まで指定できます。無理に指定しなくてもかまいません。

</A>

で、閉じます。

ここまでくれば、まぁそこそこできるようになったでしょう？
次回は装飾関係のタグについて学びます。

ぐ〜たらトップに戻る

次のページ

Copyright(c) 2001 kim. All rights reserved. このサイトはInternet Explorer5のみで表示の確認を行っています。

ﾄｯﾌﾟページに戻る