先日「Ver. 2.11.25からのテンプレートの仕様変更について」という記事を掲載しましたが、中にはallow_pathを記述しなくても読者以下の権限で正常に使用できるとご報告をいただきました。

弊社でもある条件下において該当の現象を確認しましたが、弊社としては変わらずconfig.system.yamlのallow_pathを記述してテンプレートを許可することを推奨します。この記事では、その件について詳しく説明します。

現象の詳細

config.system.yamlのallow_pathの項目からテンプレートを許可しなくてもポストインクルードおよび検索機能などのPOST_2GETを使用している機能にてtpl指定が利用可能な状態になっているケースが確認されています。
ただし、中には適切に記述をしないとPOST_2GETの機能を利用できないケースもありますので、弊社としては引き続きallow_pathを指定していただくことを推奨しています。

起こっている現象を詳しく説明すると、tplをテンプレート経由で記述していても、実際のプログラム側に送られているRequest URLではtpl指定がされている場合とそうでない場合があります。
tpl指定が指定されているとステータスコードは400エラーになり、tpl指定がなければ基本的にはステータスコードが200になり、正常に表示されます。

挙動がバラバラになってしまうことを防ぐため、統一するためにallow_pathの指定を推奨しております。

ステータスコードが200の条件

BIDとキーワード指定のみ

この時はRequest URLが http://example.com/include/entry/summary-custom.html/keyword/テスト/ となります。

子ブログのBIDを指定して検索したとき

この時はRequest URLが http://example.com/test/include/entry/summary-custom.html となります。

子ブログのBIDとキーワードを指定して検索したとき

この時はRequest URLが http://example.com/test/include/entry/summary-custom.html/keyword/テスト/ となります。

フィールド検索

この時はRequest URLが http://example.com/include/entry/summary-custom.html/field/station/あの駅/ となります。

ステータスコードが400の条件

400になる時、起こっている現象は2種類あります。

その１：REQUEST URLにtplを渡している

ブログのトップページでEIDを指定して検索したとき

この時はRequest URLが http://example.com/entry-2.html/tpl/include/entry/summary-custom.html となります。
tplがURLに入っているので、404エラーで表示されません。

その２：Request URLにtplを渡していないけど、パスが成立していない時

CIDを指定していて、「/〇〇（カテゴリーコード）/include/entry/summary-custom.html」というテンプレートがないとき

この時はRequest URLが http://example.com/〇〇（カテゴリーコード）/include/entry/summary-custom.html となります。

カテゴリーコードをURLに挟んでいるので、テンプレート（include/entry/summary-custom.html）をカテゴリーコードと同じ名前のディレクトリに設置する必要があります。
もし、テーマディレクトリ直下に該当のテンプレートが設置されていた場合は、 http://example.com/〇〇（カテゴリーコード）/include/entry/summary-custom.html に該当するテンプレートがなく、400エラーが発生します。

REQUEST URL の調べ方

開発者ツールから調べます。ここではGoogle Chromeを使用しています。

開発者ツールのNetworkタブをクリックしてください。

ポストインクルードを発火させると、一覧にポストインクルードで使用しているテンプレート名が表示されている（キーワード検索なら、指定したキーワードが表示される）のでクリックします。

Request URL を確認します。今回の例ではtplが使われておらず、カテゴリーコードも指定されていないので、読者以下の場合でも特にallow_pathでテンプレートを指定しなくても正常にポストインクルードが動作します。

まとめ

基本的には弊社としては allow_path を指定し、該当のテンプレートのみ許可することを推奨しています。

allow_pathの指定の仕方については、くわしくは「Ver. 2.11.25からのテンプレートの仕様変更について」の記事をご覧ください。

Ver. 2.8.76 をダウンロード

Ver.2.12β版に同梱しているwebpack環境でシンタックスハイライターを利用する方法

この記事では、現在開発中のVer.2.12のdevelopテーマとUTSUWAテーマで配布しているwebpackの開発環境について解説します。

概要

公式テーマで配布しているwebpackの開発環境についてシンタックスハイライターが読者以下の権限またはログアウト時に読み込まれないという現象が報告されました。この記事ではログアウト時にもシンタックスハイライターを有効化するいくつかの方法をご紹介します。
siteテーマ、beginnerテーマ、bootstrapテーマ、blogテーマを使用されている方には同じ現象は該当しないのでご安心ください。

webpackで行なっていること

以前からパフォーマンス速度の改善をする際に、組み込みJSで使用しているacms.jsの容量が問題となっておりました。このwebpackの開発環境を使うことにより、Webサイトのパフォーマンス速度を改善するため、最小限の組み込みJSを読み込むことができます。
具体的には、読者権限以下またはログアウト状態ではタッチモジュールを使ってacms.jsを読み込まないようにし、組み込みJSで使用している各プラグインをnpm経由でwebpackを使って読み込んで再現しています。

この記事で説明すること

npmに公開されていないライブラリは一部再現できないものがあり、その1つが今回上げているシンタックスハイライターで利用しているgoogle-code-prettifyのライブラリです。こちらは2013年ごろに開発がストップしており、npmではライブラリが公開されていないため、webpackで使用することが困難になります。
この記事では、webpack以外でgoogle-code-prettifyを使用する方法と、webpackで別のnpmパッケージを利用する方法をご紹介します。

webpack以外でシンタックスハイライターを使用する方法

タッチモジュールを外す
CDNで使用する

タッチモジュールを外す

この方法が一番簡単な方法です。developテーマとUTSUWAテーマでは読者以下の権限（ログアウトを含む）にて、acms.jsが読み込まれていないことが原因となっています。 /include/head/js.htmlを開き、該当するタッチモジュールを削除すれば、他のテーマと同様に使用することができます。

CDNで使用する

次に簡単な方法です。acms.jsを読み込みたくないけど、google-code-prettify（シンタックスハイライター）を使いたい場合におすすめです。Githubに記載されているCDNをhead要素内で読み込みましょう。

googlearchive/code-prettify: GitHub

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

webpackで別のnpmパッケージを利用する方法

この機会にwebpackを試したい方や、他のライブラリに挑戦したい方におすすめの方法です。a-blog cms 以外に基本的なJavaScriptの知識が必要となります。

今回は実際に highlight.js を使ってご紹介します。2021年11月現在、このデベロッパーサイトでも使っているシンタックスハイライターです。

highlight.js

Ver.2.12β版で配布しているUTSUWAテーマをもとに解説します。

npmパッケージをインストールする

まずは、/themes/utsuwa/のディレクトリまで移動し、highlight.jsのnpmパッケージをインストールします。

$ npm install highlight.js --save

インストールしたら、次はインストールしたパッケージをwebpackから読み込みます。

インストールしたパッケージをwebpackから読み込む

/themes/utsuwa/src/js/index.jsをエディタで開きます。ファイルの8行目付近で、highlight.jsを読み込みます。

import hljs from 'highlight.js';

使用するスタイルを指定する

先程のhighlight.jsのサイトで、スタイルがいくつかプレビューできるので、好きなテーマを探してください。

そして、14行目付近にテーマ名と同じcssファイルを読み込みます。

今回は、agateというテーマを指定します。

import 'highlight.js/styles/agate.css';

発火する処理を書く

UTSUWAテーマでは、82行目付近にdomContentLoadedが既に書かれています。このdomContentLoadedの中に発火するための処理を書きます。

domContentLoaded(() => {

  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });

// ... 省略 ... 
});

これで、ログアウト状態でもシンタックスハイライターが動くようになりました。ただ、ログイン状態の時にgoogle-code-prettifyとhighlight.jsが2つ動いてしまっているので、google-code-prettifyを無効化します。

google-code-prettifyを無効化する

UTSUWAテーマでは既に33行目付近に、acms.js に関するif文が記述されています。このif文のelseの中に、google-code-prettifyを無効化する記述をします。以下のように書きます。

if (window.ACMS === undefined) { // acms.jsが読み込まれていない時
// ... 省略 ....
} else { //acms.jsが読み込まれている時
  edit();
  ACMS.Ready(() => {
     ACMS.Config.googleCodePrettifyClass = 'prettyprinted';
  });
}

これで、ログインしている時もhighligh.jsが動くようになったはずです。一度お試しください。

まとめ

今回ご紹介したように、acms.jsを使う方法やCDN経由で従来のライブラリを使用する方法があり、webpackの開発環境は無理にお使いいただくものではありません。これからもa-blog cmsを使ったWeb制作で最低限必要な知識はa-blog cms、HTML、CSSのみです。
Web制作に関する技術が増え、技術選択に迷う時代ではありますが、弊社としては開発効率の向上やパフォーマンス改善を行なう際のベースとして、みなさまがより良いお仕事ができるように開発環境を提供できたらと考えております。

弊社としては時にはCMSの垣根を超えて、みなさまの制作に役立つものを提供したいと考えております。
フィードバックなどありましたら、お気軽にお問い合わせフォーム、TwitterやFacebookなどのSNSからお気軽にお知らせください。

Ver. 2.11.50 をダウンロード

【Ver.2.11.25〜】POST_2GET利用の際にallow_pathに記述しなくてもtplが有効になる現象について