ビジネス情報サービスBusiness_Information & HTMLpage making Arctecuture

ビジネス情報ブログとHTMLページ作成システム連携アーキテクチャ

ビジネス情報ブログとHTMLページ作成システム連携の詳説

◇ HTMLページ生成の処理ステップとフレームワーク ◇

■HTMLページ制作システムの「HTMLページ生成」処理フロー

  • HTMLページ生成のフレームワークは、HTMLコード指定ファイル、テンプレートファイルなどを全てExcelから入力設定できることを狙ったものです。処理実行する上の各種設定ファイルもExcelファイルからできるようにして、簡単に誰でも複数の人が同時に複雑なHTMLページを作成することができ、かつドキュメンタビリティをアップするものです。

HTMLページ生成のステップと関連ファイル

  • HTMLページ生成の処理ステップは、「初期テンプレート」→「目的のページ用のテンプレート作成」→「HTMLページの部品的コード作成」→「最終的なHTMLページ作成」が通常のHTMLページ完成までのステップであり、途中の部品的コード作成などをスキップしても可能です。
  • 逆にHTMLページから「HTMLコード指定」形式のExcelファイル出力する機能は、HTMLページ編集変換の機能を参照下さい。
  • 各種テンプレートの作成は、ユニットライブラリ、予約名"template_b"（開始）と"template_e"（終了）をExcelファイルでHTMLコードのテンプレート生成を作成して、入力ファイルとします。テンプレートとしては、"Dreamweaver"と同フォーマットのタグコードで、２行で作成された「初期テンプレート」他を指定すると作成できます。
  • 初期テンプレートの内容：
  • <!-- TemplateBeginEditable name="int" -->
    <!-- TemplateEndEditable -->
  • HTMLページの部品的コード作成は、共通部分のHTMLコード生成して、複数の完成HTMLページ生成で利用できるようにしたもので"macro"ファイル指定で読み込まれす。例えば、ロゴ入りの画像とヘッダーナビのHTML部品、フッターナビHTML部品、テーブル構成のHTML部品など。
  • "macro"機能については、HTMLページ作成の詳細仕様説明 拡張機能を参照下さい。
  • HTMLページの完成コード作成は、部品的なHTMLを含め、目的とするページ用のテンプレートと完成HTMLコード指定のExcelファイルを入力として、最終的なHTMLページの生成ができます。
  • 画像リンクファイルは、HTMLコード指定（Excel入力ファイル）で、縦横サイズが指定されていない場合に、利用する画像からサイズを取得して設定します。
  • スクリプト言語ファイルは、"macro"ファイル指定で、ファイルパスの文末に「;b」を付加した場合に読み込まれたスクリプトを無効にするため"<pre><code>"と"</code></pre>"で囲んだ形式で生成します。
  • 「id/class変換テーブル」のExcelファイルは、"名称-nn"形式（nnは数字）のコードをタグ制御、表示内容の欄で指定した場合に、CSSファイルで指定した内容のid/classに変換するテーブルです。（事前にアップロードして置きます）

ページのトップへ戻る

◇ HTMLページ生成の処理ステップとBiz情報ブログツールの位置づけ ◇

■HTMLコード生成処理に「Biz情報ブログツール」を追加した処理フロー

  • HTMLページ生成の処理ステップに、「Biz情報ブログHTML生成ツール」を利用して部品的なHTMLコードを生成する処理を追加したものです。

HTMLページ生成の処理ステップとBiz情報ブログツール関連

  • 新たなテーマを「Biz情報ブログ一覧」のExcelファイルで追加し、部品的なHTMLコード（一覧表のテーブル構成）を生成して、カテゴリ別の完成HTMLコード指定のExcelファイルを入力とすることで最終的なHTMLページを生成することができます。
  • 最終的なHTMLコード指定のExcelファイルは、"macro"指定で、生成された「部品HTML」をパス指定することで自動生成することができます。
    （完成HTMLコード指定のExcelファイルでは、変更する部分がないため固定的なテンプレート的に利用します。）
  • 「Biz情報ブログ一覧」のExcelファイルをHTMLコードに変換するため、「分類名称設定」Excelファイルと「一覧表のカラムを編集する指定」Excelファイルを利用します。

ページのトップへ戻る

◇ Biz情報ブログツールの処理ステップ ◇

  • Biz情報ブログツールとHTMLページ生成ツールを利用した処理手順について、関連するファイルの生成・参照などの処理内容について詳細に説明したものです。

■Biz情報ブログ処理ステップと関連ファイル

Biz情報ブログツール利用の処理ステップと関連ファイル

  • 【ビジネスブログマスター作成】
    ビジネス情報ブログの一覧表を通常のExcelファイルとして作成して、入力ファイルとして利用することで静的なHTMLページが作成できます。「ブログの一覧表」の分類方法、一覧表の各カラムの編集方法をExcelファイルで指定することで「部品的なHTMLページ」（テーブル構成）を生成します。
  • 1.分類名称Excelファイルと編集指定Excelファイルをアップロードします。
  • 2.入力の「ブログ一覧表」Excelファイルから、ビジネスブログマスター作成とテーブル構成の部品的なHTMLページ「ビジネスブログ・ボディHTMLデータ」を作成します。「ブログ一覧表」のテーマ別分類コードを「分類名称テーブル」を参照してソート、グループ処理をして出力します。
  • 既にブログマスターがある場合は、各テーマ（アイテム）のアクセスカウンターと最終更新日を保持してマスター作成されます。
  • 【詳細内容のコンテンツ作成】
    詳細内容で表示する各種コンテンツは、文章系と画像系に分類されます。
  • 1.各種コンテンツのアップロードは、文章系では、通常のエディタで作成されたテキスト、部品的なHTMLコード、スクリプト言語があり、画像系では写真撮影の画像、イラスト画像、ビジネスグラフ画像などがあります。
  • ※画像作成・加工ツールは、携帯電話からのアップロード、画像トリミング、ファイルタイプ変換、サイズ変更、ビジネスグラフ画像作成などが可能です。画像のファイルリスト表示とアーカイブ管理も可能です。
  • 2.HTML部分データの作成・編集は、Biz情報ブログツールにあるWEBエディタ（HTMLコード）作成編集、表形式Excelのファイル変換により作成可能です。表形式の変換の指定は、作成した表に1行目を追加して、"title"、"data"等を指定するとテーブル構造のHTMLコードに変換します。
  • 3.ダウンロード用圧縮ファイルの作成：
    ダウンロード資料のアップロードは、ファイル単位（圧縮ファイル：ZIP形式を含む）となります。
  • 4.部品的なHTMLコードの生成は、HTMLページ制作ツールにより作成できます。画像リンクファイルは、存在チェックと縦横のサイズを取得します。又、作成されたHTMLコードのユニット・ライブラリーの参照も可能です。
  • ※スクリプト言語は、"macro"ファイル指定で、保存されているファイルパスを指定することでスクリプトの機能を無機能にした文章に変換します。
  • 【完成HTMLコードの生成とテスト】
  • 1.入力HTMLコード指定Excelファイルから最終的な完成HTMLページを生成します。（HTMLページ生成ツール）
    HTML生成テンプレートは、入力HTMLコード指定Excelファイルとして利用し、「ビジネスブログ・ボディHTMLデータ」を"macro"ファイル指定し、ページ内の更新日を"date"変換指定で、変更箇所がないため自動処理ができます。
  • ※完成HTMLページの表示内容の乱れ、内容の修正がある場合は、入力したHTMLコード指定Excelファイルを修正セーブしてHTMLページ生成ツールのブラウザ更新することで、修正された入力ファイル内容が更新されますので、完成HTMLページも修正されてタイムリーなテスト確認が実現できます。
  • ※本番環境とテスト環境のパスが違うため、画像は本番環境にアップロードして置き、リンクは絶対パスで指定しておく必要があります。
  • 【本番WEBサイトの運用・保守】
  • 1.本番サイトへのアップロード機能により、設定された本番サイトのパスへ配備します。
  • ※各テーマに詳細内容のコンテンツを追加・変更することが容易で、【詳細内容のコンテンツ作成】から処理することにより、マスターには最終更新日の更新が実施されます。
  • 「画像リンクファイル」は、詳細画像コンテンツのような表示コントロールはされず、自由の場所で表示できるようにHTMLページ生成処理で参照使用されるものです。

ページのトップへ戻る

◇ Biz情報ブログの表示内容の構成 ◇

■ Biz情報ブログの起動表示とAjax利用して詳細内容表示のページ構成

  • Biz情報ブログは、「カテゴリ」別に複数設置することができ、共通のツール制作（Biz情報ブログ生成）と共通の動作環境（Ajax利用）で実行表示することができます。

Biz情報ブログの起動表示と詳細内容の関連

  • Biz情報ブログのページ構成は、完成HTMLページ指定Excelファイルから生成されたもので、Biz情報ブログ生成ツールから生成されたブログ一覧表の「部品HTMLコード」を含んだカテゴリ別の静的XHTMLページです。
  • 各テーマの「詳細」ボタンをクリックすることにより、テーマコードに該当する詳細コンテンツを「Ajax」方式によりWEBサーバーから読み込んでJavascriptによるコントロール表示します。
  • 詳細内容の表示エリアにある「詳細表示のクリア」をクリックすると詳細内容をクリアします。(初期起動のメッセージをInsert表示 )
  • 詳細内容の「文章コンテンツ」、「画像コンテンツ」は、テーマ（アイテム）のID番号を持ち、「-nn」のサフィックス番号を付加して、ID番号に該当する詳細コンテンツ全てを表示します。
  • サフィックス番号なしの文章データは、必須で最初に表示し、画像コンテンツを表示、その後文章系のコンテンツを表示するコントロールをしています。
    最後にダウンロード資料の指定がある場合は、そのリンクを付加します。（ブラウザ側のJavascriptでコントロール）
  • 各テーマの「詳細」ボタンをクリックすると「Ajax」による読込の際に、WEBサーバーサイドでブログマスターにあるアクセスカウンタをアップします。

ページのトップへ戻る

◇ Biz情報ブログの表示方法の仕組み ◇

■Biz情報ブログの詳細内容表示の仕組み

  • WEBブラウザから起動のリクエスト時には、初期表示のJavascriptを生成し、詳細内容の表示リクエスト（Ajax処理）には、該当するマスター、コンテンツファイルを読み込んでリスポンスします。
  • カテゴリの設定は、各種ファイルのパス、カテゴリのプレフィックスコード、カラー表示コードなどをスクリプト言語で作成しており、Biz情報ブログ生成ツール、ブログ表示コントロールのプログラムで参照して個別ページの処理を実現しています。

Biz情報ブログの詳細内容とファイル連携

  • 【カウンタ、最終更新日とカレンダー表示】WEBサーバー側でJavascript生成
    初期起動時には、WEBサーバーサイドで今日の日付の「カレンダー」表示とブログマスターから読み込んだ「アクセスカウンタ」「最終更新日」を表示するjavascriptを生成して、ブラウザにリスポンスします。
  • これによりブラウザ側でリスポンスされたJavascriptにより、「カレンダー」と「アクセスカウンタ」「最終更新日」を所定のところへInsert表示（DOM）します。
  • 【詳細内容コンテンツ描画】ブラウザ側のJavascript（Ajax処理）とWEBサーバー側のAjax対応処理
    各テーマの「詳細ボタン」クリックでテーマコードをJavascriptで取得して、「Ajax」によりWEBサーバーに該当する詳細文章、画像コンテンツをリクエストします。
  • WEBサーバー側でビジネスブログ・マスターを読込み、該当するコンテンツを読み込んでXML形式でリスポンスします。その際に該当するテーマのアクセスカウンタをカウントアップして更新します。
  • 【ダウンロード資料の処理】ブラウザ側の処理
    ダウンロード資料をビジネス情報ブログ生成時にセットした場合に、ブログマスター読込時にリンク先の有無を判断して描画します。
  • ダウンロード先をクリックした場合には、保存先リンクの圧縮ファイル形式（ZIP）を読み込む動作によりダウンロードができます。
  • 【詳細表示のクリア処理】ブラウザ側のJavascript処理
    「詳細表示のクリア」をクリックすると初期起動のメッセージをInsert表示（DOM）して詳細内容をクリアします。

ページのトップへ戻る

◇ ユニットライブラリの活用方法 ◇

■HTMLコード指定（Excelファイル）の「ユニットライブラリ」の活用例

  • ユニットライブラリは、テンプレートの補完的なコード生成用に利用などで、一部の違い（レイアウトサイズのCSSリンク、HTML/XMLの宣言他）でテンプレートを増やすのではなく、ユニットライブラリのコード利用でバリエーション部分を吸収できるように指定することができるものです。

ExcelによるHTMLコード指定のMacro利用例

  • ユニットライブラリの利用方法は、タグ制御指定で「macro」を指定し、表示内容でファイルパスを指定するとExcelコード指定ファイル入力時に、同時に読込みHTMLコード変換済みとして処理します。
  • 初期テンプレートのname="int"を指定して、HTMLコードファイル（テンプレートを含む）を作成
  • HTMLコードのエンコーディングは、3種類の指定方法があり、ユニットライブラリ又はテンプレート上でDoctype宣言のxml/HTMLの区別をして、"meta http-equiv"のcharsetで指定する方法と予約名の"htmlencode"による表示内容でコード（Shift_JIS,EUC-JP,UTF-8他）を指定する方法があります。
  • 両方のエンコーディング指定は、後方コードが有効となります。
    （注）生成処理時のコード選択は、入力データのコード変換を実行します。"auto"指定の場合は、エンコードで指定したコードで変換します。（エンコード指定なしは、EUC-JPコード）
  • (1).「doctype」の指定で「HTML」と「XML/XHTML」を選択可能とする
  • 「HTML」の"doctype"のユニットライブラリ：
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
  • 「XML/XHTML」Shift_JISの"doctype"のユニットライブラリ：
  • <?xml version="1.0" encoding="Shift_JIS"?><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
    <head>
  • (2).「予約名」で「各種meta」と「title」を指定
  • 完成HTMLページでは、予約名で設定できる"htmlencode","htmltitle","description","keywords"が必要で、"htmlencode"を最初に記載して以降のHTMLコードをエンコーディングできるようにするのが通常です。（注：携帯電話では、"description","keywords"は不要です。）
  • (3).「各種CSSのレイアウト指定」を選択可能とする
  • 「link」の指定のユニットライブラリ：
  • <link rel="stylesheet" href="/css/screen_xa.css" type="text/css" media="screen,print">
  • (4).「<body>」タグの背景カラーと「onLoad」を指定可能とする
  • 「body」の指定のユニットライブラリ：
  • <body id="CXM">
  • (5).「ロゴ画像」「ヘッダーナビ」を「div headerwrap」で囲んだ指定例
  • 「headerwrap」の開始指定のユニットライブラリ：
  • <!-- ===== begin headerwrap ===== -->
    <div id="headerwrap">
    <!-- ヘッダー -->
    <div id="header">
  • 「headerwrap」の終了指定のユニットライブラリ：
  • </div><!-- END:ヘッダー -->
    </div><!-- ===== END headerwrap ===== -->
  • (6).タイトル用背景画像と変動部文字列を「div pagetitle」で囲んだ指定例
  • 「pagetitle」の開始指定のユニットライブラリ：
  • <!-- Begin: ページタイトル -->
    <div id="pagetitle-xa">
  • 「pagetitle」の終了指定のユニットライブラリ：
  • </div><!-- END: ページタイトル -->
  • 予約名などの「HTMLコード指定仕様」は、「HTMLページ作成の詳細仕様説明」を参照下さい。

ページのトップへ戻る