
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜〜〜

マイケル
今回のテーマはLaravelというPHPフレームワークです!

エレキベア
ソシャゲを作る過程で使うって言ってたクマね

マイケル
うん!
さすがにPHPもLaravelも触ったことない状態だと厳しそうだからね・・・。
さすがにPHPもLaravelも触ったことない状態だと厳しそうだからね・・・。
前回の記事:
【Unity】ソーシャルゲームを作る 〜サーバの環境構築〜【AWS × Laravel】

マイケル
というわけで一冊、参考書を一気読みした後、
下記のような自動販売機システムを作ってみました!
下記のような自動販売機システムを作ってみました!
\デデーン/

↑自動販売機:購入画面

↑自動販売機:メンテナンス画面

エレキベア
なかなか気合入ってるクマね

マイケル
軽く読むだけにしようかと思ってたけど
楽しくなって作っちゃったよ★
楽しくなって作っちゃったよ★

エレキベア
(うざクマ・・・。)

マイケル
しかし思ったよりボリューミーになってしまったので、
数回の記事に分けて作りを解説していきます!
数回の記事に分けて作りを解説していきます!

マイケル
今回は第一回ということで、
「全体設計とテーブル作成」編です!
「全体設計とテーブル作成」編です!

エレキベア
やったるクマ〜〜〜〜
参考書籍

マイケル
開発するにあたって参考にした書籍はこちらです!

マイケル
Laravelの必要最低限な機能がまとまっていて、
すごく読みやすかったです!
すごく読みやすかったです!

マイケル
PHPを触ったことがない人でも、
他のオブジェクト指向の言語を触ったことがあったり
WEBアプリを作ったことがある人ならスッと入れるかと思います。
他のオブジェクト指向の言語を触ったことがあったり
WEBアプリを作ったことがある人ならスッと入れるかと思います。

エレキベア
エレキベアも読んでみるクマ
全体設計

マイケル
今回作ったシステムは、
・購入画面 -> 自動販売機で飲み物を買う画面
・メンテナンス画面 -> 自動販売機に設定する飲み物の情報を編集する画面
の2画面で構成されていて、それぞれの仕様は以下になります!
・購入画面 -> 自動販売機で飲み物を買う画面
・メンテナンス画面 -> 自動販売機に設定する飲み物の情報を編集する画面
の2画面で構成されていて、それぞれの仕様は以下になります!
購入画面


↑入金、飲み物の購入が行える
メンテナンス画面


↑飲み物のデータを編集する

エレキベア
自動販売機シミュレータって感じクマね

マイケル
こういう身近なものでシステムを作ってみると
オブジェクト指向が理解しやすいのでおすすめです!
オブジェクト指向が理解しやすいのでおすすめです!
テーブル定義

マイケル
自動販売機や飲み物の情報は、
下記のようにテーブルに格納して取り出す形としています!
下記のようにテーブルに格納して取り出す形としています!

↑juice:飲み物テーブル machine:自動販売機テーブル

マイケル
machineテーブルとjuiceテーブルは1:Nの関係で、
「自動販売機ID(m_id)」項目で対象の自動販売機を指定しています。
「自動販売機ID(m_id)」項目で対象の自動販売機を指定しています。


エレキベア
この2テーブルの情報を使って表示や編集をするクマね

マイケル
そういうことクマよ
システム構成の全体イメージ


マイケル
システム構成のイメージはこんな感じ!
DBとModelの項目は紐づいていて、
Viewが画面の表示、Controllerが処理の部分を担当しています。
DBとModelの項目は紐づいていて、
Viewが画面の表示、Controllerが処理の部分を担当しています。

エレキベア
MVCモデルというやつクマね

マイケル
そのとおりクマ

エレキベア
(うざクマ・・・。)
テーブルの作成

マイケル
ざっくりとした仕様が決まったら、
まずはDBにデータを設定しましょう!
まずはDBにデータを設定しましょう!

マイケル
また、環境構築については今回は省略させていただきます。
下記記事で AWS×MySQLで構築する場合の手順を記載しているため
参考程度にご参照ください!
下記記事で AWS×MySQLで構築する場合の手順を記載しているため
参考程度にご参照ください!
前回の記事:
【Unity】ソーシャルゲームを作る 〜サーバの環境構築〜【AWS × Laravel】

エレキベア
「Laravel 環境構築」とかで調べると
たくさん出てくるから見てみるといいクマね
たくさん出てくるから見てみるといいクマね

マイケル
僕は上記記事で環境設定したため、
サーバ:AWS EC2(Linux)
DB:MySQL
の環境で進めていきます!
サーバ:AWS EC2(Linux)
DB:MySQL
の環境で進めていきます!

エレキベア
やったるクマ〜〜〜〜
マイグレーションでのテーブル作成

マイケル
テーブルの作成についてですが、
「マイグレーション」という仕組みを使用して作成します!
「マイグレーション」という仕組みを使用して作成します!

エレキベア
マイグレーションって何クマ??

マイケル
テーブル定義をPHPファイルとして作成しておくことで、
環境を移行するときとかにコマンド実行だけで同じDB環境を作成することができる仕組みのことだよ!
環境を移行するときとかにコマンド実行だけで同じDB環境を作成することができる仕組みのことだよ!

エレキベア
いちいちCREATE文叩かなくて済むのは便利クマね

マイケル
それじゃさっそくマイグレーションのファイルを作ってみましょう!
下記コマンドにファイル名を指定して実行します!
下記コマンドにファイル名を指定して実行します!
php artisan make:migration create_juice_table
php artisan make:migration create_machine_table
↑マイグレーションファイルの作成
マイケル
すると databaseフォルダ配下にファイルが作成されるので、そこにテーブルの項目定義を記述します!
また、ID項目は自動インクリメントにしたいので、「increments」で作成しています。
また、ID項目は自動インクリメントにしたいので、「increments」で作成しています。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateJuiceTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('juice', function (Blueprint $table) {
$table->increments('id');
$table->integer('m_id');
$table->string('name');
$table->integer('price');
$table->integer('stock');
$table->longText('ju_image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('juice');
}
}
↑Juiceテーブルの定義<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateMachineTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('machine', function (Blueprint $table) {
$table->increments('id');
$table->integer('money');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('machine');
}
}
↑Machineテーブルの定義
マイケル
ファイルを作成したら、下記のコマンドを実行するだけ!
これで記述した定義でテーブルが作成されます!
これで記述した定義でテーブルが作成されます!
php artisan migrate

エレキベア
簡単クマ〜〜〜〜〜

マイケル
ちなみにテーブルを削除して作り直したい場合には、
「php artisan migrate:refresh」
とすると全テーブル作りなおすことができます!
「php artisan migrate:refresh」
とすると全テーブル作りなおすことができます!
Seederの作成

マイケル
テーブルを作ったら次はデータです!
テーブルと同じようにSeederという仕組みを使用してPHPファイルに定義します!
テーブルと同じようにSeederという仕組みを使用してPHPファイルに定義します!

マイケル
まずは下記コマンドでSeederファイルを作成しましょう。
php artisan make:seeder JuiceTableSeeder
php artisan make:seeder MachineTableSeeder
↑Seederファイルの作成
マイケル
すると database/seederフォルダ配下にファイルが作成されるので、下記のようにレコード情報を定義します!
<?php
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Storage;
class JuiceTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$param = [
'm_id' => 1,
'name' => 'ドクターペッパー',
'price' => 120,
'stock' => 5,
'ju_image' =>base64_encode(Storage::get('DrPepper.jpg')),
];
DB::table('juice')->insert($param);
$param = [
'm_id' => 1,
'name' => 'モンスターエナジー',
'price' => 210,
'stock' => 3,
'ju_image' =>base64_encode(Storage::get('MonsterEnergy.jpg')),
];
DB::table('juice')->insert($param);
$param = [
'm_id' => 1,
'name' => 'モンスターエナジー',
'price' => 210,
'stock' => 2,
'ju_image' =>base64_encode(Storage::get('MonsterEnergy2.jpg')),
];
DB::table('juice')->insert($param);
$param = [
'm_id' => 1,
'name' => 'モンスターエナジーセット',
'price' => 900,
'stock' => 3,
'ju_image' =>base64_encode(Storage::get('MonsterEnergySet.jpg')),
];
DB::table('juice')->insert($param);
}
}
↑JuiceテーブルのSeederファイル<?php
use Illuminate\Database\Seeder;
class MachineTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$param = [
'money' => 1000,
];
DB::table('machine')->insert($param);
}
}
↑MachineテーブルのSeederファイル
マイケル
ファイルを用意したら下記コマンドを実行しましょう!
php artisan db:seed
↑Seederファイルからレコードを登録する
マイケル
すると各テーブルにレコードが登録されます!
ここまでの処理で、下記のようにテーブルとレコードが登録されていれば完了です!
ここまでの処理で、下記のようにテーブルとレコードが登録されていれば完了です!

↑Juiceテーブルの登録結果

↑Machineテーブルの登録結果

エレキベア
できたクマ〜〜〜〜〜!!

マイケル
これでデータの準備は完了だぜ!!
おわりに

マイケル
というわけで今回は自動販売機システムのデータ準備についてでした!
どうだったかな?
どうだったかな?

エレキベア
コマンドでテーブルやレコードを作成できて感動だったクマ〜〜

マイケル
どんな環境でも同じようにデータ定義を設定できるのはすごく便利だよね。

マイケル
それでは次回からは実際に画面を作っていきましょう!
アデュー!!
アデュー!!

エレキベア
楽しみクマ〜〜〜〜!!!
【Laravel】第一回 自動販売機システムを作ろう! 〜全体設計とテーブル作成〜 〜完〜
コメント