jquery.ex-make-index.js

このスクリプトはjQuery Extensionになっており、ロードが完了するとjQuery.makeIndex()メソッドが使用可能になる。なお上位Extensionとしてjquery-ui.jsを必要（依存）¹する。

//
// jquery.ex-make-index.js
//
// $Id: make-index.js 143 2015-05-08 09:31:06Z askn $
//
(function ($) {
    $.fn.makeIndex = function (config) {
        var serial = 0;
        var defaults = {
            search: 'section.post-content',
            footnotes: 'div.footnotes',
            foottitle: 'Foot Notes',
        }
        var options = $.extend(defaults, config);
        this.each(function (i) {
            var $this = $(this);
            $(options.search).find("h2, h3, h4, h5, h6").each(function (i) {
                var current = serial++;
                var id = "mi_" + current;
                var $self = $(this);
                var title = $self.text();
                $("<a/>")
                    .attr({name:id})
                    .insertBefore($self);
                $("<li/>")
                    .append($("<a/>")
                        .attr({href:"#"+id})
                        .click(function () {
                            var href = $(this).attr("href").replace(/#/,"");
                            var bottom = $("a[name=" + href + "]").offset().top;
                            $('html,body').animate({scrollTop:bottom}, 1000, "easeOutExpo");
                            return false;
                        }).text(title)
                ).appendTo($this);
            });
        });
        return this.each(function (i) {
            var $this = $(this);
            var current = serial++;
            var id = "mi_" + current;
            $("<a/>")
                .attr({name:id})
                .insertBefore($(options.footnotes));
            $("<li/>")
                .append(
                    $("<a/>")
                        .attr({href:"#"+id})
                        .click(function () {
                            var href = $(this).attr("href").replace(/#/,"");
                            var bottom = $("a[name=" + href + "]").offset().top;
                            $('html,body').animate({scrollTop:bottom}, 1000, "easeOutExpo");
                            return false;
                        }).text(options.foottitle)
                ).appendTo($this);
        });
    };
})(jQuery);

// End of Script

これをindex.jsから次のようにして呼び出す。searchオプションで検索対象のセレクタを指定し、その中で見つかる<h2〜6>のアンカーを作成する。<h1>はポストヘッダなので収集しない。またfootnotesオプションで追加のアンカーをひとつ与えることが出来る。またアンカーはアニメーションスクロールによる画面切り替えでひと呼吸いれ、目で置いやすいようにした。

    $("ul.index").makeIndex({
        search: 'section.post-content',
        footnotes: 'div.footnotes',
        foottitle: '注釈',
    });

こうして作成したアンカーリストは、ポスト中の次の記述の箇所に流し込まれる。

  <ul class="index"></ul>

縦方向のスクロール量が数画面分だったりセクション数が数えるほどならこういう機能は必要ないだろうし、長くなるようならポストを分割したほうが良い場合が多い。だが記事構成上どうしてもひとつのポストに押し込みたい場合はこういうExtensionがあったほうがユーザビリティを補えるだろう。

jquery.ex-mark-table.js

このスクリプトはjQuery Extensionになっていて、ロードすると jQuery.markTable() メソッドが追加される。これはMarkdown形式のtable書式を含むオブジェクトを渡してやるとHTML-Tableにオンデマンドで整形する。

//
// jquery.ex-mark-table.js
//
// $Id: mark-table.js 143 2015-05-08 09:31:06Z askn $
//
(function ($) {
    $.fn.markTable = function (config) {
        var defaults = {
            className: 'mark-table'
        }
        var options = $.extend(defaults, config);
        return this.each( function (i) {
            var title = $(this).attr("title");
            var $exported = $("<table/>");
            var $body = $("<tbody/>");
            var table = [], align = [], header = [];
            var imported = $(this).html().split(/([^\n]*\n)/);
            while (imported.length) {
                var line = imported.shift();
                if (line) {
                    if (line.length == 0) continue;
                    var column = line.match(/([^\|]*\|)/g);
                    if (column && column.length > 0) {
                        column.shift();
                        table.push($.map(column, function (val, index) {
                            return val.replace(/\|$/, "");
                        }));
                    }
                }
            }
            if (title != undefined) {
                $("<caption/>").text(title).appendTo($exported);
            }
            if (table.length && table[0].length && !table[0][0].match(/(^\:-|-\:$)/)) {
                header = table.shift();
            }
            if (table.length && table[0].length && table[0][0].match(/(^\:-|-\:$)/)) {
                align = $.map(table.shift(), function (val, index) {
                    if (val.match(/^\:\-*\:$/)) {
                        return "center";
                    }
                    else if (val.match(/^\-*\:$/)) {
                        return "right";
                    }
                    else {
                        return "left";
                    }
                });
            }
            if (header.length) {
                var $head = $("<tr/>");
                $.each(header, function (key, val) {
                    var $column = $("<th/>").html(val);
                    if (align[key]) {
                        $column.addClass(align[key]);
                    }
                    $head.append($column);
                });
                $("<thead/>").append($head).appendTo($exported);
            }
            if (table.length) {
                while (table.length) {
                    var $line = $("<tr/>");
                    $.each(table.shift(), function (key, val) {
                        var $column = $("<td/>").html(val);
                        if (align[key]) {
                            $column.addClass(align[key]);
                        }
                        $line.append($column);
                    });
                    $line.appendTo($body);
                }
                $body.appendTo($exported);
            }
            $(this).replaceWith($("<div/>").addClass(options.className).append($exported));
        });
    };
})(jQuery);

// End of Script

これをさらに次のようにしてindex.js等から呼び出す。¹

(function pageInit () {
    $('code[class^="language-"]').each(function () {
        var $this = $(this);
        var attr = $this.attr('class').replace(/^language-?/, '');
        var match = attr.match(/title:(.*)/);
        if (match) {
            $this.parent().attr('title', match[1]);
            attr = attr.replace(/title:.*/, '');
        }
        if (attr != null && attr.match(/^table/)) {
            // マークダウンテーブル
            $this.parent().html($this.html()).markTable();
        }
    });
})();

Markdownの方では、ネイティブにMarkdownテーブル書式を書くことが出来ないので、全体をコード書式で括るようにする。このとき三連バッククォート²の直後にtableというキーワードを付与する。更にtaitle:キーワードを足すとここから行末までをテーブルキャプションにすることが出来る。³

  ```table title:テーブルキャプション
  |foo |bar   |baz  |
  |:---|:----:|----:|
  |Left|center|right|
  ```

これを保存するとGhostは次のHTMLコードに変換する。

  

{gfm-js-extract-pre-1}

付与したキーワードにlanguage-前置詞が付いたclass名として埋め込まれるのがミソで、ようはこれをjQueryで検出してクライアントサイドでpreをまるごとtableセットに書き換えてやる。あとはCSSで表示を整形⁴してやればよい。

|foo |bar   |baz  |
|:---|:----:|----:|
|Left|center|right|

これの実際のHTMLはつぎのように展開されている。

  <div class="mark-table">
    <table>
      <caption>テーブルキャプション</caption>
      <thead>
        <tr>
          <th class="left">foo </th>
          <th class="center">bar   </th>
          <th class="right">baz  </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="left">Left</td>
          <td class="center">center</td>
          <td class="right">right</td>
        </tr>
      </tbody>
    </table>
  </div>

今後ネイティブにMarkdownテーブル記法が実装された場合は（本実装との互換性はともかく）三連バッククォートを除去するだけで対応できるはずだ。

excerpt.patch

excerptヘルパーが提供するwordsは英単語数を数え、charactersは文字数を数えているようなのだが、何れも半角文字を含まないベタな日本語に適用すると処理結果が安定しない¹。頑張って修正するにも元がそれでは手間が見合わないので、新たに段落を切り出す機能を追加することにしてみた。これならn回目の空行までが要約文になるという見た目で効果範囲が理解しやすい記述ルールも作れることになる。

このpatchがやってることはtruncateOptionsにparagraphオプションを追加し、その指定数だけ<p>または<h1〜6>タグを持つ地の文を抽出して返すようにしているだけだ。

--- Ghost-0.6.2/core/server/helpers/excerpt.js    Tue Feb 17 18:07:11 2015
+++ GhostBlog/core/server/helpers/excerpt.js    Fri Apr 24 11:26:53 2015
@@ -14,13 +14,24 @@
     var truncateOptions = (options || {}).hash || {},
         excerpt;

-    truncateOptions = _.pick(truncateOptions, ['words', 'characters']);
+    truncateOptions = _.pick(truncateOptions, ['words', 'characters', 'paragraph']);
     _.keys(truncateOptions).map(function (key) {
         truncateOptions[key] = parseInt(truncateOptions[key], 10);
     });

     /*jslint regexp:true */
     excerpt = String(this.html);
+
+    if (truncateOptions.paragraph) {
+        var paragraph = excerpt.match(/(.*?<\/(p|h[1-6])>)/ig);
+        if (paragraph) {
+            excerpt = '';
+            for (var i = 0; i < truncateOptions.paragraph; i++) {
+                if (paragraph.length) excerpt = paragraph.shift();
+            }
+        }
+    }
+
     // Strip inline and bottom footnotes
     excerpt = excerpt.replace(/<a href="#fn.*?rel="footnote">.*?<\/a>/gi, '');
     excerpt = excerpt.replace(/<div class="footnotes"><ol>.*?<\/ol><\/div>/, '');

こうするとthemes/<THEME>/loop.hbs中の{{excerpt}}で抽出パラグラフ数を指定できるようになる。処理的にはまずparagraphで本文を切り出したあとにwords/charactersの処理に入るので、出力結果が不用意に長くなりすぎることもない。

{{excerpt words="50" characters="80" paragraph="1"}}

この実装のミソはGhostが使っているMarkdown実装（Showdown）が処理したセンテンスが<p><pre><hr><h1-6>の何れかで必ず括られていることを利用している。

デーモンプロセス化を助けるツール

Node.jsのデーモン化実装にはいくつかあるが、以下が代表的なものだろう。

• supervisor
• forever
• pm2

いずれもnpm install -gで導入できる。おまけにLinuxでもWindowsでもそれなりに動く。それぞれに特徴がありセールスポイントがあり使い勝手も異なるが、一番リッチなのがpm2で、一番シンプルなのがforeverだろうか。

だがこれらはどういうワケかsuid/sugidをサポートしてないのである。いやNode.js自体にはPOSIX準拠のprocess.setuidとprocess.setgidが一応実装されているのだがそれをこれらで使っているのを見たことがない¹。なので上記のこれらを普通にroot権限で起動するとそのままroot権限プロセスで動き続けることになり、実行権限を落として運用したい場合は別の工夫が必要になる。

手っ取り早くデーモンにしてしまう

WindowsにはWindowsの事情があるから置いておくとして、まずCentOS6ではどうするか。6のinitプロセスにはupstartとsysvinitの2種類²が使われており、特段の事情がなければ使い慣れた後者に従うのが普通だろう。とりあえずroot権限でGhost（に限らずNode.jsで実装した各種サービス）を手っ取り早く動かしてしまうには以下のようにする。なおここではforeverを使用する。また一連の作業はすべてrootユーザで行う。

まずyumでredhat-lsb-coreを導入する。そしてforeverとinitd-foreverをnpmで導入する。

$ sudo -s
# yum install redhat-lsb-core
# npm install forever -g
# npm install initd-forever -g

# initd-forever --help

  Usage: initd-forever [options]

  Options:

    -h, --help             output usage information
    -V, --version          output the version number
    -a, --app [path]       Path to node.js main file
    -c, --command [value]  Command to execute on main file
    -e, --env [value]      Export NODE_ENV with value
    -l, --logfile [path]   Logs the daemon output to LOGFILE
    -n, --name [value]     Application name
    -p, --pidfile [path]   The pid file
    -m, --monit [value]    Generate the monit script file with the listen port number
    -f, --forever [value]  The location of forever

次いでGhostディレクトリに移動してinitd-foreverでinitdスクリプトを生成する。最低限出力ファイル名＝サービス名を決定する-n指定は必要だ。

# cd ~user/ghost
# initd-forever -n ghost 
Script daemon file saved to ghost  

出来上がったファイルに実行権限を付与して/etc/init.dへ移動し、chkconfigで使用可能にしてserviceで起動する。

# chmod +x ghost
# mv ghost /etc/init.d
# chkconfig ghost --add
# chkconfig ghost on
# chkconfig ghost --list
ghost              0:off   1:off   2:on    3:on    4:on    5:on    6:off  
# service ghost start

initd-foreverが生成したファイルは次のようなものだ。通常の用途ではまず修正するところはないだろう。

#!/bin/bash
### BEGIN INIT INFO
# Provides:          /home/user/ghost/core/index
# Required-Start:    $remote_fs $syslog
# Required-Stop:     $remote_fs $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: forever running /home/user/ghost/core/index
# Description:       /home/user/ghost/core/index
### END INIT INFO
#
# initd a node app
# Based on a script posted by https://gist.github.com/jinze at https://gist.github.com/3748766
#

# Source function library.
. /lib/lsb/init-functions

pidFile="/var/run/ghost.pid"  
logFile="/var/run/ghost.log"

command="node"  
nodeApp="/home/user/ghost/core/index"  
foreverApp="forever"

start() {  
    echo "Starting $nodeApp"

    # Notice that we change the PATH because on reboot
    # the PATH does not include the path to node.
    # Launching forever with a full path
    # does not work unless we set the PATH.
    PATH=/usr/local/bin:$PATH
    export NODE_ENV=production
    #PORT=80
    $foreverApp start --pidFile $pidFile -l $logFile -a -d -c "$command" $nodeApp
    RETVAL=$?
}

restart() {  
    echo -n "Restarting $nodeApp"
    $foreverApp restart $nodeApp
    RETVAL=$?
}

stop() {  
    echo -n "Shutting down $nodeApp"
    $foreverApp stop $nodeApp
    RETVAL=$?
}

status() {  
    echo -n "Status $nodeApp"
    $foreverApp list
    RETVAL=$?
}

case "$1" in  
    start)
        start
        ;;
    stop)
        stop
        ;;
    status)
        status
        ;;
    restart)
        restart
        ;;
    *)
        echo "Usage: $0 {start|stop|status|restart}"
        exit 1
        ;;
esac  

もう少し本格的に制御してみる

実行するNode.jsサービスがひとつやふたつでしかもrootオンリーなら上記の作業を必要なだけ繰り返せば良い。だがGhost Blogの場合これはあまりよろしくない。というのも；

• Ghost は記事に対して Draft と Publish の2モードを持つが Staging モードは持っていない。つまり投稿記事を一般公開前にレンダリングチェックすることができない。このために結局本番用とステージング用とでは個別のサービスインスタンスを立ち上げて使い分けたいという需要がある。
• Ghost はマルチユーザ（グループ）対応だが、ユーザ別にテーマを変更できるわけではなく全体でひとつのテーマに固定される。故にテーマやプラグインを開発するユースケースでもユーザ別インスタンスの需要がある。またこの作業は頻繁にインスタンスを再起動する必要が有るため、start/stopを行うのにいちいちrootへsuするのは現実的ではない。
• Ghost は自身のローカルディレクトリ内にアップロードされた画像ファイルと、記事DBファイルを格納³している。当然それらのファイル権限がそのままでは実効rootになってしまうから、非rootの開発ユーザがファイルメンテナンスをするうえで都合が悪い。

これらの諸々を助けるためにforeverdというinitdファイルを作成した。これは /etc/forver.d ディレクトリに配置した設定ファイルの数だけNode.jsのインスタンスを起動する。

NODE_DIR=/home/user/ghost  
NODE_ENV=staging  
NODE_APP=index.js  
NODE_USER=user  
OPTS="--silent"  

NODE_DIR=/home/user/ghost  
NODE_ENV=production  
NODE_APP=index.js  
NODE_USER=user  
OPTS="--silent"  

#!/bin/sh
#
# chkconfig: 2345 88 14
# description: Description of the Service
#
# Below is the source function library, leave it be
. /etc/init.d/functions
 
# result of whereis node_modules
export NODE_PATH=/usr/lib/node_modules  
 
PATH=/sbin:/bin:/usr/sbin:/usr/bin  
 
fordeamon(){  
    for conf in /etc/forever.d/*.conf; do
        name=$(basename $conf .conf)
        if [ -n "$2" ]; then
            if [ "$name" != "$2" ]; then
                continue
            fi
        fi
        source $conf
        : ${NODE_USER:=root}
        : ${NODE_APP:=index.js}
        : ${NODE_DIR:=~}
        if [ $(whoami) != $NODE_USER ]; then
            su -c "$0 $1 $name" $NODE_USER
        else
            echo $"Process id is $name"
            case "$1" in  
                start)
                    NODE_ENV=$NODE_ENV \
                        forever $OPTS \
                        --sourceDir="$NODE_DIR" \
                        --workingDir="$NODE_DIR" \
                        --minUptime=1000 \
                        --spinSleepTime=1000 \
                        --uid=$name \
                        -a \
                        start $NODE_APP
                    ;;
                stop)
                    NODE_ENV=$NODE_ENV \
                        forever stop $name
                    ;;
                restart)
                    NODE_ENV=$NODE_ENV \
                        forever restart $name
                    ;;
                list)
                    NODE_ENV=$NODE_ENV \
                        forever list | grep /$name.log
                    ;;
            esac
        fi
    done
}
 
case "$1" in  
    start)
        echo "Start service forever"
        fordeamon start $2
        ;;
    stop)
        echo "Stop service forever"
        fordeamon stop $2
        ;;
    restart)
        echo "Restart service forever"
        fordeamon restart $2
        ;;
    status)
        fordeamon list $2
        ;;
    list)
        fordeamon list $2
        ;;
    *)
        echo "Usage: $0 {start|stop|restart|status|list} [name]"
        exit 1
        ;;
esac  

これを実行権限を付与してchkconfigでサービス登録すると、サーバ起動時に /etc/forver.d/*.conf に従ってforeverインスタンスを起動するが、その後は一般ユーザ側で普通に（serviceコマンドを通さずに）foreverコマンドでlist/stop/restart⁴することができるようになる。またroot側からもservice foreverd COMMAND NAMEでインスタンス個別にユーザ権限でプロセス操作ができる。

# service foreverd start
# service foreverd restart NAME
# service foreverd stop NAME

$ forever list
$ forever restart NAME
$ forever stop NAME
$ /etc/init.d/foreverd start NAME
$ forever restartall

Switch Userは27行目のsuコマンドが行っているが、これは自分自身（/etc/init.d/foreverd）をsuidして再帰的に呼び出すようにした。正攻法ならsudoコマンドでforeverを呼びたくなるところだが、エスケープを含むコマンドラインの組み立てが煩雑になるのを避けたいのと、CnetOS6の/etc/sudoersのデフォルト設定では非TTYでのsudo実行を禁止しており、そのままでは rcプロセス（当然非TTY）で動作しない⁵という事情による。

なお当然だが well-known port を掴むようなインスタンスはrootユーザで起動しなければ意味が無い。また個々のインスタンスが掴むポート番号を重複しないように調整するのもroot管理者の仕事である。