拡張アプリ 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に公開されているアプリは下の拡張アプリ一覧ページからダウンロードできるようになりますのでよかったら訪れてみてください。


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


今年、2018年3月26日に公開された a-blog cms Ver.2.8ではより外部サービスと連携しやすい仕組みを用意しています。そこで今後いくつかの連携機能をa-blog cmsの本体とは別に拡張アプリという形で配布することにしました。 その第4弾として今回は 拡張アプリ「ChatWork」を用意しました。拡張アプリ「ChatWork」を使うとお問い合わせフォームなどから送信された内容を ChatWork に通知することができます。たとえばフォームから「資料請求」などがあれば「資料請求がありました。」などの簡単なメッセージや、メールの本文をそのまま、好きなルームに通知できます。

ダウンロード

ダウンロード

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

使い方

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

  1. ChatWorkへの登録
  2. API トークン の取得
  3. a-blog cmsの拡張アプリ ChatWork に APIトークン を登録

1. ChatWork への登録

ChatWork のアカウントをお持ちでない方は下記のURLにてアカウントを作成しましょう。 https://www.chatwork.com/

2. API トークン の取得

https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php

3. a-blog cmsの拡張アプリ ChatWork に API トークンを登録

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



インストール完了後は、管理ページ > フォーム > 連携したいフォームID より ChatWork の管理ページに移動します。その後、「APIトークン」という項目がありますので、その項目に先ほど覚えておいた APIトークン を入力します。 また「ルームID」には、下記のURLの*****の部分を入力します。

https://www.chatwork.com/#!rid*****



これでa-blog cmsと ChatWork を連携させる準備は整いました。あとは先ほどの設定がされたフォーム「お問い合わせフォームなど」に移動し普段通り情報を入力します。



お問い合わせ完了後、以下のようなメッセージがChatWorkに通知されていれば成功です。



注意

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

define('HOOK_ENABLE', 1);

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

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


拡張アプリ一覧ページ

エントリーのユニット設定

[ユニット設定]画面では、エントリー作成画面で入力するユニットの設定ができます。この設定により、新規にエントリーを作成する時のユニットの設定をあらかじめ決めておいたり、ユニットを追加する時のユニットの設定を決めておくことができます。入力する内容の形式が決まっている場合にユニット設定をしておけば、毎回ユニットの種類を自分で設定しなくてもよくなります。


[ユニット設定]は、管理者のみ設定可能です。編集者/投稿者/読者には[コンフィグ管理]画面は表示されません。

[ユニット設定]画面を表示するには、管理ページ > コンフィグ > ユニット設定 へ進みます。


管理ページ > コンフィグ > ユニット設定


[ユニット設定]画面


ユニットを追加・削除する

ユニット編集画面では、エントリー作成時に使用する「テキスト」「画像」などの各ユニットボタンをクリックした時に表示される情報の入力枠を編集できます。これらは 管理ページ > コンフィグ > 編集設定 の「ユニット追加ボタン」で追加したものが表示され、編集できます。以下、各ユニットに共通の追加・削除について説明します。

(1)ユニットを追加するには、[テキスト][画像]などのボタンをクリックします。削除するには、各ユニット右側の[削除]ボタンをクリックします。

(2)[保存]ボタンをクリックします。



エントリー新規作成時のユニットの初期設定をする

エントリーを新規に作成する時の、入力画面のユニットの設定をおこないます。

(1)[ユニット設定]画面の[新規記事作成]項目にユニットを追加・削除し、初期設定として表示させたいユニットを設定します。それぞれのユニットの詳細設定も可能です。ここでは、例として以下の図のように設定しました。



(2)[保存]ボタンをクリックします。

(3)[エントリー作成]ボタンをクリックします。

(4)エントリー作成画面で、先ほど[ユニット設定]画面で設定したユニットが初期状態として表示されるようになります。


エントリー作成画面の初期状態

エントリー作成画面の初期状態


ユニット新規追加時の初期設定をする

エントリー作成画面で、新しくユニットを追加する時の初期設定も可能です。

(1)[ユニット設定]画面の各ユニット(テキスト、画像など)で入力枠の追加・削除などの設定をおこない、[保存]ボタンをクリックします。

(2)エントリー作成画面の[追加]で各ボタンをクリックすると、手順(1)で設定したユニットが初期状態として表示されるようになります。