laravel-adminには

    protected function form()
    {
        $form = new Form(new Infomation());
        $form->text('title', __('タイトル'));
        $form->textarea('detail', __('詳細'));
        $form->date('yyyymmdd', __('日付'))->default(date('Y-m-d'));

        return $form;
    }

と普通のtextarea出力の代わりに

$form->editor('detail', __('詳細'));

とリッチテキストで書けるような機能がありますがこれをそのまま使うと
Field type [editor] does not existと表示され使えません。

これを使うようにするには
app/Admin/bootstrap.phpの

Encore\Admin\Form::forget(['map', 'editor']);

の部分を

//Encore\Admin\Form::forget(['map', 'editor']);
Encore\Admin\Form::extend('editor', Encore\Admin\Form\Field\Editor::class);

とするだけです

はじめに

今回は、エンジニアになって約半年の私がjavascriptのフレームワークであるVue.jsを使って開発を行ったので、そのVue.jsの基本的な記述について備忘録としてまとめます。

データバインディング

テキストのバインディング

• データのバインディグのもっとも基本的な形　マスタッシュ {{ }}を利用したもの
• 以下のような使い方ができます。

App.vue

 <template lang="pug">
    #app
        span {{ msg }} //hello
 </template>
 <script>
    export default {
        data(){
            return{
                msg:"hello"
        }
    }
 </script>

App.vue

<template lang="pug">
  .app
    span {{inc}} //numに +1された数字がバインディングされる
</template>
<script>
export default {
  data(){
    return{
      num:10
    }
  },
  computed:{
    inc(){
      return this.num + 1
    }
  }
};
</script>

属性のバインディング

• {{ }}マスタッシュはHTML属性の内部では使えない
• 代わりに v-bindディレクティブを使用する

App.vue

  <template lang="pug">
    #app
        span(v-bind:class="dynamicClass") {{ msg }}
  </template>
  <script>
    export default {
        data(){
            return{
                msg:"hello",
                dynamicClass:"hoge"
        }
    }
  </script>
  <style>
  .hoge{
    display:inline-block;
  }
  .fuga{
    display:none;
  }
  </style>

dynamicClassの値をhoge⇨fugaに変更すると、spanのクラスが変更され、非表示になります。

親子間のデータの受け渡し

• Vue.jsでの親子間のデータの受け渡しは、『props down, events up』
• 親はプロパティを経由してデータを子に伝える
• 子はイベントを経由して親にメッセージを送る

という認識でいます。

以下のように子コンポーネントでpropsオプションを指定します。

CustomInput.vue

<template>
...
input(type="text" :placeholder="customPlaceholder" @input="updateValue")
...
</template>
<script>
export default = {
 props:{
  customPlaceholder:{
   type:String,
   default:""
  }
 },
 methods: {
  updateValue (e) {
   this.$emit('input', e.target.value)
   this.$emit('change', e.target.value)
   }
  }
}
</script>

CustomInput.vue

this.$emit('input', e.target.value)

この部分で子コンポーネントからinputに入力されたvalueを親に渡しています。

親コンポーネントでは、子に渡すデータを指定、inputEmailの値が子のコンポーネントに渡されます。

Form.vue

<template>
 custom-input(:customPlaceholder="inputEmail")
</template>
<script>
import CustomInput from "./components/CustomInput"
export default = {
  components:{
   CustomInput
 },
 data(){
  return{
   inputEmail: "メールアドレスを入力してください"
  }
 }
}
</script>

だいぶ掻い摘んで書いてみましたが、書き方どうだっけ？的なときのために。

目的

• 初歩的であるがこれからもうっかり発生させそうなエラーなので解決方法を含めてまとめる

実施環境

• ハードウェア環境

項目	情報	備考
OS	macOS Catalina(10.15.3)
ハードウェア	MacBook Air (11-inch ,2012)
プロセッサ	1.7 GHz デュアルコアIntel Core i5
メモリ	8 GB 1600 MHz DDR3
グラフィックス	Intel HD Graphics 4000 1536 MB

• ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.3	Homwbrewを用いて導入
Laravel バージョン	7.0.8	commposerを用いて導入
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いて導入

エラー内容

• 下記の手順にしたがってAuthによるログイン機能を実装した。
  • Mac Laravel 7 Authを用いたユーザ登録 ログイン ログアウトなどの機能を作成する
• コントローラで現在ログインしているユーザのユーザIDを取得し紐づいているビューファイルで表示する処理を記載した。

• 下記にコントローラの内容を記載する。(名前領域userにあるhome.blade.phpのビューファイルを呼び出している。)

  <?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  
  class UserController extends Controller
  {
      public function home() {
          $user_id = Auth::id();
          return view('user.home', compact('user_id'));
      }
  }
  

• ブラウザで確認したところ下記のエラーが出力された。

  • 「Error Class 'App\Http\Controllers\Auth' not found」

    

• not foundと言われているので確認してもAuthディレクトリは存在していた。

原因

• コントローラにてAuth::id();を用いてログイン中のユーザIDを取得する場合は当該コントローラの冒頭に下記の記載がないとユーザIDを取得するとこはできない。

  use Auth;
  

解決方法

1. コントローラのの冒頭部分にuse Auth;の記載を追加する。

   • 下記に追加したあとのコントローラファイルの例を記載する。

     <?php
     
     namespace App\Http\Controllers;
     
     use Illuminate\Http\Request;
     
     //下記の内容を追記する
     use Auth;
     
     class UserController extends Controller
     {
         public function home() {
             $user_id = Auth::id();
             return view('user.home', compact('user_id'));
         }
     }
     

はじめに

LaravleでAPI認証を行うときにPassportを使用すると簡単に実装できます。
その中でアクセストークンは、ユーザー自身がトークンを発行してAPIを利用する仕組みです。

トークンの発行もフロントエイド・クイックスタートが用意されているので簡単に実装できます。

トークン接続時間が変更できない

ただ、トークンの持続時間には制限がありLaravel5.7までは1年間となっていました。
こちらに関してはドキュメントにもパーソナルアクセストークンの箇所で説明されています。

Note: パーソナルアクセストークンは常に長期間有効です。tokensExpireInやrefreshTokensExpireInメソッドを使用しても、有効期間を変更できません。

ここで、長期間有効とありますがこちらは、トークン持続時間のところでデフォルト一年間と記載されています。

Laravel5.7までは、有効期間を変更したくても出来ず1年間のうちにトークンの再発行が必要でした。

Laravel5.8から指定が可能に

Laravel5.8になってからは、personalAccessTokensExpireInメソッドを使用することで有効期限を自由に設定出来るようになりました。

AuthServiceProviderのbootメソッドでpersonalAccessTokensExpireInメソッドを呼び出すだけです

public function boot()
{
    $this->registerPolicies();

    Passport::routes();
    // 10年間トークンを持続させる
    Passport::personalAccessTokensExpireIn(now()->addYears(10));
}

これで期間を気にすることなくAPIを利用することが可能になります。

ちなみに oauth_access_tokens テーブルにexpirse_atというカラムに期限がありますが変更しても期限には影響がありません。
トークンのハッシュ内に期限が含まれていると思われます。

書籍での学習を始めます

PHPをProgateやドットインストール、Udemyである程度学習しましたので、一度フレームワークというものを触ってみようという事で、先週末にPHPフレームワークLarabel入門第2版を買ってきました。

今日した事

・composerのインストール
　やり方は端折ります。が、ネット上にも情報が転がってましたので、リンク貼っておきます。【PHP】Composerは絶対必要!インストール方法と解説で完全攻略

・Laravelのインストール
　こちらもやり方を端折ります。(著作権侵害こわひ。)　こちらもネット上のやり方リンク貼っておきます。導入手順を解説！Laravelのインストール方法【初心者向け】

・XAMPPのインストール
　本には載ってなかったですが(もうすでに導入が終わってるつもりで進めてる？)、これも行います。よくみたら書いてありました。ごめんなさい。これもリンク貼り->XAMPP インストールと動かす手順(Windows10)

さあ、これからフレームワークを学習していきます。また次回。

概要

今回はLaravel側のコントローラと通信してデータ取得できるように構成するのが目標
POSTメソッドを使用してみる

コントローラを作成

指定した配列を返す簡単なコントローラを作成

app/Http/Controllers/PageController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Routing\Controller as BaseController;
use Request;

class PageController extends BaseController
{
    // リポートページのコントローラ
    public function report(Request $request)
    {
        return [
            'title' => 'report',
            'contents' => 'report contents blahblah'
        ];
    }

    // フォームページのコントローラ
    public function form(Request $request)
    {
        return [
            'title' => 'form',
            'contents' => 'form contents blahblah'
        ];
    }
}

Laravel側のラウトを設定

PageControllerの「report() / form()」メソッドのラウトを設定するコードを追加
確認のため「Route::any」で書いているが、元々は「Route::post」の方が正しいー

routes/web.php

// ページの表示処理を行う
Route::prefix('pages')->group(function () {
    Route::any('report', 'PageController@report');
    Route::any('form', 'PageController@form');
});

POST送信のためCSRF_TOKENを設定

ヘッダにCSRF_TOKENのメタデータを追加

resources/views/welcome.blade.php

<head>
    ……
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ……
</head>

Axios通信でCSRF_TOKENを設定するコードを追加

resources/js/bootstrap.js

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

各VueコンポーネントでAxiosを設定

リポートページ

resources/js/pages/report.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ responseArr.title }}</div>
                    <div class="card-body">
                        {{ responseArr.contents }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                responseArr: {}
            }
        },
        mounted() {
            const self = this;
            const url = '/pages/report';
            axios.post(url).then(function(response){
                self.responseArr = response.data;
            });
        }
    }
</script>

フォームページ

resources/js/pages/form.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ responseArr.title }}</div>
                    <div class="card-body">
                        {{ responseArr.contents }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                responseArr: {}
            }
        },
        mounted() {
            const self = this;
            const url = '/pages/form';
            axios.post(url).then(function(response){
                self.responseArr = response.data;
            });
        }
    }
</script>

• 違うのはmounted()で指定するURLのみ

結果確認

npm run dev
php artisan serve

• リポートページ
  

• フォームページ
  

コントローラからデータを取得していることを確認した！

概要

今回はLaravel側のコントローラと通信してデータ取得できるように構成するのが目標
POSTメソッドを使用してみる

コントローラを作成

指定した配列を返す簡単なコントローラを作成

app/Http/Controllers/PageController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Routing\Controller as BaseController;
use Request;

class PageController extends BaseController
{
    // リポートページのコントローラ
    public function report(Request $request)
    {
        return [
            'title' => 'report',
            'contents' => 'report contents blahblah'
        ];
    }

    // フォームページのコントローラ
    public function form(Request $request)
    {
        return [
            'title' => 'form',
            'contents' => 'form contents blahblah'
        ];
    }
}

Laravel側のラウトを設定

PageControllerの「report() / form()」メソッドのラウトを設定するコードを追加
確認のため「Route::any」で書いているが、元々は「Route::post」の方が正しいー

routes/web.php

// ページの表示処理を行う
Route::prefix('pages')->group(function () {
    Route::any('report', 'PageController@report');
    Route::any('form', 'PageController@form');
});

POST送信のためCSRF_TOKENを設定

ヘッダにCSRF_TOKENのメタデータを追加

resources/views/welcome.blade.php

<head>
    ……
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ……
</head>

Axios通信でCSRF_TOKENを設定するコードを追加

resources/js/bootstrap.js

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

各VueコンポーネントでAxiosを設定

リポートページ

resources/js/pages/report.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ responseArr.title }}</div>
                    <div class="card-body">
                        {{ responseArr.contents }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                responseArr: {}
            }
        },
        mounted() {
            const self = this;
            const url = '/pages/report';
            axios.post(url).then(function(response){
                self.responseArr = response.data;
            });
        }
    }
</script>

フォームページ

resources/js/pages/form.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ responseArr.title }}</div>
                    <div class="card-body">
                        {{ responseArr.contents }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                responseArr: {}
            }
        },
        mounted() {
            const self = this;
            const url = '/pages/form';
            axios.post(url).then(function(response){
                self.responseArr = response.data;
            });
        }
    }
</script>

• 違うのはmounted()で指定するURLのみ

結果確認

npm run dev
php artisan serve

• リポートページ
  

• フォームページ
  

コントローラからデータを取得していることを確認した！