拡張アプリ reCAPTCHA を公開しました

この記事は「reCAPTCHA V2」の説明となり、古い内容になっています。現在は「reCAPTCHA V3」が利用できますので、 詳しくは、https://github.com/appleple/acms-recaptcha をご覧ください。

今年、2018年3月26日に公開された a-blog cms Ver.2.8ではより外部サービスと連携しやすい仕組みを用意しています。そこで今後いくつかの連携機能をa-blog cmsの本体とは別に拡張アプリという形で配布することにしました。 その第二弾として今回は拡張アプリ「reCAPTCHA」を用意しました。拡張アプリ「reCAPTCHA」を使うとGoogleのreCAPTCHAを使用してボットからの フォームアクセスを防御することが出来るようになります。 これによりお問い合わせフォームなどへのボットからの攻撃を防ぐことができます。

ダウンロード

reCaptcha for a-blog cms

利用するためにはダウンロード後、解凍して extension/plugins に設置してください。

  • extension/plugins/ReCaptcha

インストール

管理ページ > 拡張アプリより「拡張アプリ管理」のページに移動します。そのページより下の図のようにreCAPTCHAをインストールします。

アプリ一覧

API登録とキーの取得

まずreCAPTCHAを導入するために、reCAPTCHA にアクセスして、必要な情報を取得します。

reCAPTCHA V2 を選択し、Domainを登録します。

Register a new site

Site key と Secret key をコピーしてメモしておきます。

Site key と　Secret key の取得

メモする情報

  • Site key
  • Secret key

使い方

設定

管理ページ > reCAPTCHA に移動し、Site key と Secret key を設定します。

設定画面

JavaScript

以下コードを ご利用のテンプレートのhead要素内に読み込んでください。

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
  function validateRecaptcha ( code ) {
    if ( !!code ) {
      var form = document.querySelector(".recaptcha");
      form.removeAttribute('disabled');
    }
  }
</script>

HTML

フォーム送信時（確認画面）の form要素を修正します。ReCaptcha モジュールをformの中に置き、 送信ボタンに recaptcha クラスを追加。また disabled 属性を追加します。

<form action="thanks.html" method="post" enctype="multipart/form-data">
	<!-- BEGIN_MODULE ReCaptcha -->
	<div class="g-recaptcha" data-callback="validateRecaptcha" data-sitekey="{sitekey}"></div>
	<!-- END_MODULE ReCaptcha -->
 
	...
 
	<input type="submit" name="ACMS_POST_Form_Submit" value="送信する" class="recaptcha" disabled />
</form>

確認

クライアントサイドは完成です。フォームの確認画面まで行くと、reCAPTCHAが表示され、送信ボタンが押せないようになっているかと思います。reCAPTCHAで承認が通ると送信ボタンが押せるようになります。

チェック画面

注意

config.server.phpでHOOKを有効にしておく必要があります。

define('HOOK_ENABLE', 1);

拡張アプリの今後の配布について

拡張アプリは今後 applepleのGitHubのページに公開していく予定です。 またGitHubに公開されているアプリは下の拡張アプリ一覧ページからダウンロードできるようになりますのでよかったら訪れてみてください。

拡張アプリ一覧

組み込みJSのイベントハンドラ

イベントハンドラを設定する事で、ある特定のJavaScriptのイベント（クリックイベントなど）が発生した時に処理を挟み込めます。a-blog cmsでは組み込みJSが実行したイベントの後に処理を実行できるようにするため、いくつかのイベントハンドラを用意しています。

acmsReady

組み込みJSの実行が出来る段階で発火するイベント。js/config.js などをカスタマイズする時は、このイベントが発火してから設定を行う。またよく使うイベントなのでエイリアスが用意されている ACMS.Ready(function() {});

ACMS.Ready(function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

// 以下でも同じです。
ACMS.addListener('acmsReady', function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

acmsAdminReady

管理画面用の組み込みJSが実行出来る段階で発火するイベント。

ACMS.addListener("acmsAdminDispatch", function() {
});

acmsDispatch

組み込みJSのディスパッチ処理が終わった時のイベントハンドラ。正確には、ACMS.Dispatch()の処理が終わった後に実行される処理を記述できます。以下の例では、組み込みJSの処理が終わった段階で、bxsliderのCSSを読み込んでいるlinkタグを削除しています。

ACMS.addListener("acmsDispatch", function() {
    $("[href*=bxslider]").remove();
});

acmsAddUnit

エントリーの編集画面にてユニットが追加された時のイベントハンドラ。カスタムユニットでJavaScriptを利用したい場合などに利用します。

ACMS.addListener("acmsAddUnit", function(e) {
   console.log(e.target); // ユニットの dom が入っています。
});

acmsAfterPostInclude

PostIncludeで動的にHTMLが読み込まれた後に実行されるイベントハンドラ。webフォントや、配置を揃えるJSなどの利用が考えられます。

ACMS.addListener("acmsAfterPostInclude",function(){
   //ここに処理が入ります。
});

acmsAddCustomFieldGroup

カスタムフィールドグループで項目が追加された時のイベントハンドラ。 以下の例では、カスタムフィールドグループで項目が追加された時、その項目に対して、DatepickerのJSが動くようにしています。

ACMS.addListener("acmsAddCustomFieldGroup",function(e)　{
    console.log(e.target); // カスタムフィールドグループの dom が入っています。
});

acmsDialogOpened

モジュールID編集用ダイアログや、ブログ編集用ダイアログなどのダイアログウィンドウが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsDialogOpened", function() {

});

acmsAdminSelectTab

管理画面で使われているタブパネルが切り替わったタイミングで発火するイベントです。

ACMS.addListener("acmsAdminSelectTab", function() {

});

acmsValidateFailed

フォームのsubmitボタンを押した時にばりデートに失敗した時に発生するイベントです。

ACMS.addListener("acmsValidateFailed", function() {

});

acmsAdminDelayedContents

ダイアログや、タブなど後から表示されるコンテンツが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsAdminDelayedContents", function() {

});

オリジナルのイベントハンドラを用意する

また、独自にイベントハンドラを用意することも可能です。以下のように、ACMS.dispatchEventでイベントを発行します。

//イベントの発行
ACMS.dispatchEvent("イベントハンドラ名");
ACMS.dispatchEvent("イベントハンドラ名", dom, object);
  • 第１引数（必須）: イベントハンドラ名
  • 第２引数（オプション）: リスナーでイベントが発行されたdomを取得できます。
  • 第３引数（オプション）: 任意のオブジェクトをリスナーで取得できます。
//ハンドラの実行
ACMS.addListener("イベントハンドラ名", function(event) {
    // dispatchEventで渡した dom が取得できます。指定していない場合は、window.document が入っています。
    console.log(event.target); 
    
    // dispatchEventで渡した object が取得できます。
    console.log(event.obj);
});

拡張アプリ Google Sheets を公開しました

今年、2018年3月26日に公開された a-blog cms Ver.2.8ではより外部サービスと連携しやすい仕組みを用意しています。そこで今後いくつかの連携機能をa-blog cmsの本体とは別に拡張アプリという形で配布することにしました。その第3弾として今回は、拡張アプリ「Google Sheets」を用意しました。 a-blog cmsの拡張アプリ「Google Sheets」を使うとお問い合わせフォームなどで送信された内容を任意のGoogle スプレッドシートの最後の行に追記することができます。

ダウンロード

Google Sheets for a-blog cms

下準備

以下の2つのステップで a-blog cms と Google Sheets を連携します。

  1. ClientID JSON の取得
  2. ClientID JSON を CMS側に登録

ClientID JSON の取得

まずは、Google API Console にアクセスしてログインしてください。ログイン後、任意の名前でプロジェクトを作成します。 上の画像のように 1, 2 の手順でプロジェクトを新規作成できます。

左上のセレクトメニューをクリックし、先ほど作成したプロジェクトを選択します。

次は、サブカラムより「ライブラリ」という項目をクリックし、API ライブラリのページに移動します。そのページにて、Google Sheet APIという項目を検索して有効化してください。

最後に「認証情報」をクリックして認証情報の設定画面に移動します。そこで新たにOAuth クライアント ID を作成します。 アプリケーションの種類として、「ウェブアプリケーション」を設定して、「認証済みのリダイレクトURI」には「ドメイン名/bid/（現在使用しているブログのBID）/admin/app_google_sheets_callback/」を設定します。

その後、クライアントIDなどの情報が記述されたJSONファイルをダウンロードしましょう。その後、ダウンロードしたJSONファイルをサーバーにアップロードします。ドキュメントルート以下にアップロードをするとブラウザからアクセスできてしまいますので、ドキュメントルートより上の階層にアップロードするのが望ましいです。

2. ClientID JSON を CMS側に登録

次はCMS側の設定です。まずは、拡張アプリからHook処理をかけるようにconfig.server.phpを1にします。

define('HOOK_ENABLE', 1);

管理画面 > 拡張アプリより、 Google Sheets をインストールします。インストール完了後は、管理画面 > Google Sheets より Google Sheets の管理画面に移動します。

そして先ほど設置したJSONファイルへのパスを記述します。絶対パスで記述しましょう。パスを記述後、設定を保存してから、「認証」ボタンをクリックして認証するようにしましょう。

※ablogcms.ioで行う場合は、ルートディレクトリには設置できないため、「themes」フォルダなどにJSONファイルを設置します。 ablogcms.ioでの記述例： /var/www/vhost/xxxxxx.ablogcms.io/html/themes/xxxxxxxx.json

またa-blog cmsのフォームIDに対して、書き込みしたい Google Sheets のIDを指定する必要があります。 Google スプレッドシートを利用したいフォームID（お問い合わせフォームなど）に移動して、 SpreadsheetIDと SheetID を設定します。 SpreadsheetIDと SheetID は、開いている スプレッドシートのURLから調べることができます。

https://docs.google.com/spreadsheets/d/{SpreadsheetID}/edit#gid={SheetID}

設定が完了すれば、お問い合わせフォームから送信された内容を Google Sheets に自動で追加登録できます。下の図のような実行結果になっていれば成功です。

拡張アプリの今後の配布について

拡張アプリは今後 applepleのGitHubのページに公開していく予定です。 またGitHubに公開されているアプリは下の拡張アプリ一覧ページからダウンロードできるようになりますのでよかったら訪れてみてください。