移動: トップ > ラボ > ソフトのアイディア > ホームページを自動的に統一する (v2)
HTMLに求めるもの (v1 前版)
履歴:
統計:
目次:
このページの最終更新日: 2010/04/26
提案日: 2005/08/14

※本記事ではソフトに関するアイディアを紹介しています。これらは特に記載がない限り、まだ実現されていないものです。これらのアイディアをぜひ実現していただける方をお待ちしております。

ホームページを自動的に統一する

概要

ホームページを作って公開するとき、ホームページ全体で統一感が出るように、各ページの構成やスタイルを同じように作ります。しかし、これを手作業で維持するのは面倒です。

そこで、ページ間で共通にする部分をブロックとして指定して、ブロックを組み合わせて各ページを作成します。作成したブロックの内容を変更すると、すべてのファイルを同じように自動的に書き換えることで、ページ間の統一を自動的に保つ、といったアイディアです。

自動的に書き換えるので、手間をかけずに簡単にページ間の統一を維持できます。また、ブロックを使うことで、ページ間で統一する部分を細かく設定できます。

■前回執筆バージョンも作成。

背景

ページ間の統一を自動的に保つ

自分のホームページを作って公開するとき、ホームページ全体で統一感が出るように、各ページの構成やスタイルを同じように作ります。ページを作っていくと、作り始めのときに決めた構成やスタイルのある部分は、こうした方がよかったと気付くことがよくあります。すでに多くのページを作った後に気付くと、すべてのページに渡ってこの部分を変更しなくてはならず、とても面倒な作業になります。

そのため、Dreamweaverなどのホームページ作成ソフトにはテンプレートといった機能があります。ページの中で編集部分共通部分を指定してテンプレートを作成し、編集部分にページ毎で異なるコンテンツを作ります。共通部分はページを作るときには編集不可能になり、ページ間で共通になります。テンプレートの共通部分を変更すると、すべてのファイルが自動で書き換わり、ページ間の統一を保つことが出来ます。

しかし、このテンプレートはページ単位でしか作成できず、編集部分の中にさらに編集部分と共通部分を指定する、といったより複雑な指定が出来ません。

そこで、ページ間で共通にするHTMLのコード部分をブロックとして指定して、ページ単位でテンプレートを作成する代わりに、任意のコード単位で共通部分を作成する、といったアイディアに至りました。

どんなもの?

共通部分のブロックを作る

自分のホームページを作って公開するとき、ホームページ全体で統一感が出るように、各ページの構成やスタイルを同じように作ります。このように同じように作る部分を、HTMLのコード単位で指定してブロックを作り、このブロックを組み合わせて各ページを作成します。

作成したブロックの構成やスタイルを変更したい場合は、ブロックのHTMLコードを書き換えると、同じブロックをもつすべてのファイルを同じように自動的に書き換えて、ページ間の統一を自動的に保つ、といったアイディアです。

このようにページ内の共通部分をブロックで指定して、変更するとすべてのブロックを自動的に書き換える機能を、ホームページ作成ソフトに新しく追加します。

例1 : ヘッダー部分をブロックにする

例えば、ヘッダーがあるホームページを作る場合を考えます。このヘッダー部分はどのページでも同じように表示したいので、この部分をブロックに指定します。新たにブロック機能が追加されたホームページ作成ソフトを使って、操作のイメージを示します。

ヘッダー部分のHTMLコードを選択して新しくブロックを作成します。すると、この部分のHTMLコードが入った別のファイルが作成されます。このファイルはブロックを定義するもので、ブロックに指定したHTMLコードの中で最上位タグである<center>タグには、<center temp_block_1>のように、ブロックとして認識するためのtemp_block_1属性が付けられます。

ヘッダー部分のブロックを作成 [拡大]

新しいページを作成するときは、空のページを作成して、ブロックの定義ファイルをページの先頭へドラッグ&ドロップします。すると、ページの先頭にヘッダー部分のHTMLコードが追加されます。この中の<center>タグにはそのままtemp_block_1属性が付いていて、これによってブロックを認識します。

ブロックの定義ファイルをページの先頭へドラッグ&ドロップ

このようにしてページを作成していき、あるときヘッダーの内容を変更したいと思ったときには、ブロックの定義ファイルを開いて内容を変更します。変更を保存すると、ホームページ作成ソフトがすべてのページを検索して、temp_block_1属性の付いたタグを探し出し、見つかったタグの部分を今変更したHTMLコードに書き換えます。

このようにブロックの定義ファイル1つを変更するだけで、すべてのページが自動的に変更され、ブロックを使うことですべてのページに渡って構成やスタイルを統一できます。

例2 : 絵の部分をブロックにする

ブロックの利点は例1だけに留まりません。次に、文章の途中で絵を挿入する場合を考えます。本サイトのページでは、絵を文章の中に配置するために、<table>タグを使って構造を整えています。そして、すべてのページに渡って同じ構造を使うことで、外観を統一しています。

絵を文章の中に配置

そこで、絵を配置するHTMLコードの部分をブロックにします。ホームページ作成ソフトの中でこのコード部分を選択して新しくブロックを作成し、ブロックの定義ファイルを作成します。ヘッダーのブロックとは違ってこの絵を配置するブロックでは、ページ毎に表示する絵が異なるので、<table>タグの中の<img>タグはsrc属性やwidth、height属性などがページ毎に異なるHTMLコードになります。

そのため、ページ毎に異なる<img>タグの部分は編集部分として指定します。ホームページ作成ソフトの中でブロックの定義ファイルを開き、<img>タグの部分を選択して新しく編集部分を作成します。すると、<img>タグの上下に<temp_block_editable>タグが付いて、編集部分として認識します。

<img>タグを編集部分として指定

文章の中に絵を配置するには、作成したブロックの定義ファイルを配置する位置へドラッグ&ドロップします。このブロックは<img>タグの編集が可能なので、<img>タグのsrc属性やwidth、height属性を書き換えて、そこで表示したい絵やそのサイズを自由に指定できます。

このようにして、絵を配置する場所へブロックを配置して、ページを作成していきます。ブロックの配置はドラッグ&ドロップのみでとても簡単に配置できます。必要なところに必要なだけブロックはいくつでも配置できます。

ブロックの内容を変更したいと思ったときには、ブロックの定義ファイルを開いて変更します。変更を保存すると、ホームページ作成ソフトがすべてのページを検索して、このブロックを使う部分を探し出し、今変更したHTMLコードに書き換えます。この際、編集部分の指定がある<img>タグの部分は書き換えずに、それ以外の部分だけが書き換わります。

ブロックの中にブロックを入れる [全体]

ブロックの中にブロック

絵のブロックのようにブロックの中に編集部分を作ると、そこにどんなものでも入れられるので、その編集部分に再びブロックを配置することも出来ます。このようにブロックの中にブロックを配置して、複雑に組み合わせることが出来ます。

Dreamweaverのテンプレート機能

Dreamweaverにあるテンプレート機能は、ここで提案したブロックを使って同じことを実現できます。これには、ページの内容全体ブロックとして指定します。作成されるブロックの定義ファイルには、<html>タグにtemp_block_1属性が付きます。そして、その中に編集部分をいくつか作成して、ページの内容を書き込めるようにします。

ブロックから新しいページを作成 [全体]

新しいページを作るときには、ホームページ作成ソフトがブロックの定義ファイルの中で<html>タグにtemp_block_1属性が付いているものを検索して一覧表示します。この一覧の中から、ページのベースとして使うブロックを選択して、新しいページを作成します。

作成される新しいページは全体がブロックで覆われて、その中の編集部分が編集できるようになっています。例えばヘッダーやフッターの部分は編集部分に指定せずに編集できなくしてページ間で統一し、その間に書くページの内容部分は編集部分に指定することで自由に書き込み可能にします。Dreamweaverのテンプレート機能はこれとほぼ同様の機能を提供します。

すべてのページを検索/書き換える作業量

ブロックの定義ファイルを変更すると、ホームページ作成ソフトがすべてのページを検索してブロックの部分を探し出し、今変更したHTMLコードに自動で書き換えます。もし、ホームページにあるページの数が数百以上あると、すべてのページを検索して書き換えるのに数秒以上の時間が掛かるようになります。さらに、書き換えたファイルすべてをアップロードする時間も増加します。

そのため、ページを数百以上作るような規模が大きなホームページには、この方法は向いていません。この場合は、この方法でページ間の統一を保つのを諦めて、サーバ側でHTMLコードを自動生成するような、大規模サイトにある一般的な仕組みを使用します。しかし、これにはサーバを用意する必要があり、コストも掛かります。

一方で、比較的規模の小さなホームページには、この方法が向いています。サーバは必要なく自分のPC上のみで手軽にページ間の統一を実現できます。ホームページ作成ソフトが自動で書き換えるので手間も要らず、また、設定もなく簡単に使える機能です。

個人がホームページを作る場合、ページの数が数百以上になることは、あまりありません。個人が気軽にホームページを作り始める場合、この機能を使って簡単にページ間で統一したサイトを構築することが出来ます。もし、ページが数百程度になってきた場合は、サーバ側で動作させるための書き換え作業を、ブロックを書き換えることで自動的に処理し、スムーズにサーバへ移行することも出来ます。

サーバ難、コストかかる→OnPCで手軽にできる、ソフトが自動で書き換えるから手間要らず、設定もなく簡単に使える機能

目次メニューの自動生成

ブロックの編集部分には、ページ毎に違った内容が入ります。この編集部分にある内容はホームページ作成ソフトが認識できるので、自動で内容の収集が可能です。そこで、ホームページ作成ソフトが特定のブロック編集部分に書き込まれた内容をページ毎に自動で収集して、集めた情報を一覧表示できます。

目次メニューをページの左側に配置 [全体]

これを使えば、目次メニューを自動で作成できます。目次メニューはホームページにある内容の目次を一覧表示するものです。例えばページタイトルを順に並べた目次メニューを各ページに配置したい場合、ページタイトルの<title>タグ部分を編集部分に指定したブロックを作成します。目次メニューに表示したいページにこのブロックを使用して、それぞれタイトル名を付けます。

今作成したブロックからタイトル名を収集するように指定して、目次メニューを作成します。目次メニューもブロックの1つとして作成され、目次メニューのブロック定義ファイルが出来ます。目次メニューの並び替えやスタイルの変更はこの定義ファイルの中で自由に行います。順序はページのファイル名と関連付けて記憶されるので、タイトル名が変わっても順序は維持されます。

この目次メニューのブロックを各ページに配置すれば、自動で更新される目次メニューの完成です。どこかのページを編集してタイトル名を変更すれば、目次メニューにあるタイトル名も自動で更新します。このようにして、維持管理が簡単なメニューがすぐに作成できます。

目次メニューの他にも、最近作成したページのタイトルを一覧表示して、最新情報のメニューを作ったり、すべてのページをリストアップして、サイトマップを作ったりと、使い方はいろいろ考えられます。

Blockの単位を新たに導入、HTMLのサイト共通パターンをBlockで構成、Blockコードを自動で変更/更新して、全ページに渡って統一感のあるサイト構築を可能に。DreamweaverのTemplate機能もベースにしたときのBlockとして考えられる。
Blockの中にBlockを内包できる(ページのTemplate Blockの中に図表示のBlockなど)/いろいろなブロックを作って、組み合わせる。
指定のBlock内部に記述された情報を自動で参照/収集、目次メニューや更新情報のHTMLコードを自動で生成(静的生成、FTPアップロード→サーバが要らない)。 目次メニューの並び替えはユーザーで行う-順序はファイル名で記憶する→新項目はそれのみユーザーが並び替え。ブロック追加時にユニーク名が自動で付く編集部分→ユニークなアンカー作成が可能→ページ内の場所を指定可能=目次メニューからジャンプできる。

世の中の似た機能

ページ間で統一したサイトを構築する機能には、Dreamweaverテンプレート機能があります。ページ毎にテンプレートを適用して、テンプレートの定義ファイルを変更すると、すべてのページが同じように自動で変更されます。しかし、本記事のアイディアのようにページより細かな単位でテンプレートを作成できません。

一方、MovableWordPressなどのサービスを使う方法があります。これはサーバ側でスクリプトを動作させて、訪問者がページを表示する毎にサーバ側でHTMLを自動生成します。これを使って、同じヘッダーや同じ構成になるようにHTMLを生成することで、ページ間で外観を統一できます。どの部分を統一するかをより細かく設定できます。ただし、動作にはサーバが必要です。

統一サイト構築には→DWのTemplate機能/Movable、WordPressなどサーバスクリプトで動作する動的生成(訪問者がページを表示する毎にサーバ側でHTMLを自動生成)

 

更新履歴
2009/06/02
  • 書き始め
2009/07/03 v2-1
  • 初版作成

※ご意見、ご感想、改善点、その他の情報などがありましたら、メールにてお知らせ願います。

Copyright (C) 2002 - 2019 Simon.P.G. All Rights Reserved. Top | Simon.P.G. とは | 使用条件 | ご意見
inserted by FC2 system