◇ Biz情報ブログのシステム概要 ◇
- 初期設定 … Excelデータをベースにして、Biz情報ブログのHTMLページの作成ができることを基本としており、初期設定としてタイトル、編集方法などをExcelファイルからできます。
- Biz情報リスト … Excelで作成した一覧表が、部分的なHTMLページに変換して、「HTMLページ制作システム」のマクロ指定機能を利用して、最終的なHTMLページに変換することで実現します。
- 詳細データ表示 … 文章テキスト(HTML形式を含む)、画像・グラフ、表形式のコンテンツを作成してアップロードすることで表示可能となります。表形式のデータは、編集方法を指定したExcelデータからHTML形式に変換します。文章テキストは、WEBエディタによりHTML形式に変換や作成・変更編集が可能です。
- 各種ページ制作 … 「データ種別」の違いにより、各種HTMLページが作成できます。初期設定プログラムに登録して、HTMLページのJavascript(bizinfo_jsout.pl)リンクの「d=」+[番号]で選択できるようにしてページ起動時に、アクセスカウンタ数を取得表示しています。また、初期設定プログラムでは、選択された「データ種別」から詳細データ表示の際にディレクトリ、ファイルID、編集方法などを自動設定できるようにしています。
Biz情報ブログHTMLページ作成システムの処理概要図
- 初期設定フェーズ … 文字カラー、背景カラーのCSS設定内容との関連リストをExcelで作成。
- 分類・名称、編集設定フェーズ(データ種別ごと) … ヘッダー編集テーブル、分類コードと名称テーブルのExcelファイル作成。
- Biz情報リスト作成フェーズ … 掲載したい情報のリストをExcelファイルで作成。(マスターテーブルリスト)
- 詳細データのアップロードフェーズ編集 … 詳細データの内容として、グラフ・画像、文章、表形式データ、添付ファイルのアップロードし、プレーンな文章をHTML形式にデータ編集。(WEBエディタ利用)
- マスターファイル作成フェーズ … アップロードした、マスターテーブルリストは、マスターデータファイルとして利用され、アップロードした詳細データの画像全てから画像サイズを自動取得し、添付ファイルのダウンロード先リンクなどの情報を付加します。
- HTMLページ変換フェーズ … マスターテーブルリストから、HTMLページの一覧の部分(マクロ利用)に変換され、HTMLページ作成のExcelファイルのマクロ指定とリンクして、「HTMLページ生成ツール」を利用して最終的なHTMLページが完成します。
- WEBサイト掲載フェーズ … ページ起動時にマスターファイルで管理しているアクセスカウンタ数を読込んで、各情報リストに挿入表示します。「詳細ボタン」をクリックするとカウントアップし、Ajaxによる詳細内容のファイル読込みして編集表示しています。
- WEBサイト運用フェーズ … 分類コードと名称、マスターデータテーブルの変更・追加などのメンテナンスは、Excelファイルで修正してアップロードすることで実現します。また新たな「データ種別」を追加する場合は、初期設定プログラムに追加することで実現します。(初期設定ファイルを読み込む形式に変更してメンテナンスを容易にすることも可能です)
◇ Biz情報ブログのHTMLページ構成 ◇
- Biz情報ブログのHTMLページ構成は、「XHTML」のページ形式で、「Ajax」が利用できる環境にしています。
- 各ページリストにおける「データ種別」(xxx)の違いは、アクセスカウンタ用:「<span id="xxx_dsp番号"></span>」、詳細データ表示用:「<input … value="xxx_番号"」でコントロールしています。
Biz情報ブログのHTMLページの起動時の表示内容
- (1) … マスターテーブルリストのデータ(Excel)をHTMLページ形式の一部(マクロ指定)に変換されたもの
- (2) … 「HTMLページ生成ツール」を利用して、最終的なHTMLページを作成した日付に変換されます。
- (3) … ページ起動時にJavascriptから、挿入されたアクセスカウンタ数の表示
- (4) … 「詳細」ボタンをクリックすると設定された「IDno」がJavascriptで取得することができ、該当するIDnoのカウントアップと詳細データの読込処理を実行します(Ajax利用)
- (5) … 詳細データの表示エリア:取得された詳細データをJavascriptで編集して、「innerHTML」によりページ内に挿入表示します。
Biz情報ブログのHTMLページの詳細内容ボタンクリック時の表示内容
- Biz情報ブログの一覧表示リストにおける「詳細内容ボタン」をクリックすることで該当する「データ種別」とIDno.をAjaxによって、WEBサーバーから詳細内容を読み込んで、Javascriptで編集表示しています。
- 詳細内容のコンテンツは、詳細内容の説明、リンクしている画像とその画像のキャプション、表形式のHTMLデータ、添付ファイルのダウンロードの指定がある場合にはそのリンク先などであり、IDnoのサブ番号の順に詳細データを表示しています。特に、詳細データでPerl等のスクリプト言語の場合には、<pre><code>から</code></pre>で囲んで入力された形式のままの状態を表示しています。
- (1) … 詳細内容のまとめた文章ファイルの表示(必須):「xxx_detail_nnnn.txt」のファイル形式(xxxは、データ種別、nnnnはIDno)
- (2) … 画像ファイルのリンク表示(マスターデータファイル作成時に所定のフォルダにある画像全てについて、画像サイズと拡張子が付与される)「xxx_img_nnn-mm.(拡張子)」の形式(mmは、1からのシーケンス番号)
- (3) … 画像に対するキャプションの文章ファイルの表示:mmのシーケンス番号[tab]キャプション文章のフォーマットで作成。「xxx_detail_nnnn-img.txt」の形式
- (4) … 表形式のHTMLデータの表示:Excelで1カラム目に編集コードを指定して、2カラム以降に表を作成した内容から、HTML形式に変換したもの。Excel上でセル結合、文字カラー、塗りつぶしカラー、文章揃え、Bold、斜体、下線、取消線などを設定してHTML変換することができます。
- (5) … 詳細データの表示クリアボタン:クリックすると詳細データのクリアができます。
◇ Excelでの設定ファイル仕様 ◇
- 分類コード・名称テーブル、文字カラーと背景カラーのCSS指定、HTMLページ上のタイトル名と編集方法の指定、マスターデータテーブルの入力・参照Excelファイルがあります。内容の追加変更は、変更したExcelファイルをアップロードすればOKです。
Biz情報ブログの各データ種別ごとに設定するExcelファイルフォーマット
- (1) … マスターデータテーブルで、HTMLページの一覧表やマスタデータファイルの元になるものです。アップロード時に既にマスターファイルが作成されている場合は、カウンタ数、添付ファイル名称、リンク先等を取り込んで更新されます。
- (2) … HTMLページの一覧表(マクロ指定)の部分を生成する編集指定内容です。1カラム目は、編集指示コードで「command」により、編集方法が異なります。「header」「width」「dtclass」により、一覧表のテーブル形式の編集指定で、「index」は入力データの転送先(マスターファイル上)の指定です。
- (3) … 分類コードの指定と名称のテーブルファイルで、HTMLページ上の分類欄の背景カラーNo(CSS指定テーブルのNo)の指定するものです。xx-yyyの形式で、xxはデータ分野を表し、yyyは詳細分類を表しています。
- (4) … 文字カラーのCSS指定テーブルで、Excelのカラー40種類に対応したCSSのclass属性を指定した内容です。
- (5) … 背景カラーのCSS指定テーブルで、Excelのカラー40種類に対応したCSSのclass属性を指定した内容を含む必要があります。表形式からHTMLデータ形式の変換用に背景カラーNoを指定することができます。
- (6) … 詳細データの表形式のHTMLデータに変換するExcel入力データで、1カラム目に編集コードがあります。「width」「class」と「dtwidth」「dtclass」は、ヘッダー用(header)、アイテム用(data)の編集指定内容で、「title」「caption」「footer」は、編集形式は固定です。「header」「data」内におけるセル結合、セル内に文字カラー、塗りつぶしカラー、文章揃えを設定した場合は、優先されます。
◇ Biz情報ブログHTMLページ作成の操作方法 ◇
- ログインして、マスターデータテーブルのアップロードにより、マスタファイルの更新処理と、HTMLページのパーツ生成等のメンテナンス処理するツールです。添付ファイルをアップロードして、ZIP形式に圧縮したファイルを保存やExcelファイルで表形式のHTMLデータに変換する機能もあります。
Biz情報ブログHTMLページ作成システムのログイン
- ログインフォームで、「HTMLページ制作システム」と共通のSession管理を利用しているため、シングルサインONできます。
Biz情報HTMLページ作成のデータ種別の選択
- (1) … 「メニュー選択」の「データ種別の選択」をクリックすると「データ種別」の選択指定ができます。
- (2) … 「初期設定プログラム」で設定された内容から選択可能な「データ種別」を表示しますので、「選択の実行」のボタンクリックで設定されます。
Biz情報HTMLページ作成のデータ種別選択後のメニュー選択
- (1) … 「データ種別の選択」の処理後に選択された「データ種別」の内容を表示します。
- (2) … 「メニュー選択」の表示項目から、処理したい内容のメニュー選択をします。
Biz情報HTMLページ作成のマスターデータテーブルのアップロード
- (1) … 「メニュー選択」の「マスター&HTMLパーツ生成」をクリックするとマスターデータテーブルのアップロードフォームが表示されます。
- (2) … 現在格納されているExcelマスターテーブルをアップロードして更新したい場合に選択します。
- (3) … 現在格納されているファイル又は、アップロードファイル選択の処理(マスターファイルの更新、ページ一覧のHTMLパーツの作成)を実行します。
- (4) … 格納してあるExcelマスターテーブルの更新日が表示されます。リンクしているので表示・ダウンロードが可能です。
Biz情報HTMLページ作成の詳細データのアップロード
- (1) … 「メニュー選択」の「詳細データ一覧アップロード」をクリックすると詳細データのアップロードフォームと格納されている詳細データ一覧が表示されます。
- (2) … 「詳細データ」のアップロードフォームで、「処理の実行」ボタンでアップロードされます。文章、画像ファイルの格納先は、ファイルIDから判断して格納します。
- (3) … IDnoの表示欄
- (4) … 文章データの格納ファイルリスト(表形式のHTML変換データもここに格納される)Perl等のスクリプト言語の拡張子である場合には、「<pre><code>から</code></pre>で囲む」の表示コントロールします。
- (5) … グラフ・画像データの格納ファイルリスト
- (6) … 画像キャプション文章の格納ファイル:xxx_detail_nnnn-img.txtの形式
Biz情報HTMLページ作成の添付ファイルのアップロード・更新と設定
- (1) … 「メニュー選択」の「マスターの添付ファイル更新」をクリックすると添付ファイルのアップロードフォームと添付ファイルの名称などが表示されます。
- (2) … 「添付ファイル」のアップロードフォームです。編集選択欄と、添付ファイル名称の欄で表示したい名称を入力して「処理の実行」ボタンクリックで処理が実行されます。
- (3) … 「処理の実行」ボタンで、アップロードファイルの選択がない場合でも、添付ファイル名称の変更入力ができます。
- (4) … 「編集選択」欄で処理実行の対象IDnoの指定欄です。ラジオボタンのチェックを入れて、添付ファイルをアップロードすると新しいファイルに更新されます。
- (5) … 「添付ファイル名称」の入力欄です。
- (6) … 「添付削除」の欄で、既に添付ファイルがアップロードされていると「○」が表示され、「×」はされていない状態を表します。添付ファイルを削除したい場合は、チェックマークを入れて「処理の実行」をクリックする。
Biz情報詳細データの作成と変更更新(HTML形式データ)
- (1) … 「メニュー選択」の「詳細データ作成(HTMLコードのWEBエディタ利用)」をクリックするとwebエディタの入力フォームが表示されます。
- (2) … 「WEBエディタ」の入力フォームです。フォーム内をクリックして、入力開始できます。
- (3) … 「ファイル名の指定」の入力フォームで、「Idno-連番」+「.拡張子」を追加入力します。
- (4) … 「HTML編集データ作成の実行」クリックでHTML形式の詳細データファイルを作成します。
- (注):WEBエディタによる操作は、「Biz情報ページ作成ツール仕様2」で詳細説明しています。
- (1) … 「メニュー選択」の「詳細データ修正(HTMLコードのWEBエディタ利用)」をクリックすると詳細ファイルの一覧が表示されます。
- (2) … 「【修正選択】 詳細説明ファイル」の欄から変更したい詳細データファイルを選択(ラジオボタン選択)。
- (3) … 「処理の実行」ボタンで、該当する詳細データファイルの読込してWEBエディタによる変更入力ができます。
- (2) … 「指定した詳細データ内容」が、HTML形式でファーム内に表示され、編集入力ができます。
- (3) … 「ファイル名の指定」の入力フォームで、そのまま変更更新したい場合は入力不要で、別のファイルを作成する場合は、「Idno-連番」+「.拡張子」を変更入力します。
- (4) … 「HTML編集データ作成の実行」クリックでHTML形式の詳細データファイルを変更更新又は新規作成します。
- (注):WEBエディタによる操作は、「Biz情報ページ作成ツール仕様2」で詳細説明しています。
Biz情報HTMLページ作成の分類名称ファイルのアップロード
- (1) … 「メニュー選択」の「分類・タイトルファイル更新」をクリックすると分類・タイトルファイルのアップロードフォームが表示されます。
- (2) … 「分類・タイトルファイル」のアップロードフォーム。
- (3) … 格納してある「分類・タイトルファイル」の更新日が表示されます。リンクしているので表示・ダウンロードが可能です。
Biz情報HTMLページ作成の背景カラー指定Noリストの表示
- (1) … 「メニュー選択」の「背景カラー指定Noリスト表示」をクリックするとExcelファイルの「背景カラーCSS指定テーブル」を読み込んでカラー情報リストが表示されます。
- (2) … 「No」の欄は、Excel上の背景カラー指定Noです。
- (3) … 「CSS class指定」の欄は、CSSでの「class属性」の指定名です。
- (4) … 「カラー値」の欄は、RGB16進数のカラー値です。
- (5) … 「カラー表示内容」の欄は、RGB16進数のカラー値をbgcolorで指定した内容を表示したものです。
Biz情報の完成したHTMLページの本番WEBサイトへのアップロード処理
- (1) … 「HTMLページ制作システムでのページ生成」処理後に表示テストなどをしてOKのとき、「メニュー選択」の「作成したHTMLページをWEBサイトへアップロード」をクリックするとHTMLページファイルを本番WEBサイトへアップロードします。
- (2) … 「本番WEBサイトへアップロード」が正常に完了した場合の完了メッセージです。
◇ HTMLページ制作システムでのページ生成方法 ◇
- 「HTMLページ制作システム」を利用して、ExcelのHTMLページ作成データ上で、「mainbody」のテンプレート部分に「macro」のタグ指定で、事前に作成した「マスターデータテーブル」のパーツファイルを指定するのみで、一度ExcelのHTMLページファイル作成すれば変更することなくHTMLページを生成することができます。
HTMLページ作成システムのBiz情報ブログ用Excel入力データ内容
- (1) … 「macro」の指定をして、データ種別ごとにマスターデータテーブルがHTMLページ・パーツに変換されて保管されているフォルダ、ファイル名のパスを表示内容欄で指定。
- (2) … 「ページ生成処理日に変換」:@[date]@のマクロ日付形式を指定。
- (3) … カウンタ数の挿入Javascriptのリンクパラメータで「データ種別」の番号を指定(d=nnの形式)
HTMLページ作成システムのBiz情報ブログの操作方法
- (1) … Biz情報のHTMLページ作成テンプレートを選択。
- (2) … データ種別ごとのExcelのHTMLページ作成データを選択。
- (3) … 「アップロードファイルの送信」のボタンで最終的なHTMLページが生成されます。