20191026のlaravelに関する記事は9件です。

【サルが書く】LaraDockでLaravelの環境構築やってみよう編

わきゃ

環境構築がこの世で一番難しいと思っています。

今回はLaraDockを使用して、Laravelの開発環境構築を行っていきます。
※基本的にMacでの環境構築方法を説明していきます。

LaraDockとは?

LaraDockとは、仮想化ソフトウェア「Docker」上で動作する、オープンソースの開発環境です。
https://laradock.io/

Dockerとは、コンテナと呼ばれる仮想環境を作ることができるものです。これまでの仮想環境に比べると動作が軽く、環境の設定等をコードで管理できるため、環境の再現性が高いです。

LaraDockはLaravelの動作に必要な環境を構築するコードを、GitHubから引っ張ってきてそのコードを元にDockerが環境を構築してくれます。

LaraDockには以下の機能が含まれています。

  • nginx (webサーバー)
  • php-fpm (phpの実行環境)
  • MySQL (DB管理システム)
  • workspace (Laravelの開発に必要な環境がまとまっているもの)
  • phpMyAdmin (MySQLをGUIで操作できるもの)

Laravelの環境を構築していくわよ

Laradockのの導入には Dockergit のインストールが必要です。

1. Dockerのインストール

  1. DockerHubにアクセス会員登録を行う。
    https://hub.docker.com/

  2. 会員登録後に、トップページにある Get started with Docker Desktop のリンクをクリックし、Dockerをダウンロードします。

  3. ダウンロードファイルを展開し、指示通りにインストールを進めます。インストールが完了したらDockerを起動した状態にしておきましょう。

2. gitのインストール

Macの場合Xcodeがインストールがされていればgitのインストールがされていると思います。
以下のコマンドをターミナルで叩いてみましょう

$ git --version
git version 2.23.0

バージョン情報が出ていればgitはすでにインストールされています。

バージョンが古い場合があるので、最新版のgitをインストールしても良いと思います。
https://git-scm.com/downloads

3. LaraDockのインストール

# laradock_testという名前でディレクトリを作ります
bash-3.2$ mkdir laradock_test

# cd でlaradock_testに移動
bash-3.2$ cd laradock_test/

# git cloneでlaaradockのソースをダウンロードします。
bash-3.2$ git clone git@github.com:laradock/laradock.git
Cloning into 'laradock'...
remote: Enumerating objects: 32, done.
remote: Counting objects: 100% (32/32), done.
remote: Compressing objects: 100% (30/30), done.
remote: Total 9337 (delta 10), reused 7 (delta 0), pack-reused 9305
Receiving objects: 100% (9337/9337), 8.66 MiB | 4.45 MiB/s, done.
Resolving deltas: 100% (5002/5002), done.

# lsでディレクトリの中身を確認するとlaaradockディレクトリが確認できます。
bash-3.2$ ls
laradock

# cdでlaradockディレクトリに移動しましょう。
bash-3.2$ cd laradock/

4. コンテナの初期化をやる

コンテナ初期化の前に、設定ファイルを作成する必要があります。

# 元のソースにあるenv-exampleを.envとしてコピーする
bash-3.2$ cp env-example .env

コンテナの初期化を行ってきましょう。

# コンテナの初期化行います。ダウンロードや設定を行うのでしばらく待ちます。
bash-3.2$ docker-compose up -d nginx mysql workspace phpmyadmin

初期化が終わると自動的にコンテナが起動状態になっています。
docker ps コマンドを実行すると起動中のコンテナを確認することができます。

CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                                      NAMES
09b6b2e0f3e8        laradock_nginx        "/bin/bash /opt/star…"   28 seconds ago      Up 26 seconds       0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   laradock_nginx_1
7dcee16a8564        laradock_php-fpm      "docker-php-entrypoi…"   29 seconds ago      Up 27 seconds       9000/tcp                                   laradock_php-fpm_1
7f049605423b        laradock_phpmyadmin   "/docker-entrypoint.…"   31 seconds ago      Up 29 seconds       0.0.0.0:8080->80/tcp                       laradock_phpmyadmin_1
38a2d3135a8d        laradock_workspace    "/sbin/my_init"          31 seconds ago      Up 28 seconds       0.0.0.0:2222->22/tcp                       laradock_workspace_1
018fa8e3cdde        laradock_mysql        "docker-entrypoint.s…"   32 seconds ago      Up 30 seconds       0.0.0.0:3306->3306/tcp, 33060/tcp          laradock_mysql_1
59ec053e8585        docker:dind           "dockerd-entrypoint.…"   32 seconds ago      Up 30 seconds       2375-2376/tcp                              laradock_docker-in-docker_1

6つのコンテナが起動していることが確認できます。

5. Laravelのプロジェクトを作っていこう

先程、初期化を行ったworkspaceが作業を行うコンテナなのでそこへ接続(ログイン)を行います。
ログインはデフォルトで用意されているlaradockで行います。

docker-compose exec --user=laradock workspace bash

ログインが完了すると、 /var/wwwディレクトリに入るので、下記のcomposerコマンドを叩いて新規プロジェクトを作成します。
このcreateコマンドを打つことによって、必要なパッケージは自動的にインストールされ、laravelのアプリケーションが作成されます。
コマンド内の test_app がアプリケーション名になります。

composer create-project laravel/laravel test_app --prefer-dist "5.5.*"

アプリケーションは作成されましたが、まだ http://localhost ではアクセスできません。

6. 最後にホストに設定をしなくてはならない......!!

一旦、workspaceコンテナから出ます。

laradock@38a2d3135a8d:/var/www$ exit
exit

そこで先程の .env ファイルを編集します。

vi .env
###########################################################
###################### General Setup ######################
###########################################################

### Paths #################################################

# Point to the path of your applications code on your host
# ここを先程作成したアプリケーション名に書き換える
APP_CODE_PATH_HOST=../
↓
APP_CODE_PATH_HOST=../test_app

..()

書き換えただけでは、設定が反映されないので、コンテナの再起動を行います。

# 停止
bash-3.2$ docker-compose stop
Stopping laradock_nginx_1            ... done
Stopping laradock_php-fpm_1          ... done
Stopping laradock_phpmyadmin_1       ... done
Stopping laradock_workspace_1        ... done
Stopping laradock_mysql_1            ... done
Stopping laradock_docker-in-docker_1 ... done

# 起動
bash-3.2$ docker-compose up -d nginx mysql
Starting laradock_mysql_1              ... done
Recreating laradock_docker-in-docker_1 ... done
Recreating laradock_workspace_1        ... done
Recreating laradock_php-fpm_1          ... done
Recreating laradock_nginx_1            ... done

ここで http://localhost にアクセスしてみましょう。
テストページが表示されるはずです!
スクリーンショット 2019-10-26 17.30.03.png

環境ができた!いろいろためしてみよう!

7. 参考文献

PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Laravelで画像投稿機能を実装する

Laravelで画像投稿機能を実装します。具体的には以下のような機能を実装します。

552fd9bc96fec88f5411232502dec300.png
上記の写真で画像ファイルを選択し、フォームにコメントを入力後、投稿ボタンを押すと、
a063c3be9f1d7d7c178c88822d409816.png

上記の写真のように、画像とコメントを表示する機能を実装します。

開発環境

Laravel:5.5.46
MYSQL:5.5.62
PHP:7.2.17
画像アップロードサーバ:AmazonS3

マイグレーションファイル作成

画像とコメントを保存するためのテーブルpostsを作成します。ターミナルで以下のコマンドを実行しマイグレーションファイルを作成します。

$ php artisan make:migration _create_posts_table --create=posts

作成したマイグレーションファイルを編集します。

database/migrations/2019_10_22_220848_create_posts_table.php
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image_file_name',100);//追加
            $table->string('image_title',100);//追加
            $table->timestamps();

        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

ターミナルで以下のコマンドを入力しマイグレーションを実行します。

$ php artisan migrate

モデル

Postモデルを作成します。ターミナルで以下のコマンドを実行しモデルを作成します。

$ php artisan make:model Post

作成したモデルを編集します。

app/Post.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
//後にcreate()メソッドで保存するカラムを指定
    protected $fillable = [
        'image_file_name', 'image_title',
    ];
}

ルータ

ルータを記述します。ページを表示したときと、投稿ボタンを押したときのルーティングを記述します。

routes/web.php
Route::post('upload', 'PostsController@upload')->name('upload');
Route::get('/', 'PostsController@index');

コントローラ

ターミナルで以下のコマンドを実行しコントローラを作成します。

$ php artisan make:controller PostsController

web.phpに記述した各ルーティングに対応したアクションを記述します。

/app/Http/Controllers/PostsController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\User;
use App\Post;
use Storage;
use Illuminate\Support\Facades\Validator;

class PostsController extends Controller
{
//画像およびコメントアップロード
public function upload(Request $request){

//Validatorファサードのmakeメソッドの第1引数は、バリデーションを行うデータ。
//第2引数はそのデータに適用するバリデーションルール
        $validator = Validator::make($request->all(), [
            'file' => 'required|max:10240|mimes:jpeg,gif,png',
            'comment' => 'required|max:191'
        ]);

//上記のバリデーションがエラーの場合、ビューにバリデーション情報を渡す
        if ($validator->fails()){
            return back()->withInput()->withErrors($validator);
        }
//s3に画像を保存。第一引数はs3のディレクトリ。第二引数は保存するファイル。
//第三引数はファイルの公開設定。
        $file = $request->file('file');
        $path = Storage::disk('s3')->putFile('/', $file, 'public');
//カラムに画像のパスとタイトルを保存
        Post::create([
            'image_file_name' => $path,
            'image_title' => $request->comment
        ]);

        return redirect('/');
    }
//ページ表示
    public function index(){
        $posts = \App\Post::all();

        $data = [
            'posts' => $posts,
        ];

        return view('welcome',$data);
    }
}

ターミナルで以下のコマンドを入力し、ビューでFormファサードを使用できるようにします。

$ composer require "laravelcollective/html":"5.5.*"

AWSの S3にアクセスするライブラリを導入します。
$ composer require league/flysystem-aws-s3-v3

.envで環境変数を設定します。

.env
AWS_S3_KEY=[your Access Key ID]
AWS_S3_SECRET=[your Secret Key]
AWS_S3_REGION=[your region]
AWS_S3_BUCKET=[your backet]

ビュー

resources/viewsに最初からあるwelcome.blade.phpを編集します。

resources/views/welcome.blade.php
//投稿フォーム
{!! Form::open(['route' => 'upload', 'method' => 'post','files' => true]) !!}
    <div class="form-group">
        {!! Form::label('file', '画像投稿', ['class' => 'control-label']) !!}
        {!! Form::file('file') !!}
    </div>
    <div class="form-group m-0">
        {!! Form::label('textarea', '投稿コメント', ['class' => 'control-label']) !!}
        {!! Form::textarea('comment',null,['class' => 'form-control']) !!}
    </div>   
    <div class="form-group text-center">
        {!! Form::submit('投稿', ['class' => 'btn btn-primary my-2']) !!}
    </div>
{!! Form::close() !!}
//画像とコメントをすべて表示
@foreach($posts as $post)
    <div class="card-header text-center">
        <img src= {{ Storage::disk('s3')->url($post->image_file_name) }} alt="" width=250px height=250px></a>
    </div>
    <div class="card-body p-1">
        <span class="card-title">{{ $post->image_title }}</span>
    </div>
@endforeach
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Docker for Windows】Laradock環境をささっと構築する

LaradockでLaravel開発環境を整える

今回チームのアプリ制作でLaradockを使って開発をすることになったので

その時にハマったことなどを備忘録的にまとめていきたいと思います

前提環境

※Docker for windowsはWindows 10 Proじゃないと使えないので注意が必要です

Laradockをgit clone

好きなディレクトリへ移動してLaradockをgit cloneします

cd yourProject

//移動したらgit cloneをする
git clone https://github.com/laradock/laradock.git



現段階でのディレクトリ構造は以下の通りです

yourProject
  ┗━ Laradock

できていることが確認出来たら.envファイルを作成します

作成というよりファイル名を変えてコピーするだけなのでコマンドを入力するだけです

cp env-example .env

コマンドを入力したら.envファイルが作成されます
確認したい場合はエクスプローラーから開いて確認することができます

Laradock .envの設定

変更するコード

APP_CODE_PATH_HOST=../APP_NAME/    //8行目あたり

COMPOSE_PROJECT_NAME=APP_NAME   //36行目あたり

※APP_NAMEはおのおの名前を付けてください

特に二行目のcompose_project_nemeを変更は忘れないようにしましょう

ここを設定しておくとコンテナ被りを避けることができます


あと290行目付近にPostgresの設定が書かれているところがあるので

DB名とユーザー名、パスワードをメモか何かしておきましょう

あとでLaravel側の.envの書き換えで使います

Dockerの環境構築

まずDockerアプリを起動します
起動するまでしばし待ちましょう



cd laradock


起動が完了したらLaradockフォルダに移動してdockerのコンテナを立ち上げます

コンテナとは?

コンテナ型仮想化はOSの上に“コンテナ”と呼ばれる仮想的なユーザー空間を提供します。ユーザー空間とは、ユーザーがアプリケーションを実行するための、
ひと揃いのリソースが提供される空間です。通常は1つのOSの上に1つのユーザー空間があるのですが、コンテナ型仮想化では1つのOSの>上で仮想的なユーザー空間であるコンテナを複数提供できます。

via 注目を浴びる「Dockerコンテナ」、従来の仮想化と何が違うのか?




以下をPoweShellに入力
docker-compose up -d nginx postgres

途中赤字の文字とか出てきますが気にせず完了するまで待ちます
ただ、はじめて構築するときはそこそこ時間がかかるので気長に待ちます


完了した後にLaradockのワークスペースに入り込みます

PowerShellで以下の入力します

docker exec -it APP_NAME_workplace bash
root@------:/var/www

と出たらワークスペースに入ることができています



エラーが出た場合に確認すること

  • Dockerが起動しているか
  • カレントディレクトリ(今いるディレクトリ)がLaradockかどうか

ワークスペースに入り込んだらlaradockにあるパッケージを最新のバージョンに更新していきます

これもコマンドを入力するだけOKです

apt-get update

入力したら完了までしばらく待ちます

完了したらLaravelをインストールしていきます

新規プロジェクトを作成する方法

ワークスペースに入っている状態で

composer create-project laravel/laravel APP_NAME

そして、次にDockerの時と同じように.envファイルをコピーして作成していきます

cp .env.example .env

.envファイルは環境を設定するためのファイルなのでないとエラーが出てしまいます
なのでDockerの時もそうですが忘れずに作成するようにしましょう



作成し終わったら、次はcomposerをアップデートします
今の状態だとvenderファイルが存在しません
venderファイルというのはcomposerの依存設定を置くところと認識したらOKだと思います

composer update //ワークスペース内で

ちなみに現在のディレクトリはこんな感じです

yourProject
  ┗━ APP_NAME
  ┗━ Laradock

読むといいかも:Laravelのディレクトリ構造について学ぶ

Laravel .envの設定

今回はPostgresを使うのでその箇所だけを書き換えます

たとえばこんな感じ

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432

//ここから↓はLaradockの.envにかかれてた内容を書く
DB_DATABASE=DB_NAME
DB_USERNAME=USER_NAME
DB_PASSWORD=PASSWORD

上から3行はコピペしちゃっても大丈夫かと思います

下から3行はLaradockに書いてあったとおりに書いていきましょう


最後にdocker-composeでコンテナをリビルドします

docker-compose up -d --build nginx postgres

リビルドが完了したら
http://localhost
でLaravelのウェルカムページが表示されるはず

ここで表示されないエラーが出る場合はlaradockの側の.envファイルでミスがあります。
詳しくは後日別記事で書きますのでお待ちください。

以上がDocker for windowsを使ったLaradock環境構築でした、ありがとうございました。


僕がおせわになった記事たち
LaradockでLaravel環境構築【手順書】
Windows10でLaradockを使ってLaravel 5.5環境を作る
docker for windowsを使ってlaravelの開発環境を作る

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Docker for Windows】Laradock環境をささっと構築する

qiita1.png

LaradockでLaravel開発環境を整える

今回チームのアプリ制作でLaradockを使って開発をすることになったので

その時にハマったことなどを備忘録的にまとめていきたいと思います

前提環境

※Docker for windowsはWindows 10 Proじゃないと使えないので注意が必要です

Laradockをgit clone

好きなディレクトリへ移動してLaradockをgit cloneします

cd yourProject

//移動したらgit cloneをする
git clone https://github.com/laradock/laradock.git



現段階でのディレクトリ構造は以下の通りです

yourProject
  ┗━ Laradock

できていることが確認出来たら.envファイルを作成します

作成というよりファイル名を変えてコピーするだけなのでコマンドを入力するだけです

cp env-example .env

コマンドを入力したら.envファイルが作成されます
確認したい場合はエクスプローラーから開いて確認することができます

Dockerの環境構築

まずDockerアプリを起動します

今いるディレクトリはyourProjectのはずなのでlaradockフォルダに移動

cd laradock


移動したらdockerのコンテナを立ち上げる準備をしていきます

コンテナとは?

コンテナ型仮想化はOSの上に“コンテナ”と呼ばれる仮想的なユーザー空間を提供します。ユーザー空間とは、ユーザーがアプリケーションを実行するための、
ひと揃いのリソースが提供される空間です。通常は1つのOSの上に1つのユーザー空間があるのですが、コンテナ型仮想化では1つのOSの>上で仮想的なユーザー空間であるコンテナを複数提供できます。

via 注目を浴びる「Dockerコンテナ」、従来の仮想化と何が違うのか?




以下をPoweShellに入力
docker-compose up -d nginx postgres

途中赤字の文字とか出てきますが気にせず完了するまで待ちます
ただ、はじめて構築するときはそこそこ時間がかかるので気長に待ちます


完了した後にLaradockのワークスペースに入り込みます

PowerShellで以下の入力します

docker exec -it youProject_workplace bash
root@------:/var/www

と出たらワークスペースに入ることができています



エラーが出る場合に確認すること

  • Dockerが起動しているか
  • カレントディレクトリ(今いるディレクトリ)がLaradockかどうか

ワークスペースに入り込んだらlaradockにあるパッケージを最新のバージョンに更新していきます

これもコマンドを入力するだけOKです

apt-get update

入力したら完了までしばらく待ちます

完了したらLaravelをインストールしていきます

新規プロジェクトを作成する方法

ワークスペースに入っている状態で

composer create-project laravel/laravel APP_NAME

APP_NAMEはあなたのプロジェクトの名前を入力してください

そして、次にDockerの時と同じように.envファイルをコピーして作成していきます

cp .env.example .env

.envファイルは環境を設定するためのファイルなのでないとエラーが出てしまいます
なのでDockerの時もそうですが忘れずに作成するようにしましょう



作成し終わったら、次はcomposerをアップデートします
今の状態だとvenderファイルが存在しません
venderファイルというのはcomposerの依存設定を置くところと認識したらOKだと思います

参照:Laravelのディレクトリ構造について学ぶ

ちなみに現在のディレクトリはこんな感じです

yourProject
  ┗━ APP_NAME
  ┗━ Laradock


.envファイルを整えていく

これが最後の工程になります

.envファイルをいじってやらないとLaravelとLaradockの間で差異が出てしまってうまく起動することができません

ではさっそくいじっていきましょう


Laradock .envの設定

変更するコード

APP_CODE_PATH_HOST=../APP_NAME/    //8行目あたり

COMPOSE_PROJECT_NAME=APP_NAME   //36行目あたり

※APP_NAMEはあなたのプロジェクト名です

特に二行目のcompose_project_nemeを変更は忘れないようにしましょう

ここを設定しておくとコンテナ被りを避けることができます



あと290行目付近にPostgresの設定が書かれているところがあるので

DB名とユーザー名、パスワードをメモか何かしておきましょう

あとでLaravel側の.envの書き換えで使います

Laravel .envの設定

今回はPostgresを使うのでその箇所だけを書き換えます

たとえばこんな感じ

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432

//ここから↓はLaradockの.envにかかれてた内容を書く
DB_DATABASE=DB_NAME
DB_USERNAME=USER_NAME
DB_PASSWORD=PASSWORD

上から3行はコピペしちゃっても大丈夫かと思います

下から3行はLaradockに書いてあったとおりに書いていきましょう


最後にdocker-composeでコンテナをリビルドします

docker-compose up -d --build nginx postgres

リビルドが完了したら
http://localhost
でLaravelのウェルカムページが表示されるはず

スクリーンショット (4).png

ここで表示されないエラーが出る場合はlaradockの側の.envファイルでミスがあります。
詳しくは後日別記事で書きますのでお待ちください。

以上がDocker for windowsを使ったLaradock環境構築でした、ありがとうございました。


僕がおせわになった記事たち
LaradockでLaravel環境構築【手順書】
Windows10でLaradockを使ってLaravel 5.5環境を作る
docker for windowsを使ってlaravelの開発環境を作る

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Laravel のFTP接続で FTP_USEPASVADDRESS を false にする

経緯

Laravel の Storage ファサードを使ってFTP操作をしようとした際に以下のようなエラーが出た。

>>> Storage::disk('ftp')->files()
PHP Warning:  ftp_rawlist(): php_connect_nonb() failed: No error (0) in /*****/vendor/league/flysystem/src/Adapter/Ftp.php on line 570

PHPからFTPSで接続したときのエラー対応

この記事を参考にして調べたところ、自分が接続しようとしている環境でも ftp_set_option()FTP_USEPASVADDRESSfalse にすれば正常に動作する事が分かった。

Laravel での設定方法

Laravel 公式ドキュメントの設定例 にはそれらしいオプションは見当たらなかったが、ソースを追ったところ設定している箇所を発見し、ignorePassiveAddress というオプションがある事が分かった。

これを config/filesystems.php に設定してやると FTP_USEPASVADDRESS が設定され、FTP操作ができるようになった。

'ftp' => [
    'driver' => 'ftp',
    'host' => 'ftp.example.com',
    'username' => 'your-username',
    'password' => 'your-password',
    'passive' => true,
    'ssl' => true,
    'ignorePassiveAddress' => true, // FTP_USEPASVADDRESS を false にするには true を指定する
],

おまけ

後から知ったが、League\Flysystem のドキュメント のサンプルコードには ignorePassiveAddress の記述があった。

その他設定可能なオプションを調べたい場合は \League\Flysystem\Adapter\Ftp::$configurable を参照すると良い。

    protected $configurable = [
        'host',
        'port',
        'username',
        'password',
        'ssl',
        'timeout',
        'root',
        'permPrivate',
        'permPublic',
        'passive',
        'transferMode',
        'systemType',
        'ignorePassiveAddress',
        'recurseManually',
        'utf8',
        'enableTimestampsOnUnixListings',
    ];

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ER図から『Laravel Migrationファイル生成』可能なツールを4日で作った

4日で作った『ER diagram Quick』 Laravel Migration生成可能

◇ツール名: ER diagram Quick

4日で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも(全て書かなくて良いので)捗るはずです。見た目など、細かい部分などはだいぶ見ないで進めましたが、現時点の進捗としては満足してます。

◇技術

  • HTML / CSS / Vanilla JS
  • Firebase / WWW SQL Designer
  • PHP /Laravel5.5(Migration検証)

ER_diagram_Quick.jpg

リンク: https://venezia-works.com/sql/

ER図をかいたら保存!!

2.jpg

作成したER図はCloud(Firebase) or ブラウザに保存

ER_diagram_Quick.jpg

Migrationファイルができあがるとこんな感じ

2019_10_25_162015_create_gs_user_table_table_php.jpg

早く開発できたのには理由がある

  • API(Firebase)を利用できたこと
  • WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
  • Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラム等の調査にも時間がかからなかった(はず)。
  • 作るのが楽しい

今後は

一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ER図から『Laravel Migrationファイル生成』可能なツールを4日で作ってみた

4日で作った『ER diagram Quick』 Laravel Migration生成可能

◇ツール名: ER diagram Quick

4日で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも、全て書かなくて良いので捗るはずです。
見た目など、細かい部分などはだいぶ見ないで進めましたが、現時点の進捗としては満足してます。(1日は子供をスカイツリーに連れていったので・・・もう少し少ないかも)
少しでも役に立てば幸いです。

ER_diagram_Quick.jpg

リンク: https://venezia-works.com/sql/

ER図をかいたら保存!!

2.jpg

作成したER図はCloud(Firebase) or ブラウザに保存

ER_diagram_Quick.jpg

Migrationファイルができあがると

Zip圧縮されて全てのMigrationファイルが作成されます。
中身はみなさんご存知の以下のようなCODEです。

2019_10_25_162015_create_gs_user_table_table_php.jpg

早く開発できたのには理由がある

  • API(Firebase)を利用できたこと
  • WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
  • Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラムや記法等の調査にも時間がかからなかった。
  • 作るのが楽しい

◇使用した技術

  • HTML / CSS / Vanilla JS
  • Firebase / WWW SQL Designer
  • PHP / Laravel5.5(Migration検証) / MAMP

今後は

一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。
いや、かなり便利なはずなので、是非使ってほしい(^^)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ER図からLaravelのMigrationを生成するツール

『ER diagram Quick』は Laravel Migration生成可能ツールでもある

◇ツール名: ER diagram Quick

実は4日間で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。たった4日間ですが、アウトプットの量はハンパないので、こういうのは慣れています。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも、全て書かなくて良いので捗るはずです。

開発の進めかたですが、個人としては「アウトプット・ファースト」を最優先にしています。
大体いつもα版(目的を満たす機能、動作ができてる最低限の状態)を一週間と決めて開発しています。
そこを軸に、大事な目的にあった機能を先行して作り込み、機能動作優先、見た目など細かい部分などはだいぶ見ないで進めました。現時点の進捗としては満足してます。いつもデザインはリリース後に調整していくので、このスピード感を出すためには、この方法が良いと思っています(まずは動くが優先、モチベーションも保ちやすい)。
少しでも役に立てば幸いです。

◇サイトデザインは少しだけLaravelのサイトカラーを入れました(^^)
ER_diagram_Quick!.jpg

リンク: https://venezia-works.com/sql/

ER図をかいたら保存!!

2.jpg

作成したER図はCloud(Firebase) or ブラウザに保存

ER_diagram_Quick.jpg

Migrationファイルができあがると

Zip圧縮されて全てのMigrationファイルが作成されます。
中身はみなさんご存知の以下のようなCODEです。

2019_10_25_162015_create_gs_user_table_table_php.jpg

早く開発できたのには理由がある

  • API(Firebase)を利用できたこと
  • WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
  • Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラムや記法等の調査にも時間がかからなかった。
  • 作るのが楽しい

◇使用した技術

  • HTML / CSS / Vanilla JS
  • PWA (ChcheAPI, ServiceWorker, Manifest)
  • Firebase / WWWSQLDesigner
  • PHP7.2 / Laravel5.5(Migration検証) / MAMP
  • ツール: PHPStorm、GoogleChrome

Chrome Auditsの結果 (画像とFirebaseJS外部ファイルがPerfomanceに影響してるようですが十分ですね)

ER_diagram_Quick!.jpg

今後は

一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。
いや、かなり便利なはずなので、是非使ってほしい(^^)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

未経験からweb系プログラマーになるための独学履歴~アプリケーション作成を体系的に学ぶ・Laravel導入編~

はじめに

ここまでチュートリアルやPHPについての基礎的な勉強を積み重ねてきたが、それぞれ個々としての理解に留まり、それらを使った実際のWebアプリケーションの実装の流れの理解には未だ乏しいので、ここから就活に使う成果物の作成のために、実際にWebアプリケーションはどのような手順で作成するのか、セキュリティはどうするのかということをPHPでログイン機能を実装するチュートリアルと、パーフェクトPHPを参考に以前作成した新規登録・ログイン・パスワードリセットのサイト元にそれらを確認しながら実装してみようと試みていたが、テンプレート・エンジンの項目を見て先にLaravelに手を付けたほうが効率が良いと判断したので以下の記事を参考にLaravelの導入とその基本的な仕組みを頭に入れてみる。

Laravel入門 - 使い方チュートリアル
Laravel超入門 開発環境の構築(VirtualBox + Vagrant + Homestead + Composer)
Laravel5.7: usersのCRUD機能を実装する
Laravelで作るRESTなWebアプリ
Vagrant + VirtualBox でLaravel5.8環境構築メモ

1 Homesteadの準備

Laravelと仮想環境以外に必要なもの……Git BashComposerVim

Composerで導入するのでまずComposerを導入していない場合はComposerを導入する。
Composerについては以下を参照。
Composerの使い方

各種仮想開発環境は各自用意する。
私は今まではXAMPPを使っていたが、今回はLaravelでHomesteadを使いたかったのでVagrantを用いている。
Vagrantの導入については冒頭の参考ページを参照してほしい。

Vagrantを導入した、あるいは導入済みの場合はHomesteadのダウンロードに進む。
まずはHomestead vagrant boxをダウンロードするために以下のコマンドを実行する。

vagrant box add laravel/homestead

次にHomesteadを入れたい任意のディレクトリとフォルダを用意して以下のコマンドを実行する。

git clone https://github.com/laravel/homestead.git Homestead

Homesteadのダウンロードが終わったら次はその設定ファイルを作成する。
先程ダウンロードしたHomesteadにディレクトリ移動して以下のコマンドを実行。

bash init.sh

すると、Homestead.yamlが作成されるのでそちらにHomesteadの設定を書き込んでいくのだが、設定項目でSSH鍵の項目があるので先にそちらを設定する。
一応、SSH鍵があるかどうか検索するコマンドを実行する。

ls -al ファイルパス .ssh

Windowsならこっち

dir ファイルパス .ssh

私はバッチファイルを作って前者のコマンドを利用した。
Windowsでもls,pwd,clearコマンドを使いたい!

検索すると

 ~のディレクトリ

ファイルが見つかりません

 (コマンドで指定したファイルパス) のディレクトリ

2019/10/19  04:07    <DIR>          .
2019/10/19  04:07    <DIR>          ..
2019/10/19  04:06    <DIR>          .ssh
2019/10/19  04:40    <DIR>          app
               0 個のファイル                   0 バイト

 コマンドで指定したファイルパス\.ssh のディレクトリ

2019/10/19  02:14    <DIR>          .
2019/10/19  02:14    <DIR>          ..
2019/10/19  02:14             1,766 id_rsa
2019/10/19  02:14               406 id_rsa.pub
               2 個のファイル               2,172 バイト
               2 個のディレクトリ  190,943,170,560 バイトの空き領域

といったように検索結果が出てくる。
今回私はすでに作成をしてあるのでこのような結果になる。
つまり、.sshフォルダを任意の箇所に作ってそこにssh鍵を保存するということになる。
では、ssh鍵を作成する。

ssh-keygen -t rsa

上記コマンドを実行。
Enter file in which to save the keyと表示されたら、保存したいファイルパスを指定してEnter。
Enter passphraseでパスワード求められるので任意のパスフレーズを入力し、確認のため二度目の入力を済ませればSSH鍵の完成と相成る。

ここまで来たらHomestead.yamlファイルを編集する。
Vimエディターを使える方はファイルが保存されているディレクトリに移動して以下を入力してVimを起動してください。

vim Homestead.yaml

内容は以下の通り

ip: "192.168.30.10"  #Laravelに接続する際のipアドレス。デフォルトだと競合してエラーを起こす可能性が高いのでこれにしておく

memory: 2048 #vagrantに割り当てるメモリ数
cpus: 2 #vagrantに割り当てる仮想CPUコア数
provider: virtualbox #仮想ソフトの指定

authorize: ~/.ssh/id_rsa.pub # ssh鍵の場所。下記のkeysとセット。

keys:
    - ~/.ssh/id_rsa

folders:
  - map: C:\~(ルートフォルダからのファイルパス)\app\code #Windowsの場合はフルパス指定、超めんどくさい。appフォルダを指定する場合はその直後のディレクトリにcodeフォルダを作り、こうやって指定する。
    to: /home/vagrant/Code #ホスト(上で指定した実際のディレクトリ)と連動する仮想環境化のディレクトリ、相互に変更が反映される。

sites: # プロジェクトごとに以下のようにパスを通すと複数のプロジェクトを作成できる。
    - map: homestead.test #後々Lalavelをブラウザで表示させるためのルートアドレス。トップページが表示される。
      to: /home/vagrant/Code/Laravel/public #Laravelのpubilcフォルダ(ウェブルート)を指定する。仮想環境化で入れてるのでこうなる。

databases: # 各プロジェクトで参照するDBの名前。複数ある場合はその都度追記する。
    - laravel_test

features: # オプションの設定、trueにしてから変更を反映すると対応するDBを削除してtrueにしたDBがインストールされる。
    - mariadb: true
    - ohmyzsh: false
    - webdriver: false

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp


注釈を補足すると、foldersの項目では実際に仮想環境化で扱うディレクトリを指定する。
上記の場合は~\app以下にあるcodeフォルダ以下を仮想環境下での/home/vagrant/Codeディレクトリと共有(連動)させるということになる。
つまり、後でこのcodeフォルダにLaravelをダウンロードするのだが、ダウンロードすると仮想環境下でのCodeフォルダも同様の状態になるということになる。

sitesとdatabasesでは作りたいプロジェクト(アプリケーション)に合わせてルートアドレスとウェブルート、そのプロジェクトで参照するDBを設定する。
Homesteadで複数のアプリを動かしたい場合はその都度新しくLaravelを共有フォルダにインストールしてHomestead.yamlに追記していく形になる。

featuresの項目はオプションの設定。
Homesteadには仮想開発するためのツールが一通り付属しているのでそれを使用するためのものだと思っていい。
Laravel及びHomesteadにおいてデフォルトで使用されるデータベースはMySQLかPostgreSQLだが、私はMariaDBを使いたかったのでtrueに設定している。
詳しくはドキュメントを参照。
Homestead

ちなみに私は沼ったのでそうならないために補足すると、このファイルを変更した際それを反映するにはvagrant up --provisionでvagrantをupしないといけないことに注意してほしい。

これで下準備が完了したので次はHomesteadにLaravelをダウンロードする。

2 Laravelのインストール

Homesteadディレクトリで以下を実行。

vagrant up

vagrant ssh

vagrant upしていた場合は、sshのみでOK。
次にCodeディレクトリに移動してそこにLaravelをダウンロードするので以下のコマンドを実行する。

cd Code/

composer create-project laravel/laravel -prefer--dist ディレクトリ名

ディレクトリ名はプロジェクト名や作成するアプリケーションの名前などダウンロードしたLaravelフォルダの名前にしたいものを指定する。

Laravelのダウンロードはこれで完了。あとは、Homestead.yamlで設定したIPアドレス、あるいはfoldersのmapで定義した文字列を打ち込むとTOPページが表示される。
次回は、Laravelの基本的な扱い方について見ていく。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む