ウェブ制作

プログラミング

Laravelと
Googleチャートを

組み合わせて、円グラフを表示して
みよう!

カフェラテ@プログラマー

カフェラテ@プログラマー

#Oookey_blog_004

Laravel11でIpアドレス制限をしよう!

はじめまして!エンジニアのカフェラテと申します。
最近はLaravelを使って様々なことができるようになりたいと思い、日々勉強中です。
Laravelを使ったアプリの開発をする際に、Googleチャートを組み合わせたグラフ表示の方法を知ったので、今回ご紹介したいと思います!

目次

1. Laravelのプロジェクト作成
2. モデル・マイグレーションの作成と設定
3. データの登録
4. ルート設定
5. コントローラーの作成と設定
6. Googleチャート機能を搭載
7. 投票機能を追加
8. 動作確認

最後に

1. Laravelのプロジェクト作成

まずはLaravelの新規プロジェクトを作成します。
ターミナルを使って、以下のコマンドを実行してください。

Copied!

copyBtn
composer create-project --prefer-dist laravel/laravel PROJECT_NAME

※PROJECT_NAMEのところには、任意のプロジェクト名を入れてください。

2. モデル・マイグレーションの作成と設定

次にモデルを作成します。
今回はおにぎりの具材のアンケートを取ろうと思うので、モデル名をOnigiriとします。

Copied!

copyBtn
php artisan make:model Onigiri -m 

database/migrationsフォルダの中に、新しくファイルが生成されます。
生成されたファイルを開き、下記のように編集して保存します。

XXXX_create_onigiris_table.php

Copied!

copyBtn
public function up()
    {
        Schema::create('onigiris', function (Blueprint $table) {
            $table -> id() ;
            $table -> string('onigiri') ;
            $table -> integer('number') ;
            $table -> timestamps() ;
        });
    }

編集したファイルのマイグレートを実行します。

Copied!

copyBtn
php artisan migrate

3. データの登録

先ほど作成をしたおにぎりテーブルに、選択肢となる値を追加していきます。
今回は、しゃけ・梅干し・おかか・昆布の4種類を選択肢とします。

マイグレーションファイルを作成します。

Copied!

copyBtn
php artisan make:migration add_onigiris_table_4data  --table=onigiris

構文はphp artisan make:migration 任意のマイグレーション名 --table=テーブル名
onigirisテーブルに4つのデータを追加するという意味のadd_onigiris_table_4data

database/migrationsフォルダの中に新しく生成されたファイルを開きます。
下記のように編集し、保存します。

YYYY_MM_DD_hhmmss_create_onigiris_table.php

Copied!

copyBtn
public function up(): void
    {
        $qb = \DB::table('onigiris');
        $insert = [
            [
                'id' => '1',
                'onigiri' => 'しゃけ',
                'number' => '1',
            ],
            [
                'id' => '2',
                'onigiri' => '梅干し',
                'number' => '1',
            ],
            [
                'id' => '3',
                'onigiri' => 'おかか',
                'number' => '1',
            ],
            [
                'id' => '4',
                'onigiri' => '昆布',
                'number' => '1',
            ],
        ];
        $qb -> insert($insert) ;
    }

編集したファイルのマイグレートを実行します。

Copied!

copyBtn
php artisan migrate

これで、おにぎりテーブルに4つのデータが登録されました。

004_img1.png

4. ルート設定

円グラフ表示用と、投稿結果保存用の2つのルートを用意します。
routes/web.phpに、下記3行を追加します。

Copied!

copyBtn
use App\Http\Controllers\OnigiriController ;

Route::get('/onigiri/chart', [OnigiriController::class, 'chart']) -> name('onigiri.chart') ;
Route::put('/onigiri/vote', [OnigiriController::class, 'vote']) -> name('onigiri.vote') ;

5. コントローラーの作成と設定

グラフと投票画面のコントローラーを作成します。

Copied!

copyBtn
php artisan make:controller OnigiriController

app/Http/Controllersの中に新たにOnigiriController.phpファイルができます。

ファイルを開き、最初にuse宣言を登録しておきます。

OnigiriController.php

Copied!

copyBtn
use App\Models\Onigiri ;

また、chartメソッドとvoteメソッドを登録しておきます。

OnigiriController.php

Copied!

copyBtn
class OnigiriController extends Controller
    {
        // チャートを表示する
        public function chart()
        {
            $onigiris = Onigiri::all() ;
            return view('vote.onigirivote', compact('onigiris')) ;
        }
    
    
        // 投票をデータベースに保存する
        public function vote(Request $request)
        {
            $vote = Onigiri::where('onigiri', $request -> onigiri) -> first() ;
            $vote -> number++ ;
            $vote -> update() ;
    
    
            return back() ;
        }
    }

chartメソッドでは、データベースのおにぎりのデータをすべて$onigirisに代入し、ビューに受け渡しています。ビューファイルは、voteフォルダのなかのonigirivote.blade.phpファイルを表示します。
voteメソッドでは、フォームから送信されたおにぎりの具の種類をデータベースから取得します。このおにぎりの具の種類のnumberをひとつ増やして、データベースへ保存という処理を行っています。

6. Googleグラフ機能を搭載

次にビューファイルを処理していきます。
ここからは、いよいよGoogleグラフ機能を使っていきます。

まずはresources/viewsの中にvoteフォルダを作成します。
さらに、その中にonigirivote.blade.phpファイルを作成します。

onigirivote.blade.phpファイルの中身は、下記のようにします。

onigirivote.blade.php

Copied!

copyBtn
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<title>
おにぎり投票結果
</title>
</head>
<body>

<div id="chart" style="height:500px;width:800px;"></div>

<script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart(){
        var data = google.visualization.arrayToDataTable([
            ['onigiri name', 'number'],
                @php
                    foreach($onigiris as $onigiri){
                        echo "['".$onigiri -> onigiri."', ".$onigiri -> number."]," ;
                    }
                @endphp
        ]);
        var options = {
            title: '好きなおにぎり投票結果',
            is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('chart'));
        chart.draw(data, options);
    }
</script>

</body>
</html>

こちらは、Googleチャートという機能を使用しています。
円グラフの他にも様々な種類のグラフ・チャートを使用できます。

公式ドキュメント

7. 投票機能を追加

最後に投票機能をつけていきます。
先ほど作成したonigirivote.blade.phpファイル内に、下記フォームを追加します。

onigirivote.blade.php

Copied!

copyBtn
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<title>
おにぎり投票結果
</title>
</head>
<body>

<!-- ここから追加 -->
<form method="post" action="{{route('onigiri.vote')}}">
    @csrf
    @method('put')
    <div class="form-check">
        <input name="onigiri" value="しゃけ" type="radio">
        <label class="form-check-label" for="しゃけ">しゃけ</label>
    </div>
    <div class="form-check">
        <input name="onigiri" value="梅干し" type="radio">
        <label class="form-check-label" for="梅干し">梅干し</label>
    </div>
    <div class="form-check">
        <input name="onigiri" value="おかか" type="radio">
        <label class="form-check-label" for="おかか">おかか</label>
    </div>
    <div class="form-check">
        <input name="onigiri" value="昆布" type="radio">
        <label class="form-check-label" for="昆布">昆布</label>
    </div>
    <div class="text-right">
        <button type=”submit” class="btn btn-danger btn-primary">投票する</button>
    </div>
</form>
<!-- ここまで追加 -->

<div id="chart" style="height:500px;width:800px;"></div>

<script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart(){
        var data = google.visualization.arrayToDataTable([
            ['onigiri name', 'number'],
                @php
                    foreach($onigiris as $onigiri){
                        echo "['".$onigiri -> onigiri."', ".$onigiri -> number."]," ;
                    }
                @endphp
        ]);
        var options = {
            title: '好きなおにぎり投票結果',
            is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('chart'));
        chart.draw(data, options);
    }
</script>

</body>
</html>

これで、投票機能が完成いたしました!

8. 動作確認

最後に作成したアプリの動作確認をしてみます。

004_img2.png

現在は、全ての具材に1票ずつ表が入っており、円グラフも均等に表示されています。

004_img3.png

では、「しゃけ」に投票してみます。
「しゃけ」を選択して、「投票する」ボタンを押すと...

004_img4.png

「しゃけ」に一票追加されて、円グラフの表記も更新されました!

最後に

いかがでしたでしょうか?

Googleチャートを組み合わせれば、見栄えが良く、使い勝手も良いグラフやチャートがお手軽に使用できます!
カスタマイズも豊富にできるみたいですので、私もさらに色々と試してみようと思います!

お問い合わせはこちら

Oookeyは新規企画・事業の立ち上げや
プロダクトのシステム開発、
UI/UX制作など、一気通貫で
プロジェクトにコミットし伴走します。

お問い合わせフォーム

New Blog List

新着ブログ一覧

おすすめ明朝体&ゴシック体フォント12選

ウェブ制作

ウェブデザイン

おすすめ明朝体&ゴシック体
フォント12選

たまごしゃん@デザイナー

たまごしゃん@デザイナー

LaravelとGoogleチャートを組み合わせて、円グラフを表示してみよう!

ウェブ制作

プログラミング

LaravelとGoogleチャート
組み合わせて、円グラフを
表示してみよう!

カフェラテ@プログラマー

カフェラテ@プログラマー

Laravel11でIpアドレス制限をしよう

ウェブ制作

プログラミング

Laravel11でIpアドレス制限を
しよう

お刺身@プログラマー

お刺身@プログラマー

バナー作成におすすめの参考サイト

ウェブ制作

ウェブデザイン

バナー作成におすすめの
参考サイト4選

くるまちゃん@デザイナー

くるまちゃん@デザイナー

Oookey Blog 最初のごあいさつ

その他

ウェブ制作

Oookey Blog 最初の
ごあいさつ

お刺身@プログラマー

お刺身@プログラマー