gorogoronyan FC2

HTML 次の一歩

HTML5 はじめの一歩、 CSS はじめの一歩 からの続きです。

HTML 作成の手間を省く

HTML をたくさん作るようになると、HTML を作成する手間を省くため、 もう少し複雑な作り方 (作業的には楽な作り方) をするようになります。 ここでは なるべく HTML を書かない話 になります。

さまざまな方法

  1. HTML を雛形 (テンプレート) と文章本体に分離する。
    HTML をヘッダーや目次など各ページに共通する部品と記事本文に分け、 各部品を JavaScript などのプログラミング言語を使って 1つの HTML に合成します。
  2. 本文の HTML も Wiki や Markdown などの簡易言語から生成する。
    HTML のタグを毎回記述するのは面倒なので、 より簡素化された文法をもつ簡易言語で文章を作成して、 HTML に自動変換します。

HTML をテンプレートと本文に分離する

ページの構成
ページの構成
本文とそれ以外の共通部分に分けられる。

HTML の中身は、主に下の 2つから構成されています。

  1. 見出しや目次など、どのページにも共通する部品
  2. ページごとに内容が変わる文書の本体 (コンテンツ)

HTML を覚えた頃には、元になる HTML を用意してコピーし、 本文だけその都度書き換えるといった作り方をすることも多いですが、 これだと面倒な話が増えます。 たとえば、共通部品に変更があった場合には すべての HTMLファイルを書き換える必要があります。

そこで、どのページにも共通する部品は 雛形(テンプレート) になる HTML を 1個だけ用意し、 JavaScript などの簡易プログラミング言語を使って本文だけ置換して HTML を作成します。 CSS で共通のスタイルを1つにまとめて外部の CSS ファイルに分離するのと同じ考え方です。 このあたりから HTML と CSS の話だけでなく、 プログラミング言語や他のツールを使う話になるので少々複雑になります。

本文も簡易なテキストから HTML に変換する (2023/04)

上のサンプルから一歩話を進めて、 本文 (コンテント) の HTML もなるべく面倒なタグを書かず、 簡素な文法のテキストで記述して HTML に変換する話が出てきます。

TestJS_html_create_template03.html
テンプレート置換とコンテントの HTML 変換を Web ツール風にしたサンプル。
ツールサンプル

問題点

上のサンプルはそのままでは実用になりません。 コンテントのテキストを 1個ずつ手作業で Web ブラウザにペーストして HTML を合成し、 結果の HTML をコピーするといった話になり、 とても面倒になります。

実際はコマンドラインのバッチ処理で複数のコンテントのテキストファイルをまとめて HTML に変換したり、上の変換処理を HTTP サーバーとつなげてテキストファイルを自動的に HTML に変換し、 普通のホームページとして Web ブラウザで見れるようにします。

node.js の HTTP サーバーで簡易 HTML 作成 (2023/05)

TestNodejs_http_server3.js の実行例
TestNodejs_http_server3.js の実行例

実際の例

上の話をもう少し本格的にすると、 テキストから HTML への変換には例えば Wiki や Markdown 言語 などのツールを使います。 JavaScript でローカルファイルの処理も簡単にできる node.js を使うのもお勧めです。

ウィキペディア も、Wiki と呼ばれる 簡易マークアップ言語 を使って文章を作成し、HTMLに変換しています。

Wiki のマークアップの例
Wiki のマークアップの例

鉄道の歴史 の元のデータです。=== や * や [[...]] などの記号を h1 や ul や a などのタグに変換します。

Wiki の派生で近年は Markdown 言語 もよく用いられます。

私のホームページも直接 HTML で書いてるわけではなくて、 元のデータは下のようになっています。

私のホームページの元データ
私のホームページの元データ

上の node.js の HTTP サーバーで簡易 HTML 作成 のツールにいろいろ処理を足しています。 自前の簡易マークアップで文章を作成し、 node.js のプログラムで HTML に変換し、テンプレートの HTML と合成し、ローカルの HTTP サーバーで眺めています。 私のホームページは古典的な作り方なので、 PC でローカルで HTML ファイルを作成し、 FTP で fc2 のサイト にアップロードしています。 FTP ツールには例えば FFFTP (Windows用) があります。

もっと本格的な話

本格的な話になるとネット上に自前のサーバーを用意して HTTP サーバーを動かし、 サーバー側では HTTP サーバーとデータベースをつないで HTML を自動作成するような話になります。 Node.js や PHP や Java などのツールを使って自動的に処理します。 このあたりから趣味の人の話ではなくて、本格的に業務屋さんの話になります。

関連キーワード

関連

inserted by FC2 system