問い合わせフォームの入力値をGoogleスプレッドシートに自動で書き込む

問い合わせフォームでCSV書き出しとかありますけど、CSV書き出しだと、手間がかかるのが正直な感想です。

なんなら、最初からGoogleスプレッドシートに書き込めば楽だよね～～

ということでやってみましょう。

サーバーチェック

ご使用中のサーバーで「非公開ディレクトリ」があることを確認しましょう。

いわゆる、スタッフエリアが存在するかを確認します。

ちなみに、MixHostは存在しています。

非公開ディレクトリの確認方法

確認する方法はたくさんありますが、一番簡単だと思う方法を記載します。

サーバーにFileZillaやFFFTPなどのFTPソフトを使って、アクセスします。

レンタルサーバー会社によって、ディレクトリ（フォルダ）名が違います。

もし、非公開ディレクトリが存在しない場合は、できません！！！

というか、一応できるのですが、やらない方が良いと思います。

Macでいうターミナル　Windows10でいうプロンプトのような設定画面にあたるサーバーの設定画面を表示

サーバーにSSHで接続してもいいですし、サーバーのコントロールパネルから設定画面を開くこともできます（サーバーによる）。

cPanelのレンタルサーバーなら、ココ

詳細＞Terminal

から、ターミナル（Terminal）を起動できます。

サーバーにcomposerがインストールされているか確認

サーバーのターミナルを立ち上げます。（↑参照）

ターミナルが起動したら「composer」と入力してenterキーを押します。

$ composer

下記のように表示されたら、composerがサーバーにインストールされています。

MixHostはインストール済みでした。ヘムテルはインストールする必要があるみたいです。

composerをインストール

まずはホームディレクトリに移動します。

$ cd

php コマンドが使えるようにするためにパスを通します。

phpのバージョンによってコマンドが違いますので、ご注意ください。

$ echo "export PATH=\$PATH:/usr/local/php7.1/bin" >> ~/.bashrc

$ source ~/.bashrc

phpのバージョンを表示させます。

$ php -v

続いて Composer を公式サイトを見てインストールします。

Command-line installationというところを見て、インストールしましょう。

もしかしたら、パスを通す必要があるかもしれません。

$ echo "export PATH=\$PATH:~/bin/composer" >> ~/.bashrc
$ source ~/.bashrc

インストールされたか、確認します。

$ composer

ライブラリをサーバーに入れ込む

ターミナルに、下記のコマンドを入力して、Google APIを使うためのライブラリをインストールします。

Google APIs Client Library for PHPというライブラリです。

コマンドは、最新のものをgithubで確認してください！

$ composer require google/apiclient:^2.7

Composerでインストールが完了すると、下記の３つが作成されます。

1. 【vendor】フォルダ
2. 【composer.json】ファイル
3. 【composer.lock】ファイル

FTPソフトで確認しましょう。

非公開のところにあるので、公開ディレクトリよりも上の階層を探してください。

Composerを使わないで、Google APIs Client Library for PHPを入れ込む

詳しい方法は、githubに掲載されています。

簡単にいうと、下記の２ステップです。

1. githubから、zipファイルをダウンロード
2. 解凍して、サーバーにアップロード

githubからzipをダウンロードするとき、phpのバージョンごとに分かれています。

該当するものを選択して、ダウンロードするようにしましょう。

また、解凍したフォルダごと全部アップロードして、必要に応じて名前を変更しましょう。

Google Cloud Platform で Projectを作成

Google Cloud Platformにアクセス

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure ...

console.cloud.google.com

プロジェクト作成

Google Cloud Platformと記載されている部分の右隣をクリック。

注意：今回は既にプロジェクトを作成済みの画面です。また、下記は古いバージョンですので、現在と少し違います。

「新しいプロジェクト」をクリック

プロジェクト名（任意の文字）を入力。

作成をクリック。

 Google Sheet API を有効化

APIとサービス　＞　ライブラリ　を選択。

APIとサービスを検索の部分に　Sheets　と入力。

Google Sheets API　を選択

有効にする　を選択。

既に有効になっている場合は「管理」と表示されます。

認証情報を取得

APIとサービス　＞　認証情報　を選択。

認証情報を作成　を選択し、サービス　アカウント　キー　を選択。

こちらの画面かもしれません。

サービスアカウント名を入力（任意の文字）。

自動的にサービスアカウントIDが設定されます。

サービスアカウントの説明も入れておきましょう。

終了したら「作成」をクリック。

サービス アカウントの権限（オプション）は空欄のまま「続行」をクリック。

ココ画面キャプチャ忘れました。。。

ユーザーにこのサービス アカウントへのアクセス権を付与（オプション）も空欄のまま「完了」をクリック。

認証情報の画面で、「サービスアカウント」の編集用アイコンをクリック。

キーの部分にある「鍵を追加」　＞　「新しい鍵を作成」　で新規作成　＞　JSON　とすると、作成できます。

キータイプは「JSON」を選びます。

自動的にキーが作成され、ダウンロードされます。

ダウンロードされたjsonファイルは、サーバーにFTPソフトを使ってアップロードします。

アップロードする先は、【vendor】ディレクトリと同じ階層の非公開ディレクトリに【key】というディレクトリを作成して、【key】ディレクトリの中にアップロードしましょう。

Google スプレッドシートを共有する

Google Cloud Platform上で、「IAMと管理」＞「サービスアカウント」を選択します。

先ほど、サービスアカウントを作成したので、「メールアドレス」が表示されています。

書き込みたいGoogleスプレッドシートの共有設定で、この「メールアドレス」を「編集者」として設定します。

Googleスプレッドシート上の共有設定（サービスアカウントを追加）

共有したいGoogleスプレッドシートの左上にある「共有」ボタンを押します。

サービスアカウントで表示されたメールアドレスをコピペします。

自動的に、下記の画面に切り替わります。

「編集者」になっていること「通知のチェックボックスがチェックされていない」ことを確認して、「共有」をクリック。

これで、共有設定が終了しました。

サンプルPHP

WordPressで固定ページに問い合わせフォームを作って、自動送信メールを送信させる手前でGoogleスプレッドシートにデータを書き込む部分のPHPサンプルです。

WordPressでなくても、PHPが動くサーバーなら大丈夫です。

というか、WordPressの場合は、サンプルファイルを多少変更する必要があります。

<?php
// Googleスプレッドシート送信

// タイムゾーン合わせ WordPressでは使いません.
date_default_timezone_set( 'Asia/Tokyo' );


// composerでインストールしたライブラリを読み込む
// ご自身の場所に合わせてください.
require_once __DIR__ . '/../../../../../../vendor/autoload.php';

// サービスアカウント認証で作成したjsonファイル.
// ご自身の場所に合わせてください.
$credentials_path = __DIR__ . '/../../../../../../key/＊＊＊＊＊＊.json';

// Googleクライアントインスタンスを作成.
$client = new Google_Client();
// スコープを以下の内容でセット.
$client -> setScopes ( [
  // スプレッドシート.
  \Google_Service_Sheets::SPREADSHEETS,
  // ドライブ.
  \Google_Service_Sheets::DRIVE,
  ]
);
// サービスキーをセット.
$client->setAuthConfig( $credentials_path );

// 書き込み.
try {
  // 書き込むデータ.
  // ご自身のものに合わせてください.
  // 下記の例では問い合わせフォームからのデータをサニタイズ処理したものを配列にいれています.

  // テスト用データ.
  $clean = array();
  $clean = array(
    'name' => '名前',
    'name_kana' => 'なまえ',
    'tel' => '000',
    'tel2' => '000',
    'tel3' => '000',
    'mail' => 'info@sample.com',
    'inquiry' => 'テスト'
  );

  $values = array(
    array(
      date( 'Y-m-d H:i' ),
      // wordpressではwp_dateを使う.
      // wp_date( 'Y-m-d H:i' ),
      $clean['name'],
      $clean['name_kana'],
      $clean['tel'] . '-' . $clean['tel2'] . '-' . $clean['tel3'],
      $clean['mail'],
      $clean['inquiry'],
    ),
  );
  
  // シートを操作するインスタンス.
  $spreadsheet_service = new \Google_Service_Sheets( $client );

  // 対象のスプレッドシートのIDを指定.
  // 対象のスプレッドシートのURLから探す.
  // https://docs.google.com/spreadsheets/d/●●●●●/edit#gid=▲▲▲▲▲
  // スプレッドシートのIDは上のURLの場合は/d/以降、●●●●●にあたる箇所です.
  $spreadsheet_id = '●●●●●';
  
  // どのシートのどのセルから書き込むか？
  // シート名 data A2セルから書き込む場合.
  $range = 'data!A2';

  $body = new \Google_Service_Sheets_ValueRange( array( 'values' => $values ) );

  // 入力方法 USER_ENTERED：計算式や日付は自動的に解釈 RAW：そのまま.
  $params = array( 'valueInputOption' => 'RAW' );

  $result = $spreadsheet_service->spreadsheets_values->append( $spreadsheet_id, $range, $body, $params );

  // 上手くいったときのカウント表示
  echo $updated_cell_count = $result->getUpdates()->getUpdatedCells();

} catch ( \Exception $e ) {
  // エラー処理.
  return;
}

適当な名前をつけて、サーバーにアップして、アクセスすれば、Googleスプレッドシートにデータが書き込まれるはずです。