Laravel admin 作業メモ

やったこと

この記事を参考にLarave-adminでCRUDの処理をできるようにする。

tac-blog.tech

エラー発生

Productsのリソースを扱うサンプルのところで、次のエラーが出た。

f:id:shimabukuromeg:20181025065208p:plain

Config error.

Disk [admin] not configured, please add a disk config in `config/filesystems.php`.

エラーへの対策

エラーメッセージを見るに設定ファイルがおかしそう。Laravel Adminの公式ページにある Upload to local するときの config/filesystems.php: の設定をそのままコピーするとなおった。

公式ページ

Laravel-admin

f:id:shimabukuromeg:20181025065612p:plain

修正箇所(config/filesystems.php

f:id:shimabukuromeg:20181025065658p:plain

動作確認

laravel を立ち上げ直して、改めてアクセスする

f:id:shimabukuromeg:20181025070155p:plain

ちゃんと登録できた。

f:id:shimabukuromeg:20181025070116p:plain

めっちゃ便利だ

読書メモ Laravel ミドルウェアとは?からの認証処理を追ってみる

Twitterで認証させようとしたらうまくいかなくて、いろいろ調べながら、ミドルウェアってなんだっけ?って気持ちになったので、整理メモ

ミドルウェアとは

  • Laravelにおけるミドルウェアとは、コントローラクラスの処理前後に位置し、主にHTTPリクエストのフィルタリングやHTTPレスポンスの変更を行う

Laravel で提供してるミドルウェア

  • 作成中のアプリのコード例。コントローラのアクションが実行される前に、authミドルウェアが、認証済みユーザーかどうかを判定してる

  • authミドルウェアクラス Illuminate\Auth\Middleware\Authenticate

f:id:shimabukuromeg:20181014124608p:plain

  • Illuminate\Auth\Middleware\Authenticate クラス

f:id:shimabukuromeg:20181014132617p:plain

  • Illuminate\Contracts\Auth\Factory

f:id:shimabukuromeg:20181014132711p:plain

  • 認証処理の仕組みでいうとこの辺り、

f:id:shimabukuromeg:20181014133448p:plain

  • Illuminate\Contracts\Auth\Factory を実装してるのが、Illuminate\Contracts\Auth\Factory\AuthManager

f:id:shimabukuromeg:20181014133722p:plain

読書メモ Laravel 認証処理

twitter認証したくてやってみた。

f:id:shimabukuromeg:20181014011141p:plain

この記事を参考にした。ちゃんとTwiterのユーザー情報をとってこれてるのにテンション上がる!笑

lara-bell.com

email の情報がnull で登録は失敗。Twitter側で利用規約的なやつを登録しないとメールの情報は取れないっぽい

Illuminate \ Database \ QueryException (23000)
SQLSTATE[23000]: Integrity constraint violation: 1048 
Column 'email' cannot be null (SQL: insert into `users` (`email`, `name`, `updated_at`, `created_at`) values (, 島袋恵😘, 2018-10-14 01:07:39, 2018-10-14 01:07:39))

f:id:shimabukuromeg:20181014012343p:plain

minory.org

うまくいったと思ってたけど、実はうまくできてなかった件

ログイン時に以下のエラーが出る。(初回ログイン時のみ出るっぽい?)

Argument 1 passed to Illuminate\Auth\SessionGuard::login() must implement interface Illuminate\Contracts\Auth\Authenticatable, 
null given, called in /app/vendor/laravel/framework/src/Illuminate/Auth/AuthManager.php on line 292

f:id:shimabukuromeg:20181014115236p:plain

補足としてマルチ認証を使う場合は、デフォルト設定のガード以外を利用する局面では、ガード名の指定が必要です。また、一つのLaravelアプリではセッションを共有する都合上、別々の認証設定アカウントを使う操作者がいる場合はログオフして使わないと競合してしまいます。

なるほどー。認証の処理がよくわかってないことがわかったので調べる。ガード?

teratail.com

読書メモ Laravel 認可処理

Laravel で用意されてる認可処理は2つあって、

  • 1つの認可処理に名前をつけて利用の可否を決定づけるゲート(Gate)
  • 複数の認可処理を記述するポリシー(Policy)

ゲートには、例えば、ブログの口コミなど投稿コンテンツに対して、コンテンツを投稿者飲みに編集ボタンを表示したりコンテンツ更新の許可をしたりする、(中略)文字通り「ゲート」としての処理を、クロージャとして定義する

認可 5.6 Laravel

ポリシーは特定のモデルやリソースに関する認可ロジックを系統立てるクラスです。たとえば、ブログアプリケーションの場合、Postモデルとそれに対応する、ポストを作成/更新するなどのユーザーアクションを認可するPostPolicyを持つことになるでしょう。

例. ゲート

  • AuthServiceProviderクラス

f:id:shimabukuromeg:20181013125700p:plain

  • コントローラー側

f:id:shimabukuromeg:20181013132357p:plain

個人的新出メソッド

intval

intval — 変数の整数としての値を取得する

PHP: intval - Manual

__invoke() メソッド

  • __invoke() メソッドは、 スクリプトがオブジェクトを関数としてコールしようとした際にコールされます。

PHP: マジックメソッド - Manual

  • シングルアクションコントローラ
  • アクションを一つだけ含むコントローラを定義したい場合は、そのコントローラに__invokeメソッドを設置してください。

コントローラ 5.6 Laravel

Githubの草っぽいグラフを表示させたくて vue-heatmap を使ってみた

f:id:shimabukuromeg:20181006122139p:plain

LaravelでVue.jsを使って、vue-heatmapのライブラリを使って、見た目だけだけど、Githubの草っぽいやつを表示できるようにした。

shimabukuromeg.hatenadiary.jp

github.com

やったこと

vuejs-heatmap ライブラリインストール

docker-compose run --rm yarn add  vuejs-heatmap

yarnの使い方わかんなかったので以下の記事で勉強した

qiita.com

この後、何やればいいか全然わからなかったので、いったん vue-heatmapのリポジトリをローカルに持ってきてサンプルを動かしてみた

ghq get https://github.com/DominikAngerer/vue-heatmap.git

サンプル動かすためには、main.js をちょっと修正する

f:id:shimabukuromeg:20181006123322p:plain

修正したら npm run devする

npm run dev

そうすると、勝手にブラウザが開いてグラフが表示される

f:id:shimabukuromeg:20181006123448p:plain

これをLaravelで作ってるアプリにどうやって載せるのか、よくわからんかったけど、トライアンドエラーでいろいろと試してみると、ちゃんと表示されるようになった。以下、やったこと

まずファイル配置と追記した

f:id:shimabukuromeg:20181006123924p:plain

f:id:shimabukuromeg:20181006124327p:plain

そしてコマンドを叩いて終わり

docker-compose run --rm yarn run dev

感想

  • やっと見た目だけだけど vue-heatmap を導入して表示できるようになった。次は、Laravel側データを取ってくる。vuejs-heatmap コンポーネント側の entries にベタ書きされてるからこれをいい感じに取ってくるようにする。勉強するぞー

  • Vue.jsは本読んでて、超基本的なところはわかったけど、全体的によくわからないことが多いので、時間あるとき引き続き勉強しよ。むずい。むずいけど、ライブラリ使いこなせると、UI自由に扱えてめっちゃたのしそう。

sugimotonote.com

s8a.jp

qiita.com

読書メモ Vue.jsの単一ファイルコンポーネント

Vue.jsの単一ファイルコンポーネントについて、初歩的だけど大事そうなところメモ。本のコピペ 🙏

単一ファイルコンポーネントとは

templateブロック

  • テンプレートを書き込むブロック
  • 単一ファイルコンポーネント内には最大1つのtemplateブロックを書き込める
  • テンプレートについてよくわからなくなる時があるんだけど、html側にコンポーネントが呼び出されたときの中身が書かれてるってイメージ。あってるかな?

scriptブロック

styleブロック

f:id:shimabukuromeg:20181006121828p:plain

読書メモ Vue.jsのディレクティブ

Vue.jsのディレクティブについて、初歩的だけど大事そうなところメモ。本のコピペ 🙏

ディレクティブとは

  • 標準のHTMLに対して独自の属性を追加することで属性値の式の変化に応じたDOM操作を行うことができ、この特別な属性のことをディレクティブという
  • ディレクティブを使うと、テンプレートないの要素の表示を条件毎に切り替えたり、繰り返しレンダリングしたりできる

v-show

  • テンプレートの表示/非表示を切り替えたい場合に使う
<p v-show="!canBuy">
     {{ 1000 | numberWithDelimiter }}円以上からご購入いただけます
</p>
        computed: { // 算出プロパティ
            totalPrice: function () {
                return this.items.reduce(function (sum, item) {
                    return sum + (item.price * item.quantity)
                }, 0)
            },
            totalPriceWithTax: function () {
                // 算出プロパティに依存した算出プロパティも定義できる
                return Math.floor(this.totalPrice * 1.08)
            },
            canBuy: function () {
                return this.totalPrice >= 1000
            }

        }

v-bind

  • 特定の条件が成立したとき、UIの見た目を変えたい場合、に使えるのがv-bindディレクティブ(例えばフォーム入力で不正な値が入力された場合はフィールドの色を赤く表示するUIにするなど)

v-on

  • イベントがおきたときに属性の式を実行する
v-on:イベント名="式として実行したい属性値"

v-model