BlognPlus の記事内で JavaScript を記述できるようにする改造

記事内に JavaScript を書いても、コメント宣言が有効にならない&改行が <br /> に変換されスクリプト中に紛れ込み上手く動作しません。

そこで BlognPlus を改造して記事内に JavaScript を書けるようにします。

改造方法(BlognPlus v2.3.2 の場合)

1. 有効にする HTML タグ

まず[管理画面>初期設定>有効にするHTMLタグ]で「script」と「noscript」を登録して、記事内でこれらのタグを使えるようにします。

2. コメント宣言の有効化

コメント宣言(<!-- -->)は上記の設定画面で登録しても上手く動作しないので、スクリプト自体を改造する必要があります。

common.php 180行目あたりに赤い文字列部分を追加

/* ----- 有効HTMLタグ変換 ----- */
function blogn_permit_html_tag_restore($str) {
    $str = ereg_replace("&", "&amp;", $str);
    $str = ereg_replace("<", "&lt;", $str);
    $str = ereg_replace(">", "&gt;", $str);

    $permit_tag = explode(",", BLOGN_PERMIT_HTML_TAG);
    while (list($key, $val) = each($permit_tag)) {
        $str = preg_replace("/&lt;($val)&gt;/i", "<$val>", $str);
        $str = preg_replace("/&lt;\/($val)&gt;/i", "</$val>", $str);
        $str = preg_replace("/&lt;($val)([ ]+[\w\W]+?)&gt;/i", "<$val\\2>", $str);
    }
    $str = preg_replace("/&lt;(br)&gt;/i", "<br>", $str);
    $str = preg_replace("/&lt;(br)([ ]+[\w\W]+?)&gt;/i", "<br\\2>", $str);
    $str = ereg_replace("&amp;", "&", $str);
    $str = ereg_replace("&lt;!--", "<!--", $str);
    $str = ereg_replace("--&gt;", "-->", $str);
    return $str;
}

3. 改行を入れないようにする処理

BlognPlus の仕様では記事内で改行すると自動的に <br> が挿入されてしまいますが、JavaScript を記述する際にはこの自動改行処理が邪魔です。
そこで行末に「#」を書くとその行には <br> を挿入しないように改造します。

common.php 150行目あたりに赤い文字列部分を追加

/* ----- アイコン整形 ----- */
function blogn_IconStr($str){
    $icon = file(BLOGN_INIDIR."icon.cgi");
    for ( $i = 0; $i < count( $icon ); $i++ ) {
        $icon[$i] = ereg_replace( "\n$", "", $icon[$i] );
        $icon[$i] = ereg_replace( "\r$", "", $icon[$i] );
        list($filename, $icon_key) = explode("<>", $icon[$i]);
        if (strstr($str, $icon_key)){
            if (BLOGN_MOBILE_KEY == 1) {
                if (BLOGN_PNG_KEY == 0) {
                    $icon_file = BLOGN_ICONDIR.substr($filename, 0, strlen($filename) - 3)."gif";
                }else{
                    $icon_file = BLOGN_ICONDIR.substr($filename, 0, strlen($filename) - 3)."png";
                }
            }else{
                $icon_file = BLOGN_ICONDIR.$filename;
            }
            $size = @getimagesize($icon_file);
            $icon_name = preg_replace("/\[:([\w\W]+?):\]/", "\\1", $icon_key);
            $str = str_replace($icon_key, '<img src="'.$icon_file.'" '.$size[3].' alt="'.$icon_name.'">', $str);
        }
    }
    $str = preg_replace("/#<br(\s\/)*>/i", "\n", $str);
    $str = preg_replace("/([^\/])><br(\s\/)*>/i", "\\1>", $str);
    return $str;
}

青色部分は「タグ後の改行処理」の追加ルーチンです。必要であれば追加してください(今回の JavaScript 改造には不必要)。

カスタマイズ

「#」ではなく他の文字で改行を抑制したい場合は、ステップ3で追加した↓の「#」を別の文字に置き換えましょう。

    $str = preg_replace("/#<br(\s\/)*>/i", "\n", $str);

注意点

基本的に「覚えやすい」「タイプしやすい」「誤動作しにくい」文字を選ぶのが良いでしょう。

記事投稿時の JavaScript の書き方

スクリプト全行の行末に「#」と書いてください。
例:Hello, World!!


サイト作成のヒント集に戻る