【Laravel】SheetDBを使ってフォームで入力したデータをGoogleスプレッドシートに表示させる

今回は入力フォームで入力した値をGoogleスプレッドシートに表示させるプログラムを作成していきます。SheetDBの導入を終えている状態からスタートしていきます。
まだの方は以下の記事で導入方法を紹介していますので、よろしければ参考にしてください。

所要時間5分ほど
【Laravel】GoogleスプレッドシートのAPIであるSheetDBを導入してみた

今回は以下の動画のように実装できるようにしていきます。

では早速…

[今回の環境]
Laravel : version 6.20.34
composer : version 2.1.8
bootstrap : 4.0

Laravel環境構築

任意の場所にlaravelをインストールします。

$ composer create-project --prefer-dist laravel/laravel lara_sheet "6.*"

作成されたlaravelプロジェクトに移動し、バージョンを確認します。

$ cd lara_sheet
$ php artisan -V
Laravel Framework 6.20.34

Laravel側でSheetDBを適用させるために専用のライブラリをLaravelにインストールします。

$ composer require sheetdb/sheetdb-php

Bootstrapの導入

今回はBootstrapを使用するので、laravelに導入します。

$ composer require laravel/ui:1.*
$ php artisan ui bootstrap
$ npm install && npm run dev

こちらの記事を参考にBootstrapを導入しました。

View作成

lara_sheet/resources/views/welcome.blade.php を編集します。

デフォルトのwelcome.blade.php内をまっさらにして
以下のコードを貼り付けておきます。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }

        </style>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <form action="add_row_data" method="post">
                <h2>入力ホーム</h2>
                <div class="mb-3">
                    <label for="sei" class="form-label">姓</label>
                    <input type="text" name="firstName" class="form-control" id="sei" placeholder="田中">
                </div>
                <div class="mb-3">
                    <label for="namae" class="form-label">名</label>
                    <input type="text" name="lastName" class="form-control" id="namae" placeholder="太郎">
                </div>
                <div class="mb-3">
                    <label for="telNum" class="form-label">電話番号</label>
                    <input type="tel" name="phone_number" class="form-control" id="telNum" placeholder="11122223333">
                </div>
                <input type="submit" class="btn btn-primary" value="Submit">
            </form>
        </div>
    </body>
</html>

ここで一度画面を確認しておきましょう。

$ php artisan serve

サーバ起動後に下記のURLにアクセスします。
http://127.0.0.1:8000

アクセスした画面が以下のようになっていればOKです。

route編集

lara_sheet/routes/web.phpの編集を以下のようにしておきます。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
Route::post('add_row_data', 'SpreadController@addRowData');

routeについてまだあまり理解できていない方はこちらを参考に

controller作成

最後にフォーム画面で入力された値をcontroller側で受け取り、
Googleスプレッドシートに反映させる処理を書いていきます。

$ php artisan make:controller SheetController
Controller created successfully.

lara_sheet/app/Http/Controllers/SheetController.php
このコントローラ内に以下のコードを貼ります。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use SheetDB\SheetDB; //(1)

class SpreadController extends Controller
{
    public function addRowData(Request $request){
        $data = $request->all(); //(2)
        $sheetDB = new SheetDB('ご自身のSheetDBのAPIキー'); //(3)
        $sheetDB->create((['firstName'=>$data["firstName"],'lastName'=>$data["lastName"],'phone_number'=>$data["phone_number"]])); //(4)
        
        return redirect('ご自身のGoogleスプレッドシートURL'); //(5)
    }
}

要点ポイント
(1)SheetDBを使用する場合はuseでSheetDBをインポート
use SheetDB\SheetDB;

(2)フォームで入力した値を全て取得
$request->all();

(3)new SheetDBでインスタンスを作成し、カッコ内にSheetDBのAPIキーを指定
new SheetDB(‘自身のAPIキー’);

(4)createメソッドで入力した値をGoogleスプレッドシートに反映
create([‘カラム名’=>値])

(5)redirect(‘ご自身のGoogleスプレッドシートのURL’)
フォームで入力し、controllerで処理を行った後でGoogleスプレッドシートに画面を遷移

ではサーバを起動させ、入力フォームに値を入力させましょう。
入力フォーム画面からGoogleスプレッドシート画面に遷移し、値が反映されていればOKです。

Laravelオススメ動画講座

udemyで公開されているLaravelの動画講座です。
プレビュー視聴は無料となっていますので、Laravelの知識をもっと深めたい人は一度内容を見てみることをお勧めします。

ps.セール時は約90%オフなどになりますので、その時のご購入がオススメです。

今回は以上となります。