やっとDEKEました、使い易い簡単FW。まだ、β版ですが… 第３回
開発手順にそって、詳細な説明をしていきます。
■ モックHTML(サンプル画面)作成
モックHTMLを作成する場合、「HTMLエディター」を利用します。
っていっても大した機能ではないので、高機能のHTMビルダーを利用している場合は、そちらを利用したほうが良いと思います orz
またWEBデザイナに作成してもらっている場合も、この機能を利用することは無いでしょう。
【HTMLエディターの機能概要】
いたって単純で、エディター内で「＜」を入力し、「CTRL」+「SPACE」キーを押すと補完されるタグの一覧が表示されるだけの機能です。
唯一、便利かな？って思えるのは、補完される内容をテンプレートとして利用者が設定できるってことかなぁ…
【テンプレートの例】
プロジェクト名HTMLTemplate.txt
### ---------------------------------------------------------------
### DOCTYPE 開始
### ---------------------------------------------------------------
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML x.xx Transitional//EN"＞
＜html xmlns="http://www.w3.org/xxxx/xhtml" lang="en" xml:lang="en"＞
＜head＞
＜meta name="GENERATOR" content="XXXXXXX"＞
＜meta http-equiv="Content-Type" content="text/html; charset=Cp943c"＞
＜link rel="stylesheet" href="../theme/XXXXXX.css" type="text/css"＞
＜link rel="stylesheet" href="../theme/XXXXXX.css" type="text/css"＞
＜script language="javascript" type="text/XXXXXXX"＞＜/script＞
＜title＞■＜/title＞
＜/head＞
＜body class="XXXXXXXX"＞
＜form method="POST"＞
＜center＞
＜/center＞
＜/form＞
＜/body＞
＜/html＞
### ---------------------------------------------------------------
### DOCTYPE 終了
### ---------------------------------------------------------------### ---------------------------------------------------------------
### TABLE 開始
### ---------------------------------------------------------------
＜table border="0" cellspacing="1" cellpadding="1"＞
＜tr＞
＜td nowrap class="XXXXX" align="center" width="■"＞
■.
＜/td＞
＜td nowrap width="■"＞
＜input type="text" class="XXXXX" maxlength="■" size="■" value=""＞
＜/td＞
＜/tr＞
＜/table＞
### ---------------------------------------------------------------
### TABLE 終了
### --------------------------------------------------------------- .
.
.
上記のテンプレートを利用した場合、エディターで「＜」と入力し「CTRL」+「SPACE」キーを押すと下記の２行がエディター上で選択可能になります。
1.＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML x.xx Transitional//EN"＞
2.＜table border="0" cellspacing="1" cellpadding="1"＞
上記２行より、1.を選択すると下記のソースがエディターに補完されます。
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML x.xx Transitional//EN"＞
＜html xmlns="http://www.w3.org/xxxx/xhtml" lang="en" xml:lang="en"＞
＜head＞
＜meta name="GENERATOR" content="XXXXXXX"＞
＜meta http-equiv="Content-Type" content="text/html; charset=Cp943c"＞
＜link rel="stylesheet" href="../theme/XXXXXX.css" type="text/css"＞
＜link rel="stylesheet" href="../theme/XXXXXX.css" type="text/css"＞
＜script language="javascript" type="text/XXXXXXX"＞＜/script＞
＜title＞■＜/title＞
＜/head＞
＜body class="XXXXXXXX"＞
＜form method="POST"＞
＜center＞
＜/center＞
＜/form＞
＜/body＞
＜/html＞
全てマニュアルでHTMLを記述するのに比べれば、格段に早くモックHTMLを作成する事が出来ると思います。
また、テンプレートはプロジェクト単にで追加・編集可能であるため、プロジェクト固有の個所は
あらかじめテンプレートに記述しておく事が出来ます。
