【投稿アプリ自作(10)】ユーザごとの記事投稿数グラフを作成

Webアプリを自作するためにPHPのフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第十回目で、ユーザごとの記事投稿数グラフを作成する方法をまとめます。
※:Laravelは5.3からファイル構成が大幅に変わりました。本記事ではLaravel5.3以降を使って説明したいと思います。
※2:データベースはXAMPPに入っていたMySQLを使うことにします。事前にデータベースアカウントを登録しておいてください。
※3:本記事で紹介するグラフ描画ライブラリ「CanvasJS」は無料では最大30日間評価目的で使用可能です。それ以上使う場合は商用ライセンスが必要になります。
フリーのグラフ描画ライブラリもありますので、そちらをご使用ください。以下のページでフリーのグラフ描画ライブラリを調査したのでご参考にしてください。
グラフ描画ライブラリの調査

ゴール

本記事では、以下の２つについてまとめます。
・グラフ描画ライブラリ「canvasJS」のインストール
・ユーザごとの記事投稿数グラフの表示

最終的には以下の画像の様にユーザごとの投稿数をグラフ化することを目指します。

必要なもの

	必要なもの		価格(円)
1	PC		ピンキリ
1	備考	インターネット接続可能なこと
2	XAMPP		無料
2	備考	持っていない場合は、こちらを参照→XAMPPのインストール方法
3	Laravelフレームワーク		無料
3	備考	インストールしていない場合は、こちらを参照→Laravelのインストール方法
4	MySQLのデータベースアカウント		無料
4	備考	持っていない場合は、こちらを参照→phpMyAdminでデータベースとユーザを新規登録する
5	投稿アプリ向けのテーブル		無料
5	備考	【投稿アプリ自作】の第四回目で作成した投稿アプリ向けのテーブルです。持っていない場合は、こちらを参照→【投稿アプリ自作(4)】テーブル設計とマイグレーション実行(Laravel)
6	ダミーデータ		無料
6	備考	【投稿アプリ自作】の第六回目で作成した投稿アプリ向けのダミーデータです。持っていない場合は、こちらを参照→【投稿アプリ自作(6)】seederでダミーデータの作成(Laravel)
7	投稿表示画面		無料
7	備考	【投稿アプリ自作】の第七回目で作成した投稿アプリ向けのダミーデータを表示する画面(記事表示画面)です。持っていない場合は、こちらを参照→【投稿アプリ自作(7)】リレーショナルデータベースからデータを取得・表示する(Laravel)

事前準備

テーブルの作成

事前に投稿アプリ向けのテーブルを用意する必要があります。
第四回目でテーブル設計と新規テーブルの作成方法をまとめていますので、まだ作成していない方は以下の記事を参考にして新規テーブルの作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1181

ysktec.com

テーブルの関連性

投稿アプリ向けのテーブルの関連性をER図にまとめると下の様になります。(IDEDF1X記法で記述)
※ネットで検索しながら見よう見まねで書いたので間違っているかもしれませんがご容赦ください。

ダミーデータの作成

本記事でアクセスするためのダミーデータが必要です。
前回の記事でダミーデータの作成方法をまとめていますので、ダミーデータがない場合は以下の記事を参考にダミーデータの作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1245

ysktec.com

ダミー記事表示画面の作成

本記事で作成した記事投稿画面の結果を確認するために記事表示画面が必要です。
前回の記事で記事表示画面の作成方法をまとめていますので、記事表示画面がない場合は以下の記事を参考に記事表示画面の作成をしてください。

http://ysktec.com/shiguregaki/blog/?p=1288

ysktec.com

Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

Laravelのプロジェクトファイル配下にあるファイルで本記事の中で変更、新規作成するファイルについてまとめました。

	ファイル名	対応	備考
1	public/canvasjs-x.x.x/canvasjs.min.js	新規作成	ダウンロードしたcanvasjsをここにおく
2	resources/views/layout.blade.php	変更
3	app/Http/Contoroller/ArticleController.php	変更
4	app/DetailedArticle.php	変更	protected?$dates追加
5	resources/views/test/test_postgraph.blade.php	新規作成
6	public/js/createGraph.js	新規作成
7	routes/web.php	変更

グラフ描画ライブラリ「canvasJS」のインストール方法

注意:
本記事で紹介するグラフ描画ライブラリ「CanvasJS」は無料では最大30日間評価目的で使用可能です。それ以上使う場合は商用ライセンスが必要になります。
フリーのグラフ描画ライブラリもありますので、そちらをご使用ください。以下のページでフリーのグラフ描画ライブラリを調査したのでご参考にしてください。

http://ysktec.com/shiguregaki/blog/?p=1373

ysktec.com

canvasJSのダウンロード

以下のURLからダウンロードできます。

http://canvasjs.com

canvasjs.com

URLにアクセスすると、以下の画像のような画面が表示されるので、そこで”Downloadvx.x.x & Samples”ボタンをクリックしてください。

canvasJSをLaravelに組み込む

ダウンロードしたファイルを解凍して、canvasjs.min.jsを以下のディレクトリに格納します。

canvasJSの格納場所

public/canvasjs-x.x.x/canvasjs.min.js

Laravelに組み込むにはVIEWファイルに以下の処理を追加すればOKです。

<script type="text/javascript" src="canvasjs-1.9.8/canvasjs.min.js"></script>

1	<script type="text/javascript" src="canvasjs-1.9.8/canvasjs.min.js"></script>

Viewファイル(layout.blade.php)の変更

canvasJSをLaravelに組み込むの章でも記載しましたが、共通のレイアウトのため、以下の処理をlayout.blade.phpに追加します。

<script type="text/javascript" src="canvasjs-1.9.8/canvasjs.min.js"></script>

1	<script type="text/javascript" src="canvasjs-1.9.8/canvasjs.min.js"></script>

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="canvasjs-1.9.8/canvasjs.min.js"></script>
</head>
<body>  
    <h1>しぐれがきブログ</h1>
    <hr/>
    <div class="container">
        @yield('content')
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE HTML>

<head>

</head>

<body>

<h1>しぐれがきブログ</h1>

<hr/>

@yield('content')

</div>

</body>

</html>

コントローラ(ArticleController)の変更

ArticleControllerにグラフ用のデータ生成処理を追加します。
要件としては以下です。
・ユーザごとの投稿数配列を生成する。
・投稿数配列には1.日にちと投稿合計数を格納したグラフ用配列、2.ユーザID、3.ユーザ名の3つのデータを格納する。

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Article;
use App\DetailedArticle;
use App\ArticleUser;
use App\Category;
use App\Tag;
use DB;
use Carbon\Carbon;

class ArticleController extends Controller
{

    //これまで追加してきた処理・・・

    public function testPostGraph(){
        $article_users = ArticleUser::all();
        $article_users_all_info=array();
        $info_num=0;
        foreach($article_users as $ariticle_user){
            $user_id = $ariticle_user->user_id;
            $user_aritcles = Article::select()->join('detailed_articles', 'articles.article_id', '=', 'detailed_articles.article_id')->where('user_id',$user_id);
            $user_blog_start_date =  date("Y-m-d",strtotime($user_aritcles->min('published_date')));
            $current_date = date("Y-m-d",strtotime('2017-04-04 10:00:00'));
            $sub_date = $user_blog_start_date;
            //日ごとの連想配列を初期化
            $user_daysum = array();
             $user_day_array = array();
            for($sub_date = $user_blog_start_date,$i=0; strtotime($sub_date)<=strtotime($current_date); $sub_date = date('Y-m-d',strtotime('+1 day',strtotime($sub_date))),$i++)
            {
                $user_daysum[$i] = array('date' => $sub_date,'sum' => 0);
                $user_day_array[$i] = $sub_date;
            }
            //ストッパーを挿入
            $user_day_array[count($user_day_array)] = date("Y-m-d",strtotime('9999-99-99 00:00:00'));
            //各日での記事数を計算し、連想配列に挿入
            for($i=0; $i<count($user_day_array)-1; $i++)
            {
                $sum = $user_aritcles->where('published_date','>',Carbon::parse($user_day_array[$i]))->count()-$user_aritcles->where('published_date','>',Carbon::parse($user_day_array[$i+1]))->count();
                $user_daysum[$i]['sum'] = $sum;
            }
            $article_users_info_sub = array('user_id' => $user_id);
            $article_users_info_sub += array('user_name' => $ariticle_user->user_name);
            $article_users_info_sub += array('user_sum' => $user_daysum);
            $article_users_all_info[$info_num] = $article_users_info_sub;
            $info_num++;
        }
        return view('test.test_postgraph',['article_users_all_info' => $article_users_all_info]);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Article;

use App\DetailedArticle;

use App\ArticleUser;

use App\Category;

use App\Tag;

use DB;

use Carbon\Carbon;

class ArticleController extends Controller

{

//これまで追加してきた処理・・・

public function testPostGraph(){

$article_users = ArticleUser::all();

$article_users_all_info=array();

$info_num=0;

foreach($article_users as $ariticle_user){

$user_id = $ariticle_user->user_id;

$user_aritcles = Article::select()->join('detailed_articles', 'articles.article_id', '=', 'detailed_articles.article_id')->where('user_id',$user_id);

$user_blog_start_date = date("Y-m-d",strtotime($user_aritcles->min('published_date')));

$current_date = date("Y-m-d",strtotime('2017-04-04 10:00:00'));

$sub_date = $user_blog_start_date;

//日ごとの連想配列を初期化

$user_daysum = array();

$user_day_array = array();

for($sub_date = $user_blog_start_date,$i=0; strtotime($sub_date)<=strtotime($current_date); $sub_date = date('Y-m-d',strtotime('+1 day',strtotime($sub_date))),$i++)

{

$user_daysum[$i] = array('date' => $sub_date,'sum' => 0);

$user_day_array[$i] = $sub_date;

}

//ストッパーを挿入

$user_day_array[count($user_day_array)] = date("Y-m-d",strtotime('9999-99-99 00:00:00'));

//各日での記事数を計算し、連想配列に挿入

for($i=0; $i<count($user_day_array)-1; $i++)

{

$sum = $user_aritcles->where('published_date','>',Carbon::parse($user_day_array[$i]))->count()-$user_aritcles->where('published_date','>',Carbon::parse($user_day_array[$i+1]))->count();

$user_daysum[$i]['sum'] = $sum;

}

$article_users_info_sub = array('user_id' => $user_id);

$article_users_info_sub += array('user_name' => $ariticle_user->user_name);

$article_users_info_sub += array('user_sum' => $user_daysum);

$article_users_all_info[$info_num] = $article_users_info_sub;

$info_num++;

}

return view('test.test_postgraph',['article_users_all_info' => $article_users_all_info]);

}

モデルファイル(DetailedArticle.php)の変更

ArticleControllerで投稿日のカラム(published_date)を日付として扱うため、日付ミューテターを指定します。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class DetailedArticle extends Model
{
    
    //・・・これまでの処理

    protected $dates = ['published_date'];

}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class DetailedArticle extends Model

{

//・・・これまでの処理

protected $dates = ['published_date'];

}

グラフ表示画面用のViewファイル(test_postgraph.blade.php)の新規作成

グラフ描画用にtest_postgraph.blade.phpというファイル名でViewファイルを新規作成します。
ArticleControllerでグラフ用データ配列($article_users_all_info)を受け取り、画面出力内容を以下のように設定しています。
また、グラフ描画の処理はグラフ表示画面スクリプト(createGraph.js)で実装しているため、createGraph()をコールしています。

画面出力イメージ

ユーザ名：XXXX (ユーザID：yyyy)さんの投稿数グラフ
日ごとの投稿合計数のグラフ
・・・
(ユーザごとに表示)
・・・

※XXXXはユーザ名、yyyyはユーザID

@extends('layout')
 
@section('content')
<script type="text/javascript" src="js/createGraph.js"></script>
    <h1>test_postgraph</h1>
    <?php $i=0; ?>
    @foreach($article_users_all_info as $article_users_info)
        <article>
            ============================<br/>
            <B>ユーザ名：{{$article_users_info['user_name']}} (ユーザID：{{$article_users_info['user_id']}})さんの投稿数グラフ</B><br/>
            <div id="chartContainer{{$i}}" style="height: 400px; width: 80%;"></div>
            <script type="text/javascript">
            var user_sums = <?php echo json_encode($article_users_info['user_sum'], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
            createGraph(user_sums,{{$i}});
            </script>
            ============================<br/>
        </article>
        <?php $i++; ?>
    @endforeach
@endsection

@extends('layout')

@section('content')

<h1>test_postgraph</h1>

<?php $i=0; ?>

@foreach($article_users_all_info as $article_users_info)

============================<br/>

<B>ユーザ名：{{$article_users_info['user_name']}} (ユーザID：{{$article_users_info['user_id']}})さんの投稿数グラフ</B><br/>

var user_sums = <?php echo json_encode($article_users_info['user_sum'], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;

createGraph(user_sums,{{$i}});

</script>

============================<br/>

</article>

<?php $i++; ?>

@endforeach

@endsection

グラフ表示画面スクリプト(createGraph.js)の新規作成

グラフ描画のメイン処理です。ここでCanvasJSをインスタンス化してます。

function createGraph(user_sums ,id){
    //データ作成
    var data = [];
    user_sums.forEach(function(user_sum) {
        var d = new Date(user_sum['date']);
        data.push({ x: new Date(d.getFullYear(),d.getMonth(),d.getDate()), y: user_sum['sum'] });
    });

    //グラフ描画
    var chart = new CanvasJS.Chart("chartContainer"+id, {
        axisY: {
            title: "投稿数",
            interval: 1,
        },
        axisX: {
            title: "日付",
            interval: 1,
            intervalType: "day",
            valueFormatString: "YYYY/MM/DD",
        },
        data: [{
            type: "column",
            color: "#4169e1",
            dataPoints: data,
        }]
    });
    chart.render();
}

function createGraph(user_sums ,id){

//データ作成

var data = [];

user_sums.forEach(function(user_sum) {

var d = new Date(user_sum['date']);

data.push({ x: new Date(d.getFullYear(),d.getMonth(),d.getDate()), y: user_sum['sum'] });

});

//グラフ描画

var chart = new CanvasJS.Chart("chartContainer"+id, {

axisY: {

title: "投稿数",

interval: 1,

axisX: {

title: "日付",

interval: 1,

intervalType: "day",

valueFormatString: "YYYY/MM/DD",

data: [{

type: "column",

color: "#4169e1",

dataPoints: data,

}]

});

chart.render();

}

ルーティング(web.php)の変更

最後にViewファイル(testpostgraph)とコントローラのArticleController@testPostGraphを紐づけます。

<?php

//・・・これまでの処理

Route::get('testpostgraph','ArticleController@testPostGraph');

<?php

//・・・これまでの処理

Route::get('testpostgraph','ArticleController@testPostGraph');

ブラウザで確認

ブラウザ上で以下のURLにアクセスします。

アクセスのURL

localhost/<Laravelプロジェクトファイル名>/public/testpostgraph

すると以下の画像の様にユーザごとの投稿数グラフが表示されるはずです。

まとめ

今回はグラフ描画ライブラリ「canvasJS」を使ってユーザごとの記事投稿数グラフの表示を行いました。
これで一通り実装したい動作は確認できました。
今後、また実装したい機能がありましたら追加はしようと思いますが、本連載は現状これで終了したいと思います。

次回記事

連載終了(また実装したい機能がありましたら追加はしようと思います)

前回記事

http://ysktec.com/shiguregaki/blog/?p=1329

ysktec.com

まとめページ

http://ysktec.com/shiguregaki/blog/?page_id=1387

ysktec.com

以上！

目次

ゴール

必要なもの

事前準備

テーブルの作成

テーブルの関連性

ダミーデータの作成

ダミー記事表示画面の作成

Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

グラフ描画ライブラリ「canvasJS」のインストール方法

canvasJSのダウンロード

canvasJSをLaravelに組み込む

Viewファイル(layout.blade.php)の変更

コントローラ(ArticleController)の変更

モデルファイル(DetailedArticle.php)の変更

グラフ表示画面用のViewファイル(test_postgraph.blade.php)の新規作成

グラフ表示画面スクリプト(createGraph.js)の新規作成

ルーティング(web.php)の変更

ブラウザで確認

まとめ

次回記事

前回記事

まとめページ