吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【node.js】ディレクトリ一覧からHTMLファイルとページリストを生成

2017年11月20日 / category : node-js

前回書いた記事
【node.js】ディレクトリ一覧からフォルダとファイルを一気に生成してくれるやつ
この記事で紹介したnode.jsで作ったツールのアップデート版を今回紹介します。

作るキッカケ
受託制作で、先方にコーディングを確認してもらう際に、対応ページがリストになっている所謂「ページリスト」となるページを作るのが、それなりに時間がかかってしまう。
ページリストのサンプル
私はいつも先方に連絡をするときは、上記のようなページリストを連絡し、そこから確認してもらうようにしています。
上記のサンプルはページ数が少ないですが、案件によっては100ページを超えるものをありますので、そうなってくるとページリストを作るのに時間がかかってしまいます。

そこでページリストをnode.jsで生成してしまおう、となりました。

基本的に、ディレクトリは先方からもらえるはずですので、そのディレクトリを今回のツール用のエクセルに整形してもらい、それを元に自動生成する流れになります。

できること
1. エクセルファイルを元にページリスト(htmlファイル)を生成する
こういうやつ → ページリストのサンプル

2. エクセルファイルのディレクトリ構造通りにhtmlファイルを一式、生成する。

3. エクセルファイルにtitle要素や、meta情報(description, keywords)があれば、自動的に挿入してくれる。

まずは早速データを一式ダウンロードする
node.jsで作ったツールを一式、下記にアップしていますので、ダウンロードしてください。
http://tsudoi.org/nodejs/generatePageList.zip

動作確認
zipファイルを解凍してください。
まず環境として、node.js,npmなどは既にインストール済みということを前提としています。

ターミナルを起動し、パッケージをインストールします。

npm
npm i

パッケージがインストールされます。
node_modulesフォルダが作成され、その中にいくつかフォルダができていれば、問題ありません。
※ここで何かエラーが起こってしまった場合は、動作環境に何かが足りていません。

同階層に、空のsrcフォルダがあることを確認します。
srcフォルダがない場合は、生成してください。このフォルダがないと正しく動作しません。

同階層にあるexe.jsを実行します。

npm
node exe.js

srcフォルダに、pagelist.html、index.html、aaaフォルダとeeeフォルダが生成されれば正しく動作しています。

pagelist.htmlがページリストになります。
こちらを開くと、ページリストのサンプルと同じものが生成されているはずです。
また、このページリストに記載されている「ファイル名」と同じディレクトリが生成されているはずです。

使い方

exe.jsが実行ファイルです。
exe.jsの下記のコード部分が設定箇所です。

exe.js
const EXCEL_FILE_SRC = './sample_0.xls'; //読み込むエクセルファイルの参照先
const SHEETS_NAME = 'ディレクトリ'; //エクセルファイルの対象となるシード名
const DIR = './src'; //htmlファイルの生成先ディレクトリ
const PATH_LIST = [
	{
		'name': 'html_header',
		'path': './template/header.html' //生成されるhtmlの共通ヘッダーのhtmlコード
	},
	{
		'name': 'html_footer',
		'path': './template/footer.html' //生成されるhtmlの共通フッターのhtmlコード
	},
	{
		'name': 'pagelist_header',
		'path': './template/pagelist/header.html' //生成されるページリストのヘッダーのhtmlコード
	},
	{
		'name': 'pagelist_footer',
		'path': './template/pagelist/footer.html' //生成されるページリストのフッターのhtmlコード
	}
];
const LIST_HTML_NAME = DIR + '/pagelist.html'; //生成されるページリストのファイル名
const KEY_DATA = { //生成されるページリストのth要素の文言
	'D1': 'ページ名',
	'NEW_URL': 'ファイル名',
	'OLD_URL': '本番',
	'STATUS': 'ステータス'
};
const IS_CREATE_HTML = true; //htmlファイルを生成するかどうか

上記の部分は基本的に変更可能なプロパティです。
テンプレートとして読み込まれる/template/配下のhtmlファイルに関しては、その案件ごとに変更してください。

IS_CREATE_HTML
こちらに関しては、ページリストだけ生成したい場合は、falseにしてください。

元になるエクセルファイルについて

サンプルとして、sample_0.xlsからsample_3.xlsまでファイルを用意しています。
上記のプロパティ箇所のEXCEL_FILE_SRC定数をそれぞれのサンプルに変更して、実行していただければ、どのようにページリストが生成されるかがわかると思います。
簡単に説明すると、

■sample_0.xls
→ 基本的なページリストです。列D1〜列D5までありますが、削除・追加が可能です。
ただし、「D連番」という命名規則は保持してください。
→ 「ID」「D1」「NEW_URL」の3列は、必須項目です。「OLD_URL」「STATUS」は削除可能。
生成されたページリスト例

■sample_1.xls
→ ページ構造を1つにまとめたパターンです。列DをD1のみとしています。
生成されたページリスト例

■sample_2.xls
→ さらに「OLD_URL」「STATUS」を削除したパターンです。このパターンが必要最小限のページリストになると思います。
生成されたページリスト例

■sample_3.xls
→ 生成するhtmlファイルにtitle要素、meta情報(discription,keywords)を埋め込むパターン。
生成されたページリスト例

以上が、説明になります!
ぜひ活用してみてください!