Nice Page Builderのマニュアル

加筆と修正を行いました。(2017.2.2)

インストール

拡張機能のインストールは VS Code の GUI から簡単に行えます。拡張機能タブを開いて『Nice Page Builder』を検索してください。

settings.json

ワークスペースの設定にソースフォルダのルートや json の読み込み、アウトプットフォルダを指示ます。アウトプットフォルダには RAM ディスクなどの異なるドライブを指定することもできます。

{
    "nicePageBuilder.tasks" : [{
            "htmlRoot" : { "rootPath" : "source", "include" : "", "exclude" : "" },
            "jsonList" : [
                { "path" : "jsons/comment.json", "name" : "comment" },
                { "path" : "jsons/tweet.json",   "name" : "tweet"   }
            ],
            "output"   : "R:/output"
    }]
}

デバッグ

エラー時には簡単なエラーメッセージが表示されます。

詳細なデバッグには開発者ツールを使用します。JavaScript デバッガが使えないようで console.log で頑張ります…

Pageオブジェクト

Pageの読み取り専用プロパティ

NicePageBuilder によって設定されるプロパティ。書き換えないでね。

キーワード説明
FILE_PATH"/game/rpg/about.html"stringソースのルートフォルダからのルート相対パス
FILE_NAME"about.html"string
FOLDER_PATH"/game/rpg"stringソースのルートフォルダからのルート相対パス、ルート直下の場合""(空文字列)
CREATED_AT1234567890numberファイルが作られた日付
MODIFIED_AT1234567890numberファイル自身が修正された日付
UPDATED_AT1234567890numberファイル自身とテンプレートとMIXINの更新日のうち最新のもの
CONTENT"<p>俺のホームページにようこそ!俺です…"string.html ファイルの内容、但しページのプロパティは評価して除去済

同一ドメインの他ファイルへのパスを書くときはソースのルートフォルダからのルート相対パスとします。つまり / で始まります。

Pageのビルトインメソッド

メソッド引数戻り値説明
toRelativePathstring ルート相対パスstring 相対パスthis.FILE_PATH を元に相対パスに変換します
getPagestring ルート相対パスPage インスタンス
getJSONstring 名前objectsettings.json に書いた名前を使って json を取得します

Pageのビルトインプロパティ

ビルトイン機能のためのプロパティです。ページのプロパティに記述します。TEMPLETE についてはミックスインファイル側に書いておくこともできます。

キーワード説明
TEMPLETE"/Templete/templete.html"stringテンプレートファイルへの参照。テンプレートがテンプレートを持つことはできません。
MIXINS["/Mixin/category-game.json", "/Mixin/pageType-item.json"]array.<string>ミックスイン用 json ファイルへの参照。

これ以外のプロパティはサイト制作者がプロジェクト毎に定義します。Page のメソッドもサイト制作者によって <script type="nice-page-builder/js" for="beforeBuild"> スクリプト時に追加できます。

ページのプロパティ、インラインスクリプト、ソースのルートフォルダからのルート相対パスの変換

実行フロー

  1. ページ・テンプレート・ミックスインファイル・json の読み込み
  2. onBeforeWrite 関数の実行
  3. 書き出し

ページのプロパティを記述

<script type="nice-page-builder/object" for="page-option">
{
 TEMPLETE : '/Templetes/templete.html',
 MIXINS   : ['/Mixin/top.json'],
 title    : '俺のサイトにようこそ!'
}
</script>
ページのプロパティの優先順位
  1. page のファイルにあるプロパティ
  2. MIXINS[0] のプロパティ
  3. MIXINS[n] のプロパティ
  4. TEMPLETE のプロパティ

onBeforeWrite スクリプト

ソースの html、 ミックスインファイル、テンプレート、JSON の読み取り終わって、ファイルの書き出しがはじまる前に実行したい js を登録します。

名前説明
PageページクラスPage.prototype.createSocialButton=function(){}などとページ用のメソッドを追加できます
pages全てのページkey:ルート相対パス, value:Page インスタンス で全てのページを保持しています
page または thisページonBeforeWrite スクリプトの書いてあった page が入っています
<script type="nice-page-builder/js" for="beforeBuild">
// 全ページから label を回収
var labels = {}, path, label;
for( path in pages ){
    if( pages[path].label ) labels[ label ] = true;
};
// ラベルリストを書きだすメソッドの追加
Page.prototype.ALL_LABELS = labels;
Page.prototype.createLabelList = function(){
    var html = [], label;
    for( label in this.ALL_LABELS ){
        html.push('<b>' + label + '</b>');
    };
    return html.join(',');
};
</script>

このタイミングで新しいページを追加することもできます。pages の集計結果や json を使って動的にページを追加します。

<script type="nice-page-builder/js" for="beforeBuild">
var comments = this.getJSON( 'bbs' ), comment, bbsPage, key, lastPage;

while( comment = comments.shift() ){
    bbsPage = new Page( '/bbs/' + comment.file_name );
    bbsPage.MIXINS  = ['/Templetes/bbs.js'];
    bbsPage.CONTENT = '<div>' +
        '<span itemprop="author">' + comment.author + '</span> ' +
        '<time datetime="' + (new Date(comment.created_at)).toISOString() + '" itemprop="commentTime">' + comment.created_at + '</time> ' +
    '</div>' +
    '<p itemprop="commentText">' + comment.comment + '</p>';
    for( key in comment ) bbsPage[ key ] = comment[ key ];
};
</script>

{$$ インラインスクリプト $$}

eval() の戻り値が文字列として埋め込まれます。this は page インスタンスです。

<main>{$$ this.CONTENT $$}</main>

($$ ルート相対パスの相対パスへの変換 $$)

内容をパスとして評価しルート相対パスの場合、相対リンクに変換する。page.FOLDER_PATH を元に置き換えます。

またルート相対パスは、ソースフォルダをルートとするルート相対パスを記述します。

<link href="($$ /campany/about.html $$)">
↓
<link href="about.html">

Nice Page Builder では出力結果にルート相対パスを含むことはありません。これはジオシティーズのようにサブディレクトリをルートにしてホームページスペースが提供されている場合に都合が悪いためです。

例 geocities.jp/outcloud/