Laravalを使って将棋の動きを実現してみたくなったので、「トンカチと釘」感が半端ないが、やる気に任せてやってみる。
今回は プロジェクト作成 ~ 盤面作成まで。
環境
macOS Catalina
Laravel Installer 3.0.1
#目次
1.プロジェクト作成
2.コントローラーで型作成
3.ビューとcssで盤面作成
4.王将を置いてみる
#1. プロジェクト作成
ターミナル
$ laravel new shogi-app
アプリ起動確認
ターミナル
$ cd shogi-app
$ php artisan serve
http://127.0.0.1:8000/ でアプリが起動している。
ついでにGitHubで新しいリポジトリ作成
ターミナル
$ git add .
$ git commit -m 'first commit'
$ git branch -M main
$ git remote add origin {作成したリポジトリのURL}.git
$ git push -u origin main
#2. コントローラーで型作成
ターミナル
$ php artisan make:controller ShogiController
indexメソッドに書いてみる。
app/Http/Controllers/ShogiController.php
public function index()
{
$appName = '将棋アプリ';
return view('shogi/index', compact('appName'));
}
今は$appNameを定義してビューに渡すだけ。
ルーティング追加
route/web.php
Route::get('shogi', 'App\Http\Controllers\ShogiController@index');
これで、http://127.0.0.1:8000/shogiへのアクセスでShogiControllerのindexメソッドが呼び出される。
#3. ビューとcssで盤面作成
今回はbladeテンプレートを使用してビューを作成
resources/views 配下に新たに shogiフォルダを作成。
resources/views/shogi/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>将棋アプリ</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<p>{{ $appName }}</p>
<div class="board">
<?php
for ($c = 1; $c < 10; $c++) {
echo '<div class="column column' . $c . '" id="column' . $c . '">';
for ($r = 9; $r > 0; $r--) {
echo '<p class="row square' . $r . $c . '" id="square' . $r . $c . '">' . $r . $c . '</p>';
}
echo '</div>';
}
?>
</div>
</body>
</html>
CSSはpublic配下に配置
public/css/style.css
.board {
margin: 0 200px;
}
.row {
display: table-cell;
vertical-align: middle;
text-align: center;
border: solid 1px black;
width: 60px;
}
.column {
width: 500px;
display: table;
table-layout: fixed;
height: 60px;
}
これで9マス×9マスの棋譜のようなものができた。
#4. 王将を置いてみる
下記サイトから、将棋駒の素材入手&縮小
サイズを調整した王将の画像をpublic/image配下に配置
コントローラーで王将の初期値を渡す。
app/Http/Controller/ShogiController
public function index()
{
$appName = '将棋アプリ';
$MyKing = 59; // 追加
return view('shogi/index', compact('appName', 'MyKing')); // ビューにも渡す
}
ビューでは、王将の位置の時だけ画像のついたボタンを表示させる。
resources/views/shogi/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>将棋アプリ</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<p>{{ $appName }}</p>
<div class="board">
<?php
for ($c = 1; $c < 10; $c++) {
echo '<div class="column column' . $c . '" id="column' . $c . '">';
for ($r = 9; $r > 0; $r--) {
if ($r . $c == $MyKing) {
echo '<p class="row square' . $r . $c . '" id="square' . $r . $c . '"><button><img src="image/my_king_50.png" alt="自分の王将"></button></p>';
} else {
echo '<p class="row square' . $r . $c . '" id="square' . $r . $c . '">' . $r . $c . '</p>';
}
}
echo '</div>';
}
?>
</div>
</body>
</html>
今回はここまで。
ターミナル
$ git add .
$ git commit -m "盤面作成"
$ git push origin main