20200823のlaravelに関する記事は15件です。

Laravel CRUD

はじめに

LaravelでCRUDを作っていきます。

やらないこと

  • 認証関係は扱いません。
  • 削除の前の確認などJavaScriptで実現される機能は今回は作りません。

つくるもの

アクション 画面の有無 内容
index 画面あり 一覧表示画面
create 画面あり 新規入力フォーム
store 画面なし 追加処理(createの登録ボタン)
show 画面あり 詳細表示
edit 画面あり 変更フォーム(既存の値が入っている状態)
update 画面なし 変更処理(editの更新ボタン)
destroy 画面なし 削除処理(showの削除ボタン)
流れ
index(一覧表示) ┳ create(新規作成画面) ━ store(新規保存)
            ┗ show(詳細表示)     ┳ edit(編集画面) ━ update(上書き保存)
                        ┗ destroy(削除)     

準備

テーブルの作成

作成するテーブル

id name telephone email created_at updated_at
ID 名前 電話番号 メールアドレス 作成日時 更新日時

modelファイルとmigrationファイルの作成

terminal
php artisan make:model Models/Member -m

-mオプションでマイグレーションファイルも一緒に作成します。

下記の2つのファイルが作成されます。
app\Models\Member.php
database\migrations\xxxx_xx_xx_xxxxxx_create_members_table.php

migrationファイルの編集

database\migrations\xxxx_xx_xx_xxxxxx_create_members_table.php
public function up()
  {
    Schema::create('members', function (Blueprint $table) {
      $table->id();
      $table->string('name',20);
      $table->string('telephone',13)->nullable()->unique();
      $table->string('email',255)->nullable()->unique();
      $table->timestamps();
    });
  }

public function down()
  {
    Schema::dropIfExists('members');
  }

migrationの実行

terminal
php artisan migrate

membersテーブルが作成されます。

レコードの挿入

表示確認用にmembersテーブルにレコードを入れます。

seederファイルの作成

terminal
php artisan make:seeder MembersTableSeeder

database\seeds\MembersTableSeeder.phpが作成されます。

seederファイルの編集

database\seeds\MembersTableSeeder.php
    public function run()
     {
         DB::table('members')->insert(
             [
               [
                 'name'=>'山田',
                 'telephone'=>'xxxx-xxxxx',
                 'email'=>'yamada@example.com',
                 'created_at'=>now(),
                 'updated_at'=>now(),
               ],

               ]
         );
     }

DatabaseSeederへの登録

作成したMembersTableSeederをDatabaseSeederに登録します。

database\seeds\DatabaseSeeder.php
public function run()
  {
    $this->call(MembersTableSeeder::class);
  }

seederファイルの実行

terminal
php artisan db:seed

membersテーブルにレコードが入ります。

controllerの作成

terminal
php artisan make:controller MemberController --resource

--resourceオプションをつけると、7つのアクションの雛形が予め用意されます。

controllerの編集

7つのアクションの雛形が予め用意されています。

app\Http\Controllers\MemberController.php
//追加
use Illuminate\Support\Facades\DB;
use App\Models\Member;

public function index()
  {
    //
  }

public function create()
   {
     //
   }

public function store(Request $request)
  {
    //
  }

public function show($id)
  {
    //
  }

public function edit($id)
  {
    //
  }

public function update(Request $request, $id)
  {
    //
  }

public function destroy($id)
  {
    //
  }

一覧画面(index)

routingの追加

/member/indexにアクセスした場合のルーティングを追加します。

route/web.php
//追記
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
});

controllerの編集

membersテーブルからデータを取ってきて、viewに渡します。

app\Http\Controllers\MemberController.php
public function index()
  {
    //memberテーブルからname,telephone,emailを$membersに格納
    $members=DB::table('members')
      ->select('id', 'name', 'telephone', 'email')
      ->get();

    //viewを返す(compactでviewに$membersを渡す)
    return view('member/index', compact('members'));
  }

viewの新規作成

resources\views\member\index.blade.php
<h1>一覧表示</h1>

<table>
<tr>
<th>ID</th>
<th>名前</th>
<th>電話番号</th>
<th>メールアドレス</th>
</tr>
@foreach($members as $member)
<tr>
<td>{{$member->id}}</td>
<td>{{$member->name}}</td>
<td>{{$member->telephone}}</td>
<td>{{$member->email}}</td>
</tr>
@endforeach
</table>

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/index にアクセスし、一覧表示ができていることを確認します。
Ctrl+Cで簡易サーバーを終了します。

新規登録(create)

routingの追加

/member/createにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');

  //追記
  Route::get('create', 'MemberController@create')->name('member.create');
});

controllerの編集

create.blade.phpを返します。

app\Http\Controllers\MemberController.php
public function create()
  {
    return view('member/create');
  }

viewの新規作成

新規作成画面を作ります。
名前だけ入力必須にしています。

resources\views\member\create.blade.php
<h1>新規作成</h1>

<form method="POST" action="">
  @csrf

  <div>
    <label for="form-name">名前</label>
    <input type="text" name="name" id="form-name" required>
  </div>

  <div>
    <label for="form-tel">電話番号</label>
    <input type="tel" name="telephone" id="form-tel">
  </div>

  <div>
    <label for="form-email">メールアドレス</label>
    <input type="email" name="email" id="form-email">
  </div>

  <button type="submit">登録</button>

</form>

導線(index→create)

一覧表示画面から新規作成画面へのリンクです。

resources\views\member\index.blade.php
<a href="{{ route('member.create') }}">{{ __('新規作成') }}</a>

導線(create→index)

新規作成画面から一覧表示画面へのリンクです。

resources\views\member\create.blade.php
//追加
<a href="{{ route('member.index') }}">{{ __('一覧へ戻る') }}</a>

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/create にアクセスし、新規入力画面ができていることを確認します。
(この時点では、登録ボタンを押してもエラーになります。)
Ctrl+Cで簡易サーバーを終了します。

新規保存(store)

新規追加画面で入力した値をDBに保存します。

routingの追加

/member/storeにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');

  //追加
  Route::post('store', 'MemberController@store')->name('member.store');
});

controllerの編集

フォームで入力された値をmembersテーブルに格納します。

app\Http\Controllers\MemberController.php
public function store(Request $request)
  {
    $member=new Member;

    $member->name=$request->input('name');
    $member->telephone=$request->input('telephone');
    $member->email=$request->input('email');

    $member->save();

    //一覧表示画面にリダイレクト
    return redirect('member/index');
  }

viewの新規作成

なし

導線(create→store)

一覧表示画面から新規作成画面へのリンクです。

resources\views\membercreate.blade.php
//<form method="POST" action="">
//↓フォームの送信先の変更
<form method="POST" action="{{route('member.store')}}">

導線(store→index)]

controllerで、リダイレクトを記述済です。

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/create にアクセスし、値を入力して送信すると、member/indexにリダイレクトされ、membersテーブルに値が入っている事を確認します。
Ctrl+Cで簡易サーバーを終了します。

詳細表示(show)

routingの追加

/member/show/idにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');
  Route::post('store', 'MemberController@store')->name('member.store');

  //追加
  Route::get('show/{id}', 'MemberController@show')->name('member.show');
});

controllerの編集

指定したIDのメンバーの詳細ページを表示する処理をします。

app\Http\Controllers\MemberController.php
public function show($id)
  {
    $member=Member::find($id);

    return view('member/show', compact('member'));
  }

viewの新規作成

resources\views\member\show.blade.php
<h1>詳細表示</h1>

<div>
名前
{{$member->name}}
</div>

<div>
電話番号
{{$member->telephone}}
</div>

<div>
メールアドレス
{{$member->email}}
</div>

導線(index→show)

一覧表示画面に、1カラム増やして詳細画面へのリンクを追加します。

resources\views\member\index.blade.php
<table>
<tr>
<th>ID</th>
<th>名前</th>
<th>電話番号</th>
<th>メールアドレス</th>
<th>詳細</th>
</tr>
@foreach($members as $member)
<tr>
<td>{{$member->id}}</td>
<td>{{$member->name}}</td>
<td>{{$member->telephone}}</td>
<td>{{$member->email}}</td>
<td><th><a href="{{route('member.show',['id'=>$member->id])}}">詳細</a></th></td>
</tr>
@endforeach
</table>

導線(show→index)

resources\views\member\show.blade.php
<a href="{{ route('member.index') }}">{{ __('一覧に戻る') }}</a>

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/index にアクセスし、詳細を押すと詳細画面が表示されることを確認します。
Ctrl+Cで簡易サーバーを終了します。

編集(edit)

routingの追加

/member/edit/idにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');
  Route::post('store', 'MemberController@store')->name('member.store');
  Route::get('show/{id}', 'MemberController@show')->name('member.show');

  //追加
  Route::get('edit/{id}', 'MemberController@edit')->name('member.edit');
});

controllerの編集

app\Http\Controllers\MemberController.php
public function edit($id)
  {
    $member=Member::find($id);

    return view('member/edit', compact('member'));
  }

viewの新規作成

resources\views\member\edit.blade.php
<h1>編集</h1>

 <form method="POST" action="">
  @csrf

 <div>
  名前
  <input type="text" name=name value="{{$member->name}}">
  </div>

  <div>
  電話番号
  <input type="text" name=telephone value="{{$member->telephone}}">
  </div>

  <div>
  メールアドレス
  <input type="text" name=email value="{{$member->email}}">
  </div>


  <input type="submit" value="更新する">

  </form>

導線(show→edit)

resources\views\member\show.blade.php
//追加
<a href="{{route('member.edit',['id'=>$member->id])}}">{{ __('編集') }}</a>

導線(edit→show)

resources\views\member\edit.blade.php
//追加
<a href="{{route('member.show',['id'=>$member->id])}}">{{ __('詳細に戻る') }}</a>

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/index にアクセスし、詳細→編集と進む編集フォームが表示されることを確認します。
(この時点では、更新ボタンを押してもエラーになります。)

更新(update)

編集画面で「更新」ボタンを押した時の動作を設定していきます。

routingの追加

/member/update/idにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');
  Route::post('store', 'MemberController@store')->name('member.store');
  Route::get('show/{id}', 'MemberController@show')->name('member.show');
  Route::get('edit/{id}', 'MemberController@edit')->name('member.edit');

  //追加
  Route::post('update/{id}', 'MemberController@update')->name('member.update');
});

controllerの編集

app\Http\Controllers\MemberController.php
public function update(Request $request, $id)
  {
    $member=Member::find($id);

    $member->name=$request->input('name');
    $member->telephone=$request->input('telephone');
    $member->email=$request->input('email');

    //DBに保存
    $member->save();

    //処理が終わったらmember/indexにリダイレクト
    return redirect('member/index');
}

viewの新規作成

なし

導線(edit→update)

editの送信ボタンの送信先を指定します。

resources\views\member\edit.blade.php
//<form method="POST" action="">
//↓
<form method="POST" action="{{route('member.update',['id' =>$member->id])}}">

導線(update→index)

controllerでリダイレクト済

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/index にアクセスし、詳細画面→編集画面と移動し、値を変更して「更新」ボタンを押し、/member/indexのデータが変更されていることを確認します。
Ctrl+Cで簡易サーバーを終了します。

削除(destroy)

routingの追加

/member/destroy/idにアクセスした場合のルーティングを追加します。

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index', 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');
  Route::post('store', 'MemberController@store')->name('member.store');
  Route::get('show/{id}', 'MemberController@show')->name('member.show');
  Route::get('edit/{id}', 'MemberController@edit')->name('member.edit');
  Route::post('update/{id}', 'MemberController@update')->name('member.update');

  //追加
  Route::post('destroy/{id}', 'MemberController@destroy')->name('member.destroy');
});

controllerの編集

指定のIDを削除する処理を書きます。

app\Http\Controllers\MemberController.php
public function destroy($id)
  {
    $member=Member::find($id);

    $member->delete();

    return redirect('member/index');
  }

viewの新規作成

なし

導線(show→destroy)

resources\views\member\show.blade.php
//追加
<form method="POST" action="{{route('member.destroy',['id'=>$member->id])}}">
  @csrf
  <button type="submit">削除</button>
</form>

導線(destroy→index)

controllerでリダイレクト済

確認

簡易サーバーを起動します。

terminal
php artisan serve

ブラウザで http://127.0.0.1:8000/member/index にアクセスし、詳細画面に移動し、「削除」ボタンを押し、/member/indexのデータが削除されていることを確認します。
Ctrl+Cで簡易サーバーを終了します。

バリデーションの準備

エラーメッセージの日本語化

resources/lang/に下記のjaフォルダをenフォルダと同じ階層に配置します。
https://github.com/minoryorg/laravel-resources-lang-ja
※jaフォルダ内のファイルの編集でさらにメッセージのカスタマイズができます。

resources\lang\ja\validation.php
//'attributes' => [],
//↓
'attributes' => ['email'=>'メールアドレス',
'name'=>'名前'
],

バリデーション(新規保存)

form requestの作成

terminal
php artisan make:request StoreMember

app\Http\Requests\StoreMember.phpが新規作成されます。

form requestの編集

バリデーションのルールを指定します。

app\Http\Requests\StoreMember.php
//追加
use Illuminate\Validation\Rule;

public function authorize()
  {
    //return false;
    //↓falseをtrueに変更
    return true;
  }

public function rules()
  {
    return [

      //追加
      'name' => [
        'string',
        'required',
        'max:20'
         ],

      'telephone' => [
        'string',
        'nullable',
        'max:13',
        'unique:members'
        ],

      'email' => [
        'nullable',
        'max:255',
        'email',
        'unique:members'
        ]
    ];
  }
キーワード 内容
required 必須
max 最大長
unique:テーブル名 指定のテーブルでユニーク
nullable null許容
accepted チェックされている
string 文字列型
email email型
url url型

controller

app\Http\Controllers\MemberController.php
//追加
use App\Http\Requests\StoreMember;


//public function store(Request $request)
//↓変更
public function store(StoreMember $request)

view

エラーメッセージを表示させたい場所にエラーメッセージを配置します。

resources\views\member\create.blade.php
<form method="POST" action="{{route('member.store')}}">
  @csrf

  <div>
    <label for="form-name">名前</label>

    // <input type="text" name="name" id="form-name" required>
    //↓valueを追加して入力値を保持させます。
    <input type="text" name="name" id="form-name" required value="{{old('name')}}">

    //追加
    @error('name')
    {{$message}}
    @enderror

  </div>

  <div>
    <label for="form-tel">電話番号</label>

    //<input type="tel" name="telephone" id="form-tel">
    //↓valueを追加して入力値を保持させます。
    <input type="tel" name="telephone" id="form-tel" value="{{old('telephone')}}">

   //追加
   @error('telephone')
   {{$message}}
   @enderror

  </div>

  <div>

    <label for="form-email">メールアドレス</label>

    //<input type="email" name="email" id="form-email">
    //↓valueを追加して入力値を保持させます。
    <input type="email" name="email" id="form-email" value="{{old('email')}}">

    //追加
    @error('email')
    {{$message}}
    @enderror

  </div>

  <button type="submit">送信</button>

</form>

バリデーション(上書き保存)

新規登録のバリデーションのままでは、ユニークにする電話番号と、メールアドレスを弾いてしまうので、変更が必要です。

form requestの作成

terminal
php artisan make:request UpdateMember

app\Http\Requests\UpdateMember.phpが新規作成されます。

form requestの編集

新規作成のバリデーションとほぼ同じですが、既存の値も許可するように変更します。

app\Http\Requests\UpdateMember.php
//追加
use Illuminate\Validation\Rule;

public function authorize()
  {
    //return false;
    //↓falseをtrueに変更
    return true;
  }

public function rules()
  {
    return [

      //追加
      'name' => [
        'string',
        'required',
        'max:20'
        ],

      'telephone' => [
         'string',
         'nullable',
         'max:13',

         //既存の値も許可
         Rule::unique('members')->ignore($this->id)
       ],

      'email' => [
        'nullable',
        'max:255',
        'email',

         //既存の値も許可
         Rule::unique('members')->ignore($this->id)
         ]

     ];
   }

controller

app\Http\Controllers\MemberController.php
//追加
use App\Http\Requests\UpdateMember;

//public function update(Request $request, $id)
//↓変更
public function update(UpdateMember $request, $id)

view

エラーメッセージを表示させたい場所にエラーメッセージを配置します。

resources\views\member\edit.blade.php
<form method="POST" action="{{route('member.update',['id' =>$member->id])}}">
 @csrf

  <div>
    名前
    <input type="text" name=name value="{{$member->name}}">
    @error('name')
    {{$message}}
    @enderror
  </div>

  <div>
    電話番号
    <input type="text" name=telephone value="{{$member->telephone}}">
    @error('telephone')
    {{$message}}
    @enderror
  </div>

  <div>
    メールアドレス
    <input type="text" name=email value="{{$member->email}}">
    @error('email')
    {{$message}}
    @enderror
  </div>

  <input type="submit" value="更新する">

</form>

ページネーション

controller

一覧表示の件数が増えてきたら、ページを分けます。

app\Http\Controllers\MemberController.php
public function index()
  {
    $members=DB::table('members')
      ->select('id', 'name', 'telephone', 'email')
      //->get();
      //↓ 1ページに表示する件数を指定
      ->paginate(20);

      //viewを返す(compactでviewに$membersを渡す)
      return view('member/index', compact('members'));
  }

view

一覧画面にページ送りのUIを追加します。

resources\views\member\index.blade.php
//追加
{{$members->links()}}

記述としては1行ですが、下記のようにhtmlが生成されますので、CSSで形を整えてください。

html
<nav>
  <ul class="pagination">

    <li class="page-item disabled" aria-disabled="true" aria-label="« Previous"><span class="page-link" aria-hidden="true">‹</span></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="http://127.0.0.1:8000/member/index?page=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="http://127.0.0.1:8000/member/index?page=2" rel="next" aria-label="Next »">›</a>
    </li>

  </ul>
</nav>

検索機能

routingの追加

route/web.php
Route::group(['prefix'=>'member'], function () {
  Route::get('index' 'MemberController@index')->name('member.index');
  Route::get('create', 'MemberController@create')->name('member.create');
  Route::post('store', 'MemberController@store')->name('member.store');
  Route::get('show/{id}', 'MemberController@show')->name('member.show');
  Route::get('edit/{id}', 'MemberController@edit')->name('member.edit');
  Route::post('update/{id}', 'MemberController@update')->name('member.update');
  Route::post('destroy/{id}', 'MemberController@destroy')->name('member.destroy');

  //追加
  Route::get('search', 'MemberController@search')->name('member.search');
});

controllerの編集

app\Http\Controllers\MemberController.php
public function search(Request $request)
  {
    $serach=$request->input('q');

    $query=DB::table('members');

    //検索ワードの全角スペースを半角スペースに変換
    $serach_spaceharf=mb_convert_kana($serach, 's');


    //検索ワードを半角スペースで区切る
    $keyword_array=preg_split('/[\s]+/', $serach_spaceharf, -1, PREG_SPLIT_NO_EMPTY);

    //検索ワードをループで回してマッチするレコードを探す
    foreach ($keyword_array as $keyword) {
        $query->where('name', 'like', '%'.$keyword.'%');
      }

    $query->select('id', 'name', 'telephone', 'email');
    $members=$query->paginate(20);

    return view('member/index', compact('members'));
  }

viewの編集

一覧表示画面に検索フォームを追加します。

resources\views\member\index.blade.php
//追加
<form method="GET" action="{{route('member.search')}}">
  @csrf
  <div>
    <label for="form-search">検索</label>
    <input type="search" name="q" id="form-search">
  </div>

  <button type="submit">検索</button>

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

LaravelをRDSと繋ぐ

TL;DR

  • RDSを構築して、RDS情報をenvs/配下の値を適切に埋める
  • envファイルに設定したい文字列に#がある時はダブルクオーテーションで括る

RDS構築

一連の流れを説明とともに記述します。詳しいことは載っていないので注意です。
また、今回はRDSをパブリックサブネットに配置します。
(外部から繋ぎたいため)

本来はVPC内のプライベートサブネットに置き、
EC2などからしか接続させないようにするのがオーソドックスかと思います。

  1. VPC作成
  2. VPC > インターネットゲートウェイからインターネットゲートウェイを作成し、VPCにアタッチ
  3. VPC > ルートテーブルから、VPCのルートテーブルにサブネットの関連づけをする
  4. VPC > サブネットからパブリックサブネットを2つ作る (※1)
  5. EC2 > セキュリティグループからRDS用のセキュリティグループ作成。
    今回はパブリックサブネットに置くので、外部(XServer)のIPをインバウンドとして設定
  6. RDS > サブネットグループを先に作成
    1. 先ほどつくった2つのサブネットを選択
  7. RDS > パラメータグループを先に作成
    1. デフォルトであるものを適用させないくらいの文脈で作成
  8. RDS > オプショングループを先に作成
    1. デフォルトであるものを適用させないくらいの文脈で作成
  9. RDSからデータベースの作成 (かいつまんで状況↓)
    1. DBインスタンスサイズ
      1. テスト環境なのでバースト可能クラスのt2.micro選択
    2. ストレージ
      1. ストレージタイプ:汎用
      2. ストレージの自動スケーリングは無効に(テスト環境なので)
    3. 可用性と耐久性
      1. スタンバイインスタンスを作成しないでください
        1. テスト環境なので。2つ作ったサブネットの1つだけ使う感じ
    4. 接続
      1. 先ほどつくったVPC
      2. サブネットグループ
        1. 先ほど作ったもの
      3. パブリックアクセス可能
        1. あり。
        2. 今回、外部から接続させるため。プライベートサブネット上であれば「なし」
      4. セキュリティグループ
        1. 先ほど作ったもの
      5. アベイラビリティゾーン
        1. 2つのサブネットのどちらか好きな方
    5. データベース認証
      1. パスワード認証
    6. 追加設定
      1. DBパラメータグループ
        1. 先ほど作ったもの
      2. オプショングループ
        1. 先ほど作ったもの
      3. 自動バックアップの有効化。30日くらい
      4. モニタリングは無効化
      5. 削除保護の有効化
    7. データベースの作成! (※2)

※1. RDSのサブネットを複数持たせる件について

RDSはマルチAZ、冗長化が簡単にできるように、デフォルトで複数のサブネットを用意したグループを作らせる

※2. Cannot create a publicly accessible DBInstance. The specified VPC does not support DNS resolution

↓ありがとうございます???

Cannot create a RDS Readreplicaが作成できない。(publicly accessible DBInstance because customer VPC does not support DNS resolution and/or hostnames. )

Lalavelへの記述

envs/配下に適切に情報を記述する。

  • DB_HOST
    • 接続とセキュリティ > エンドポイントを記述
    • XXXX.YYYYYYY.ZZZZZZ.rds.amazonaws.com なやつ
  • DB_DATABASE
    • データベース名
    • Sequel ProからRDSに接続してデータベース作成してそれを書いた
  • DB_USERNAME
    • とりえあずさっき作成したユーザを記述
  • DB_PASSWORD
    • さっき作成したユーザのパスワードを記述

↑の設定後、以下を実行

php artisan config:clear
php artisan cache:clear

設定したenvがうまく反映されない

SQLSTATE[HY000] [1045] Access denied for user 'XXX'@'YYYYY' (using password: YES) (SQL: delete from `cache`)

がでまくった。usernameは合ってそうだが、host名(DB_HOSTに設定したRDSのエンドポイント)が正しくなさそうな感じになる。

結論としては passwordにシャープが入っていた ため。
コメント化されてしまい、うまくenvファイルがパースできなかったみたい。
(host名が間違っているのかと思ってかなりの時間を割いて調べてしまった?)

envのパスワード部分を以下のようにダブルクオーテーションで括ることで解決。

DB_PASSWORD="XXXXXX"

できた???

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

【Laravel】テストでセッションへ保存できないときの対応法

環境

Laravel5.5

保存できなかったときの場面

ログイン認証が成功したときにデータをセッションへ保存していたが、この部分が上手くいかなかった。セッションへ保存する方法を2通り紹介したいと思います:smiley:

対応方法

  • withsessionメソッド
  • sessionメソッド

withSessionメソッド

指定した配列をセッションに保存します。

$response = $this->withSession(['test' => 'unittest']);

sessionメソッド

$response = $this->session(['test' => 'unittest']);

参考

Laravel 5.5 HTTPテスト

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

Laravelのさくらサーバへのデプロイ(つまづいたとこも含めました)

通っていたプログラミングスクールの特典でさくらサーバが無料で使えたので、Laravelで作ったプロジェクトをGithubを通してさくらサーバにデプロイしてみました。他の記事を参考にしてもどこかしらでつまいちゃったので、つまづいたポイント含めてまとめてみました。

※用語の間違いはご容赦くださり。

やること

  1. ローカルで作成したLaravelのフォルダをGithubにアップロード
  2. Githubにアップロードしたファイルをさくらサーバにデプロイ

Githubへのアップロード

ターミナルを使ってローカルで作成したフォルダの階層まで進み、下記コマンドを入力します。

git init
git add .
git commit -m "first commit" // ""はメッセージなので何でもOK
git remote add origin GitHubのリポジトリURL
(例:https://github.com/Riooon/laravel.git)

URLはリポジトリの作成直後、こちらに表示されます。

スクリーンショット 2020-08-23 15.34.00.png

git push origin master

これでアップロード完成です。詰まったらドラッグ&ドロップでアップロードしても問題ないかと思います。

さくらサーバへのアップロード

サーバへの接続

さくらサーバを契約した時に届いた「仮登録完了のお知らせ」というメールを開いて、下記の情報を控えます。

sakura.png

  • FTPサーバ名
  • FTPアカウント
  • FTP初期フォルダ
  • サーバパスワード

ターミナルから下記コマンドを入力し、さくらサーバにSSH接続します。パスワードを聞かれるので、「サーバパスワード」の値を入力します。

ssh riooon@riooon.sakura.ne.jp //これは例です
(ssh FTPアカウント@FTPサーバ名)

/home/アカウント名 の階層(何もしてなければそのまま)で、LaravelをアップロードしたGithubのリポジトリからコードを引っ張ってきます。

git clone https://github.com/Riooon/laravel.git

ターミナルの階層を移動・確認する時には、以下のコマンドを使うと便利です。

pwd //現在のディレクトリを表示
ls //一段下の階層を表示

/home/アカウント名の下にgit cloneで新たに作成したフォルダの階層が登場します。

ので、そこまで移動。

cd laravel // 階層は各自に合わせて

compserのインストール

compserをインストールしていきます。

curl -sS https://getcomposer.org/installer | php

続けて下記コマンドを入力します。

php composer.phar

Composer って主張を確認できれば、大丈夫です。

スクリーンショット 2020-08-23 16.27.52.png

続けてvendorのデータをインストールします。

php composer.phar install

vendorのフォルダを確認できればOKです。

ls

スクリーンショット 2020-08-23 16.30.55.png

データベース作成・接続

さくらサーバのコントローラパネルにログインして、データベースを作成します。

https://secure.sakura.ad.jp/rs/cp/

sakura.png

データベースを作成したら、下記四点の情報を控えます。

  1. データベースサーバ
  2. ユーザ名
  3. 接続先パスワード
  4. データベース名

db.png

続いて.envファイルを作成していきます。

ターミナルに戻って、Laravelプロジェクトのディレクトリ(例:home/riooon/laravel)で下記を入力してます。

cp .env.example .env

vimというやつを開いて、コピーした.envファイルを修正します。

vim .env

vimというやつには、閲覧モードと編集モードがあります。この2つを切り替えながら編集していきます。

(個人的)よく使うvimコマンド

i //編集モードを開く
esc //編集モードを閉じて閲覧モードに戻る

:wq //内容を保存(閲覧モードで使用可)
:q! //内容を保存せず終了(閲覧モードで使用可)

x //1文字削除(閲覧モードで使用可)
dd(連打) //1行切り取り(閲覧モードで使用可)

vim.png

上記のように編集したら、esc  :wq を続けて入力して保存します。

これでデータベースの接続は完了です。

アプリケーションキーを作成

以下を入力します。

php artisan key:generate

マイグレーションをして、データベースの中身を反映させます。

php aritsan migrate

/www/に/public/の中身をコピーする

/www/にプロジェクトの一部をコピーして、URLを入力して閲覧できる様にします。

www/のディレクトリ まで移動します。

cd
cd www

下記を入力してpubicフォルダの中身をコピーします。

cp -r /home/アカウント名/Laravelプロジェクト名/public/* /home/アカウント名/www/
(例:cp -r /home/riooon/laravel/public/* /home/riooon/www/)

再びさくらサーバのコントローラパネルにログイン。

https://secure.sakura.ad.jp/rs/cp/

file-manager.png

「ファイルマネージャー」を開きます。

index.png

index.phpファイルをクリックして、左下に表示される鉛筆マークを選択します。

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

の2カ所を、下記のように変更します。

require __DIR__.'/../laravelプロジェクト名/vendor/autoload.php';
$app = require_once __DIR__.'/../laravelプロジェクト名/bootstrap/app.php';

例)
require __DIR__.'/../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../laravel/bootstrap/app.php';

先ほどの様にvimでも開けます。(極力触りたくない、、)

ここまで設定すれば、初期ドメインにアクセスするとページが表示される(はず!)です。

トップページ以外が表示されない

このとき、なぜか.htaccessファイルが/www/にコピーされないので(私だけ?)、トップページ以外が表示されません。

ので、こちらも同様に手動で作成していきます。

さくらサーバのコントロールパネルから「ファイルマネージャー」を同様に開いて、「表示アドレスへの操作」「ファイル作成」を選択します。

htaccess.png

下記の内容をコピーして貼り付け、.htaccessという名前をつけて保存します。
(この内容は、publicディレクトリ直下にあります。)

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

これでトップページ以外も表示される(はず!)です。

storageの画像が表示されない

ここまでやっても、storageフォルダにある画像が表示されません。

ローカルで作成したシンボリックリンクがstorage->publicにしか繋がっておらず、wwwに繋がっていないためだと認識しています。

そのため、storage->wwwのシンボリックリンクを別途作成します。

cd //トップの階層まで戻ります
ln -s /home/アカウント名/laravelプロジェクト名/storage/app/public /home/laravelプロジェクト名/www/storage
例) ln -s /home/riooon/laravel/storage/app/public /home/laravel/www/storage

以上で画像も表示される(はず!)です。

修正・追記が必要な点があれば、コメントいただけると嬉しいです。

参照元

https://arrown-blog.com/laravel-sakura-deploy/
https://note.com/koushikagawa/n/n69d534105f07
https://qiita.com/colorrabbit/items/755cfbb0e97d48280775
https://qiita.com/Baisel/items/49b16ce3231c749f6c6f

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

Laravelのさくらサーバへのデプロイ(つまづいたとこまとめました)

通っていたプログラミングスクールの特典でさくらサーバが無料で使えたので、Laravelで作ったプロジェクトをGithubを通してさくらサーバにデプロイしてみました。他の記事を参考にしてもどこかしらでつまいちゃったので、つまづいたポイント含めてまとめてみました。

※用語の間違いはご容赦くださり。

やること

  1. ローカルで作成したLaravelのフォルダをGithubにアップロード
  2. Githubにアップロードしたファイルをさくらサーバにデプロイ

Githubへのアップロード

ターミナルを使ってローカルで作成したフォルダの階層まで進み、下記コマンドを入力します。

git init
git add .
git commit -m "first commit" // ""はメッセージなので何でもOK
git remote add origin GitHubのリポジトリURL
(例:https://github.com/Riooon/laravel.git)

URLはリポジトリの作成直後、こちらに表示されます。

スクリーンショット 2020-08-23 15.34.00.png

git push origin master

これでアップロード完成です。詰まったらドラッグ&ドロップでアップロードしても問題ないかと思います。

さくらサーバへのアップロード

サーバへの接続

さくらサーバを契約した時に届いた「仮登録完了のお知らせ」というメールを開いて、下記の情報を控えます。

sakura.png

  • FTPサーバ名
  • FTPアカウント
  • FTP初期フォルダ
  • サーバパスワード

ターミナルから下記コマンドを入力し、さくらサーバにSSH接続します。パスワードを聞かれるので、「サーバパスワード」の値を入力します。

ssh riooon@riooon.sakura.ne.jp //これは例です
(ssh FTPアカウント@FTPサーバ名)

/home/アカウント名 の階層(何もしてなければそのまま)で、LaravelをアップロードしたGithubのリポジトリからコードを引っ張ってきます。

git clone https://github.com/Riooon/laravel.git

ターミナルの階層を移動・確認する時には、以下のコマンドを使うと便利です。

pwd //現在のディレクトリを表示
ls //一段下の階層を表示

/home/アカウント名の下にgit cloneで新たに作成したフォルダの階層が登場します。

ので、そこまで移動。

cd laravel // 階層は各自に合わせて

compserのインストール

compserをインストールしていきます。

curl -sS https://getcomposer.org/installer | php

続けて下記コマンドを入力します。

php composer.phar

Composer って主張を確認できれば、大丈夫です。

スクリーンショット 2020-08-23 16.27.52.png

続けてvendorのデータをインストールします。

php composer.phar install

vendorのフォルダを確認できればOKです。

ls

スクリーンショット 2020-08-23 16.30.55.png

データベース作成・接続

さくらサーバのコントローラパネルにログインして、データベースを作成します。

https://secure.sakura.ad.jp/rs/cp/

sakura.png

データベースを作成したら、下記四点の情報を控えます。

  1. データベースサーバ
  2. ユーザ名
  3. 接続先パスワード
  4. データベース名

db.png

続いて.envファイルを作成していきます。

ターミナルに戻って、Laravelプロジェクトのディレクトリ(例:home/riooon/laravel)で下記を入力してます。

cp .env.example .env

vimというやつを開いて、コピーした.envファイルを修正します。

vim .env

vimというやつには、閲覧モードと編集モードがあります。この2つを切り替えながら編集していきます。

(個人的)よく使うvimコマンド

i //編集モードを開く
esc //編集モードを閉じて閲覧モードに戻る

:wq //内容を保存(閲覧モードで使用可)
:q! //内容を保存せず終了(閲覧モードで使用可)

x //1文字削除(閲覧モードで使用可)
dd(連打) //1行切り取り(閲覧モードで使用可)

vim.png

上記のように編集したら、esc  :wq を続けて入力して保存します。

これでデータベースの接続は完了です。

アプリケーションキーを作成

以下を入力します。

php artisan key:generate

マイグレーションをして、データベースの中身を反映させます。

php aritsan migrate

/www/に/public/の中身をコピーする

/www/にプロジェクトの一部をコピーして、URLを入力して閲覧できる様にします。

www/のディレクトリ まで移動します。

cd
cd www

下記を入力してpubicフォルダの中身をコピーします。

cp -r /home/アカウント名/Laravelプロジェクト名/public/* /home/アカウント名/www/
(例:cp -r /home/riooon/laravel/public/* /home/riooon/www/)

再びさくらサーバのコントローラパネルにログイン。

https://secure.sakura.ad.jp/rs/cp/

file-manager.png

「ファイルマネージャー」を開きます。

index.png

index.phpファイルをクリックして、左下に表示される鉛筆マークを選択します。

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

の2カ所を、下記のように変更します。

require __DIR__.'/../laravelプロジェクト名/vendor/autoload.php';
$app = require_once __DIR__.'/../laravelプロジェクト名/bootstrap/app.php';

例)
require __DIR__.'/../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../laravel/bootstrap/app.php';

先ほどの様にvimでも開けます。(極力触りたくない、、)

ここまで設定すれば、初期ドメインにアクセスするとページが表示される(はず!)です。

トップページ以外が表示されない

このとき、なぜか.htaccessファイルが/www/にコピーされないので(私だけ?)、トップページ以外が表示されません。

ので、こちらも同様に手動で作成していきます。

さくらサーバのコントロールパネルから「ファイルマネージャー」を同様に開いて、「表示アドレスへの操作」「ファイル作成」を選択します。

htaccess.png

下記の内容をコピーして貼り付け、.htaccessという名前をつけて保存します。
(この内容は、publicディレクトリ直下にあります。)

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

これでトップページ以外も表示される(はず!)です。

storageの画像が表示されない

ここまでやっても、storageフォルダにある画像が表示されません。

ローカルで作成したシンボリックリンクがstorage->publicにしか繋がっておらず、wwwに繋がっていないためだと認識しています。

そのため、storage->wwwのシンボリックリンクを別途作成します。

cd //トップの階層まで戻ります
ln -s /home/アカウント名/laravelプロジェクト名/storage/app/public /home/laravelプロジェクト名/www/storage
例) ln -s /home/riooon/laravel/storage/app/public /home/laravel/www/storage

以上で画像も表示される(はず!)です。

修正・追記が必要な点があれば、コメントいただけると嬉しいです。

参照元

https://arrown-blog.com/laravel-sakura-deploy/
https://note.com/koushikagawa/n/n69d534105f07
https://qiita.com/colorrabbit/items/755cfbb0e97d48280775
https://qiita.com/Baisel/items/49b16ce3231c749f6c6f

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

Laravelのさくらサーバへのデプロイやってみました

通っていたプログラミングスクールの特典でさくらサーバが無料で使えたので、Laravelで作ったプロジェクトをGithubを通してさくらサーバにデプロイしてみました。他の記事を参考にしてもどこかしらでつまいちゃったので、つまづいたポイント含めてまとめてみました。

※用語の間違いはご容赦くださり。

やること

  1. ローカルで作成したLaravelのフォルダをGithubにアップロード
  2. Githubにアップロードしたファイルをさくらサーバにデプロイ

Githubへのアップロード

ターミナルを使ってローカルで作成したフォルダの階層まで進み、下記コマンドを入力します。

git init
git add .
git commit -m "first commit" // ""はメッセージなので何でもOK
git remote add origin GitHubのリポジトリURL
(例:https://github.com/Riooon/laravel.git)

URLはリポジトリの作成直後、こちらに表示されます。

スクリーンショット 2020-08-23 15.34.00.png

git push origin master

これでアップロード完成です。詰まったらドラッグ&ドロップでアップロードしても問題ないかと思います。

さくらサーバへのアップロード

サーバへの接続

さくらサーバを契約した時に届いた「仮登録完了のお知らせ」というメールを開いて、下記の情報を控えます。

sakura.png

  • FTPサーバ名
  • FTPアカウント
  • FTP初期フォルダ
  • サーバパスワード

ターミナルから下記コマンドを入力し、さくらサーバにSSH接続します。パスワードを聞かれるので、「サーバパスワード」の値を入力します。

ssh riooon@riooon.sakura.ne.jp //これは例です
(ssh FTPアカウント@FTPサーバ名)

/home/アカウント名 の階層(何もしてなければそのまま)で、LaravelをアップロードしたGithubのリポジトリからコードを引っ張ってきます。

git clone https://github.com/Riooon/laravel.git

ターミナルの階層を移動・確認する時には、以下のコマンドを使うと便利です。

pwd //現在のディレクトリを表示
ls //一段下の階層を表示

/home/アカウント名の下にgit cloneで新たに作成したフォルダの階層が登場します。

ので、そこまで移動。

cd laravel // 階層は各自に合わせて

compserのインストール

compserをインストールしていきます。

curl -sS https://getcomposer.org/installer | php

続けて下記コマンドを入力します。

php composer.phar

Composer って主張を確認できれば、大丈夫です。

スクリーンショット 2020-08-23 16.27.52.png

続けてvendorのデータをインストールします。

php composer.phar install

vendorのフォルダを確認できればOKです。

ls

スクリーンショット 2020-08-23 16.30.55.png

データベース作成・接続

さくらサーバのコントローラパネルにログインして、データベースを作成します。

https://secure.sakura.ad.jp/rs/cp/

sakura.png

データベースを作成したら、下記四点の情報を控えます。

  1. データベースサーバ
  2. ユーザ名
  3. 接続先パスワード
  4. データベース名

db.png

続いて.envファイルを作成していきます。

ターミナルに戻って、Laravelプロジェクトのディレクトリ(例:home/riooon/laravel)で下記を入力してます。

cp .env.example .env

vimというやつを開いて、コピーした.envファイルを修正します。

vim .env

vimというやつには、閲覧モードと編集モードがあります。この2つを切り替えながら編集していきます。

(個人的)よく使うvimコマンド

i //編集モードを開く
esc //編集モードを閉じて閲覧モードに戻る

:wq //内容を保存(閲覧モードで使用可)
:q! //内容を保存せず終了(閲覧モードで使用可)

x //1文字削除(閲覧モードで使用可)
dd(連打) //1行切り取り(閲覧モードで使用可)

vim.png

上記のように編集したら、esc  :wq を続けて入力して保存します。

これでデータベースの接続は完了です。

アプリケーションキーを作成

以下を入力します。

php artisan key:generate

マイグレーションをして、データベースの中身を反映させます。

php aritsan migrate

/www/に/public/の中身をコピーする

/www/にプロジェクトの一部をコピーして、URLを入力して閲覧できる様にします。

www/のディレクトリ まで移動します。

cd
cd www

下記を入力してpubicフォルダの中身をコピーします。

cp -r /home/アカウント名/Laravelプロジェクト名/public/* /home/アカウント名/www/
(例:cp -r /home/riooon/laravel/public/* /home/riooon/www/)

再びさくらサーバのコントローラパネルにログイン。

https://secure.sakura.ad.jp/rs/cp/

file-manager.png

「ファイルマネージャー」を開きます。

index.png

index.phpファイルをクリックして、左下に表示される鉛筆マークを選択します。

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

の2カ所を、下記のように変更します。

require __DIR__.'/../laravelプロジェクト名/vendor/autoload.php';
$app = require_once __DIR__.'/../laravelプロジェクト名/bootstrap/app.php';

例)
require __DIR__.'/../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../laravel/bootstrap/app.php';

先ほどの様にvimでも開けます。(極力触りたくない、、)

ここまで設定すれば、初期ドメインにアクセスするとページが表示される(はず!)です。

トップページ以外が表示されない

このとき、なぜか.htaccessファイルが/www/にコピーされないので(私だけ?)、トップページ以外が表示されません。

ので、こちらも同様に手動で作成していきます。

さくらサーバのコントロールパネルから「ファイルマネージャー」を同様に開いて、「表示アドレスへの操作」「ファイル作成」を選択します。

htaccess.png

下記の内容をコピーして貼り付け、.htaccessという名前をつけて保存します。
(この内容は、publicディレクトリ直下にあります。)

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

これでトップページ以外も表示される(はず!)です。

storageの画像が表示されない

ここまでやっても、storageフォルダにある画像が表示されません。

ローカルで作成したシンボリックリンクがstorage->publicにしか繋がっておらず、wwwに繋がっていないためだと認識しています。

そのため、storage->wwwのシンボリックリンクを別途作成します。

cd //トップの階層まで戻ります
ln -s /home/アカウント名/laravelプロジェクト名/storage/app/public /home/laravelプロジェクト名/www/storage
例) ln -s /home/riooon/laravel/storage/app/public /home/laravel/www/storage

以上で画像も表示される(はず!)です。

修正・追記が必要な点があれば、コメントいただけると嬉しいです。

参照元

https://arrown-blog.com/laravel-sakura-deploy/
https://note.com/koushikagawa/n/n69d534105f07
https://qiita.com/colorrabbit/items/755cfbb0e97d48280775
https://qiita.com/Baisel/items/49b16ce3231c749f6c6f

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

Laravelをさくらサーバにデプロイ/アップロード する方法

通っていたプログラミングスクールの特典でさくらサーバが無料で使えたので、Laravelで作ったプロジェクトをGithubを通してさくらサーバにデプロイしてみました。他の記事を参考にしてもどこかしらでつまいちゃったので、つまづいたポイント含めてまとめてみました。

※用語の間違いはご容赦くださり。

やること

  1. ローカルで作成したLaravelのフォルダをGithubにアップロード
  2. Githubにアップロードしたファイルをさくらサーバにデプロイ

Githubへのアップロード

ターミナルを使ってローカルで作成したフォルダの階層まで進み、下記コマンドを入力します。

git init
git add .
git commit -m "first commit" // ""はメッセージなので何でもOK
git remote add origin GitHubのリポジトリURL
(例:https://github.com/Riooon/laravel.git)

URLはリポジトリの作成直後、こちらに表示されます。

スクリーンショット 2020-08-23 15.34.00.png

git push origin master

これでアップロード完成です。詰まったらドラッグ&ドロップでアップロードしても問題ないかと思います。

さくらサーバへのアップロード

サーバへの接続

さくらサーバを契約した時に届いた「仮登録完了のお知らせ」というメールを開いて、下記の情報を控えます。

sakura.png

  • FTPサーバ名
  • FTPアカウント
  • FTP初期フォルダ
  • サーバパスワード

ターミナルから下記コマンドを入力し、さくらサーバにSSH接続します。パスワードを聞かれるので、「サーバパスワード」の値を入力します。

ssh riooon@riooon.sakura.ne.jp //これは例です
(ssh FTPアカウント@FTPサーバ名)

/home/アカウント名 の階層(何もしてなければそのまま)で、LaravelをアップロードしたGithubのリポジトリからコードを引っ張ってきます。

git clone https://github.com/Riooon/laravel.git

ターミナルの階層を移動・確認する時には、以下のコマンドを使うと便利です。

pwd //現在のディレクトリを表示
ls //一段下の階層を表示

/home/アカウント名の下にgit cloneで新たに作成したフォルダの階層が登場します。

ので、そこまで移動。

cd laravel // 階層は各自に合わせて

compserのインストール

compserをインストールしていきます。

curl -sS https://getcomposer.org/installer | php

続けて下記コマンドを入力します。

php composer.phar

Composer って主張を確認できれば、大丈夫です。

スクリーンショット 2020-08-23 16.27.52.png

続けてvendorのデータをインストールします。

php composer.phar install

vendorのフォルダを確認できればOKです。

ls

スクリーンショット 2020-08-23 16.30.55.png

データベース作成・接続

さくらサーバのコントローラパネルにログインして、データベースを作成します。

https://secure.sakura.ad.jp/rs/cp/

sakura.png

データベースを作成したら、下記四点の情報を控えます。

  1. データベースサーバ
  2. ユーザ名
  3. 接続先パスワード
  4. データベース名

db.png

続いて.envファイルを作成していきます。

ターミナルに戻って、Laravelプロジェクトのディレクトリ(例:home/riooon/laravel)で下記を入力してます。

cp .env.example .env

vimというやつを開いて、コピーした.envファイルを修正します。

vim .env

vimというやつには、閲覧モードと編集モードがあります。この2つを切り替えながら編集していきます。

(個人的)よく使うvimコマンド

i //編集モードを開く
esc //編集モードを閉じて閲覧モードに戻る

:wq //内容を保存(閲覧モードで使用可)
:q! //内容を保存せず終了(閲覧モードで使用可)

x //1文字削除(閲覧モードで使用可)
dd(連打) //1行切り取り(閲覧モードで使用可)

vim.png

上記のように編集したら、esc  :wq を続けて入力して保存します。

これでデータベースの接続は完了です。

アプリケーションキーを作成

以下を入力します。

php artisan key:generate

マイグレーションをして、データベースの中身を反映させます。

php aritsan migrate

/www/に/public/の中身をコピーする

/www/にプロジェクトの一部をコピーして、URLを入力して閲覧できる様にします。

www/のディレクトリ まで移動します。

cd
cd www

下記を入力してpubicフォルダの中身をコピーします。

cp -r /home/アカウント名/Laravelプロジェクト名/public/* /home/アカウント名/www/
(例:cp -r /home/riooon/laravel/public/* /home/riooon/www/)

再びさくらサーバのコントローラパネルにログイン。

https://secure.sakura.ad.jp/rs/cp/

file-manager.png

「ファイルマネージャー」を開きます。

index.png

index.phpファイルをクリックして、左下に表示される鉛筆マークを選択します。

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

の2カ所を、下記のように変更します。

require __DIR__.'/../laravelプロジェクト名/vendor/autoload.php';
$app = require_once __DIR__.'/../laravelプロジェクト名/bootstrap/app.php';

例)
require __DIR__.'/../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../laravel/bootstrap/app.php';

先ほどの様にvimでも開けます。(極力触りたくない、、)

ここまで設定すれば、初期ドメインにアクセスするとページが表示される(はず!)です。

トップページ以外が表示されない

このとき、なぜか.htaccessファイルが/www/にコピーされないので(私だけ?)、トップページ以外が表示されません。

ので、こちらも同様に手動で作成していきます。

さくらサーバのコントロールパネルから「ファイルマネージャー」を同様に開いて、「表示アドレスへの操作」「ファイル作成」を選択します。

htaccess.png

下記の内容をコピーして貼り付け、.htaccessという名前をつけて保存します。
(この内容は、publicディレクトリ直下にあります。)

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

これでトップページ以外も表示される(はず!)です。

storageの画像が表示されない

ここまでやっても、storageフォルダにある画像が表示されません。

ローカルで作成したシンボリックリンクがstorage->publicにしか繋がっておらず、wwwに繋がっていないためだと認識しています。

そのため、storage->wwwのシンボリックリンクを別途作成します。

cd //トップの階層まで戻ります
ln -s /home/アカウント名/laravelプロジェクト名/storage/app/public /home/laravelプロジェクト名/www/storage
例) ln -s /home/riooon/laravel/storage/app/public /home/laravel/www/storage

以上で画像も表示される(はず!)です。

修正・追記が必要な点があれば、コメントいただけると嬉しいです。

参照元

https://arrown-blog.com/laravel-sakura-deploy/
https://note.com/koushikagawa/n/n69d534105f07
https://qiita.com/colorrabbit/items/755cfbb0e97d48280775
https://qiita.com/Baisel/items/49b16ce3231c749f6c6f

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

【Laravel】predisのインストール方法

Predisとは?

こちらのサイトによると
「Predisはオープンソースの Redis クライアントライブラリで、MITライセンスのもとで公開・開発されています。

Predis を利用するメリットとしては、PredisはピュアPHPのライブラリであり、特別な設定などが必要ないことがあります。 Composer などのパッケージ管理ソフトウェアでインストールすることができます。」

前提条件

PHP -v7.2
Laravel -v5.5
Amazon linux
mysql -v5.5

インストール方法

下記内容でpredisライブラリをインストールしようとした。

#プロジェクトのディレクトリに移動
$ cd /var/www/html/laravel-sample
#predisインストール
composer require predis/predis

そうするとcomposer require predis/predisで、下記エラーが発生

Installation failed, reverting ./composer.json to its original content.
The following exception is caused by a lack of memory or swap, or not having swap configured
Check https://getcomposer.org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors for details

[ErrorException]                                   
proc_open(): fork failed - Cannot allocate memory

どうやらメモリが不足していてるらしい。

proc_open(): fork failed - Cannot allocate memory の解決法の記事によると下記コマンドでスワップファイル領域を確認とのこと。

$free -m
              total        used        free      shared  buff/cache   available
Mem:            983         109         707           7         166         725
Swap:             0           0           0

下記コマンドでスワップファイルの領域を作成。

#swap用のファイル作成
$ sudo /sbin/mkswap /var/swap.1
mkswap: /var/swap.1: パーミッション 0644 は安全な値ではありません。 0600 をお勧めします。
#パーミッションを600に変更
$sudo chmod 600 /var/swap.1
$sudo /sbin/mkswap /var/swap.1
$sudo /sbin/swapon /var/swap.1

準備を整えてpredisインストールコマンドを打つ。

$ composer require predis/predis

その際下記のような警告文が出てくるが、Laravelでcomposer updateするとPackage jakub-onderka/php-console-color is abandoned, you should avoid using it. Use php-parallel-lint/php-console-color instead.の記事によると警告解消に向けて対応中で、今の所放置していいそうだ。

Package jakub-onderka/php-console-color is abandoned, you should avoid using it. Use php-parallel-lint/php-console-color instead.
Package jakub-onderka/php-console-highlighter is abandoned, you should avoid using it. Use php-parallel-lint/php-console-highlighter instead.
Package jeremeamia/SuperClosure is abandoned, you should avoid using it. Use opis/closure instead.
Package mtdowling/cron-expression is abandoned, you should avoid using it. Use dragonmantank/cron-expression instead.
Package phpunit/php-token-stream is abandoned, you should avoid using it. No replacement was suggested.
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.

参考
https://weblabo.oscasierra.net/php-predis-1/
https://qiita.com/oitakazuki/items/9093d9ca4a341d2d6c4b
https://www.checksite.jp/ec2t2-add-swapfile/
https://getcomposer.org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors
https://qiita.com/nasubi987/items/8c49bc3e5ec0df45f776

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

Laravelでドメイン駆動設計を用いてプロフィール登録を実装してみる

DDDでプロフィール登録を実装する流れ

1、Controllerを作成する
2、Model(Eloquent)を作成する
3、Viewを作成する
4、Eloquentを編集する
5、リポジトリを作成する
6、Providerに登録する
7、UseCaseを作成する
8、Requestを作成する
9、Controllerを編集する
10、ルーティングを編集する

それではやってみよ〜

1、Controllerを作成する

Controller:ProfileController
php artisan make:controller ProfileController

2、モデルを作成する(migrationファイルも作成する)

Model:Profile
php artisan make:model Profile --migration

■migrantionファイル

2020_mm_dd_xxxx_create_profiles_table
<?php

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

class CreateProfilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('profiles', function (Blueprint $table) {
            $table->id();
            $table->string('nick_name');
            $table->string('introduce');
            $table->timestamps();
        });
    }

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

■DBマイグレーションしてprofileテーブルを作成する

php artisan migrate

3、Viewを作成する

resources/views/profile.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">プロフィール</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                </div>
                {{ Form::open() }}
                <div class="form-group row col-12">
                    <p class="d-flex align-items-center col-3">ニックネーム</p>
                    {{Form::input('text','name', '', ['class' => 'form-controller col-5'])}}
                </div>       
                <div class="form-group row col-12">
                    <p class="d-flex align-items-center col-3">自己紹介</p>
                    {{Form::textarea('introduce', '', ['class' => 'form-controller col-5'])}}
                </div>    
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>
@endsection

スクリーンショット 2020-08-16 0.30.57.png

4、Eloquentを編集する

app/Domain/RepositoryInterface/ProfileRepositoryInterface.blade.php
<?php

namespace App\Eloquent;

use Illuminate\Database\Eloquent\Model;

class EloquentProfile extends Model
{
    protected $table = 'profiles';

}

5、リポジトリを作成する

■RepositoryInterfaceを作成する

app/Domain/RepositoryInterface/ProfileRepositoryInterface.blade.php
<?php

namespace App\Domain\RepositoryInterface;

use App\Eloquent\EloquentProfile;

interface ProfileRepositoryInterface
{
    /**
     * @param $post
     * @return EloquentProfile
     */
    public function store($post): ?EloquentProfile;

}

■Repositoryを作成する

app/Domain/Repository/ProfileRepository.blade.php
<?php

namespace App\Domain\Repository;

use App\Eloquent\EloquentProfile;
use App\Domain\RepositoryInterface\ProfileRepositoryInterface;

class ProfileRepository implements ProfileRepositoryInterface
{

  public function store($post): EloquentProfile
  {
      $eloquentProfile = EloquentProfile::findOrNew($post['id']);
      $eloquentProfile -> nick_name = $post['nick_name'];
      $eloquentProfile -> introduce = $post['introduce'];

      $eloquentProfile -> save();

      return $eloquentProfile;


  }
}

6、Providerに登録する

app/Providers/AppServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $this->app->bind(
            \App\Domain\Repository\ProfileRepository::class,
            \App\Domain\RepositoryInterface\ProfileRepositoryInterface::class
        );
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {

    }
}


7、UseCaseを作成する

app/Domain/UseCase/registerProfile.php
<?php

namespace App\Domain\UseCase\Profile;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use App\Domain\Model\Profile;
use App\Domain\Repository\ProfileRepository;
use App\Eloquent\EloquentProfile;

class RegisterProfile{

    private $profileRepo;

    public function __construct(ProfileRepository $profileRepo){
        $this->profileRepo = $profileRepo;
    }

    public function __invoke($post)
    {
        $post['id'] = 0;

        return $this->profileRepo->store($post);
    }

}

8、Requestを作成する

app/Http/Request/ProfileRequest.php
<?php

namespace App\Http\Request;

use App\Models\Profile;
use Illuminate\Foundation\Http\FormRequest;

class ProfileRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'nick_name' => 'required|string|max:255',
            'introduce' =>'required|string|max:255',
        ];

    }

}

9、Controllerを編集する

app/Domain/UseCase/registerProfile.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Domain\UseCase\Profile\registerProfile;
use App\Http\Request\ProfileRequest;

class ProfileController extends Controller
{
    public function register(ProfileRequest $request, registerProfile $useCase){

        $result = $useCase($request->all());

        return redirect()->route('profile.result');

    }

}

10、ルーティングを編集する

web.php
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::view('/profile/edit', 'profile.edit')->name('profile.edit');
Route::post('/profile/register', 'ProfileController@register')->name('profile.register');
Route::view('/profile/result', 'profile.result')->name('profile.result');

うごいた!!!

スクリーンショット 2020-08-23 15.06.12.png

参考

Laravel5を使ってドメイン駆動設計で作るサンプルアプリ。
Laravelでドメイン駆動設計(DDD)を実践し、Eloquent Model依存の設計から脱却する

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

laravel ルーティングまとめ

ルーティングとは

viewからリクエストされたURLと、Controller内に定義されたActionを結び付ける役割
アクセスしたアドレスに応じて対応するControllerのActionを呼び出す仕組みのことをRoutingという

基本的なRoutingの書き方

Route::get('user/news/create', 'user\NewsController@create');

http://XXXXXX.jp/user/ からはじまるURLを指定することになる。
user/news/create というURLにアクセスしたら NewsController の create Actionに割り当てますという意味

ルーティングのgroup化

ルーティングの設定で Route::group を使用すると一括して定義することができるよ
主に使うものは、
・プレフィックス(URLをまとめるときに使用)
・ミドルウェア(主に認証をかけるときに使用)
だよ

下記のコードは
プレフィックスを使って同じURLを経由するroutingを一括りにして、誰が見てもわかりやすく、変更にも簡単に対処できるように整理しているよ

Route::group(['prefix' => 'user'], function() {
    Route::get('news/create', 'user\NewsController@create');
    Route::get('news/edit', 'user\NewsController@edit');
});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google Calendar API を用いてLaravelアプリから予定を追加する手順

今回はGoogleCalendarAPIを用いて、LaravelアプリからGoogleCalendarに予定を追加していきます。
手順は、
1.GoogleCloudPlatformにてアカウントキーの作成
2.GoogleCalendarの設定
3.Laravelアプリの作成
4.Laravelアプリの設定
となる。

前提条件

・今回はローカルのみでの開発
・Lravelのversionは7.3.0

そもそもAPIとは

A アプリケーション
P プログラミング
I インターフェイス
インターフェイスとは何かと何かをつなぐ手順や規約をまとめたものという意味合いがあります。
私はAPIとはアプリケーションのプログラムを別のプログラムから利用できるようにする規約、仲介する規約と理解しています。
その中でもGoogleCalendarAPIはWebを用いたAPIであるWebAPIにあたります。

1.GoogleCloudPlatformにてアカウントキーの作成

GoogleCloudPlatformにてアカウントキーを作成していきます。
下記URLにアクセスしましょう。
https://console.cloud.google.com/

まずは新しいプロジェクトを作成します。スクリーンショット 2020-08-11 8.40.49.png
スクリーンショット 2020-08-11 8.41.35.png
スクリーンショット 2020-08-11 8.43.34.png
続いてGoogleCalendarAPIを有効にします。
ダッシュボードからAPIとサービス→ライブラリを選択してください。
GoogleCalendarAPIを検索して、有効にするボタンをクリックします。
スクリーンショット 2020-08-22 15.50.43.png
次にサービスアカウント(APIを制御するためのアカウント)を作成します。
アカウント名以外はとりあえず未入力でも構いません。
スクリーンショット 2020-08-22 18.47.35.png
最後にアカウントキーを作成します。
ここで作成されたJSONファイルと、アカウントIDを用いてサービスを利用します。
慎重に扱いましょう。
スクリーンショット 2020-08-22 18.52.42.png
スクリーンショット 2020-08-22 18.52.58.png
スクリーンショット 2020-08-22 18.53.07.png

2.GoogleCalendarの設定

GoogleCalendarにサービスアカウントの権限を設定します。
まずは新しいカレンダーを作成しましょう。
スクリーンショット 2020-08-22 19.10.08.png
スクリーンショット 2020-08-22 19.11.23.png
ユーザーを追加し、ユーザーのメールアドレスは先ほど作成したサービスアカウントのメールアドレスを入力します。
ダウンロードされたJSONファイルの"client_email"の値をコピペしましょう。
与える権限は予定の追加のみにしましょう。
スクリーンショット 2020-08-22 19.14.20.png
最後にカレンダーIDを取得します。
Laravelアプリ側からAPIを用いる際に必要です。
カレンダーの結合をクリックもしくはスクロールして確認してください。
スクリーンショット 2020-08-23 9.56.34.png

3.Laravelアプリの作成

Laravelアプリを作成します。
PHP拡張機能、Composerなどはインストールされているものとします。
こちらを参考にします。
https://readouble.com/laravel/7.x/ja/installation.html

% composer create-project --prefer-dist laravel/laravel test-api "7.3.0"

4.Laravelアプリの設定

設定、コーディングをしていきます。
まずはライブラリをインストールします。

% composer require google/apiclient:^2.0

storage/app配下にapi-keyディレクトリを作成して、次に先ほどダウンロードしたJSONファイルを配置します。

% mkdir storage/app/api-key

#JSONファイルの配置されているディレクトリにて
% mv JSONファイル storage/app/api-key

GoogleCalendarに予定を追加する処理を記述するために、コントローラーを作成します。

% php artisan make:controller ApiTestController

ルーティングを記述します。

web.php
Route::get('/api','ApiTestController@test');

.envファイルにカレンダーIDを設定します。

GOOGLE_CALENDAR_ID=カレンダーID(カレンダーの結合で取得したもの)

コントローラーに処理を記述します。

TestApiContoroller.php
<?php

namespace App\Http\Controllers;

use Google_Client;
use Google_Service_Calendar;
use Google_Service_Calendar_Event;

class ApiTestController extends Controller
{
    public function test()
    {
        $client = $this->getClient();
        $service = new Google_Service_Calendar($client);

        $calendarId = env('GOOGLE_CALENDAR_ID');

        $event = new Google_Service_Calendar_Event(array(
            //タイトル
            'summary' => 'テスト',
            'start' => array(
                // 開始日時
                'dateTime' => '2020-08-23T11:00:00+09:00',
                'timeZone' => 'Asia/Tokyo',
            ),
            'end' => array(
                // 終了日時
                'dateTime' => '2020-08-23T12:00:00+09:00',
                'timeZone' => 'Asia/Tokyo',
            ),
        ));

        $event = $service->events->insert($calendarId, $event);
        echo "イベントを追加しました";
    }

    private function getClient()
    {
        $client = new Google_Client();

        //アプリケーション名
        $client->setApplicationName('GoogleCalendarAPIのテスト');
        //権限の指定
        $client->setScopes(Google_Service_Calendar::CALENDAR_EVENTS);
        //JSONファイルの指定
        $client->setAuthConfig(storage_path('app/api-key/xxxxxxxxxx.json'));

        return $client;
    }
}

/apiにアクセスしてみます。
スクリーンショット 2020-08-23 11.47.36.png
カレンダーを確認します。
スクリーンショット 2020-08-23 11.47.57.png

成功です!

もちろん予定を取得して表示なんかもできますので以下を参考にしてください。
https://developers.google.com/calendar/v3/reference

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

Laravel7 ユーザ認証時にメールアドレス確認の処理を付与する

目的

  • LaravelのAuth認証ではメールアドレスはただ入力するだけで、入力されたメールアドレスが正しい物であるかどうかの確認がない
  • 入力メールアドレス宛にメールを送信し、初回のログインはメール内のURLからのみ行える様にする

実施環境

  • ハードウェア環境
項目 情報
OS macOS Catalina(10.15.5)
ハードウェア MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ 2GHzクアッドコアIntel Core i5
メモリ 32 GB 3733 MHz LPDDR4
グラフィックス Intel Iris Plus Graphics 1536 MB
  • ソフトウェア環境
項目 情報 備考
PHPバージョン 7.4.3 Homwbrewを用いて導入
Laravelバージョン 7.0.8 commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン 8.0.19 for osx10.13 on x86_64 Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする

前提条件

  • 前述した実施環境に準ずる環境が整っていること。
  • Laravelアプリが作成され、アプリの起動、ブラウザからの確認ができる状態になっていること。
  • Authを用いたユーザ認証機能がすでに付与されていること。

前提情報

読後感

  • LaravelのAuth認証にメールアドレスの確認処理を付与することができる。
  • ユーザ認証情報入力→メール受信→メール内のURLから初回ログインをしてもらう。

概要

  1. .envの修正
  2. モデルファイルの修正
  3. ルーティング情報の修正
  4. コントローラファイルの修正
  5. 確認

詳細

  1. .envの修正

    1. アプリ名ディレクトリで下記コマンドを実行して.envファイルを開く。

      $ vi .env
      
    2. MAIL_MAILERの設定を下記の様に修正する。メール送信は行われず、情報がLaravelのログに出力される。

      アプリ名ディレクトリ/.env
      MAIL_MAILER=log
      
    3. 下記に修正後の.envファイルの全体の内容を記載する。

      アプリ名ディレクトリ/.env
      APP_NAME=Laravel
      APP_ENV=local
      APP_KEY=アプリキーの記載は各個人で異なります。
      APP_DEBUG=true
      APP_URL=http://localhost
      
      LOG_CHANNEL=stack
      
      DB_CONNECTION=mysql
      DB_HOST=127.0.0.1
      DB_PORT=3306
      DB_DATABASE=DB名
      DB_USERNAME=root
      DB_PASSWORD=皆さんの環境のMySQLのrootユーザのパスワード
      
      BROADCAST_DRIVER=log
      CACHE_DRIVER=file
      QUEUE_CONNECTION=sync
      SESSION_DRIVER=file
      SESSION_LIFETIME=120
      
      REDIS_HOST=127.0.0.1
      REDIS_PASSWORD=null
      REDIS_PORT=6379
      
      MAIL_MAILER=log
      MAIL_HOST=smtp.mailtrap.io
      MAIL_PORT=2525
      MAIL_USERNAME=null
      MAIL_PASSWORD=null
      MAIL_ENCRYPTION=null
      MAIL_FROM_ADDRESS=null
      MAIL_FROM_NAME="${APP_NAME}"
      
      AWS_ACCESS_KEY_ID=
      AWS_SECRET_ACCESS_KEY=
      AWS_DEFAULT_REGION=us-east-1
      AWS_BUCKET=
      
      PUSHER_APP_ID=
      PUSHER_APP_KEY=
      PUSHER_APP_SECRET=
      PUSHER_APP_CLUSTER=mt1
      
      MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
      MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
      
  2. モデルファイルの修正

    1. アプリ名ディレクトリで下記コマンドを実行してusersテーブルにリンクするモデルファイルを開く。

      $ vi app/User.php
      
    2. 下記の様に修正する。

      アプリ名ディレクトリ/app/User.php
      <?php
      
      namespace App;
      
      // 下記を修正する
      //use Illuminate\Contracts\Auth\MustVerifyEmail;
      use Illuminate\Contracts\Auth\MustVerifyEmail as MustVerifyEmailContract;
      use Illuminate\Auth\MustVerifyEmail;
      // 上記までを修正する
      use Illuminate\Foundation\Auth\User as Authenticatable;
      use Illuminate\Notifications\Notifiable;
      
      // 下記を修正する
      //class User extends Authenticatable
      class User extends Authenticatable implements MustVerifyEmailContract
      {
          // 下記を修正する
          //use Notifiable;
          use MustVerifyEmail, Notifiable;
      
          /**
           * The attributes that are mass assignable.
           *
           * @var array
           */
          protected $fillable = [
              'name', 'email', 'password',
          ];
      
          /**
           * The attributes that should be hidden for arrays.
           *
           * @var array
           */
          protected $hidden = [
              'password', 'remember_token',
          ];
      
          /**
           * The attributes that should be cast to native types.
           *
           * @var array
           */
          protected $casts = [
              'email_verified_at' => 'datetime',
          ];
      }
      
      
  3. ルーティング情報の修正

    1. アプリ名ディレクトリで下記コマンドを実行してルーティングファイルを開く。

      $ vi routes/web.php
      
    2. 下記の様に修正を行う。

      アプリ名ディレクトリ/routes/web.php
      <?php
      
      use Illuminate\Support\Facades\Route;
      
      /*
      |--------------------------------------------------------------------------
      | Web Routes
      |--------------------------------------------------------------------------
      |
      | Here is where you can register web routes for your application. These
      | routes are loaded by the RouteServiceProvider within a group which
      | contains the "web" middleware group. Now create something great!
      |
      */
      
      Route::get('/', function () {
          return view('welcome');
      });
      
      // 下記を修正する
      //Auth::routes();
      Auth::routes(['verify' => true]);
      
  4. コントローラファイルの修正

    1. アプリ名ディレクトリで下記コマンドを実行してコントローラファイルを開く。

      $ vi app/Http/Controllers/HomeController.php
      
    2. 下記の様に修正を行う。

      アプリ名ディレクトリ/app/Http/Controllers/HomeController.php
      <?php
      
      namespace App\Http\Controllers;
      
      use Illuminate\Http\Request;
      
      class HomeController extends Controller
      {
          /**
           * Create a new controller instance.
           *
           * @return void
           */
          public function __construct()
          {
              // 下記を修正する
              //$this->middleware('auth');
              $this->middleware('verified');
          }
      
          /**
           * Show the application dashboard.
           *
           * @return \Illuminate\Contracts\Support\Renderable
           */
          public function index()
          {
              return view('home');
          }
      }
      
  5. 確認

    1. アプリ名ディレクトリで下記コマンドを実行してローカルサーバを起動する。

      $ php artisan serve
      
    2. 下記リンクにアクセスする。

    3. 下記のページの右上の「REGISTER」をクリックする。

      Laravel-12.png

    4. 任意の情報を入力し「Register」をクリックする。

      Laravel-13.png

    5. 下記画面が表示されることを確認する。

      Laravel-14.png

    6. アプリ名ディレクトリで下記コマンドを実行してLaravelのログファイルを開く。

      $ vi storage/logs/laravel.log
      
    7. 開いたログファイルの最終行付近に下記の様な記載があることを確認する。

      アプリ名ディレクトリ/storage/logs/laravel.log
      [Laravel](http://localhost)
      
      # Hello!
      
      Please click the button below to verify your email address.
      
      Verify Email Address: http://127.0.0.1:8000/email/verify/6/1107c7572edff3d7050bd4c68404ff6d0919d508?expires=1598068938&signature=a52ea1e97b368ac4b68dd2183cd3ff84d121b608556673e01c6a1aa2a5715161
      
      If you did not create an account, no further action is required.
      
      Regards,
      Laravel
      
      If you’re having trouble clicking the "Verify Email Address" button, copy and paste the URL below
      into your web browser: [http://127.0.0.1:8000/email/verify/6/1107c7572edff3d7050bd4c68404ff6d0919d508?expires=1598068938&signature=a52ea1e97b368ac4b68dd2183cd3ff84d121b608556673e01c6a1aa2a5715161](http://127.0.0.1:8000/email/verify/6/1107c7572edff3d7050bd4c68404ff6d0919d508?expires=1598068938&signature=a52ea1e97b368ac4b68dd2183cd3ff84d121b608556673e01c6a1aa2a5715161)
      
      © 2020 Laravel. All rights reserved.
      
    8. みなさんのlogファイルの「Verify Email Address」の後に書かれたURLにアクセスする。(本記事のリンクは筆者の環境の物なのでアクセスしても正常な処理にならない。)

    9. 下記の様なページが表示されたらメールアドレスの確認が完了し初回ログインも完了である。

      Laravel-16.png

参考文献

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

[window.onload]jsファイルで気を付けること(初心者向け)

メモです!

Lalavel(に限らず)でjsファイルを作成したとき、一度目のアクセスでjsがきかなかったのでメモとして残しておきます

いろんなやり方あるかもしれませんが僕がうまくいった方法を紹介します

初心者向けです!

バージョン laravel7.x
参考【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。

jsファイルはwindow.onloadではじめよう

↑じゃなくてもできるとは思うのですが、うまくいったので

僕はlaravel mixを使ってresouce以下のjsファイルに

hoge.js
$(function(){
  //処理
})

こうやって書いてたのですが、一度目のアクセス時にjsファイルの内容が反映されず、リロードしたら反映される状態になりました。
※この書き方だと、htmlファイルなどが読み込まれる前に実行されてしまうらしい

前にrailsで同じ現象になって、その時は

huga.js
document.addEventListener("turbolinks:load", function() {
  //処理
})

これでうまくいったのですが、今回はうまくいかず(ライブラリが必要だったのかな?)
で、今回は上記の参考にさせていただいた記事のように

hoge.js
window.onload = function(){
  //処理
};

としたらうまく動いてくれました

htmlファイルに直接jsを書くときはあまり意識しなくてもいいと思いますが、別にjsファイルを作成する際などは参考としてみてください

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

[laravelMix js]jsファイルで気を付けること(初心者向け)

メモです!

Lalavel(に限らず)でjsファイルを作成したとき、一度目のアクセスでjsがきかなかったのでメモとして残しておきます

いろんなやり方あるかもしれませんが僕がうまくいった方法を紹介します

初心者向けです!

バージョン laravel7.x
参考【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。

jsファイルはwindow.onloadではじめよう

↑じゃなくてもできるとは思うのですが、うまくいったので

僕はlaravel mixを使ってresouce以下のjsファイルに

hoge.js
$(function(){
  //処理
})

こうやって書いてたのですが、一度目のアクセス時にjsファイルの内容が反映されず、リロードしたら反映される状態になりました。
※この書き方だと、htmlファイルなどが読み込まれる前に実行されてしまうらしい

前にrailsで同じ現象になって、その時は

huga.js
document.addEventListener("turbolinks:load", function() {
  //処理
})

これでうまくいったのですが、今回はうまくいかず(ライブラリが必要だったのかな?)
で、今回は上記の参考にさせていただいた記事のように

hoge.js
window.onload = function(){
  //処理
};

としたらうまく動いてくれました

htmlファイルに直接jsを書くときはあまり意識しなくてもいいと思いますが、別にjsファイルを作成する際などは参考としてみてください

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

「Node.js って何?」というアラフォー社内 SE のワイが,Laravel Mix をバチクソ信用してみたら,アッサリ幸せになれた話

概要

コロナでどこも行けなくなったし,仕事もフルリモート勤務に……

「新しい生活様式」で獲得した自由時間すべてを費やしても,永久に探求し尽くせそうにない,深淵なる Laravel の世界を楽しんでいる,アラフォーおじさんです。

ここまで洗練されたフレームワーク技術の恩恵を,誰もが,無料で享受できるというのは,もはや,神世界ですね(ホント,つくづく,良い時代にエンジニアをやっていることを祝福しましょう!)。

Laravel 入門から二週間が経った今回は,「そもそも,Laravel Mix 使わなくてもシステム組めるんだし,Laravel Mix いらないんじゃね?」という疑問と,自分なりに,向き合ってみました。

Laravel Mix を採用すべきかの判断材料にできるような記事を目指して,まとめてみます。

Node.js や Webpack といった世界を(ほぼ)知らないまま,そんなチャレンジを試みたおじさんの視点だからこそ,技術的な厳密さ・ディープさを欠くことはあっても,「誰もが,平易に理解できる記事を書けるのでは?」と思い,キーボードに向かいます。

マサカリ歓迎案件です。

Laravel Mix を使うことのメリット

結論から言うと,Laravel Mix を使わなくても,たいていのシステムは組めちゃいます。

それでも,Laravel Mix を使うことで,以下のような嬉しさがあります。

JavaScript ファイルを安全かつ簡単に分割する

レガシーシステムなんかの場合,一つのファイルに,文庫本ボリューム相当の JavaScript が長々と記述されており,可読性と再利用性が,同時多発的にサイアクというプロジェクトを見知っているエンジニアって,少なくないと思います。

ウン千行の JavaScript コードで,グローバル変数が使われているのを見つけたら,見なかったフリをして,そっとファイルを閉じてしまいます(おじさんは)。

こういった事態を打破するのに,助けとなるのが,機能別などにファイルを分割(スコープを細分化)するというアプローチですが,import/export って,ブラウザ種類(とバージョン)による挙動の違いがあって,経験豊富なエンジニアでなければ,色々やらかしてしまうリスクあり。

安全に,ファイルを分割できる技術として Webpack があったものの,設定準備などが複雑であるため,気軽に利用できる技術ではありませんでした。

Laravel Mix は,Webpack のラッパーみたいなもので,便利さはそのままだけど,設定準備などのハードルをぐーんと下げてくれた技術です。

安全かつ簡単に,肥大化した JavaScript ファイルを分割したいというニーズがあるなら,Laravel Mix 活用を検討する価値が大アリです。

JavaScript をパッケージ化する

JavaScript を安全かつ簡単に分割できることが,Laravel Mix 導入によって得られる,ひとつめのメリットでした。

分割して,すっかり管理しやすくなった JavaScript も,リリース工程では,逆の願望,すなわち「複数の JavaScript ファイル群を,一つにまとめたい」という願望が生じるシーンはあると思います。

webpack.mix.js
// 二つの JavaScript ファイルを,一つにまとめる Laravel Mix の例
mix.scripts(['resources/js/FileDownload.js', 'resources/js/ManageEmployee.js']
          , 'public/js/ManageEmployee.js');

実際,一つにまとめることには,多数のメリットがあります:

  • JavaScript ファイルは,読み込む順番を間違えると,動かなくなるケースも。一つのファイルにまとめることで,読み込まれる順番を気にする必要がなくなって,安全に使えること(カプセル化)
  • いわゆる minify 作業を施して,不要な文字データ(例:空白,改行,コメントなど)を取り除き,コンパクトに圧縮したファイルを提供することで,利用者側でのロード時間が低減できること
  • HTML ファイルに挿入する <script src="..."></script> が,たった一行で済むため,ソースの可読性を向上させられること

また,JavaScript が(人間の目にとっては)解読しづらいものになることは,セキュリティを高めることや,ソース盗用のリスクを下げることに,一定の効果はあるかも知れません。

上記内容について,心ときめく項目があった場合は,Laravel Mix 活用を検討する価値があります。

本格的なフロントエンド開発への足掛かりにする

Node.js や npm,Webpack などには無縁(むしろ,若干アレルギー気味)だったおじさんですが,Laravel Mix という,比較的取り扱いやすい技術へ触れたことで,一気に,身近な技術として感じられるようになりました。

  • 意味のあるスコープで,JavaScript ファイルを細分化(モジュール化)
  • リリース時には,システムが軽快に動作するよう,軽量に圧縮してリリース

こういった,JavaScript パッケージ管理システムの機能について,手を動かしながら,実際に体験できることは,ググった情報であれこれ想像するよりも,はるかに具体的で,理解が急速に深まるものです。

特に,以下のようなエンジニアにとっては,Laravel Mix は,視野を大きく広げるための,強力な第一歩になるかも知れません:

  • これまでバックエンド中心にやって来たエンジニア
  • フロントエンドは,バニラ JS と jQuery の「古典的なコーディング」で済ませてきたというエンジニア

新しい技術に触れて,エンジニアの士気を上げられるというのも,隠れたメリットですね。

なお,Laravel Mix は,Laravel という名を冠するものの,Laravel Mix 単体でも使えるツールであることは,ここで強調しておきたいです。

Laravel Mix を使うことのデメリット

基本的に,Laravel Mix を使うことは,メリットの方が多いと思うのですが,デメリットと感じることもありました。

以下に紹介します。

学習コストが生じる

簡単に扱えるよう,Webpack のラッパーとして開発された Laravel Mix ですが,そうは言っても,学習コストが生じます。

Laravel プロジェクトのディレクトリ構成において,以下の関連性は,しっかり理解しておく必要があるため,導入できるかどうかは,学習コストが確保できることも必要となりそうです。

JavaScript管理に関連性のあるところ.md
project_root/
 ├ app/
 ├ node_modules/ ===> `npm install XYZ --save` すると,ここにダウンロードされる
 ├ public/
 │ └ js/     ===> <script src="{{ asset('js/...') }}"></script> で利用可
 ├ resources/
 │ └ js/     ===> `npm run` でパッケージ化したい JavaScript たちをここに置く
 ├ package.json  ===> npm が利用するための,依存関係情報などが格納されている
 └ webpack.mix.js ===> Laravel Mix への命令が記述されたファイル

開発・リリースの作業が,一部煩雑になる

これは,Laravel Mix のデメリットというより,JavaScript パッケージ管理システムを使う上での,制約事項に近いと思うのですが……

開発・リリースの作業が,一部,煩雑になる(ちょっとだけ)と感じました。

例えば,パッケージ化された JavaScript ファイルは,不要な文字データ(例:空白,改行,コメントなど)が取り除かれるため,高速ロードが期待できる一方,開発時のデバッグでは,コードが読みづらいものとなります。

これには,Laravel Mix で mix.js('resources/js/app.js', 'public/js').sourceMaps(); と記述することで,開発者ツール上では,読めるコードを表示できますが,手間が一つ増えます。

また,JavaScript ファイルを変更するたび,パッケージ管理システムに指令を送って,パッケージング作業を実行する必要があります。

これには,npm run watch-poll というコマンドを実行すれば,パッケージ管理システム側から,JavaScript の変更を自動検知してくれるようになりますが,開発環境としては,覚えなければならないことが一つ増えます。

ただ,いずれも無視できるほど軽微な負担増なので,デメリットと感じる人は,ほとんどいないと思います。

超簡単におじさんの Laravel Mix 活用プラクティスを紹介

まだ Laravel Mix を使い始めて数日ですが,いくつか守っている習慣をご紹介します。

この辺は,まだ知見が少ないので,少しずつ情報収集していくつもりです。

自家製 JavaScript ファイルの保管場所

自分で手書きする JavaScript については,以下のように保管ルールを定めます。

  • 自分で手書きした JavaScript コードは,resource/js 配下に保存する
  • public/js には,Laravel Mix で生成されたコードのみが保存されるよう運用
  • JavaScript ファイルの分割・結合は,すべて Laravel Mix に委ね,import/export は使わない

ファイル全体をスコープで閉じる

分割したファイルは,全体をきちんと (function() { ... })(); で囲むことによって,スコープが閉じるように配慮します。

これによって,予期せぬタイミングで,グローバル変数が誕生・流出することを防止でき,モジュールとしての独立性も高められます。

子ファイル.js
(function() {

    const url = $('#something').val();

    $(document).ready(function() {
        // なにがしかの処理
    });

})();

共通ファイルは,必要時のみバインド

以下のように,id を引数に取り,従業員名 emp_name を返すような関数があったとします。

汎用的な関数ほど,常にバインドしがちですが,本当に必要なときにだけバインドするという,当たり前のことを当たり前にするということです。

common.js
function getEmpName(id)
{

    // なにがしかの処理
    return emp_name;

}

webpack.mix.js
// getEmpName 関数が必要なクラス ManageEmployee ===> バインドする
mix.scripts(['resources/js/common.js', 'resources/js/ManageEmployee.js']
          , 'public/js/ManageEmployee.js');

// getEmpName 関数が必要ではないクラス ManageCustomer ===> バインドしない
mix.js('resources/js/ManageCustomer.js'
     , 'public/js/ManageCustomer.js');

こういう小さなことの積み重ねで,プロジェクトのソースが,どれだけ維持メンテしやすいものになるか,大きく分かれていきます。

一週間や二週間の時間では「大したことがない……」と思う規約違反でも,一年,二年と積み重なれば,手の施しようがないほど,荒れ果てたソースになることも珍しくありません。

特に,Laravel Mix の場合は,公式ドキュメントにも書かれている通り,Laravel Mix コードそのものが,JavaScript モジュールの関係性を記述したもの(設計図のようなもの)になり得るという設計思想が,背景にあることを忘れてはならないと思います。

Mix tasks can be chained together to define exactly how your assets should be compiled.

きちんと,Laravel Mix のコードを管理していくことによって,モジュールの関連性が厳密に記述(記録)できるという仕組みは,大変合理的ですね。

まとめ

開発者がいかに気持ちよく・楽しく仕事できるかという,Developer Experience(開発体験)を重要視する Laravel は,フレームワークと言っても,かなり制約がユルく(良い意味で),JavaScript を HTML 画面へ紐づけるにしても,さまざまなスタイルを選ぶことが可能です。

Laravel Mix の公式ドキュメントは,上から下まで,10秒ほどでスクロールできるくらいの長さで,記述もシンプルそして,実際,シンプルです!)。

公式ドキュメント:Compiling Assets (Mix)

フロントエンド猛者じゃなくても,Laravel Mix は気軽に使えるツールです。

本記事が,少しでも Laravel Mix 利用のハードルを下げることに貢献できれば嬉しいです。

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