PowerCMS X ブログ

2021-01-12

jQuery UIのAutocompleteとAccessAnalyticsプラグインで検索ワードのオートコンプリートを実現する

ver.2.42で AccessAnalyticsプラグインでサイト内検索のキーワードを保存してランキング出力できる新機能が追加されました。

この機能とjQuery UIのAutocompleteを組み合わせることで、検索窓へのテキスト入力と連動してサイト内検索されたキーワードをサジェスト(オートコンプリート)させるような機能を簡単に実現できます。実際にこのサイトのドキュメント検索に組み込みを行ってみました。

オートコンプリート機能

※ 実際に動作させるためには予め「<mt:accesstracking>」タグを検索ページのビューに追加して検索キーワードをデータベースに蓄積する必要があります。

検索窓のあるページで、jQuery UIを読み込みます。

<script src="/powercmsx/assets/js/jquery-ui.min.js"></script>
<link href="/powercmsx/assets/css/jquery-ui.min.css" rel="stylesheet">

検索窓のinput要素の idが「query」だとして、オートコンプリートを実現するコードは以下の通りです。検索キーワードの数が多くなった時に動的にその文字列を含むリストを動的に取得するようなカスタマイズもできるかと思います。また、ユーザーが実際に検索したキーワードの代わりに、「<mt:tags>」ブロックでCMSに登録されている「タグ」や、Keywords プラグインに登録しているキーワードを使ってサイト運営者側の意図する検索ワード候補を表示させるのもよいかもしれません。

<form method="GET" action="<mt:var name="current_archive_url">">
<div class="form-inline">
  <label><span class="label sr-only"><mt:trans phrase="Keyword" component="SearchEstraier"> </span><input id="query" type="text" class="form-control" value="<mt:var name="query" escape>" name="query" placeholder="<mt:trans phrase="Keyword" component="SearchEstraier">"></label>
  <label class="custom-control custom-radio ml-3">
    <input class="custom-control-input" type="radio" name="and_or" value="AND" <mt:if name="request.and_or" eq="AND">checked</mt:if>>
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">AND</span>
  </label>
  <label class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" name="and_or" value="OR" <mt:if name="request.and_or" eq="OR">checked</mt:if>>
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">OR</span>
  </label>
  <button type="submit" class="form-control"><mt:trans phrase="Search" component="SearchEstraier"></button>
</div>
<script>
$(function() {
  var wordlist = [
<mt:rankedkeywords include_workspaces="all" glue=",">    "<mt:var name="object_keyword" remove_html escape="js">"
</mt:rankedkeywords>
  ];
  $( "#query" ).autocomplete({
    source: wordlist
  });
});
</script>
</form>

カテゴリー：テンプレート作成Tips | プラグイン | 技術情報

投稿者：Junnama Noda

2020-12-14

高速化のための設定について

動作速度は PowerCMS Xの大きなメリットの一つですが、初期状態では高速化のための一部設定が Offになっています。また、PHP拡張モジュールやWebサーバーの設定も動作速度に影響する部分があります。この記事では PowerCMS Xの高速化のための設定についてご紹介します。

できるだけ最新版のPHPで動かし、PowerCMS Xは常に最新版にアップグレードする

最新版の ver.2.4では、PHP8に対応した他、インデックス・テンプレートの再構築処理の無駄な部分をスキップするようになっています。最新版へのアップグレードをお願いします。尚、このページにある設定を適切に行なった後 PHP8で再構築速度の計測を行った結果、速度は2倍以上になりました。

PHPの flush関数が意図通りに動作するか確認する(動作しない場合は設定する)

PowerCMS Xでは、PHPの「flush」関数を使ってブラウザにレスポンスを返した後にバックグラウンドで各種処理を行います。

Apache Handler の場合 mod_gzip のような Apache 用のサーバーモジュールはそれ自体がバッファリングを行いますので 管理画面においては mod_gzipは無効化してください(最近のサーバーでは気にする必要は稀だと思います)。 また、php-fpmを利用する場合、flushpackets, flushwait の設定に注意してください。

設定の例 : 

<Proxy unix:/run/php-fpm/www.sock|fcgi://localhost>
    ProxySet flushpackets=on flushwait=20
</Proxy>

flush();が意図通りの結果になっているかどうかは、ver.2.2以降の pt-check.php で確認できます。バージョンが ver.2.2未満の場合はアップグレード後に確認ください。

OPCacheを有効化する

OPCacheの有効化は PowerCMS Xの高速化にとって重要な要素です。無効な場合は有効化してください。

XDebugを無効化する

XDebugが有効な場合、テンプレートエンジンのビルドにかかる時間が大幅に遅くなります。開発フェイズなどで必要な場合を除き、XDebugは無効化してください。

環境変数 cache_driver を指定する

環境変数 cache_driver に"File"もしくは"Memcached"を指定してください。1台構成の場合は"File"がより高速です。 最新版の config.json-original.json では、"File"が指定されています。

環境変数 query_cache を指定する

環境変数 query_cache を true に指定すると、データベースへのSQLクエリを File または Memcached にキャッシュするようになり、大幅な高速化が見込めます。

環境変数 rebuild_async を指定する

環境変数 rebuild_async を true に指定すると、ポップアップウィンドウでの再構築を並列処理で行うようになります。 並列処理数は、環境変数 async_max_proc で設定します。初期値は「4」です。サーバーのコア数を参考に設定してください。

カテゴリー：技術情報 | インストール

投稿者：Junnama Noda

2020-10-07

プラグインの設定方法と、タグリファレンスの表示方法

はじめに

この記事では、 PowerCMS X のプラグインの設定方法をご説明します。
また、あらかじめ有効化しておくと便利なプラグインとして、タグリファレンスを表示できる「MTMLReference」をご紹介します。

プラグインは、 CMS の機能追加や拡張ができる機能です。
PowerCMS X のインストール完了時点で利用できる機能の他に、必要に応じて各種機能を追加できます。
プラグインは、個別に有効 / 無効を設定可能です。

PowerCMS X のプラグインの設定方法

  1. PowerCMS X の管理画面の、システムメニューの [ツール] - [プラグイン管理] をクリックします。
    CMS 環境に含まれている、プラグインの一覧が表示されます。

    スクリーンショット: システムメニューの、ツールの「プラグイン管理」をクリックする

  2. プラグイン管理の画面で、対象のプラグインの [プラグインを有効化] をクリックします。
    (または、対象のプラグインのチェックを入れて、 [有効] をクリックします。)
    管理画面に機能が追加されます。 (プラグインに応じて、メニューやボタン、設定項目、テンプレートタグなどが増えます。)

    スクリーンショット: プラグイン管理の画面

  3. モデルの更新をともなうプラグインの場合、画面に [スキーマのアップグレード] のリンクが表示されます。
    スキーマ管理の画面で、対象モデルのチェックを入れて、アップグレードを実行します。
    (システムメニューの、 [ツール] - [スキーマ管理] からも表示可能です。)

※事前に、外部コマンドのインストールや、環境変数の追加が必要なプラグインもございます。
個別のプラグインについて、詳しくは「オンラインドキュメント」をご覧ください。

なお、標準プラグインや有償プラグインの他、お客様独自のプラグインを作成することも可能です。
PowerCMS X のプラグインは、 PHP で記述します。

タグリファレンスについて (MTMLReference プラグイン)

あらかじめ有効化しておくと便利なプラグインとして、タグリファレンスを表示できる「MTMLReference」をご紹介します。
外部コマンドや環境変数を必要としない、シンプルなプラグインで、確認に利用できておすすめです。

PowerCMS X のテンプレートの作成では、テンプレート言語「PAML (PHP Alternative Markup Language)」を使用します。
HTML を拡張し、独自のテンプレートタグを追加した、 PowerCMS X 用の記法です。
(従来の PowerCMS の記法は、直接継承はしていませんが、多くの場合同じ書き方ができます。)

タグリファレンスは、 PowerCMS X のテンプレートタグの参考情報です。
CMS 環境内で使用できる、テンプレートタグの一覧 (タグ、説明、タグ属性) が表示されます。

テンプレートタグは、バージョンアップで随時追加される他、各種プラグインの有効化で追加される場合があります。また、モデルやカラムを作成することで、独自のテンプレートタグを追加することもできます。このため、CMS 環境に応じて種類が増えます。

タグリファレンスの表示方法

  1. PowerCMS X の管理画面の、システムメニューの [ツール] - [プラグイン管理] をクリックします。

    スクリーンショット: システムメニューの、ツールの「プラグイン管理」をクリックする

  2. プラグイン管理の画面で、「MTMLReference」の [プラグインを有効化] をクリックします。
    システムメニューに「タグリファレンス」が追加されます。

    スクリーンショット: プラグイン「MTMLReference」の有効化

  3. システムメニューの [ツール] - [タグリファレンス] をクリックします。
    CMS 環境内で使用できる、テンプレートタグの一覧が表示されます。

    スクリーンショット: システムメニューの、ツールの「タグリファレンス」をクリックする

    スクリーンショット: タグリファレンスの画面

  4. 検索して、情報を絞りこむこともできます。 (例: キーワード「property」の検索結果)

    スクリーンショット: タグリファレンスの検索画面 (キーワード「property」の検索結果)

関連ドキュメント

最後に

スペースの作成やテーマの適用の他に、最初に設定すると良さそうな点として、プラグインの設定方法とタグリファレンスの表示方法をご紹介しました。
この他、管理画面のダッシュボードにサイトマップを表示する「SiteMap」、画面オプションの設定をカスタマイズできる「DisplayOptions」もおすすめです。
実装を開始する際の参考になりましたら幸いです。

アルファサードでは、無償でご利用いただける PowerCMS X 評価版のご提供の他、オンラインでのお打ち合わせ、製品説明のご希望もお受けしております。ご不明の点がございましたら、 PowerCMS X のお問い合わせフォームからお気軽にお問い合わせください。

お問い合わせ

カテゴリー：テンプレート作成Tips | プラグイン | 技術情報

投稿者：kaida

ブログ内検索

アーカイブ

カテゴリー

最近の記事