|
|
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
| このページの最終更新日: 2012/05/29
提案日: 2005/08/14 |
||||||||||||||||||||||||||||||||||||||||||||
|
HTMLに求めるもの 構成
今後プログラムのことについてホームページから公開していくことが多くなっていった場合に、話題が増えるたびに頻繁にページを作成したり増えた話題を分かりやすく整理したりしなくてはいけなくなると推測していました。そして実験的に少しのページを作成してどのくらい効率よくページを開発できるのかを見てみました。 するとこのままの開発方法ではページの増加に伴ってかなりの労力がかかることが体感できました。実験での開発方法はMicrosoft Visual Studio .NETのHTMLページを作成する機能を単純に用いる方法で行いました。確かにこの機能を利用すれば直接HTMLコードを書かずに済むためHTMLのことを覚えていなくてもページを作成することが出来ます。しかしページを作成していくと次第に自分のデザインが固まってきて、例えば話題のタイトルの文字列は大きめで太字の文字にするんだとかページの最後には必ず「最終更新日」を記述するんだといったデザインの決まりを作ることで見た目をよくして統一感を出させようと考えました。 この決まりはすべてのページに渡って守っていかなくてはならない決まりであって、ページを開発するときにはいつもこのことを気にしていなくてはならなくなってしまいました。ページを開発するときには決まりをすべて思い出してページを作り終えた後も決まりが全部守られているかどうかをチェックしなくてはいけません。このように労力のかかる開発では話題を公開したいという本来の作業が出来なくなってしまいます。このままの方法ではいずれ行きづまってしまうかもしれません。 そこでこのような労力を減らすためにはどうすればよいのかを考えるに至りました。どのページでも自分の決まりを守っていくような今の場合には、決まりを守った部分はどのページでも同じHTMLコードになり同じコード構成を形作っています。このような共通部分は異なったデータとして分離しておけば決まりの部分が分かりやすくなります。また決まりを忘れてしまっても分離しておいたデータを見ればこんな決まりだったのかと思い出す手がかりにもなると考えました。そこでとりあえず決まりの部分を分離する作業を進めていきました。すると分離するデータには種類がいくつかあってそれぞれ性質の異なる面をもっていることに気づきました。こうしてHTMLコードの中に混ざっているデータの種類について注目していくことになりました。
HTMLで書かれた1つのページには性質の異なるデータが混ざって入っているように感じています。たくさんページを作っていく中ですべてのページに共通させて統一したい部分やそれぞれのページで固有の部分があります。このときにはすべてに共通する部分は一つにまとめて一箇所に配置して、それぞれのページがこれを参照するようにすれば統一を保ったり共通部分を更新することが楽になります。 このようにしてデータを性質別に分けていくことで1つのHTMLデータを見ているだけではどうしてこのデータはここにないといけないのかといったデータに込められた意味を把握することが出来るようになると考えています。そしてページ全体を更新しやすくすることが出来ると考えています。 これまで考えてきた結果、HTMLで書かれた1つのページの中には3つほどデータの種類があると感じています。これらの3つを「配置構成」、「スタイル」、「内容データ」と呼んでこれらがHTMLコードのどの部分になるのかを見ていきます。 次のHTMLコードを見つめることで3つすべてを見つけることが出来ます。このコードからは「サンプル文章」という文字が「<P>タグ」として一つの段落を形成することと、「サンプル文章」という文字の大きさを「<FONT>タグ」で変えようとしていることが分かります。
ここで2つのタグが出てきましたが「<P>タグ」はタグの間にある文で一段落を作っているといった文章的な意味とブラウザで表示したときに改行して表示するといった配置に関する意味を持っています。このうち文章的な意味のようにページに書かれた文章がどのように構成されているのか、どの部分が題名となったりどこからどこまでが一段落なのかなどをタグによって決めている部分が3つのデータのうちの「配置構成」に当たります。また「<FONT>タグ」はタグの間にある文字のフォントを変えるといった意味を持っています。このようにどこからどこまでのフォントを変えるのかということを決めている部分も「配置構成」に当たります。「配置構成」は文章の構成やフォントなどの変更部分の構成を示しているデータになります。このため例には「<FONT>タグ」の属性には「size="3"」となっていますが、この「size="3"」の部分はどの部分を変更するのかといった構成の意味はないため、「size="3"」の部分は「配置構成」のデータには含まれません。 「size="3"」は「配置構成」によって決められた部分の間の文字サイズを「3」にするように決めています。このようにどのようなスタイルへと変更するのかといったデータは「スタイル」に当たります。最後に残っている「サンプル文章」という文字列のデータは実際の文章を表していてブラウザで表示したときに表示される内容の部分です。このような実際に表示されるデータは「内容データ」に当たります。「内容データ」にはこの例のような文字列データのほかにもピクチャファイルや Flashファイルなども含まれています。 ここまでは1つのページの中にある、「配置構成」、「スタイル」、「内容データ」の3つのデータについて見てみました。次に「配置構成」にはさらに3つの種類があると感じています。この3つは「テンプレート」、「文章の構成」、「構成の部品」と呼んで同じようにしてこれらがHTMLコードのどの部分になるのかを見ていきます。 1 つのページとして完全な次のHTMLを見つめることで、まず「配置構成」、「スタイル」、「内容データ」の3つのデータを見つけ出します。その後に「配置構成」の中にさらにある3つの種類を見つけることにします。この例では一つのページを作っているHTMLの全体が示されています。HTMLページは始めに「<HTML>」タグがきてその中に「<HEAD>」タグと「<BODY>」タグがよくあります。この例も同じ形になっています。「<HEAD>」タグではページのタイトルを決めています。「<BODY>」タグではページの内容が書かれています。「<BODY>」タグの中を見てみると「<P>」タグと「<Table>」タグで構成されています。「<P>」タグにはこの文章の題名が書かれてあって、また「<Table>」タグにはピクチャとその説明文があるといったページになっています。
例にはすでに「スタイル」と「内容データ」を見つけ出して色をつけてあります。「スタイル」のデータによって「<P>タグ」のフォント情報や「<Table>タグ」の線の色や太さなどを決めていると推測できます。「内容データ」はページのタイトルや文章の内容そのものを決めていることが分かります。またどこのアドレスにあるピクチャを表示するのかといった参照アドレスの情報も内容データに含まれます。そしてこれら以外の残りの部分すべては「配置構成」のデータになります。 以下には「配置構成」の中の「テンプレート」と「構成の部品」のデータ部分に色をつけてあります。例の図の中で色がついている範囲の中に白色の四角形で色が抜いてある部分があります。この部分は他のデータを代入することが出来る部分です。この部分にはページごとにどんなデータも代入することが出来ていろいろと個々に変更が出来ます。それ以外の色のついた部分はすべてのページで同じ形となる共通部分です。
「テンプレート」は例のようにページの土台となる構成に当たります。この例の「テンプレート」はページのタイトルとページの内容の2つを代入することが出来るようになっています。これによってページごとにタイトルを変えたり内容を変えたりすることが出来ます。しかしどのページも薄い赤で色付けされている HTMLコードの部分は同じになっていて、すべてのページで概観が同じ雰囲気になるようにしてあります。これはページ間で統一感を持たせることが出来ています。 「構成の部品」の例では文章の題名を表示するための「<P>」タグで囲まれているHTMLコードや、ピクチャと説明文の両方を配置する「<Table>」タグのHTMLコードが薄い赤で色づけされています。どのページでも文章の題名は見た目が同じになるように作りたいと思うものです。例のように題名は「<P>」タグでいつも作るんだと決めればどのページでも文章の題名は同じ形式の「<P>」タグで作りたいものです。またピクチャと説明文の方も自分は「<Table>」タグで構成してピクチャの下には必ず説明文を配置するんだと決めれば他のページでもピクチャを表示する場合は同じ構成を保ちたいものです。このように文章の題名をつくる部分やピクチャを表示するための部分などはすべてのページで共通のHTMLコードにしたいものです。これらのように文章の中にある部分的な共通部分は「構成の部品」に当たります。 「構成の部品」にも白色の四角形で色が抜いてある部分があって、ここに自由にデータを代入してそれぞれのページで変更していけるようになっています。文章の題名をつくる「構成の部品」には例にあるようにどのような題名にするのかといった文字を変更することが出来るようになっています。またピクチャを表示する「構成の部品」にはどこのアドレスにあるピクチャを表示するのかと、ピクチャの説明にはどのような文を書くのかといったことを変更することが出来るようになっています。 「テンプレート」にも「構成の部品」にも含まれないような「配置構成」に属しているデータがまだあります。例からは文章の題名の次にピクチャを表示するというように配置の順番が読み取れます。文章の題名をつくる部分もピクチャを表示する部分もどちらも「構成の部品」でしたが、「構成の部品」同士をどのような順序で配置していくのかといったことはまだどのデータにも含まれていません。このようにページの中にある複数の「構成の部品」をどのような順番で配置するのかを決めることが主に「文章の構成」に当たります。また「配置構成」のデータの中にある3つの種類のうち残った「文章の構成」は「テンプレート」と「構成の部品」以外のすべての構成を決めることになるので、その他のここで考えなかった例外的なデータがもし出てくれば「文章の構成」に含めることにします。
以下には文章にある3つのデータの種類が統計的に見てすべてのページに対してどれくらい固有なデータとなるときが多いか、またはどれくらい共通になるときが多いかといった頻度をイメージ的に示しています。
3 つのデータのうちの一つである「配置構成」のデータは固有なものと共通なものがはっきりしています。「テンプレート」はすべてのページの土台となる HTMLコードの部分なのですべてのページで共通になります。「構成の部品」は例えば文章の題名をどのような形式で表示するのかを決めるデータなどですが、題名の形式はすべてのページで統一させたいものなのでこれも共通になります。一方で「文章の構成」は「構成の部品」データをどのような順番で配置するのかを決めるデータで、このことはそれぞれのページで伝えたい内容が違えば配置の順番も異なるはずなので固有のときが多くなります。 「スタイル」にも厳密ではないですがさらに2つの種類があるように感じています。これらは傾向としてフォントや色などのデータと、どれぐらいの間隔をあけるのかや、どこに配置するのかといった位置的なデータの2つです。図の中では「フォントや色」と「配置方法」と呼んでいます。どちらも共通のときが多いのか固有のときか多いのかはあまりはっきりとした傾向はないように感じます。場合によってさまざまになると感じています。 「内容データ」はページごとに固有のデータとなることが多くなります。「内容データ」は例えば記事として書かれた文字列データやより視覚的に伝えるために用意したピクチャファイルなど、そのページで相手に伝えたい具体的な内容そのものです。それぞれのページで伝えたいことは異なるので「内容データ」もページごとに違うものとなって固有のときが多くなります
HTMLで書かれたページの中には「配置構成」、「スタイル」、「内容データ」の3つのデータがあります。またこのうちの「配置構成」にはさらに「テンプレート」、「文章の構成」、「構成の部品」の3つが含まれています。 現在のHTMLの規格では上記のいくつかのデータのうち、一部のデータ種ではデータを分けて別のファイルに分離しておくことができるようになっているようです。データが分けられるデータ種は「スタイル」と「内容データ」です。「スタイル」のデータはCSS(カスケードスタイルシート)ファイルに完全に分離できるようになっています。「内容データ」には文字列データやピクチャファイル、その他にFlashファイルなどのオブジェクトファイルなどがあります。現在では文字列データをHTMLファイルから分離することは出来ません。しかしその他のピクチャファイルやオブジェクトファイルはHTMLが誕生した当初から分離されて、今でもHTMLファイルとピクチャファイルは周知のとおり分離されています。 しかし文章の構成を決める「配置構成」のデータは現在では分離することが出来ません。本来であればすべてのページで共通部分となるときが多い「テンプレート」と「構成の部品」の2つは別のファイルに分離しておきたいものです。このようにすることで「テンプレート」データのあるファイルと「構成の部品」データのあるファイルは1つずつ用意するだけでよくなり、すべてのページがこのファイルを参照することでどのページでも同じ概観を保つことが楽に出来るようになります。また例えば「テンプレート」の一部分のコードを変更したいとなったときにも1つの「テンプレート」ファイルの一箇所だけを変更すればすべてのページでこの変更が反映されることになり、ページの更新も楽にできるようになります。
ホームページの開発をより効率的に行えるように更新しやすくて労力のかからない開発方法が必要だと考えています。このことについて考えていく上で、ページ の中にある「配置構成」、「スタイル」、「内容データ」の3つのデータの存在を認識することが必要だと考えています。 またこのような考え方を持ったホームページの開発アプリケーションを考案して実現で きれば開発効率が高まると感じています。このような開発アプリケーションの上で開発すれば、「配置構成」、「スタイル」、「内容データ」の3つのデータの 存在を自然に認識していくことが出来ます。これは開発アプリケーションが3つのデータに分けて開発するように促していくので知らずのうちにこれら3つの データを認識するようになっていき実践的に考え方を理解していくことが出来るようになるためです。 ま た「配置構成」の中にさらにある「テンプレート」、「文章の構成」、「構成の部品」の3つも積極的に分けて考えていくことですべてのページに共通な部分を ひとまとめにして管理することが出来るようになります。これによって共通部分の変更が容易になったりすべてのページに統一感を持たせやすく出来ます。開発 アプリケーションの中で「テンプレート」や「構成の部品」を作成できるようにして、新たなページを作成したいときにはまず「テンプレート」データをベース に配置しておいてから、「構成の部品」として作成しておいた題名の「部品」や段落の「部品」、ピクチャの「部品」などを組み合わせていくだけでページの構 成が作成できるようにします。このように「テンプレート」リストや「構成の部品」リストの中から選んでいくだけにすることで、コードの記述ミスや他のペー ジとの統一を壊すようなことはなくなっていくと感じています。さらに選ぶだけの開発は白紙からコードを記述していくよりも負担が楽になるはずです。 このようにより開発効率を高めていくことが必要だと感じています。 ページの中にある「配置構成」、「スタイル」、「内容データ」の3つのデータの存在を認識することが必要だと考えています。そしてこのような考え方を持ったホームページの開発アプリケーションを使えば面倒に感じているいろいろな場面でページの作成が楽になったり更新が楽になったり出来ると考えています。 例えばどのページにもページの先頭には同じピクチャを配置していきたい場合があると思います。これは企業などのページを見てみればどのページの先頭にもその企業のロゴマークがあって統一感が感じられることがよくあります。このような共通部分は、ここで考えている開発アプリケーションを使えば「テンプレート」データとして管理しておくことで容易に実現できると考えています。また同じ例としてどのページの最下部にも「Copyright 2005 MyCompany」のような著作権情報を配置したい場合にも適しています。 そのサイトの構造を分かりやすく見せるために独自のメニューを作って他のページへ移動しやすくしているサイトがよくあります。この場合はメニューをどのページにも配置したいだけでなく、さらにページごとにメニューの中身を変えていきたい場合があると思います。例えば今表示しているページがメニューの中のどの項目に当たるのかを分かりやすくするために今のページの項目は色を変えたり太字にしたりして強調させたいといったような場合です。これは動的な動きを含むのでHTMLだけでなくCGIやJavascriptを併用することになり、開発アプリケーションをCGIに対応させるようなさらにステップをひとつ登る必要がありますが、このような場面でもCGIでデータを参照したり操作したりするときに効率を高めると考えています。 このページに見られるような「このセグメントの情報」という表をどの話題の最下部にも配置していきたいなどのように、自分でこのサイトはこんな構成の決まりを守って作っていくんだと決める場合がよくあります。この他にもこのページではページの最下部には「最終更新日」を記述するんだとか話題のタイトルは必ず大き目の太字にするんだとかという決まりを貫いています。しかし開発の中で自分で決めた決まりを自分の力で貫いていくことはかなりの神経を要するものです。開発中はすべての決まりを常に気にしていなくてはならないからです。このような決まりを一貫することは「配置構成」の中の「テンプレート」と「構成の部品」を使うことで容易に実現できると考えています。このうちの「テンプレート」を使うことで新たにページを作成するときには必ずページの最下部に「最終更新日」を配置させることが出来るようになります。また同じようにして新しい話題を作成するときには必ず話題の最下部に「このセグメントの情報」という表を配置させることも出来ます。 この例の中に出てきた「最終更新日」の日付は、ページを更新すれば開発アプリケーションに自動的に日付を更新してもらいたいものです。また「このセグメントの情報」についても「追加日」や「最終更新日」の日付を更新してもらいたいものです。この場合は開発アプリケーション側にこのような機能を実現するためのプログラムをさらに構築する必要がありますが、このような場面でも開発アプリケーション側のプログラミングでデータを解析したり更新したりするときに効率を高めると考えています。
※ご意見、ご感想、改善点、その他の情報などがありましたら、メールにてお知らせ願います。 |
