太陽がまぶしかったから

C'etait a cause du soleil.

Laravel 5.6 x React Docker 環境で npm watch と artisan serve を共存

最初のフロントエンドを選ぶのじゃ

 Laravel で Web アプリを作っていたのだけど、今どきの Web アプリケーションにおいてはサーバーサイドで API だけ作って画面表示は Javascript で生成するのが一般的なようだ。

 そんな時流において、サーバーサイドのテンプレートエンジンの学習に時間を使うのも勿体ないので、フロントエンドの最低限を作って API と結合することにした。

 そんなわけで、 『PHP 初心者による Laravel 入門 その4 MySQL の Docker コンテナ間接続 - 太陽がまぶしかったから』 で作成したLaravel Docker 開発環境で React を扱えるようにする。 Let's Yak Shaving !

Laravel から React を使うために

続きを読む

ポケモンGO無課金勢で Lv39 & 日本縦断を達成

f:id:bulldra:20180504183045j:plain

今週のお題「ゴールデンウィーク2018」

 ゴールデンウィークの暇にまかせて、Pokemon GO Plus を装着して歩き回っていたらレベル39になった。2016年07月22日の開始からあしかけ1年と10ヶ月。あいかわらずの無課金縛りである。

 レベル38からは77日間。前回のレベルアップは非常に時間がかかったのだけど、ここのところでコミュニティディやフィールドリサーチなどのイベントが続いており、経験値を得やすい環境になっている。ポッポマラソンフォーエバー。

レベル39は事実上のカンスト扱い

続きを読む

PHP 初心者による Laravel 入門 その4 MySQL の Docker コンテナ間接続

PHP Laravel で MySQL コンテナに接続したい

 前回まででテンプレートの使い方を学習していたが、具体的なデータ操作がないと飽きてしまうので、先に MySQL のコンテナを作成してPHP Laravel のコンテナから 接続できるようにしたくなった。

 複数の Docker コンテナを管理するには docker-compose が便利。 docker-compose.yml の定義から複数のコンテナを作成してリンク定義が行える。今回の docker-compose.yml は以下の通りに作成する(password は任意に変更)。

version: '2'
services:
  mysql:
    image: "mysql:5.7"
    container_name: docker_mysql
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: myapp_db
      MYSQL_USER: myapp_user
      MYSQL_PASSWORD: password
    volumes:
      - ./db/mysql_data:/var/lib/mysql
    command: >
      mysqld
        --character-set-server=utf8
        --collation-server=utf8_bin
        --skip-character-set-client-handshake
    ports:
      - "3306:3306"
  phpapp:
    build: ./app/
    container_name: docker_app
    ports:
      - "50000:8000"
    links:
      - mysql
  cli:
    image: "mysql:5.7"
    container_name: docker_cli
    environment:
      MYSQL_ROOT_PASSWORD: notuse
    links:
      - mysql

 docker-compose では imagedocker pull の役割をする。 mysql コンテナは myapp_dbmyapp_user で接続する初期設定を行った MySQL の本体。volumes の定義を行うことで、ローカル側のファイルシステムに MySQL のデータを格納してデータの永続化をさせている。

 phpapp は Laravel コンテナ作成時の Dockerfile ディレクトリを指定。Docker 同士のDBテスト接続のために、 cli も作成しておく。それぞれの links の定義で Docker コンテナ間の接続許可を定義している。

MySQL の起動確認とリモート接続確認

続きを読む

PHP 初心者による Laravel 入門 その3 レイアウトの継承とコンポーネント

レイアウトの継承と可変部分の定義

 上記から引き続いて、『PHPフレームワークLaravel入門』を参考に Laravel に入門してみる。前回までは POST メソッドの受け取りとテンプレートエンジン blade での制御処理を実装した。

 前回までのテンプレート処理では HTML 全体の定義を書いてきたが、実際のアプリケーションを作成する場合にはヘッダ・フッタ・メニューなどの使い回し要素が発生する。 blade ではベースとなるレイアウトに @yeild@section で可変部分を定義して、個別レイアウト側で可変部分を補完するようなことができる。

views/layouts/base.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <style>
        .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
        </style>
        <title>@yield('title')</title>
    </head>

    <body>
    
    @section('menu')
    <ul>
        <li><a href="/hello">Hello</a></li>
        <li>@show</li>
    </ul>
    
    @yield('contents')

    copyright 2018 bulldra.
    
    </body>
</html>

views/hello/top.blade.php

 @extends('layouts.app') で上記ベースレイアウトを取得。

@extends('layouts.base')

@section('title','hello')

@section('menu')
    @parent
    追加メニュー
@endsection

@section('contents')
    <form method="POST" action="/hello">
        {{ csrf_field() }}
        <input type="text" name="target" value="" />
        <input type="submit" name="入力" />
    </form>
        
    @forelse ($data as $d)  
    <p>{{ $d }}</p>
    @empty
    <p>なーんもない</p>
    @endforelse
@endsection

 ベースレイアウト側で @yeild を定義すると、個別レイアウト側で定義した同名の @section で置き換えられる。ベースレイアウト側で定義した @section は個別レイアウト側の同名 @section で 呼び出して @parent でベースレイアウト側の定義を呼び出しながら @show 部分を書き換えられる。 @parent を使わない場合は単純な上書きとなるので、 @yeild の動作と変わらない。

コンポーネントとサブビューの組み込み

続きを読む

PHP 初心者による Laravel 入門 その2 入力フォームとテンプレート内制御

view メソッドのテンプレートで探索ディレクトリを指定

 上記から引き続いて、『PHPフレームワークLaravel入門』を参考に Laravel に入門してみる。前回まではブラウザからのリクエストを受け取り、それに応じて処理を切り分けるルーティング処理を実装した。

 view メソッドでは view('ディレクトリ名.ファイル名') 形式で呼び出し先の resources/views以下に探索ディレクトリを指定できる。機能ごとにディレクトリを分けるのが一般的だそう。テンプレートファイルには PHP の構文をそのまま入れることもできるが、地獄しか見えないので Controller 側で必要最低限の連想配列を生成して起動した方がよさそう。

Laravel でURLクエリストリングの取得と表示

続きを読む