Laravelで将棋アプリを作りたい（第一回）

Laravalを使って将棋の動きを実現してみたくなったので、「トンカチと釘」感が半端ないが、やる気に任せてやってみる。
今回は プロジェクト作成 ~ 盤面作成まで。

環境
macOS Catalina
Laravel Installer 3.0.1

[Github](https://github.com/motoshifurugen/laravel-shogi)

#目次
[1.プロジェクト作成](#1-プロジェクト作成)
[2.コントローラーで型作成](#2-コントローラーで型作成)
[3.ビューとcssで盤面作成](#3-ビューとcssで盤面作成)
[4.王将を置いてみる](#4-王将を置いてみる)



#1. プロジェクト作成

```shell:ターミナル
$ laravel new shogi-app
```
アプリ起動確認

```shell:ターミナル
$ cd shogi-app
$ php artisan serve
```

http://127.0.0.1:8000/ でアプリが起動している。
![Laravel起動画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594194/42e2ecbf-0bd1-8133-6c87-b530f04ba6ff.png)

ついでにGitHubで新しいリポジトリ作成
![GitHubリポジトリ作成案内画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594194/093eac45-c755-bcce-d03e-74fd36ef09ce.png)

```shell:ターミナル
$ git add .
$ git commit -m 'first commit'
$ git branch -M main
$ git remote add origin {作成したリポジトリのURL}.git
$ git push -u origin main
```

#2. コントローラーで型作成

```shell:ターミナル
$ php artisan make:controller ShogiController
```

indexメソッドに書いてみる。

```php:app/Http/Controllers/ShogiController.php
    public function index()
    {
        $appName = '将棋アプリ';
        return view('shogi/index', compact('appName'));
    }
```
今は`$appName`を定義してビューに渡すだけ。

ルーティング追加

```php: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`フォルダを作成。

```php: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配下に配置

```css: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マスの棋譜のようなものができた。
![まるで棋譜](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594194/68e6075d-274a-674f-6b81-d3d9cffdc535.png)


#4. 王将を置いてみる

下記サイトから、将棋駒の素材入手&縮小

- [素材のプチッチ](http://putiya.com/html/hobby/syougi_koma01.html)

- [縮小サイト](https://resizer.myct.jp/)

サイズを調整した王将の画像を`public/image`配下に配置

コントローラーで王将の初期値を渡す。

```php:app/Http/Controller/ShogiController
    public function index()
    {
        $appName = '将棋アプリ';
        $MyKing = 59; // 追加
        return view('shogi/index', compact('appName', 'MyKing')); // ビューにも渡す
    }
```

ビューでは、王将の位置の時だけ画像のついたボタンを表示させる。

```php: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>
```
![王将を置いた](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594194/239c3026-85e1-64a3-9941-1cdd2f1f8eff.png)


今回はここまで。

```shell:ターミナル
$ git add .
$ git commit -m "盤面作成"
$ git push origin main
```