【Laravel】ログイン日時の統計をとって棒グラフにしてみるさてさて、ここ数回Laravelの話題をお届けしましたので、この流れでもう1つLaravelの記事をお届けしたいと思います。今回はおそらく訪問ユーザー向けと言うよりは、運営者側がほしがるような内容かもしれませんが、その内容はというと、サイトの集計データをチャートで表示するというものです。Analyticsが有名ですがあれはブラウザでのアクセスに限られたデータです。そのため、例えば「注文を受けた回数の集計データ」などより複雑なデータ集計をしようと思うと、自前で実装するしかありません。そこで!今回は、ログインした日時を集計して「ログインするのが多い時間帯はいつ?」が分かるコンテンツをLaravelで作ってみたいと思います。合わせて読みたいやりたいこと今回は「各時間ごとのログイン回数を月単位で」集計することにします。以下のようなことができるようになれば成功です。「意外と深夜1時でもログイン回数は少なくないなー😳」では、実際にやっていきましょう!前提として今回もログイン機能がLaravelにインストールされていることが前提となっています。インストールがまだの方は以下を参考してください。【Laravel5.6】インストール直後にやること3点モデルとマイグレーションをつくるまずは、以下のコマンドでログイン集計に必要なモデル&マイグレーションを作成します。-mコマンドを実行したらdatabase/migrations/****_**_**_******_create_logins_table.phpというファイルが作成されますので、それらを開いて中身を次のようにします。データで保持するようにしています。monthでつけています。そのため、Loginモデルがタイムスタンプを使わないようにapp/Login.phpに以下のコードを追加しておいてください。使わない}では、マイグレーションを実行してテーブルを作成しましょう。migrateすると、テーブルはこのようになります。ログイン日時を保存するようにする続いて、ユーザーがログインをしたら自動的に先ほど作成したloginsテーブルにデータが書き込まれるようにしておきましょう。app/Http/Controllers/Auth/LoginController.phpの中に以下のコードを追加してください。}}これで、ログインをするたびに以下のようなデータがloginsテーブルに追加されることになります。Seederでテストデータを用意するこのまま集計部分をつくってもいいのですが、何回もログインをしてデータを追加するのは時間がかかりますので、Seederでテストデータをつくることにします。以下のコマンドを実行してください。LoginsTableSeederすると、database/seeds/LoginsTableSeeder.phpというファイルが作成されるのでrun()内を以下のように変更してください。}}ファイルを変更したら、database/seeds/DatabaseSeeder.phpに以下のように登録します。}}では、artisanコマンドを使ってSeederを実行してみましょう。db:seedうまくいくとloginsテーブルはこのようになります。このデータを使って実際に集計をしていきましょう。集計した棒グラフをつくるでは、ここからが実際に集計データを表示していく作業になります。クリック1つで「年・月」を変更できるようにしたいので、データはAjaxを通して取得することにします。ルートをつくるroutes/web.phpに以下を追加してください。'LoginCountController@ajax_index');上がブラウザで、下がAjaxでアクセスするページになります。コントローラーをつくる続いてコントローラーです。以下のコマンドを実行してください。LoginCountControllerapp/Http/Controllers/LoginCountController.phpというファイルが作成されるので、中身を次のようにします。}}この中では、「年・月」で絞り込んだデータをグループ化して時間(hour)ごとにデータ数をカウントしています。12時台にデータが存在していない場合は、集計データが存在しないことになってしまいますので、存在しない時間は0にするコードを追加してデータを修正しています。ビューをつくるでは、実際ブラウザで目にする棒グラフの部分をつくっていきましょう。resources/views/login_count.blade.phpというファイルを作成して以下のようにしてください。</script></body></html>少しコードが長いですが、重要なのはdrawChart()の部分だけです。この中では、まず先ほど作成した集計プログラムにAjaxでアクセスしてデータをとってきます。そのデータをChart.jsにセットをしています。以下の部分でChart.jsのインスタンスをクリアしていることに注目してください。しないと「年・月」を変更した場合に前のデータが残ってしまうことになるからです。this.chart.destroy();}お疲れ様でした😊✨テストしてみるでは、実際にテストしてみましょう!まずは今月の統計チャートです。はい!うまくいきました😊✨ダウンロードする今回実際に開発したソースコード一式を以下からダウンロードすることができます。マイグレーションなどはご自身で実行していただく必要があります。【Laravel】ログイン日時の統計をとって棒グラフにしてみるおわりにということで、今回はログインした日時を集計して棒グラフをつくってみました。ちなみに、今回使ったChart.jsは棒グラフだけでなく、円グラフやレイダーチャートなど様々なチャート作成ができますので、もし興味がある方はこちらのサンプルページをご覧になってください。今回のケースではデータ量が多くなってくるとレスポンスが極端に遅くなることが想定されます。そのため、もしそうならないように対処したい場合は、例えばlogin_countsテーブルを作ってcronなどで定期的にデータを集計するようにし、Ajaxの取得はこの集計テーブルから取得するようにするといいでしょう。皆さんも集計データのコンテンツを作ってみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。