ダウンロード

マニュアル

サンプルプログラム

　準備

　サンプルの起動

はじめに・・・

ここではWEBデータベースを構築するのに必要なファイルやセットアップ方法を説明します。
以下に本アプリケーションの階層を説明します。

EasyWebDb.zip
    ├─func.js   ・・・メインのJavascriptファイル
    ├─ini.js    ・・・設定用のJavascriptファイル
    ├─style.css ・・・スタイルシート
    ├―sample.csv・・・サンプルのCSVファイル（実際に使用するときにはアップロードしなくてもかまいません）
    ├―readme.txt・・・マニュアルなど
    └―img       ・・・サンプルの画像ファイル（実際に使用するときにはアップロードしなくてもかまいません）
         ├─1.gif
         ├─  ・
         ├─  ・
         ├─  ・
         └─9.gif

簡単に説明しますとfunc.js、ini.js、style.cssをアップロードしてデータベースを表示させるHTMLファイルに多少ソースを記述すれば完成です。

HTMLファイル

データベースを表示するHTMLファイルに以下のソースを追記してください。

１．<head>タグの間に赤字のソースを追記する
　　EasyWebDbのところは正式なパスを記述してください。EasyWebDb.zipを解凍したフォルダをデータベースを表示させるHTMLファイルと同じ階層にアップロードした場合は変更の必要はありません。

<head>
　<meta http-equiv="content-type" content="text/html;charset=shift-JIS">
　<title>簡単Webデータベース</title>
　<script type="text/javascript" src="EasyWebDb/ini.js"></script>
　<script type="text/javascript" src="EasyWebDb/func.js"></script>
　<link rel="stylesheet" type="text/css" href="EasyWebDb/style.css">
</head>

２．<body>タグでonloadイベントにloadDataFileという関数を指定してその関数に渡す引数に取り込むCSVファイル名を指定してください。

<body onload="loadDataFile('EasyWebDb/sample.csv')">

３．<body>タグの間に以下の記述を追記してください。

<div id="result"></div>

以上でHTMLファイルの修正は完了です。

CSVファイル

取り込むファイルはカンマ区切りのCSVファイルのみです。カンマ区切りのCSVファイルはExcelを使用して簡単に作成できます。注意点としてはCSVファイルの文字コードをUTF-8にしないとWEB上で表示させたときに文字化けするという点とデータ内でカンマ区切りする異なる列に分割されてしまう点です。ですのでExcelのカンマ区切りは使用しないでください。カンマ区切りはini.jsを使用して行います。設定方法は後ほど説明します。以下にCSVファイルの作り方からUTF-8にエンコードするまでの手順を記載しましたので参考にしてください。

１．Excelで取り込むデータを作成
データ作成

２．「ファイル」→「名前を付けて保存」→「ファイルの種類」でCSV(カンマ区切り)を選択して保存

３．保存したCSVファイルをメモ帳で開く

４．「ファイル」→「名前を付けて保存」→「ファイルの種類」ですべてのファイル、「文字コード」でUTF-8を選択して保存
メモ帳

パスの設定（ini.js）

ini.jsファイルのPathを設定できます。
データベースを表示するHTMLファイルから本プログラムフォルダまでのパスをセットします。

        例１）HTMLファイルとフォルダが同じ階層の場合
          pubilc_html
             ├─index.html
             └─EasyWebDb

        var Path = "EasyWebDb";

        例２）HTMLファイルとフォルダが異なる階層の場合
          public_html
             ├─index.html
             └─DabaBase
                    └─EasyWebDb

        var Path = "DabaBase/EasyWebDb";

サイズの設定（ini.js）

データベースのテーブルの大きさを設定できます。

TableHeightSize

テーブルの高さを指定します。単位はピクセルです。ご自身のページにあった高さを指定してください。

TableHeightScrollMode

指定した高さで取り込んだCSVデータが表示しきれないとき、縦スクロールバーを表示させるか指定します。

・visible	スクロール非表示でサイズを無視して全て表示
・scroll	入りきらない内容はスクロール表示
・hidden	スクロール非表示ではみ出た部分は非表示
・auto	ブラウザに依存（一般的にはスクロールして見られるようになる）

レイアウトの設定（ini.js）

データベースのテーブルの枠の太さや背景色などを設定できます。

TableBorderSize	テーブルの枠の太さを指定します。太さの基準は通常のHTMLと同じです。
ThColor	ヘッダの背景色を指定します。HTMLで認識できるものならば正常に表示できます。
ThBorderColor	ヘッダ部の罫線の色を指定します。HTMLで認識できるものならば正常に表示できます。
BodyColor	明細行の背景色を指定します。HTMLで認識できるものならば正常に表示できます。
BodyBorderColor	明細部の罫線の色を指定します。HTMLで認識できるものならば正常に表示できます。

ヘッダ文字の設定（ini.js）

ヘッダ部文字の書式を設定できます。

HeaderFontColor	ヘッダのフォント色を指定します。HTMLで認識できるものならば正常に表示できます。
HeaderFontSize	ヘッダのフォントサイズを指定します。指定するサイズはWordやNotePadで指定するサイズと同じ単位です。

明細文字の設定（ini.js）

ヘッダ部文字の書式を設定できます。

BodyFontColor	明細部のフォント色を指定します。HTMLで認識できるものならば正常に表示できます。
BodyFontSize	明細部のフォントサイズを指定します。指定するサイズはWordやNotePadで指定するサイズと同じ単位です。

列幅の設定（ini.js）

各列の幅を設定できます。

ColWidth

１列目から順にカンマで区切って定義してください。設定しない場合は自動的に200が設定されます。
例）ColWidth = "10,20,30,40";

各列の幅は以下のようになります。: １列目：10; ２列目：20; ３列目：30; ４列目：40

セル内配置の設定（ini.js）

各セルの配置を設定できます。

AlignLeftCol	指定した列の横位置を左揃えにします。複数列左揃えにしたい場合はカンマ(,)で区切ってください。例）AlignLeftCol = "1,3"; １列目と３列目が左揃えになります。 ※何も指定がないときは左揃えになります。
AlignCenterCol	指定した列の横位置を中央揃えにします。複数列中央揃えにしたい場合はカンマ(,)で区切ってください。例）AlignCenterCol = "1,3"; １列目と３列目が中央揃えになります。
AlignRightCol	指定した列の横位置を右揃えにします。複数列右揃えにしたい場合はカンマ(,)で区切ってください。例）AlignCenterCol = "1,3"; １列目と３列目が右揃えになります。
ValignTopCol	指定した列の縦位置を上揃えにします。複数列上揃えにしたい場合はカンマ(,)で区切ってください。例）ValignTopCol = "1,3"; １列目と３列目が上揃えになります。
ValignMiddleCol	指定した列の縦位置を中央揃えにします。複数列中央揃えにしたい場合はカンマ(,)で区切ってください。例）ValignMiddleCol = "1,3"; １列目と３列目が中央揃えになります。
ValignBottomCol	指定した列の縦位置を下揃えにします。複数列下揃えにしたい場合はカンマ(,)で区切ってください。例）ValignBottomCol = "1,3"; １列目と３列目が下揃えになります。

画像列の設定（ini.js）

画像列を設定できます。

ImageCol

指定した列に画像を表示させます。
複数列指定したい場合はカンマ(,)で区切ってください。
取り込むデータではPathで指定したディレクトリからのパスとファイル名を記載してください。

取り込むデータで画像列に指定した列ではPathで指定したディレクトリからのパスとファイル名を記載してください。

例）EasyWebDbの下位層のimg
  pubilc_html
     └─EasyWebDb
            └─img

======= ini.js ========
var Path = "EasyWebDb";
=======================

取り込むデータでは以下のようにEasyWebDbからのパスとファイル名を記載する。
img/1.gif

リンクの設定

取込データで表示する値に続けて半角セミコロン(;)で区切りURLを入力するとリンクが設定できます。
例）Google;http://www.google.co.jp ↓ <a href="http://www.google.co.jp">Google</a> というように作られます。実際には以下のようになります。
Google

カンマの設定

数値のカンマ編集を行いたい列番号を指定します。数値以外の値がある項目はカンマ編集されません。 Excelのカンマ編集機能などを使用してデータを作成すると正常にデータが表示されためCSVデータ内でカンマ編集しないでください

CommaFormatNumberCol

数値のカンマ編集を行いたい列番号を指定します。数値以外の値がある項目はカンマ編集されません。
複数列指定したい場合はカンマ(,)で区切ってください。

SEO対策

無料アクセス解析