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

スポンサーリンク

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

目次


ゴール


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

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

必要なもの

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




事前準備

テーブルの作成


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

【投稿アプリ自作(4)】テーブル設計とマイグレーション実行(Laravel)
Laravelの練習がてら記事投稿Webアプリを自作したので、備忘録としてまとめたいと思います。 本記事はLaravelで投稿アプリのテーブル設計に基づいてマイグレーションファイルを作成し、実行することで投稿アプリに使用するテーブルの生成をする過程をまとめます。


テーブルの関連性


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



ダミーデータの作成


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

【投稿アプリ自作(6)】Seederでダミーデータの作成(Laravel)
Laravelの練習がてら記事投稿Webアプリを自作したので、備忘録としてまとめたいと思います。 本記事はLaravelでSeederを使ってダミーデータを作成する方法をまとめます。


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


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

【投稿アプリ自作(7)】リレーショナルデータベースからデータを取得・表示する(Laravel)
Webアプリを自作するためにPHPのフレームワークのLaravelを導入することに決めました。 PHP初心者かつLaravel初心者ですが...




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日間評価目的で使用可能です。それ以上使う場合は商用ライセンスが必要になります。
フリーのグラフ描画ライブラリもありますので、そちらをご使用ください。以下のページでフリーのグラフ描画ライブラリを調査したのでご参考にしてください。

フリーで商用利用可能なグラフ描画ライブラリ
こんにちは、しぐれがきです。 自作のWebアプリ作成にあたり、グラフ描画ライブラリを導入しようと考えています。 一応、自作といっても...


canvasJSのダウンロード


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

HTML5 JavaScript Charts built on top of HTML5 Canvas Element. Renders across devices & is 10x faster than JavaScript Charting libraries based on SVG.

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



canvasJSをLaravelに組み込む


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

canvasJSの格納場所

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

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




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


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




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

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




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


ArticleControllerで投稿日のカラム(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




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


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




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


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




ブラウザで確認

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

アクセスのURL

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


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





まとめ


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


次回記事

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


前回記事

【投稿アプリ自作(9)】laravelcollective/htmlパッケージで記事投稿画面の作成
Webアプリを自作するためにPHPのフレームワークのLaravelを導入することに決めました。 PHP初心者かつLaravel初心者ですが...


まとめページ

【投稿アプリ自作(まとめ)】Laravelで記事投稿アプリを自作する
Laravelの練習がてら記事投稿Webアプリを自作したので、備忘録としてまとめたいと思います。

以上!

スポンサーリンク

フォローする

スポンサーリンク
Powered by YSKTEC.COM