学習目的 LaravelでのSNS実装(ログイン、タイムライン、タグ、フォローなど)イメージの構築 Dockerで開発環境立てる練習 LaravelでのCRUD理解強化 Vue.jsの導入の糸口を掴む dockerの利点 Webサーバーや、データベース本体やその設定内容をファイル化できる。 仮想マシンと比べて、カーネルを仮想化しないので、軽量である。 簡単にWebサーバーや、データベースの環境を作れるLaradockというアプリケーションを使用 .envファイルとはなんぞや UNIX系のOSで使える「env」の本体ファイルでシェル起動時に読み込み リポジトリにコミットされず、環境ごとに変更したい情報をまとめられる。(開発環境、本番環境の切り替え、DBの接続情報の変更) .envファイルについて 例に沿って、.envファイルの編集 APP_CODE_PATH_HOST=../laravel DATA_PATH_HOST=../data COMPOSE_PROJECT_NAME=laravel-sns NGINX_PORT=80 POSTGRES_DB=default POSTGRES_USER=default POSTGRES_PASSWORD=secret POSTGRES_PORT=5432 POSTGRES_VERSION=11.6 dockerイメージダウンロード workspace php-fpm nginx postgres $ docker-compose up -d workspace php-fpm nginx postgres docker-composeコマンドで4つのイメージをダウンロードして、up(起動)し、-d(ターミナルの操作へ) コンテナの停止 $ docker-compose stop Laravelインストール $ docker-compose exec workspace composer create-project --prefer-dist laravel/laravel . "6.20.0" workspaceコンテナにLaravelインストール $ docker-compose exec #{container} ${command} 対象のコンテナで対象のコマンドを実行 ポートはdocker-compose.ymlで確認可能 アプリケーション作成基本の流れ （モデル、テーブル作成） 1. ルート記入 2. コントローラー作成 3. view作成 PHPの型キャストって？ 前提としてPHPは変数定義時に型宣言を必要としない。代入するものの型に合わせられる。 C言語などでは、変数の型を宣言する。その役割を担う。 <?php $foo = 10; // $foo は整数です $bar = (boolean) $foo; // $bar はbooleanです ?> VIewへの変数の引き渡し方 withメソッド compact関数 MDBootstrapとは CSSフレームワークBootstrap4のマテリアルデザイン版（スマホで見ても画面が崩れないシンプルなデザイン） CDN(Contents Delivery Network)とは ホームページの表示をいい感じにするために用意されたネットワーク ユーザーはCDNに上げられている近くのWebサーバーのファイルを受け取ることができるので、高速に表示できたりする。 感想 やっぱbootstrap使うと、それなりのデザインになリますね。 次から本格的に理解しながらアプリ作成します。

学習目的 LaravelでのSNS実装(ログイン、タイムライン、タグ、フォローなど)イメージの構築 Dockerで開発環境立てる練習 LaravelでのCRUD理解強化 Vue.jsの導入の糸口を掴む dockerの利点 Webサーバーや、データベース本体やその設定内容をファイル化できる。 仮想マシンと比べて、カーネルを仮想化しないので、軽量である。 簡単にWebサーバーや、データベースの環境を作れるLaradockというアプリケーションを使用 .envファイルとはなんぞや UNIX系のOSで使える「env」の本体ファイルでシェル起動時に読み込み リポジトリにコミットされず、環境ごとに変更したい情報をまとめられる。(開発環境、本番環境の切り替え、DBの接続情報の変更) .envファイルについて 例に沿って、.envファイルの編集 APP_CODE_PATH_HOST=../laravel DATA_PATH_HOST=../data COMPOSE_PROJECT_NAME=laravel-sns NGINX_PORT=80 POSTGRES_DB=default POSTGRES_USER=default POSTGRES_PASSWORD=secret POSTGRES_PORT=5432 POSTGRES_VERSION=11.6 dockerイメージダウンロード workspace php-fpm nginx postgres $ docker-compose up -d workspace php-fpm nginx postgres docker-composeコマンドで4つのイメージをダウンロードして、up(起動)し、-d(ターミナルの操作へ) コンテナの停止 $ docker-compose stop Laravelインストール $ docker-compose exec workspace composer create-project --prefer-dist laravel/laravel . "6.20.0" workspaceコンテナにLaravelインストール $ docker-compose exec #{container} ${command} 対象のコンテナで対象のコマンドを実行 ポートはdocker-compose.ymlで確認可能 アプリケーション作成基本の流れ （モデル、テーブル作成） 1. ルート記入 2. コントローラー作成 3. view作成 PHPの型キャストって？ 前提としてPHPは変数定義時に型宣言を必要としない。代入するものの型に合わせられる。 C言語などでは、変数の型を宣言する。その役割を担う。 <?php $foo = 10; // $foo は整数です $bar = (boolean) $foo; // $bar はbooleanです ?> VIewへの変数の引き渡し方 withメソッド compact関数 MDBootstrapとは CSSフレームワークBootstrap4のマテリアルデザイン版（スマホで見ても画面が崩れないシンプルなデザイン） CDN(Contents Delivery Network)とは ホームページの表示をいい感じにするために用意されたネットワーク ユーザーはCDNに上げられている近くのWebサーバーのファイルを受け取ることができるので、高速に表示できたりする。 感想 やっぱbootstrap使うと、それなりのデザインになリますね。 次から本格的に理解しながらアプリ作成します。

bladeの@includeと@componentを使い分けるためのメモ。 結論だけ述べると、どちらを使っても同じ見た目は作れる。 @includeはタグの数が決まっている場合と相性がよく、 @componentはタグの数が不定の場合と相性が良い。 前提 バージョン：Laravel6 @includeの使い方 @include('読込ファイル', ['変数名' => '代入値',...]) 読込ファイル内に変数が存在するときは第２引数で指定することで値を渡すことができる。 @componentの使い方 @component('読込ファイル', ['変数名' => '代入値',...]) /* {{ $slot }}に入る内容 */ @slot('スロット名') /* {{ $スロット名 }}に入る内容 */ @endslot @endcomponent 読込ファイル内に変数が存在するときは第２引数で指定することで値を渡すことができる。 また@component内に書いた内容は読込ファイル内の{{ $slot }}へと挿入される。@slotを使用することで任意の変数名にすることも可能。 使い分け例 ①ボタンの使い回し 例えば同じ見た目のボタンを表示名と色を変えて使いまわすことを考える。 button.blade.php <button type="button" class="btn btn-{{ $color }}">{{ $name }}</button> view.blade.php <div class="m-3"> <p>includeで作成</p> @include('button',[ 'color' => 'primary', 'name' => 'ボタン1' ]) @include('button',[ 'color' => 'success', 'name' => 'ボタン2' ]) @include('button',[ 'color' => 'danger', 'name' => 'ボタン3' ]) </div> <div class="m-3"> <p>componentで作成</p> @component('button',[ 'color' => 'primary', 'name' => 'ボタン1' ]) @endcomponent @component('button',[ 'color' => 'success', 'name' => 'ボタン2' ]) @endcomponent @component('button') @slot('color') danger @endslot @slot('name') ボタン3 @endslot @endcomponent 結果は下の画像の通り。 例のように決まった要素数のものを使いまわすのであれば、@includeも@componentも大して変わらない書き方になる。 @componentでは@endcomponentを書くため微妙に@includeの方が見やすいかもしれない。 また、@componentは変数で渡すかスロットとして取り込むかで2通りの書き方がある。 ②レイアウトの使い回し 例えば、コンテンツを配置する枠は使いまわすけれど、中身は不定という場合を考える。 frame.blade.php <div class="container-fluid my-3"> <h3 class="text-white text-center bg-dark rounded-top m-0"> {{ $title }} </h3> <div class="border border-dark rounded-bottom p-2"> {{ $slot }} // includeの場合は{!! $slot !!} </div> </div> view.blade.php <div class="m-3"> <p>includeで作成</p> @include('frame', [ 'title' => 'テキスト', 'slot' => '<p>これはテキストです。</p>', ]) @php $list = ''; for($i = 1; $i <= 5; $i++) { $list = "$list<li class='list-group-item'>アイテム$i</li>"; } @endphp @include('frame', [ 'title' => 'リスト', 'slot' => $list, ]) </div> <div class="m-3"> <p>componentで作成</p> @component('frame', ['title' => 'テキスト']) <p>これはテキストです。</p> @endcomponent @component('frame', ['title' => 'リスト']) <ul class="list-group"> @for($i = 1; $i <= 5; $i++) <li class="list-group-item">アイテム{{ $i }}</li> @endfor <ul> @endcomponent </div> 結果は下の画像の通り。 要素数や種類が変わる場合には@includeでは変数に格納するために見づらい書き方をとらざるをえない。変数として渡すため、制御構文を使いたければ外側に書く必要がある。 @componentでは要素や制御構文をそのままの形で使用できるため整った見た目になる。 なお、@includeに要素を渡すときに{{ }}のままではエスケープされてしまう（下記画像）。正しく表示するには{!! !!}にしなければならない。 結論 制御構文を使ったり、内容となるhtml要素に自由度を持たせたい場合は@componentを使うとで見やすいコードとなる。 一方、制御構文を使わない（使うとしても渡すのは構文内の変数だけ）であったり、内容となるhtml要素は固定で表示内容や属性に変数を渡すだけの場合は@includeを使うとで見やすいコードとなる。 表示結果についてはどちらを使っても同じものは実装できる。

ECRのサービス起動時の環境変数の指定でenvファイルを切り替える試験をしている最中に設定した値がちゃんと認識されない。 原因はenvファイルの値に#(シャープ)が含まれていることだった。 以下のようにダブルクォーテーションで囲って解決。 HOGE_ENV="hoge#moge" そもそも色々とenvファイルに書くのもよろしくないので ルールを決めてAWS Systems Managerのパラメータストア使ったほうが良い。 あくまで#の回避方法のメモ。

今回はLaravelでreactとTypescriptを使えるように開発環境を構築していきます。 初学者なので2週間ぐらいかかってしまいましたが誰かの参考になれば幸いです。 開発環境 Docker 20.10.5 docker-compose 1.28.5 php 7.3 laravel 6.20.26 Composer 2.0.8 MySQL 8.0 nginx 1.15.12-alpine Dockerを使っていますがDockerの環境構築は省略させていただいてコンテナ内でlaravelをインストールするところから始めます。 Laravel＆Reactの環境を整える はじめにappコンテナに入りLaravelをインストールします。 # composer create-project --prefer-dist "laravel/laravel=6.*" 続いてLaravel/uiをインストール。 最新版のLaravel/uiをインストールするとLaravel6ではエラーが出るのでバージョン指定をしています。 # composer require laravel/ui:^1.0 --dev Reactのスカフォールドをインストール。ついでに認証機能も追加しました。 # php artisan ui react --auth webコンテナに入りnpmでインストールとビルドをします。(Dockerfileでnodeの設定済み) # npm install & npm run dev ここまででローカルサーバーにアクセスしたらちゃんとLaravelのwelcome.blade.phpのビューが表示されていたら成功です。 Laravel Mixを用いてTypescriptの環境を構築する webコンテナに入りnpmコマンドでTypescriptで必要なパッケージをインストールします。 ついでにreact-router-domもこのタイミングでインストール。 # npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev webpack.mix.jsを編集 TypeScriptとSCSSでビルドできるようにwebpack.mix.jsを編集します。 webpack.mix.js const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/index.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version(); おそらくreactをインストールしているのでデフォルトではmix.react()になっていると思いますがtypescriptをビルドするのでmix.ts()に変更します。 また、.version()を追加しておかないとnpm run devをしてもキャッシュが残っていて変更が反映されないことがあるので一応記述します。 tsconfig.jsonを作成 webコンテナ内で以下のコマンドを実行してtsconfig.jsonを作成します。 ./node_modules/.bin/tsc --init オプションが多いので適宜確認するしかないかと... 地味にエラーがよく出るのでエラー内容確認して適宜修正しました。 tsconfig.json { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", //フロント使用予定なのでcommonjsは使用しません "jsx": "react", // tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定する "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es6", "lib": [ "es2016", "dom" ], "allowSyntheticDefaultImports": true // エクスポートしないモジュールからのインポートを許可する。これでtypescriptでreactをインポートするときにimport React from 'react';を使えるようになる }, "include": [ "resources/ts/**/*" // TypeScriptのソース配置場所 ] } tsxファイルを作成して表示されるか確認 tsxファイルが正しく表示されるか確認します。 まず、welcome.blade.phpを以下のように編集します。 resouces/views/welcome.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"></div> </body> <script src="{{ mix('/js/index.js') }}"></script> </html> 次にresources配下にtsフォルダを作成し、その中にindex.tsxを作成します。 index.tsxは以下のように記述してください。 index.tsx import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> <p>こんにちは</p> </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } そしてもう一度npm run devを実行しましょう。 # npm run dev このままローカルサーバーで.index.tsxが表示されればいいのですが、僕の場合はTypeError: loaderContext.getOptions is not a functionというエラーが出ていました。 これはlaravelのバージョン(今回は6系を使用)に対してts-loaderのバージョンが新しすぎるために出るエラーのようです。 ts-loaderを一度アンインストールして古いバージョンを入れましょう。 # npm uninstall ts-loader # npm install ts-loader@8.2.0 --save-dev これで最後にもう一度npm run devを実行しましょう。 # npm run dev

今回はLaravelでreactとTypescriptを使えるように開発環境を構築していきます。 初学者なので2週間ぐらいかかってしまいましたが誰かの参考になれば幸いです。 開発環境 Docker 20.10.5 docker-compose 1.28.5 php 7.3 laravel 6.20.26 Composer 2.0.8 MySQL 8.0 nginx 1.15.12-alpine Dockerを使っていますがDockerの環境構築は省略させていただいてコンテナ内でlaravelをインストールするところから始めます。 Laravel＆Reactの環境を整える はじめにappコンテナに入りLaravelをインストールします。 # composer create-project --prefer-dist "laravel/laravel=6.*" 続いてLaravel/uiをインストール。 最新版のLaravel/uiをインストールするとLaravel6ではエラーが出るのでバージョン指定をしています。 # composer require laravel/ui:^1.0 --dev Reactのスカフォールドをインストール。ついでに認証機能も追加しました。 # php artisan ui react --auth webコンテナに入りnpmでインストールとビルドをします。(Dockerfileでnodeの設定済み) # npm install & npm run dev ここまででローカルサーバーにアクセスしたらちゃんとLaravelのwelcome.blade.phpのビューが表示されていたら成功です。 Laravel mixとTypescriptの環境を構築する webコンテナに入りnpmコマンドでTypescriptで必要なパッケージをインストールします。 ついでにreact-router-domもこのタイミングでインストール。 # npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev webpack.mix.jsを編集 TypeScriptとSCSSでビルドできるようにwebpack.mix.jsを編集します。 webpack.mix.js const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/index.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version(); おそらくreactをインストールしているのでデフォルトではmix.react()になっていると思いますがtypescriptをビルドするのでmix.ts()に変更します。 また、.version()を追加しておかないとnpm run devをしてもキャッシュが残っていて変更が反映されないことがあるので一応記述します。 tsconfig.jsonを作成 webコンテナ内で以下のコマンドを実行してtsconfig.jsonを作成します。 ./node_modules/.bin/tsc --init オプションが多いので適宜確認するしかないかと... 地味にエラーがよく出るのでエラー内容確認して適宜修正しました。 tsconfig.json { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", //フロント使用予定なのでcommonjsは使用しません "jsx": "react", // tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定する "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es6", "lib": [ "es2016", "dom" ], "allowSyntheticDefaultImports": true // エクスポートしないモジュールからのインポートを許可する。これでtypescriptでreactをインポートするときにimport React from 'react';を使えるようになる }, "include": [ "resources/ts/**/*" // TypeScriptのソース配置場所 ] } tsxファイルを作成して表示されるか確認 tsxファイルが正しく表示されるか確認します。 まず、welcome.blade.phpを以下のように編集します。 resouces/views/welcome.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"></div> </body> <script src="{{ mix('/js/index.js') }}"></script> </html> 次にresources配下にtsフォルダを作成し、その中にindex.tsxを作成します。 index.tsxは以下のように記述してください。 index.tsx import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> <p>こんにちは</p> </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } そしてもう一度npm run devを実行しましょう。 # npm run dev このままローカルサーバーで.index.tsxが表示されればいいのですが、僕の場合はTypeError: loaderContext.getOptions is not a functionというエラーが出ていました。 これはlaravelのバージョン(今回は6系を使用)に対してts-loaderのバージョンが新しすぎるために出るエラーのようです。 ts-loaderを一度アンインストールして古いバージョンを入れましょう。 # npm uninstall ts-loader # npm install ts-loader@8.2.0 --save-dev これで最後にもう一度npm run devを実行しましょう。 # npm run dev

勉強中故、様々な機能を使ってみたいと思い、音声入力に手を付けてみました。 今回は、中でも簡単に実装できそうなWeb Speech APIというものを使ってみました。 今回は、その記録というか備忘録というか、そういった内容です。 Laravelと書きましたが、扱っている内容はそれほど難しくなかったので、応用は効くと思います。 Web Speech APIドキュメント ドキュメントはここから Laravelに実装してみる さっそく実装してみます。 view/index.blade.html <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Web Speech API</title> <!-- Styles --> <link href="{{ mix('css/app.css') }}" rel="stylesheet"> </head> <body> <h1>Web Speech API</h1> <div id="app"> <input type="textarea" id="q" name="q" size=60> <input type="button" value="録音" onclick="recognition.start()"> <input type="button" value="停止" onclick="recognition.stop()"> <input type="button" value="キャンセル" onclick="recognition.abort()"> </div> <script type="text/javascript" src="js/recognition.js"></script> <script src="{{ mix('js/app.js') }}"></script> </body> </html> public/js/recognition.js // resources/js配下ではないので注意 var recognition = new webkitSpeechRecognition(); recognition.onresult = function(event) { if (event.results.length > 0) { q.value = event.results[0][0].transcript; } } Example1をベースにしています。音声認識の例 ※id="app"とmix('js/app.js')はVue.jsに関する記述なので無視して大丈夫です。 仕様としては、録音ボタンを押せば、録音開始。停止ボタンを押せば、録音を停止します。 音声入力を開始後、入力した内容を破棄して終了したい場合は、キャンセルを押します。 ただ、この方法は、録音ボタンを押下後、長い文章を入力できない(ぽい？)みたいです。 textareaなどに、長い文章を入力させたい場合は、Example3が使えると思います。 index.blade.html <body> <h1 class="text-center h1">Web Speech API</h1> <div id="app"> <textarea id="textarea" rows=20 cols=100></textarea> <button id="button" onclick="toggleStartStop()"></button> </div> <script type="text/javascript" src="js/recognition.js"></script> <script src="{{ mix('js/app.js') }}"></script> </body> recognition.js var recognizing; var recognition = new webkitSpeechRecognition(); recognition.continuous = true; reset(); recognition.onend = reset; recognition.onresult = function (event) { for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { textarea.value += event.results[i][0].transcript; } } } function reset() { recognizing = false; button.innerHTML = "Click to Speak"; } function toggleStartStop() { if (recognizing) { recognition.stop(); reset(); } else { recognition.start(); recognizing = true; button.innerHTML = "Click to Stop"; } } ドキュメントでは、new SpeechRecognition()となっていますが、ブラウザがSpeechRecognition is not definedエラーを返すようであれば、new webkitSpeechRecognition()としてください。 最後に このWeb Speech APIは、主にChromeとSafariでしか動かないみたいです。caniuse(Web Speech API) Cloud Speech to Textは主要なブラウザで動作するので、後に使ってみたいと思います。caniuse(Speech to Text) 使い始めたばかりなので、解釈等誤りや、補足情報などありましたら、是非教えていただけると有り難いです。 参考記事 https://qiita.com/m-shimao/items/e340efac71f709c43a4e 及び上記URL内の参考にしたサイトの記事 大変参考になりました。ありがとうございます！

概要 Laraelアプリに追加でGoogleログイン機能を追加したので本番環境（Heroku）に反映させます。 https://qiita.com/u-dai/items/91df3b923dc82fed5b76 ↑こちらの記事を参考にさせて頂きました。ありがとうございます。 ここからは、ローカル環境でGoogleログインが正常に動いている事を前提で進めていきます。 本番環境に反映 本番環境のURIを追加します。 URI http://アプリケーション名.herokuapp.com/login/google/callback Herokuの場合はこんな感じです。 そして最も大事な環境変数を設定していきます。 記事通りに進めていくと、app/config/services.phpにて services.php 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => env('APP_URL') . '/login/google/callback' ] このように記述したと思いますが、これら3つの環境変数をHerokuに設定していきます。 terminal % heroku config:set APP_URL=http://アプリケーション名.herokuapp.com % heroku config:set GOOGLE_CLIENT_ID=○○◯○.apps.googleusercontent.com % heroku config:set GOOGLE_CLIENT_SECRET=△△△△ 後はデプロイすれば本番環境に反映されます。 めでたし、めでたし。 おまけ おまけというか個人的にはこちらが本題だったりします。 ローカルで動いたGoogleログインですが、本番で動かず焦った私は何を血迷ったのか、せっかく作った認証情報を削除して作り直してしまうのです。 それによりローカルでせっかく動いたGoogleログインにて、『エラー 401: deleted_client the oauth client was deleted.』と怒られる始末⤵︎ このエラーに半日費やしてしまうわけで…。 このエラーの解決方法は terminal % php artisan clear-compiled % composer dump-autoload % php artisan optimize googleログインで他にもエラーが出ていたのですが、これらのコマンドで直った旨をメモしていたのが功を奏しました。このエラーにも使えるとは。 ありがたや、ありがたや。

はじめに メール本文の言語設定を画面と揃えたい場合と、固定したい場合があったので備忘録として残しておきます。 セッションに格納されているlocaleを使用したい場合 Mail::to($to)->locale(session('locale'))->queue($mail_object); session('locale')の部分は環境に合わせて置き換えてください。 固定したい場合 Mail::to($to)->locale('en')->queue($mail_object); そのままです。 参考

概要 LaravelのSocialiteによるTwitter Loginにおいて、"Authenticate"から"Authorize"に変更する方法 環境情報 Laravel: 5.5.50 Socialite: 3.0 詳細 LaravelのSocialiteを用いると、容易にTwitter Loginを実装できますが、 デフォルトでは、"Authenticate"版のTwitter Loginとなります。 これを"Authorize"版のTwitter Loginに変更する方法です。 変更方法 (PJ Directory)/vendor/league/oauth1-client/src/Server/Twitter.phpにおけるurlAuthorization()メソッドを以下のように変更します。 【変更前】 public function urlAuthorization() { return 'https://api.twitter.com/oauth/authenticate'; } 【変更後】 public function urlAuthorization() { return 'https://api.twitter.com/oauth/authorize'; } AuthenticateとAuthorizeの相違点 Authenticate; 一度Twitter Loginを実施すると、次回以降はログインボタンをクリックした後に、 自動的にログインされるようになります。 そのため、複数アカウントを所有するユーザにとって、使い勝手が悪くなります。 ※Twitter側で明示的にログアウトした後に、当該サイトにアクセスしないとアカウントを切り替えられない。 ※1アカウントのみで運用しているユーザは使い勝手が良いと思います。 ※個人的には情報を覚えられているように感じて、気持ち悪く感じます。 Authorize; ログインボタンを押すたびに、TwitterアカウントをAuthorizedするかどうか聞かれるようになります。 と言っても、ユーザは毎回ユーザ情報を入力する必要ないので、使い勝手はある程度残ります。 関連情報 Laravel 5.5にSocialiteの最新版を導入しようとすると、 エラーが出ますので、互換性があるSocialite3.0としています。 蛇足 今までは身内に教えることのみしていましたが、たまには記事を記載してアウトプットしようかと思います。

概要 Laravelのプロジェクト作成しVueを導入する (リポジトリは分離させないのでVueCLI未使用) GitHubのmasterブランチにPush/MergeされたらHerokuに自動デプロイさせる データベースにはMySQLを使用 デプロイはCircleCI等のCIサービスは使用せずにHerokuのみで完結させる 開発環境 Laravel 7.30.4 Vue 2.6.12 MySQL 目次 Laravelプロジェクト作成Git設定 Vue関連インストール&設定 Laravel側のHeroku設定 Herokuアプリ, MySQL作成 Heroku自動デプロイ設定 1. Laravelプロジェクト作成&Git設定 ①GitHubのリモートリポジトリ作成 ②Laravelプロジェクト作成 composer create-project --prefer-dist laravel/laravel blog "7.*" ③ルーティング設定 Vue-RouterでSPAにするので下記のLaravel側のルーティングは初回のアクセスに対するもの web.php Route::get('/{any?}', function () { return view('index'); })->where('any', '.+'); ④初回アクセス時のblade作成 views/index.blade.php <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{ config('app.name') }}</title> <!-- Scripts --> <script src="{{ mix('js/app.js') }}" defer></script> <!-- CSS --> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <router-view></router-view> </div> </body> </html> 下記のGit設定は必要に応じて行ってください ⑤Git初期化＆リモートリポジトリ設定 git init git remote add origin https://github.com/*********/*********.git ⑥masterブランチにFirstCommit git add . git commit -m "first commit" git push origin master ⑦developブランチ作成＆リモートリポジトリにプッシュ git checkout -b develop git push origin develop これでGit関連の基本的な設定終了 2. Vue関連インストール&設定 ①Vueインストール composer require laravel/ui "2.*" php artisan ui vue ※laravel7の場合2.*が対応しているバージョン ②Vue-Routerインストール npm install vue-router ※必要に応じて ③Vuex, Vuetify, mdi/fontインストール npm install vuex npm install Vuetify npm install @mdi/font ④Home.vue, Router, Storeファイル作成 & インポート VueCLIで作成したわけではないのでrouterやstoreファイルを0から作成しなければなりません 下記はVueCLIで自動生成されるrouter,storeファイルをもとにしたベースを紹介します resources/js/views/Home.vue <template> <div>Home</div> </template> router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, ] const router = new VueRouter({ mode: 'history', routes }) export default router store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { } }) main.js import router from './router' import store from './store' window.Vue = require('vue'); const app = new Vue({ router, store, el: '#app', }); 3. Laravel側のHeroku設定 ①Procfile作成 プロジェクトルートにHerokuアプリ起動時に実行されるコマンド及びプロセスの種類を定義するファイルを作成します Procfile web: vendor/bin/heroku-php-apache2 public ②package.json修正 Herokuデプロイ時にビルドさせるためのスクリプト記述 package.json "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js", + "postinstall": "npm run prod" }, ③Heroku用.envファイル作成 .envはデフォルトでgitの管理対象外なので本番環境用の.envを新規作成します ※デプロイ時には.envとして動かします cp .env .env.heroku composer.json "scripts": { "post-autoload-dump": [ "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi" ], "post-root-package-install": [ "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" ], "post-create-project-cmd": [ "@php artisan key:generate --ansi" ], + "compile": [ + "@php -r \"file_exists('.env') || copy('.env.heroku', '.env');\"" + ] } 4. Herokuアプリ, MySQL作成 ①Create new appからアプリ作成に進む ②一意なアプリ名を入力してCreate App 何も入力しなかった場合は自動的にアプリ名が割り振られる これでアプリは作成はできたがdyno(コンテナ)は作成されていない状態となる Laravelのプロジェクトをデプロイしたらdynoが作られる ③Find more add-onsからMySQL作成に進む ④ClearDB MySQLを選択→install clearDB MySQL ⑤App to provision toにはアプリ名を入力しSubmit Order Form ※ここでエラーが発生した場合はAccountSettings->Billingからクレジットカードを登録しているか確認 PostgreSQLもMySQLも無料で使用できるがMySQLの場合はクレジットカード登録が必要 ⑥DBの接続情報確認 Reveal Config Varsを選択するとCLEARDB_DATABASE_URLの値が表示されます そこの値にはホスト名、ユーザー名、パスワード、DB名全てが記述されています 下記の書式を参考に各情報をひかえましょう mysql://ユーザー:パスワード@ホスト/DB名?reconnect=true ※Laravel側の.env.herokuにもDB情報を記述をしましょう 5. Heroku自動デプロイ設定 ①Deployment method項目のGitHubアイコンボタンを選択 デプロイの資材となるリモートリポジトリを選択します ②Enable Automatic Deploysで自動デプロイ設定 後はGitHubのmasterブランチにプッシュorマージすると自動デプロイされます おまけ php artisan migrateする heroku run php artisan migrate --app=アプリ名 SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long 上記エラーが出た際はcharasetを変更する config/database.php 'mysql' => [ 'driver' => 'mysql', 'url' => env('DATABASE_URL'), 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'forge'), 'username' => env('DB_USERNAME', 'forge'), 'password' => env('DB_PASSWORD', ''), 'unix_socket' => env('DB_SOCKET', ''), - 'charset' => 'utf8mb4', - 'collation' => 'utf8mb4_unicode_ci', + 'charset' => 'utf8', + 'collation' => 'utf8_unicode_ci', 'prefix' => '', 'prefix_indexes' => true, 'strict' => true, 'engine' => null, 'options' => extension_loaded('pdo_mysql') ? array_filter([ PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'), ]) : [], ],