こんにちは、a-blog cms 開発スタッフの森田です。

今回は、弊社が開発したものではなくユーザーのジェノベーゼ寺崎（@genovese115）さんが開発された拡張アプリをご紹介いたします。

弊社が開発したものではありませんが、他のユーザーの皆様のweb制作にご活用いただけたらと思い、ご紹介させていただきます。
どれも無料でお使いいただけます。

Google アナリティクス4のアクセスランキングを表示する「GA4」

Google アナリティクス4で、アクセスランキングを表示する拡張アプリです。a-blog cms ではデフォルトで Google Analytics ランキングモジュールが提供されていますが、まだGoogle アナリティクス4には対応されていません。
いますぐGoogle アナリティクス4に対応したランキングを表示したい場合は、こちらの拡張アプリのご利用をご検討ください（ただし、使い方が全く同じというわけではないので、その点はご注意ください）。

詳しい使い方はGitHubページをご覧ください。

動作条件

• php7.2.5以上
• 拡張ライブラリ「BC Math 」のインストールが必要

PHPの拡張ライブラリ「BC Math 」について

a-blog cms の基本の動作条件には含まれていませんが、「GA4」拡張アプリを利用するにはPHPの拡張ライブラリ「BC Math」を別途インストールする必要があります（設置されているサーバーにすでにインストールされている場合は作業は不要です）。

Docker環境でa-blog cms が提供しているatsu666/ioncube:7.3とatsu666/acms:8.0をご利用の場合、7月28日以降にリリースしたものが対応しております。 7月27日以前のイメージをご利用の場合はあらためてpullしてご利用ください。

$ docker pull atsu666/acms:8.0

再起動すると、pullしたDockerイメージをご利用いただけます。

$ docker-compose down
$ docker-compose up -d

PHPの拡張ライブラリ「BC Math」をインストールしていない場合、モジュールを貼ったテンプレートをブラウザで表示した際に、下記のようなPHPエラーが表示されます。

PHP Fatal error: Uncaught Error: Call to undefined function Google\Protobuf\Internal\bccomp()

詳細ページのみを表示する

Google アナリティクス4のアクセス数からランキングを表示するモジュールなので、デフォルトのままでは記事だけではなく、トップページも一覧ページも表示されます。もし、アクセス数が多い記事ランキングを表示したい場合は、 モジュールの表示設定にある「含める条件（部分一致）」 の項目に「.html」と記入してください。そうすると、記事のみが表示されます。

「含める条件（部分一致）」 の項目は、ソースコードを見るとpagePathに対して適用される条件となっておりますので、ブログやカテゴリーの指定なども同じ箇所で設定できます。

使ってみた所感

使用できる変数としては、{title}、{path}、{views}の3つのようなのですが、同じドメインであれば{path}をa要素のhref属性に指定すればGA4Rankingモジュールだけでもシンプルな一覧が作成できそうです。 Entry_Summaryと組み合わせれば、サムネイル画像を表示することもでき、より強力になりそうです。

カスタムフィールドを追加する「Penne」

カスタムフィールドを追加する拡張アプリです。普段はカスタムフィールドメーカで作成したソースコードをコピペして実装されている方が多くいらっしゃるかと思いますが、ソースコードを触らなくても管理画面上の作業でカスタムフィールドを作成することができます。

詳しい使い方はGitHubページをご覧ください。

動作確認

以下の環境で動作を確認できました。

• Ver.2.11系、Ver.3.0系
• php5.6系、php8.0系

使ってみた所感

カスタムフィールド作りがとても楽になりそうだと感じました。自動でコードが生成されるため、凝ったUI作成は手動でやると良さそうですが、早めにデータ登録だけ進めたい場合やシンプルなカスタムフィールドを提供したい場合に特に活躍できそうです。

ブログ、カテゴリー、エントリー、モジュール、ユーザーなど、すべてのカスタムフィールドに対応しています。
作成できる入力欄も、テキスト、テキストエリア、インラインエディター、リッチエディター、テーブル、セレクトボックス、チェックボックス、ラジオボタン、メディア、画像、ファイルなど豊富に対応されています。

Penneから作成したカスタムフィールドは、テンプレートに記述したカスタムフィールドとユニットの間に挿入されます。

いいね！ボタンを追加する「Like」

a-blog cmsのサイトにいいね！ボタンを追加できる拡張アプリです。ここではいいねボタンと呼ばれていますが、Likeはカテゴリーを持たせることができ、使い方によってはページ下部に役に立った/役に立たなかったボタンを設置することができます。

詳しい使い方はGitHubページをご覧ください。

公式テーマで使うには

公式テーマで使用するには、defer属性を適用してlike.jsを読み込む必要があります。もしうまく動かない場合は、defer属性を適用してみてくださいね。

<script src="/extension/plugins/Like/assets/like.js" defer></script>

いいね以外のバリエーション

カテゴリー分けができるため、いいねボタン以外にもよくドキュメントページなどで実装されている「役に立った/役に立たなかった」ボタンを実装して記事の満足度調査をすることができます。

押下した後のボタンにはdisabled属性と -votedというclass属性が適用され、自由にスタイルを変更することが可能です。

データの活用方法

acms-likeでアクションがあった値は、eidを元に校正オプションまたはモジュールを使って数値を表示することができます。
たとえば、Entry系のモジュールと組み合わせれば、どのエントリーにどのようなアクションがあったのか一覧表示することができます。
以下はEntry_Summaryと組み合わせて、いいねと役に立った/役に立たなかったボタンの結果を一覧表示した様子です。

ページの品質を改善するために、ちょっとした管理ページをEntry系のモジュールと組み合わせて独自で作ってみてもいいかもしれませんね。

最後に

以上、ユーザーさんが開発されたおすすめ拡張アプリの紹介でした。
ジェノベーゼ寺崎（@genovese115）さん、とても便利そうな拡張アプリを開発していただきありがとうございました。

ジェノベーゼ寺崎さんは、他にもa-blog cmsにまつわる技術情報をご自身のブログやTwitterで発信されておりますので、ぜひご確認くださいね。

もし開発された拡張アプリがありましたら、弊社から他のユーザーの皆様へご紹介させていただきたいと思いますので、お問い合わせフォームからご連絡ください。

a-blog cms は、標準でキーワード検索機能がついており、全エントリーからキーワードで検索することができます。

しかし標準状態では、全角・半角・大文字・小文字などは別の文字と認識され検索に引っかかりにくい場合があります。 ここでは曖昧な検索でヒット率をあげるカスタマイズをご紹介します。

曖昧な検索

下記の違いは、同じワードとして検索できるようになります。

• 全角 / 半角
• 大文字 / 小文字
• ひらがな / カタカナ

カスタマイズ方法

MySQLの照合順序の設定を変更します。 標準では utf8_general_ci が使われていると思いますが、この utf8_general_ci では 大文字 / 小文字 は同じワードとして認識しますが、 全角・半角・ひらがな・カタカナは曖昧な検索をしてくれません。そこで、この照合順序を utf8_unicode_ci に変更します。

対象テーブル・カラム

acms_fulltext の fulltext_value と fulltext_ngram が対象になります。

変更方法

下記はSQL文による変更方法ですが、SQLに詳しくない場合は、phpMyAdminなどのGUIで変更することをおすすめします。

ALTER TABLE acms_fulltext MODIFY COLUMN fulltext_value TEXT COLLATE 'utf8_unicode_ci';

ALTER TABLE acms_fulltext MODIFY COLUMN fulltext_ngram TEXT COLLATE 'utf8_unicode_ci';

こんにちは、a-blog cms 開発スタッフの森田です。

今回は、a-blog cms を設置したサイトにGA4を導入したときに対応したことをご紹介いたします。
この記事では以下の2つについてご紹介します。

• メディアのファイルのダウンロード数を計測する
• YouTube 動画の再生を計測する

テーブルユニットを使うと、ExcelやGoogleスプレッドシートのように表組の中にデータを入力することができます。Ver. 2.7.0以降で使用できます。

編集設定

テーブルユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードからテーブルを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。

テーブルユニットの利用方法

まず、ユニットの追加でテーブルユニットを選択します。 選択した時点で、入力部分がテーブルユニット専用のツール等を備えた画面に切り替わります。 セル内にデータを入力し、ツールアイコンを利用することで、様々な装飾ができます。

行および列の追加・削除

各行および列の左端・上端には三角マークがあり、これをクリックすることで行および列の追加と削除ができます。

セルの装飾項目を増やす方法

下の画像のようにセルの装飾項目はデフォルトで「折り返し無し」「太字」「上寄せ」「中央寄せ」「下寄せ」ですがこの装飾項目はJavaScriptを使うことで自分で増やすことが可能です。

ACMS.Ready(function(){
  ACMS.Config.aTableSelector.push({
    label: "グレーの背景",
    value: "bg_grey"
  });
});

上記のJavaScriptの場合、「背景ブルー」という項目がオプションとして追加され、その項目が選ばれたセルに対しては「bg_blue」というクラスが付与されます。

テーブルの装飾項目を増やす方法

またVer.2.8より、テーブル要素自体に対してもクラスを付与することができるようになりました。デフォルトでは「スクロールするテーブル」という項目が一つだけ選択でき、その際にはそのテーブルに対して、「.acms-table-scrollable」というクラスが付与されます。

ACMS.Ready(function(){  
 ACMS.Config.aTableOption.push({
    label: '角丸のテーブル', 
    value: 'rounded-table'
  });
});