モジュールIDの日時指定で機能修正を行いました

モジュールIDの引数設定で、URLコンテキストを使用するチェックと、固定値の設定の両方使用した場合に、開始日時（start）、終了日時（end）に不具合がありました。

通常、URLコンテキストを使用するチェックと、固定値を設定した場合、URLコンテキストが優先されます。

Google SpreadSheet との連携機能

a-blog cmsの拡張アプリ「SpreadSheet」を使うとお問い合わせフォームなどで送信された内容を任意のGoogle SpreadSheetの最後の行に追記することができます。

カスタマイズ

今回のハンズオンではsimple2017のお問い合わせフォームで送信されたいくつかの項目を Google SpreadSheetに追記してみます。

下準備

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

ClientID JSON の取得
ClientID JSON を CMS側に登録

1. ClientID JSON の取得

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

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

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

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

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

2. ClientID JSON を CMS側に登録

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

define('HOOK_ENABLE', 1);

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

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

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

またこの管理ページ内でa-blog cmsのFormIDに対して書き込みしたいSpreadsheetのIDを指定する必要があります。 Spreadsheet IDとSheet IDは、開いているSpreadSheetのURLから調べることができます。

https://docs.google.com/spreadsheets/d/{Spreadsheet ID}/edit#gid={Sheet ID}

課題

simple2017のお問い合わせフォームから送信された内容をGoogle SpreadSheetに追加登録してみましょう。下の図のような実行結果になっていれば成功です。

IE8で画像ユニットの表示に問題が発見されました

IE8で画像ユニットに問題が発見されました。

IE8の画像ユニットである設定になると、画像幅がおかしくなり問題が発見されています。

不具合を起こす条件

コンフィグ > 編集設定のイメージサイズ選択肢のパーセント指定をしていない
画像ユニットが左か右にフロートされている
キャプションが設定されている

上記３つの条件が全て当てはまる場合、以下の画像のように画像の幅がおかしくなります。

フォームの基本

a-blog cms では標準でフォーム機能も搭載しております。お問い合わせにフォームなどで利用されています。機能としては、以下のようなものが上げられます。

サイトのどこにでも設置が可能
フォームの入力内容は管理者と一般にメールが送られてきます
入力項目のチェック機能（必須入力やメールアドレスが一致しているか、数字判定など）
入力項目のコンバート機能（大文字を小文字に変換など）
複数ステップのフォームを作る事ができる
フォームの送信内容を蓄積してCSVのダウンロードする

フォームモジュール

フォームについても、モジュールとして提供しております。フォームの基本ステップとしては、新規・修正・確認・完了の4つのステップに分かれており、このステップを増やす事で複数ステップのフォームを用意できる事になります。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step-->
<!-- 新規 -->
<!--#include file="/include/form/input.html"-->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!--#include file="/include/form/update.html"-->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!--#include file="/include/form/confirm.html"-->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!--#include file="/include/form/result.html"-->
<!-- END step#result -->

<!-- END_MODULE Form -->

フォームの基本

入力フォームは、基本的にカスタムフィールドと同じ書き方で増やしていく事ができます。（HTMLのみで追加可能）

<input type="text" name="address" value="" />
<input type="hidden" name="field[]" value="address" />

<input type="hidden" name="address:validator#required" /> <!-- 必須項目 -->

フォームの管理ページ

フォーム > フォーム管理の[変更]ボタンを押すとフォームを管理するページに移動します。こちらに、フォームIDを設定し、そのフォームIDをテンプレート上に設定する事で、データベース上にフォームの入力情報を保存し、CSVダウンロードを可能にしています。また、メールのテンプレートの設定や、From, To等の設定も管理ページ上で設定します。