Laravel 419エラー ある日、開発していたら419 PAGE EXPIREDエラーが表示されてしまいました。 419のステータスコードなんて見たことなかったので、色々調べてみました。 419エラーとは 結論から言うと、HTMLのフォームなどにCSRFを防止するCSRF保護コードが含まれていないと419エラーが表示されます。 CSRF保護コードが含まれていない場合、Laravelが「俺が守る」と言わんばかりに守ってくれます。(かっこいい) CSRFとは CSRFとクロスサイトリクエストフォージェリの略で、Webアプリの脆弱性を突いた攻撃です。 CSRFが行われると、サーバ上で利用者が意図しない処理が行われてしまうため、犯罪予告の書き込みなどを行われるなど悪質な攻撃が行われてしまいます。 実際に、CSRFにより殺人予告が投稿されてしまい、無関係の大学生が誤認逮捕されてしまった事件が過去に起きています。(横浜市小学校襲撃予告事件) 対処法 HTMLでPOSTするForm内に{{csrf_field()}}または@csrfと書けばOKです。 こうすることでCSRF攻撃がLaravelにより防止されます。 例 419が起きるコード <form action="" method="post" class="form-419"> <div class="form-419"> <label for="mail">メールアドレス:</label> <input type="email" name="email" id="email" required> </div> <div class="form-419"> <label for="password">パスワード: </label> <input type="password" name="password" id="password" required> </div> <div class="form-419"> <input type="submit" value="送信"> </div> </form> 419が起きないコード <form action="" method="post" class="form-419"> {{csrf_field()}} <!-- ↑ここにCSRF保護を埋め込んでいる --> <div class="form-419"> <label for="mail">メールアドレス:</label> <input type="email" name="email" id="email" required> </div> <div class="form-419"> <label for="password">パスワード: </label> <input type="password" name="password" id="password" required> </div> <div class="form-419"> <input type="submit" value="送信"> </div> </form> まとめ Laravelを使ってまだ1ヶ月程度だけど、CSRFの対策などもしっかり行ってくれるLaravelが好きになっちゃいそう。 参考にしたサイト Laravel 8.x CSRF保護 クロスサイトリクエストフォージェリ - Wikipedia

目的 composer系コマンドの実行進捗を逐一表示するオプションを紹介する。 紹介 composer系コマンドにオプション-vvvを付与して実行する。 例 laravelプロジェクトの作成時などcomposerコマンドを実行するとかなり時間がかかり「止まっているのでは？？」と思うことがある。 下記のよう-vvvを付けて実行することによりより細かいダウンロード処理などの進捗をターミナルに表示してくれるようになる。 laravel8_testというプロジェクトを新たに用意する時のコマンドを下記に記載する。 $ composer create-project "laravel/laravel=8.*" laravel8_test -vvv そうすると下記の様に細かく進捗が表示される。 [20:46:35]MacBook-Pro~/workspase/study$ composer create-project "laravel/laravel=8.*" laravel8_base64 -vvv Reading /Users/okawashun/.composer/composer.json Loading config file /Users/okawashun/.composer/composer.json Checked CA file /usr/local/etc/openssl@1.1/cert.pem: valid Executing command (/Users/okawashun/.composer): git branch --no-color --no-abbrev -v Executing command (/Users/okawashun/.composer): git describe --exact-match --tags Executing command (/Users/okawashun/.composer): git log --pretty="%H" -n1 HEAD Executing command (/Users/okawashun/.composer): hg branch Executing command (/Users/okawashun/.composer): fossil branch list Executing command (/Users/okawashun/.composer): fossil tag list Executing command (/Users/okawashun/.composer): svn info --xml Reading /Users/okawashun/.composer/vendor/composer/installed.json Running 1.10.5 (2020-04-10 11:44:22) with PHP 7.4.11 on Darwin / 20.6.0 Reading /Users/okawashun/.composer/composer.json Loading config file /Users/okawashun/.composer/composer.json Executing command (/Users/okawashun/.composer): git branch --no-color --no-abbrev -v Executing command (/Users/okawashun/.composer): git describe --exact-match --tags Executing command (/Users/okawashun/.composer): git log --pretty="%H" -n1 HEAD Executing command (/Users/okawashun/.composer): hg branch Executing command (/Users/okawashun/.composer): fossil branch list Executing command (/Users/okawashun/.composer): fossil tag list Executing command (/Users/okawashun/.composer): svn info --xml Reading /Users/okawashun/.composer/vendor/composer/installed.json Creating a "laravel/laravel=8.*" project at "./laravel8_base64" Downloading https://repo.packagist.org/packages.json Warning from https://repo.packagist.org: Support for Composer 1 is deprecated and some packages will not be available. You should upgrade to Composer 2. See https://blog.packagist.com/deprecating-composer-1-support/ Writing /Users/okawashun/.composer/cache/repo/https---repo.packagist.org/packages.json into cache Downloading http://repo.packagist.org/p/provider-2013%2462666b4b40080dde1c2560d948cdf57a4f8beb3e6829c6b7585199b5b3459786.json Writing /Users/okawashun/.composer/cache/repo/https---repo.packagist.org/p-provider-2013.json into cache Downloading http://repo.packagist.org/p/provider-2014%24d5b4c2347e5e27516578c3d21e151b941a06edc4f6ec398397e30d10d6af3226.json Writing /Users/okawashun/.composer/cache/repo/https---repo.packagist.org/p-provider-2014.json into cache Downloading http://repo.packagist.org/p/provider-2015%24335e33a657e30d60cf87b98c8fd6dd8ccbc8241fa8b8ceaf1715a05310bdaae1.json Writing /Users/okawashun/.composer/cache/repo/https---repo.packagist.org/p-provider-2015.json into cache

　はじめに 　私は、今年５月に現場デビューしたばかりの初心者エンジニアです。 　初心者ゆえ、知識・技術ともにまだまだ未熟なこともあり、テキストを使いながら独学の勉強によって日々精進しております。 　私が現在稼働させていただいている現場では、PHPフレームワークである「Laravel」を用いて実装している関係上、Laravelの勉強を進めています。 　本記事では、書籍『PHPフレームワーク Laravel WEBアプリケーション開発』(竹澤有貴、栗生和明、新原雅司、 大村創太郎の4名による共同著書)を通して学んだことをアウトプットしていきます。 　文章表現や実装方法について、齟齬や間違いなどがございましたら、ぜひご指摘くださいますようお願い致します。 　※ 書籍を購入希望の方はこちらから↓ 『PHPフレームワーク Laravel WEBアプリケーション開発』 MVCとADR 　一般的なWEBアプリケーションでは、MVCパターンを採用するケースが多々ありますが、MVCパターンは、開発者によってその捉え方や解釈が異なることも事実です。 　このMVCパターンを正しく適用することで、見通しの良いアプリケーション開発が可能となります。 　また、ここ最近では、ADRという、MVCから派生したパターンもあります。 　今回は、MVCパターンとADRパターンの二つをご紹介していきます。 　本記事の流れ 　1.MVCとは 　2.ADRとは 　1.MVCとは 　　MVCとは、ソフトウェアの設計モデルの一つで、機能をModel（モデル）、View（ビュー）、Controller（コントローラ）の三つの役割に分離して実装し、それらが連携して処理を進める方式です。　 　Laravelでは、このMVCパターンが使いやすいようなディレクトリ構造になっています。 　コントローラの実行をサポートする機能として「Router」が、ビューとしてHTML出力を担う「Bladeテンプレート」が、モデルのビジネスロジックをサポートする機能の一つとして、Eloquentが提供されています。 　以下の図が、基本的なフローです。 　ソースコード例です。 ルーター Route::get('/user', 'App\Http\Controllers\UserController@index'); Route::post('/user', 'App\Http\Controllers\UserController@store'); コントローラ <?php declare(strict_types=1); namespace App\Http\Controllers; use App\User; use Illuminate\Contracts\View\Factory as ViewFactory; use Illuminate\Http\RedirectResponse; use Illuminate\Http\Request; final class UserController extends Controller { public function index(Request $request): ViewFactory { // ① $user = User::find($request->get('id')); // ② return view('user.index', [ 'user' => $user ]); } public function store(Request $request): RedirectResponse { // 登録処理など } } 　①では、ユーザー情報を取得するためにUserクラスを通じてデータベースへアクセスしています。idを指定することで、該当のユーザーの情報を取得します。 　②では、HTTPリクエストを受け取った後、ルーターの定義に従ってメソッドが実行され、BladeテンプレートをHTMLとしてレスポンスされます。 　ここでは、userフォルダのindexビューにユーザー情報を付け加えてレスポンスを返しています。 　③は、コントローラの別処理となります。ここでは、User作成用のstoreメソッドを例として記述しました。 　コントローラは、Illuminate\Routing\Routerクラスが制御しています。 　コントローラは、URLに対するアクションメソッドを持ちますが、実際はコントローラクラスを強制しているわけではありません。 　routes配下のweb.phpファイルなどでURIと対応するクラスであれば、どんなクラスが実行されてもレスポンスが返却される処理が行われます。 　CRUD処理（Create:生成、Read:読み取り、Update:更新、Delete:削除）に対応するメソッドがありますが、あくまでも、コントローラクラスの雛形とルーターが定義されているだけです。 　モデルは、ビジネスロジックを実装する層と、データベースを操作する層から構成されます。 　Laravelでは、データベースを操作する層として、EloquetモデルとQueryBuilder機能などが提供されています。 　Eloquentモデルに、データベースを操作する処理とビジネスロジックを合わせて実装すると、2層が一緒になる"ファットモデル"と呼ばれる状態になります。 　ファットモデルとは、簡単に言うと、ソースコードが多くなりすぎたり、複雑化したりしたりする状態です。これは、開発を進めていく上で好ましくはありません。 　ここでは触れませんが、そのような状態を解消するための方策を取り入れることが基本となるので、ただ単純なモデル操作だけできればそれでいい、とはいかないことを覚えておく必要があります。 　最後に、ビューは、一般的にブラウザなどに表示されるモノを差します。 　Bladeテンプレートをそのままビューとして捉えてもいいようですが、実際は、Illuminate\Http\Responseインスタンスを介して出力されているようです。 　2.ADRとは 　ADR自体はソフトウェアアーキテクチャパターンの１つで、MVCの改良版という位置付けになっていますが、MVCと違うところの１つとして、１つのアクションに対してそのリクエストからレスポンスまでを定義する流れになっているところがあります。 　以下の図が、基本的なフローです。 　ADRは、３つの役割から構成されます。 Action（アクション）:リクエストを受け取り、ドメインの処理結果をレスポンダに渡します。 Domain（ドメイン）:必要な処理を行い、結果を返します。ビジネスロジックはここに含まれます。 Responder（レスポンダ）:ドメインの処理結果を受け取り、必要な準備を行いレスポンスを返します。 　従来のMVCモデルで通常通り実装していくと、以下のようなコントローラを作成するかもしれません。 <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class SampleController extends Controller { public function index() { } public function register() { } public function update() { } public function delete() { } } 　今は、１つのクラスに４つのメソッドが実装されています。 　しかし、各メソッドの処理が増えたり、さらにメソッドが増えたりすると、記述が複雑化してしまい、どのメソッドがどんな処理でどんな機能を備えているのかが分からなくなってしまいます。 　そこで、１つのアクションについてそれだけを定義していく形（１クラス１アクション）を取ったのが、ADRです。 　これにより、シンプルなリクエスト＆レスポンスの流れを作ることができます。 　また、１つのクラスが持つ責務がはっきりするので、無駄がなくソースコードの見通しも良くなります。 　ADRを用いる場合は、次のようなディレクトリ構造となることが多いようです。 laravel └─ app ├─ Domain │ ├─ Book │ 　 └─ Entity │ 　　　 └─ Services │ ├─ Http │ ├─ Actions │ │ └─ UserIndexAction.php │ │ │ ├─ kernel.php │ ├─ Middleware │ ├─ Responder │ 　 └─ BookResponder.php │ ├─ Provaiders (中略) 　Action(アクション)は、以下のように例が考えられます。 Actions/UserIndex.php <?php declare(strict_types=1); namespace App\Http\Actions; use Illuminate\Http\Request; use Illuminate\Http\Response; use App\Http\Controllers\Controller; use App\Http\Responder\UserResponder; use App\Service\UserService; final class UserIndexAction extends Controller { protected $domain; protected $userResponder; public function __construct( UserService $userService, UserResponder $userResponder ) { $this->domain = $userService; $this->responder = $userResponder; } public function __invoke(Request $request): Response { return $this->userResponder->response( $this->domain->retrieveUser($request->get('id')) ); } } 　ルーターです。 Route::get('users', App\Http\Actions\UserIndexAction::class); 　 　Responder(レスポンダー)です。 <?php declare(strict_types=1); namespace App\Http\Responders; use Illuminate\Http\Response; use Illuminate\Contracts\View\Factory AS ViewFactory; use App\User as UserModel; class bookResponder { protected $response; protected $view; public function __construct(Response $response, ViewFactory $view) { $this->response = $response; $this->view = $view; } public function response(UserModel $user): Response { if (!$user->id) { $this->response->setStatusCode(Response::HTTP_NOT_FOUND); $this->response->setContent( $this->view->make('errors.404') ); return $this->response; } $this->response->setContent( $this->view->make('user.index', ['user' => $user]) ); return $this->response; } } 　Domain（ドメイン）の処理は、モデルと大差ありません。 　まとめ 　実装を進めていくと、Actionの数やResponderの数が増えて、管理が面倒になるかもしれません。 　ただ、１アクションでリクエストからレスポンスの一連の流れを実装できるところは、複雑な処理の分割をする上ではメリットと言えるでしょう。 　正直に言うと、MVCとADRのどちらのパターンが良いのか、そもそものアプリケーション設計の段階で判断するしかないかと思います。 　実際、MVCモデルだとしても、コントローラの管理やモデルのビジネスロジックの管理を整理すれば、そこまで支障はないかと思います。 　ソースコードの意図を汲み取り、より洗練されたソース管理をしていくという意識を持つ必要があるでしょう。 　以上で、解説は終了となります。 　最後までお読み頂き、ありがとうございました。 　参考文献 ●　LaravelでのADR（Action-domain-responder）実装 ●　神Controller とさよならするためにADRパターンでAPIを実装する（Laravel） ●（Laravel第1回目）Laravel勉強はじめるぞっ 　※ 書籍を購入希望の方はこちらから↓ 『PHPフレームワーク Laravel WEBアプリケーション開発』

今年の振り返り まずは自己紹介　 GoogleでもYoutubeでも "遅咲きエンジニア" で[検索] 一番目の検索結果に表示されます。 ”G'sACADEMY 学校長”の 山崎大助? と申します。 昨年より任命いただきLabコースの授業/特別授業/企業研修、入学式/卒業式/イベント等、動画/Youtube、カリキュラム制作などなど内の仕事から、外に向けての仕事も関わらせていただいております(#^^#) 他では、大学、大学院、デジタルハリウッドオンライン、デジタルハリウッドスクール等でも現在教えています。週の6日は昼も夜も授業で埋まってることが多いです。 また、個人でもWebサービスを運営していて、この記事最後の方にでてくるので、ぜひ最後まで読んでください。 今年を振り帰って多くのことがあったな～とダラダラと書いていきます。 ◆10月ジーズアカデミー山口校開校（UNIT_YAMAGUCHI） 昨年の "UNIT_SAPPORO" に続き「山口」にも誕生しました！！ ジーズアカデミー・ユニット山口のサイト? 【山口開校イベント行ってきた！動画?】 ▶ https://youtu.be/Vcy79JMTp4M ◆昨年開校した「UNIT_SAPPORO」も1期生・2期生卒業（現在3期生も卒制期間）！！ 【 驚くべき継続率 !!!!!!! 】 なんとUNIT_SAPPORO?の１～３期生 受講継続率 → 驚異の9割超え!!!! ◆「企業向け研修」も始まっています！！ G'sのカリキュラムで研修依頼をいただき、現在も絶賛実施中です。 研修をおこなっている企業名は入学式では伝えてるとは思いますが、どこまでpublicで書いていいのかわからないので、ここに書くのはひかえておきます(^^) ※2社だけ担当講師をさせていただきました！ G'sのように熱量が高くて楽しかったです！ ※皆さんの企業でもやりたいというお話があれば、ぜひG'sにお声がけください！ ◆イベント「OPEN G's」～ジーズアカデミーのリアルがわかる～ 「OPEN G's」は毎月やっていて、毎回コンセプトの違う内容になっています。 主に「卒業生・在校生」が登壇し、G'sACADEMYに集まる人ならではの面白いイベントとなっています。 職場の後輩・知人等にも面白そうな内容であれば、おススメしていただきればと思います。 毎月いろいろとやっているので、たまには皆さんもご参加ください♪ また「卒業生・在校生」の皆さんに登壇依頼させていただくこともあるので、その際は是非よろしくお願いいたします。 【 POINT！】 ・ 現在はZOOMで参加できるので自宅から見ることも可能です ・「G's CLUB」や「Twitter」で主に告知してるのでTwitterのフォローもお願いします @gsacademy_tokyo @gsfukuoka 上記アカウントが東京と福岡のTwitterになります！！ 以下、 私も「OPEN G's」に1月/2月/4月/8月/11月、登壇させていただいた内容を掲載しておきます。 次は皆さんにお声がけするかもしれません！！！！ ◆9月「TOKYO GEEK DAY」G'sACADEMY開催 8x歳のiPhoneアプリ開発者若宮正子さんと、3年ぶりの「遅咲き対談」させていただきました！！ また、QuizKnockエンジニアのファルコンさんにも登壇いただき、エンジニア談義がとても面白かったです♪ ? 対談記事はこちらから? ? 3年前の記事はこちらから? ◆TD がんばれよ！ G's 0期生でもあり、Lab4期卒のTDが最近はチーフチューターとして近年TOKYOでは活躍してくれてたのですが、G'sを離れ新しいチャレンジに行くということで、最後に？！、2人で飲みました！！ この数年の話をしたり、プライベートな話をしたりと短い時間だったけど楽しかったです。 またいつでも戻ってきてください！ 私が監督だとするとTDは最高のコーチ（僕はそう見てました）でした。常勝チームには最高のコーチが必要です。選手によりそい、なんでも相談でき、選手と伴走できる。頼もしいコーチとして役割を果たしてくれたと思います（次の世代が来てるから大丈夫！と言ってました！！）。 私がその場の雰囲気や感で、決めたことをスグにひっくり返したりと、困ったことも多かったと思いますが、しっかりとサポートしてくれたこと感謝しています。 ◆「ジーズアカデミー卒業生スタートアップの集い」もスタートしました！ 第1回ジーズアカデミー卒業生スタートアップの集い開催しました。 カミナシ諸岡さん freecracy国本さん moovy三嶋さん ガレージバンク山本さん COSOJI富士林さん、哲さん Haundry平澤さん 卒業年順... 活躍してる卒業生が沢山いますが、今回はこのメンバーで開催しました！！ 次回は他の先輩をドンドンつなげて「縦と横」のつながりが作っていこうと思います！ ※エンジニア（技術系）版もやろうと企画中！！ （エンジニアは飲むよりコード書きたいよね～きっとｗ） 【ここからは遅咲きエンジニア、個人としてのアウトプット】 ◆2021/03月に翔泳社から「動かして学ぶLaravel開発入門」を発売 この話は、私がG'sACADEMYでフレームワークの授業やる際にLaravelの教科書（ただのPDF）を1ヶ月で作ってKindleに出したことが始まりでした。 数年経ち、メールだったと思いますが翔泳社の編集者から連絡があり、 「Laravelの教科書をベースに書いてみませんか？」という話でした。 久しぶりに書籍を書く苦労をしてみようかなと思い書く決断をしたのを覚えています。 【POINT!】 Laravelの教科書（PDF）→ Kindleで自主出版できるらしい→ Kindle出す → 出版社から声がかかる 全ては「アウトプット（デプロイ）」から始まった！ 以下がKindleです。 こちらが出版社からでた本です。 ◆嬉しい報告も デジハリの2005年 PHPコースの教え子である杉山さんが出版！！ 杉山さんはG'sACADEMY 最初のメンバーの１人（講師・チューターを担当）としても関わってもらいました！ 当時、デジハリの教室にはサブモニターが設置されていたんですが「先生！文字が小さくて見えません！！」って言われたのを今でも覚えています。16年前ですが、その時から文字の大きさを意識するようになったキッカケでした(#^^#) 講師は常にそういうことで学んで行くので、自分で気づけない部分は経験で培われる部分が多いなーと今でも思っています。17年教えていますが、教壇にたち一生懸命、目の前の事実と向き合うことで講師スキルは上がる。 余談でしたね。 以下久しぶりのツーショット写真 ◆私が開発し、運営している『LaravelDB.com』が企業＆ユーザーから支援をいただけるようになりました LaravelのER図を書くと「Migration」「Validation（FormRequest）」が生成される、ニッチなサービスですが、そろそろ2000名くらいになります。 毎日使うユーザーは40～100人（土日は数人程度）によりバラツキがあります。実際に開発の会社の人より「オフショア」「会社間でのDB設計」等で使ってると聞いてますので土日は休みという事なんだろうなと思います（White企業ですね）。 【作ってみて】 ・土日の稼働が少ないので、メンテナンスしやすいのも助かってます。 ・使う人はヘビーに使ってますが、ほとんどの処理はブラウザ上なので、 　サーバー側の方は保存とMigration/Validationファイルを作成するくらいなので軽くて済んでいます。 ・ユーザーの声が一番（G'sメンバーから共有機能があるといい！とリクエストが最初にあったのが生きてます） ・海外の起業も使ってるので「英語」対応は必須でした（ここは最初の想定通りでした） 以下は 物資での企業、個人ユーザー様からの支援になり、 本当に、このサービスを応援していただいてるんだなと思うと胸が熱くなります 【 LaravelDB.com については、こちらのYoutubeでどんなアプリか？を話してます】 ▶ https://youtu.be/NbganVQJgmU ◆今年は『 Github HTML Viewer 』を作成。 大学・大学院の課題をGithubに提出するさいに、URLだけもらえれば実行してみれるシンプルなアプリです。 ・HTML/CSS/JavaScriptの課題を実行確認する用 ・サクッと作ったのでBugは沢山あると思います。 　※こちらは何かがあっても、これ以上アップデートしない予定です（課題チェック用）。 ?https://note.com/daisu_yamazaki/n/n1aa36414ee80 ◆『 Microsoft OpenSource Project 』に採択されました！ 数年前に作った「BmapQuery.js」BingMapsAPIを超簡単に使えるOSSライブラリが採択されました！！ ※Azureクレジット1年間無制限に使い研究開発できるチケットです（1年更新）！ ◆プログラミング入門者向けYoutubeを昨年末から始める 上記「Youtube」リンクありましたよね？ 昨年末から本格的に動画編集（自己流ですが）を始め、 資料作ってサンプル作って動画を撮って編集してを繰り返し、 なんと・・・ 1年100動画公開 しました！！！ （半年くらいの動画のレベルの低さに、今は驚いています... ） 【なぜ今から始めたのか？】 コロナになり、動画の方がインプットは効率良いことが多いと思ったのがキッカケでした。 G'sACADEMYの授業を受けた人に 更にプラスアルファになる内容を心がけて作っているどうが多いです。 ・ もちろん、初学者向けのコンテンツもG'sを知ってもらうために作ってもいます。 ・ 12月現時点でチャンネル登録者もやっと1,100名超えた程度です。 ・ 1人でやっています！ ・ 早く行きたいなら1人で行け！を実践中ですが、そろそろ遠くを目指す時期だな～ https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg ◆「Microsoft MVP」9年連続の受賞 来年とれたら10年連続・・・そう簡単ではないと思いますが、なったら祝いたい！ ◆MicrosoftのYoutubeにも出てました 本年もありがとうございました！来年はモット活躍するぞ！ 以上

まずは今年の振り返り...とG'sの取り組みもご紹介していきます 自己紹介　 GoogleでもYoutubeでも "遅咲きエンジニア" で[検索] 一番目の検索結果に表示されます。 ”G'sACADEMY 学校長”の 山崎大助? と申します。 昨年より任命いただきLabコースの授業/特別授業/企業研修、入学式/卒業式/イベント等、動画/Youtube、カリキュラム制作などなど内の仕事から、外に向けての仕事も関わらせていただいております(#^^#) 他では、大学、大学院、デジタルハリウッドオンライン、デジタルハリウッドスクール等でも現在教えています。週の6日は昼も夜も授業で埋まってることが多いです。 また、個人でもWebサービスを運営していて、この記事最後の方にでてくるので、ぜひ最後まで読んでください。 今年を振り帰って多くのことがあったな～とダラダラと書いていきます。 ◆10月ジーズアカデミー山口校開校（UNIT_YAMAGUCHI） 昨年の "UNIT_SAPPORO" に続き「山口」にも誕生しました！！ ジーズアカデミー・ユニット山口のサイト? 【山口開校イベント行ってきた！動画?】 ▶ https://youtu.be/Vcy79JMTp4M ◆昨年開校した「UNIT_SAPPORO」も1期生・2期生卒業（現在3期生も卒制期間）！！ 【 驚くべき継続率 !!!!!!! 】 なんとUNIT_SAPPORO?の１～３期生 受講継続率 → 驚異の9割超え!!!! ◆「企業向け研修」も始まっています！！ G'sのカリキュラムで研修依頼をいただき、現在も絶賛実施中です。 研修をおこなっている企業名は入学式では伝えてるとは思いますが、どこまでpublicで書いていいのかわからないので、ここに書くのはひかえておきます(^^) ※2社だけ担当講師をさせていただきました！ G'sのように熱量が高くて楽しかったです！ ※皆さんの企業でもやりたいというお話があれば、ぜひG'sにお声がけください！ ◆イベント「OPEN G's」～ジーズアカデミーのリアルがわかる～ 「OPEN G's」は毎月やっていて、毎回コンセプトの違う内容になっています。 主に「卒業生・在校生」が登壇し、G'sACADEMYに集まる人ならではの面白いイベントとなっています。 職場の後輩・知人等にも面白そうな内容であれば、おススメしていただきればと思います。 毎月いろいろとやっているので、たまには皆さんもご参加ください♪ また「卒業生・在校生」の皆さんに登壇依頼させていただくこともあるので、その際は是非よろしくお願いいたします。 【 POINT！】 ・ 現在はZOOMで参加できるので自宅から見ることも可能です ・「G's CLUB」や「Twitter」で主に告知してるのでTwitterのフォローもお願いします ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ @gsacademy_tokyo @gsfukuoka ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上記アカウントが東京と福岡のTwitterになります！！ 以下、 私も「OPEN G's」に1月/2月/4月/8月/11月、登壇させていただいた内容を掲載しておきます。 次は皆さんにお声がけするかもしれません！！！！ ◆9月「TOKYO GEEK DAY」G'sACADEMY開催 8x歳のiPhoneアプリ開発者若宮正子さんと、3年ぶりの「遅咲き対談」させていただきました！！ また、QuizKnockエンジニアのファルコンさんにも登壇いただき、エンジニア談義がとても面白かったです♪ ? 対談記事はこちらから? ? 3年前の記事はこちらから? ◆TD がんばれよ！ G's 0期生でもあり、Lab4期卒のTDが最近はチーフチューターとして近年TOKYOでは活躍してくれてたのですが、G'sを離れ新しいチャレンジに行くということで、最後に？！、2人で飲みました！！ この数年の話をしたり、プライベートな話をしたりと短い時間だったけど楽しかったです。 またいつでも戻ってきてください！ 私が監督だとするとTDは最高のコーチ（僕はそう見てました）でした。常勝チームには最高のコーチが必要です。選手によりそい、なんでも相談でき、選手と伴走できる。頼もしいコーチとして役割を果たしてくれたと思います（次の世代が来てるから大丈夫！と言ってました！！）。 私がその場の雰囲気や感で、決めたことをスグにひっくり返したりと、困ったことも多かったと思いますが、しっかりとサポートしてくれたこと感謝しています。 ◆「ジーズアカデミー卒業生スタートアップの集い」もスタートしました！ 第1回ジーズアカデミー卒業生スタートアップの集い開催しました。 カミナシ諸岡さん freecracy国本さん moovy三嶋さん ガレージバンク山本さん COSOJI富士林さん、哲さん Haundry平澤さん 卒業年順... 活躍してる卒業生が沢山いますが、今回はこのメンバーで開催しました！！ 次回は他の先輩をドンドンつなげて「縦と横」のつながりが作っていこうと思います！ ※エンジニア（技術系）版もやろうと企画中！！ （エンジニアは飲むよりコード書きたいよね～きっとｗ） 【ここからは遅咲きエンジニア、個人としてのアウトプット】 ◆2021/03月に翔泳社から「動かして学ぶLaravel開発入門」を発売 この話は、私がG'sACADEMYでフレームワークの授業やる際にLaravelの教科書（ただのPDF）を1ヶ月で作ってKindleに出したことが始まりでした。 数年経ち、メールだったと思いますが翔泳社の編集者から連絡があり、 「Laravelの教科書をベースに書いてみませんか？」という話でした。 久しぶりに書籍を書く苦労をしてみようかなと思い書く決断をしたのを覚えています。 【POINT!】 Laravelの教科書（PDF）→ Kindleで自主出版できるらしい→ Kindle出す → 出版社から声がかかる 全ては「アウトプット（デプロイ）」から始まった！ 以下がKindleです。 こちらが出版社からでた本です。 ◆嬉しい報告も デジハリの2005年 PHPコースの教え子である杉山さんが出版！！ 杉山さんはG'sACADEMY 最初のメンバーの１人（講師・チューターを担当）としても関わってもらいました！ 当時、デジハリの教室にはサブモニターが設置されていたんですが「先生！文字が小さくて見えません！！」って言われたのを今でも覚えています。16年前ですが、その時から文字の大きさを意識するようになったキッカケでした(#^^#) 講師は常にそういうことで学んで行くので、自分で気づけない部分は経験で培われる部分が多いなーと今でも思っています。17年教えていますが、教壇にたち一生懸命、目の前の事実と向き合うことで講師スキルは上がる。 余談でしたね。 以下久しぶりのツーショット写真 ◆私が開発し、運営している『LaravelDB.com』が企業＆ユーザーから支援をいただけるようになりました LaravelのER図を書くと「Migration」「Validation（FormRequest）」が生成される、ニッチなサービスですが、そろそろ2000名くらいになります。 毎日使うユーザーは40～100人（土日は数人程度）によりバラツキがあります。実際に開発の会社の人より「オフショア」「会社間でのDB設計」等で使ってると聞いてますので土日は休みという事なんだろうなと思います（White企業ですね）。 【作ってみて】 ・土日の稼働が少ないので、メンテナンスしやすいのも助かってます。 ・使う人はヘビーに使ってますが、ほとんどの処理はブラウザ上なので、 　サーバー側の方は保存とMigration/Validationファイルを作成するくらいなので軽くて済んでいます。 ・ユーザーの声が一番（G'sメンバーから共有機能があるといい！とリクエストが最初にあったのが生きてます） ・海外の起業も使ってるので「英語」対応は必須でした（ここは最初の想定通りでした） ・実はサーバーは「さくらのレンサバ（毎月500円程度）」です。十分に2年間落ちることなく稼働しております 以下は 物資での企業、個人ユーザー様からの支援になり、 本当に、このサービスを応援していただいてるんだなと思うと胸が熱くなります 【 LaravelDB.com については、こちらのYoutubeでどんなアプリか？を話してます】 ▶ https://youtu.be/NbganVQJgmU ◆今年は『 Github HTML Viewer 』を作成。 大学・大学院の課題をGithubに提出するさいに、URLだけもらえれば実行してみれるシンプルなアプリです。 ・HTML/CSS/JavaScriptの課題を実行確認する用 ・サクッと作ったのでBugは沢山あると思います。 　※こちらは何かがあっても、これ以上アップデートしない予定です（課題チェック用）。 ?https://note.com/daisu_yamazaki/n/n1aa36414ee80 ◆『 Microsoft OpenSource Project 』に採択されました！ 数年前に作った「BmapQuery.js」BingMapsAPIを超簡単に使えるOSSライブラリが採択されました！！ ※Azureクレジット1年間無制限に使い研究開発できるチケットです（1年更新）！ ◆プログラミング入門者向けYoutubeを昨年末から始める 上記「Youtube」リンクありましたよね？ 昨年末から本格的に動画編集（自己流ですが）を始め、 資料作ってサンプル作って動画を撮って編集してを繰り返し、 なんと・・・ 1年100動画公開 しました！！！ （最初に撮っていた動画のレベルの低さに、今は驚いています... ） 【なぜ今から始めたのか？】 コロナになり、動画の方がインプットは効率良いことが多いと思ったのがキッカケでした。 G'sACADEMYの授業を受けた人に 更にプラスアルファになる内容を心がけて作っている動画が多いです。 ・ もちろん、初学者向けのコンテンツもG'sを知ってもらうために作ってもいます。 ・ 12月現時点でチャンネル登録者もやっと1,***名超えた程度です。 ・ もともとサポート教材として作り始めたんですが、登録数が増えて目指すところが曖昧になってきました ・ 1人でやっています！↓↓↓ ・ 早く行きたいなら1人で行け！を実践中ですが、そろそろ遠くを目指す時期だな～ https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg ◆「Microsoft MVP」9年連続の受賞 来年とれたら10年連続・・・そう簡単ではないと思いますが、なったら祝いたい！ ◆MicrosoftのYoutubeにも出てました 本年もありがとうございました！来年はモット活躍するぞ！ 他にも沢山のことがあったんですが、ありすぎて（笑） このへんで終わりにしたいと思います。 来年も宜しくお願いいたしますm(_ _)m 以上

以前作成したLaravelのプロジェクトの修正を行おうとしていつも通りMAMPを起動してブラウザで表示しようとしたら、、、 もういやだ 独学者にはこういうのが一番効きます。 開発環境 $ sw_vers ProductName: macOS ProductVersion: 11.6 BuildVersion: 20G165 $ mysql --version mysql Ver 14.14 Distrib 5.7.35, for osx10.16 (x86_64) using EditLine wrapper $ php artisan --version Laravel Framework 6.20.30 解決手順 とりあえず.envのデバッグ設定をオンにして解決手段を模索する。 .env APP_DEBUG=true するとこんな感じのエラーがブラウザに表示される [2002] No such file or directory (SQL: select * from `users` where `id` = 1 limit 1) (View: /Applications/MAMP/htdocs/[Project_name]/resources/views/welcome.blade.php) 意外と単純な理由ってことがわかる。データベースへの接続がうまくいってないみたい。 ひとまずターミナルでMySQLへの接続を試みてみる。 $ mysql -u root -p ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' まあそりゃ接続できないよね。 んでmysql.sockって何だ？と思ったけどどうやら英語で書いてある通りMac内のプログラムとMySQLを通信の処理をしてくれるいいやつらしい。 この仲介役みたいな人がいないからSQLに接続できないらしい。Macをシャットダウンしたときに解雇されたのか。かわいそうに。 だから以下のようにして新しく仲介役を雇用してやる必要があると。 $ touch /tmp/mysql.sock 備忘録： touch・・・現在のディレクトリにとりあえず空のファイルを作ってあげるコマンド。 ここで権限のエラーが出ることがある touch: /tmp/mysql.sock: Permission denied その場合は $ ls -l /tmp/mysql.sock で権限を確認してやり、 $ sudo chown [username]:admin /tmp/mysql.sock で[username]にパーミッションを与えてあげ、改めてtouchしてやる。 備忘録： sudo・・・rootユーザーの権限が必要なコマンドを実行できるようになる。 chown・・・指定したファイルの所有権を変更するコマンド。 これで仲介役が雇え、MySQLの接続準備が整ったので、MySQLを再起動する。 $ mysql.server restart ERROR! MySQL server PID file could not be found! Starting MySQL . SUCCESS! ここのエラーはよくわからないが、MySQLが無事再起動できたようなので改めてブラウザでLaravelを起動してみるとうまくいっていることが確認できた。 初めてこういうふうになった時はめちゃくちゃググりまくって時間がかなりかかってしまったのでそういった方々の役に立てれば、、、！！！ まとめ Laravelにブラウザで接続できなくなった時はまず.envファイルのdebugをオンにしてどこで接続がうまくいってないか確認する。 mysql.sockでMySQL接続ができないよと言われたら多分mysql.sockが消えてるので、適切な権限のもと新しくmysql.sockを作成してあげる。 mysqlを再起動してうまくいっていることを確認する。 人生がうまくいく。 参考 https://qiita.com/jonakp/items/477a18d4a94c01a31583 https://www.naka-style-blog.com/mysql-log-in-erorr/ コマンドラインの操作だったり、それらに付随するエラーだったりってなかなかとっつきにくくて難しいのでまだまだ勉強が必要だなと思った今日この頃。何か気になる点やご指摘等ございましたら教えていただけるとありがたいです。

以前作成したLaravelのプロジェクトの修正を行おうとしていつも通りMAMPを起動してブラウザで表示しようとしたら、、、 もういやだ 独学者にはこういうのが一番効きます。 開発環境 $ sw_vers ProductName: macOS ProductVersion: 11.6 BuildVersion: 20G165 $ mysql --version mysql Ver 14.14 Distrib 5.7.35, for osx10.16 (x86_64) using EditLine wrapper $ php artisan --version Laravel Framework 6.20.30 解決手順 とりあえず.envのデバッグ設定をオンにして解決手段を模索する。 .env APP_DEBUG=true するとこんな感じのエラーがブラウザに表示される [2002] No such file or directory (SQL: select * from `users` where `id` = 1 limit 1) (View: /Applications/MAMP/htdocs/[Project_name]/resources/views/welcome.blade.php) 意外と単純な理由ってことがわかる。データベースへの接続がうまくいってないみたい。 ひとまずターミナルでMySQLへの接続を試みてみる。 $ mysql -u root -p ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' まあそりゃ接続できないよね。 んでmysql.sockって何だ？と思ったけどどうやら英語で書いてある通りMac内のプログラムとMySQLを通信の処理をしてくれるいいやつらしい。 この仲介役みたいな人がいないからSQLに接続できないらしい。Macをシャットダウンしたときに解雇されたのか。かわいそうに。 だから以下のようにして新しく仲介役を雇用してやる必要があると。 $ touch /tmp/mysql.sock 備忘録： touch・・・現在のディレクトリにとりあえず空のファイルを作ってあげるコマンド。 ここで権限のエラーが出ることがある touch: /tmp/mysql.sock: Permission denied その場合は $ ls -l /tmp/mysql.sock で権限を確認してやり、 $ sudo chown [username]:admin /tmp/mysql.sock で[username]にパーミッションを与えてあげ、改めてtouchしてやる。 備忘録： sudo・・・rootユーザーの権限が必要なコマンドを実行できるようになる。 chown・・・指定したファイルの所有権を変更するコマンド。 これで仲介役が雇え、MySQLの接続準備が整ったので、MySQLを再起動する。 $ mysql.server restart ERROR! MySQL server PID file could not be found! Starting MySQL . SUCCESS! ここのエラーはよくわからないが、MySQLが無事再起動できたようなので改めてブラウザでLaravelを起動してみるとうまくいっていることが確認できた。 初めてこういうふうになった時はめちゃくちゃググりまくって時間がかなりかかってしまったのでそういった方々の役に立てれば、、、！！！ まとめ Laravelにブラウザで接続できなくなった時はまず.envファイルのdebugをオンにしてどこで接続がうまくいってないか確認する。 mysql.sockでMySQL接続ができないよと言われたら多分mysql.sockが消えてるので、適切な権限のもと新しくmysql.sockを作成してあげる。 mysqlを再起動してうまくいっていることを確認する。 人生がうまくいく。 参考 https://qiita.com/jonakp/items/477a18d4a94c01a31583 https://www.naka-style-blog.com/mysql-log-in-erorr/ コマンドラインの操作だったり、それらに付随するエラーだったりってなかなかとっつきにくくて難しいのでまだまだ勉強が必要だなと思った今日この頃。何か気になる点やご指摘等ございましたら教えていただけるとありがたいです。

目的 LaravelとVueJSの開発において、 LaravelではWebとAPIのルーティング、 VueJSではVueRouter(Component)を使用してルーティングを行い、 LaravelとVueJSの機能を組み合わせて使用するときがあると思います。 それらのルーティングの設定が複雑なので、備忘録用にまとめました。 前提 で構築した環境を基にしています。 Laravel Web Routing routes/web.php Route::get('/', function () { return view('welcome'); }); Laravelの初期設定のroutes/web.phpです。 まず、Route::getでHTTPのメソッドを指定しています。 今回はGetメソッドを指定しています。 '/'で、アクセスしてきたURLとの一致の条件を指定しています。 今回であれば、http://localhost:8000/ が一致します。 return view('welcome')で welcome.blade.phpを返します。 return view('[ビュー名]')は, resources/views/内の[ビュー名]に一致する[ビュー名].blade.phpファイルを返します。 流れとしては、Getメソッドでhttp://localhost:8000/にリクエストがきたら、 ルーティングの条件と一致したwelcome.blade.phpを返す、のような感じになると思います。 本記事用の設定 routes/web.php Route::get('/{any}', function() { return view('app'); })->where('any', '.*'); routes/web.phpを本記事のテスト用に上記の様に変更します。 この書き方では、'/{any}'と条件を指定し、 また、)->where('any', '.*');の句がついています。 {any}は、ルートパラメータと呼び、ルーティングの条件一致の際に使える変数の様なものと理解しています。 ->where内で'any', '.*'と記述することで、アクセスしてきたURLに対して正規表現による条件一致が使用できます。 この記述では'.*'と正規表現の指定があるので、どのようなURLでアクセスしても、app.blade.phpを返します。 http://localhost:8000/.*とも書けると思います。 もし、条件が一致しない場合、例えば正規表現に'a-Z'が設定されており、http://localhost:8000/1でアクセスした場合、 条件が一致しないのでreturn view('app')で app.blade.phpを返しません。 その後、他のルーティングの条件のいずれにも一致しなければ何も返さず、ブラウザ上で404が表示されます。 resources/views/app.blade.php <!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>{{ config('app.name', 'Vue Laravel Routing') }}</title> <link href="{{ mix('/css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> </div> <script src="{{ mix('/js/app.js') }}" defer></script> </body> </html> resources/views/app.blade.phpを上記の内容で新たに作成します。 Vue Component Setting recources/js/components/TestComponent.vue <template> <div class="container"> TEST </div> </template> <script> export default {} </script> まず読み込むコンポーネントの作成をします。 resources/js/app.js import TestComponent from "./components/TestComponent.vue"; require('./bootstrap'); window.Vue = require('vue'); Vue.component('test-component', TestComponent); const app = new Vue({ el: '#app', }); 次に、resources/js/app.jsを上記の様に記述します。 import TestComponent from "./components/TestComponent.vue";で、作成したコンポーネントを読み込みます。 require('./bootstrap');とwindow.Vue = require('vue');でVueなどのJavascriptの依存関係を読み込んでいます。 Vue.component('test-component', TestComponent);でVueのコンポーネントを定義し、Laravel(php)から使えるようにします。 const app = new Vue({});で新しいVueのインスタンスを生成します。 el: '#app',でインスタンスのAPIのid(名前)を設定します。 ここで設定した名前(今回であればapp)が、Laravel(php)からコンポーネントを使用する際に紐づきます。 resources/views/app.blade.php <div id="app"> <test-component></test-component> </div> <script src="{{ mix('/js/app.js') }}" defer></script> resources/views/app.blade.php内の記述を上記の様に変更します。 <script src="{{ mix('/js/app.js') }}" defer></script>で/js/app.jsを読み込みます。 <div id="app"></div>で/js/app.jsで作成したVueインスタンスを設定します。 今回はel:プロパティに#appを設定しているので、<div id="app">と指定します。 el:プロパティが#hogeであれば、<div id="hoge">と指定します <div id="app"></div>内の、 <test-component></test-component>で/js/app.jsで設定したコンポーネントを使用します。 Vue Router Setting recources/js/components/TestComponent.vue <template> <div class="container"> TEST </div> </template> <script> export default {} </script> まず読み込むコンポーネントの作成をします。(前項で作成したものをそのまま使っています。) resources/js/app.js import VueRouter from 'vue-router'; import TestComponent from "./components/TestComponent.vue"; require('./bootstrap'); window.Vue = require('vue'); Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ { path: '/test', name: 'test', component: TestComponent }, ] }); const app = new Vue({ el: '#app', router }); 次に、resources/js/app.js内で、 import VueRouter from 'vue-router'; でVue-Routerを読み込み、 import TestComponent from "./components/TestComponent.vue";で作成したコンポーネントを読み込みます。 Vue.use(VueRouter);で、Routerを使用する準備をします。 const router = new VueRouter({});で新しいVueRouterのインスタンスを生成します。 mode: 'history',でページ遷移時のURLの処理を設定します。三種類の設定値があります。 値 動作 hash ページ遷移時のURLにhttp://localhost:8000/#/hogeのような#が入る。 history ページ遷移時のURLがhttp://localhost:8000/hogeのようになる(#が入らない。)。 abstarct URLが変わらない。ページを遷移してもURLはhttp://localhost:8000/のまま。 path: '/test',で、VueRouter内に設定したコンポーネントを呼び出すURLを設定します。 今回であれば,http://localhost:8000/testです。 name: 'test',で、VueRouter内に設定したコンポーネントを、 ほかのページから呼び出す際の名前を設定します。（名前付きルート） 今回であれば、<router-link :to="{ name: 'test' }">test</router-link>の記載で呼び出す（ページ遷移）ができます。 component: TestComponentで、作成したコンポーネントを読み込んでいます。 el: '#app',でインスタンスのAPIのid(名前)を設定します。 routerで、VueからRouterを使用する設定をしています。 resources/views/app.blade.php <div id="app"> <router-view></router-view> <router-link v-bind:to="{name: 'test'}">Jump to Test</router-link> </div> <script src="{{ mix('/js/app.js') }}" defer></script> <router-view></router-view>の記述よって、 http://localhost:8000/testにアクセスした際、testにルーティングされたコンポーネントを読み込みます。 http://localhost:8000/testにアクセスすると、resources/js/app.jsのrouterのpathに/testが設定されたコンポーネントを表示します。 <router-link v-bind:to="{name: 'test'}">Jump to Test</router-link>の記述によって、リンクをクリックした際に、testの名前がつけられたコンポーネントを表示します。 http://localhost:8000/testにアクセスするか、 http://localhost:8000/にアクセスし、Jump to Testをクリックすると、 TESTの文字列の表示が確認できると思います。 Laravel API Routing powershell php artisan make:controller TestController Dockerに構築したローカルサーバー上でphp artisan make:controller TestControllerを実行します。 \app\Http\Controllers\TestController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\View; class TestController extends Controller { public function index() { $data = [ 'test'=>'Test data from controller', ]; return view('app', $data); } } \app\Http\Controllers\にTestController.phpが作成されます。 上記の様に記述を変更します。 namespace App\Http\Controllers;で名前空間を指定しています。 名前空間は、クラス名などが重複しないために、このクラスはこの名前空間のもの、といった定義をするためのものです。 use ~~で指定した名前空間にあるクラスなどを読み込んでいます。 今回は、Illuminate下にある\Http\Requestと\Support\Facades\Viewを読み込んでいます。 class TestController extends Controller{~}でTestControllerクラスを定義し、かつextendsでControllerクラスを継承しています。 ControllerクラスはLaravelに最初からあるもので、ミドルウェアの登録などをやってくれています。 return view('app', $data);にてapp.blade.phpに戻り、かつ$dataの配列を渡します。 \routes\api.php <?php Route::get('/test', 'TestController@index'); \routes\のapi.phpを上記の様に変更します。 このファイルで、LaravelのAPIのルーティングの設定をします。 Route::get('/test',の記述は、routes/web.phpと同じです。 また、api.phpで設定したルーティングはhttp://localhost:8000/api/(設定したパス)として設定されます。 今回は'/test'を設定していますので、実行する際はhttp://localhost:8000/api/testにアクセスします。 'TestController@index'のTestControllerで呼び出したいコントローラークラスの名前を指定し、 indexで呼び出し時に実行したい関数名を指定します。 resources/views/app.blade.php <div id="app"> </div> <p> Received:{{ $test }} </p> app.blade.phpに{{ $test }}と記述すると、 TestController.phpから送られてきた配列($data)の中の、 キー(test)が一致する値(Test data from controller)を表示します。 この変数はVueJSとは関係ないので、<div id="app"></div>内に記述する必要はありません。 http://localhost:8000/api/testにアクセスし、動作が確認できると思います。 Laravel(API)からデータを受け取りVueで描画 Laravelは、MVCモデルに基づいて構成されたフレームワークだと思いますので、 そちらにのっとったような感じでやっていきたいと思います。 テストデータの作成・設定 powershell php artisan make:migration create_tests_table Dockerに構築したローカルサーバー上でphp artisan make:migration create_tests_tableを実行します。 Laravelでは、モデルクラス内で明示的にテーブル名を指定しない限り、 モデルのクラス名にsを合わせた名前が指定されるテーブル名になります。 今回はTestの名前でモデルを作りますので、テーブル名は自動的にtestsが指定されます。 ゆえにそれに合わせる形でtestsの名前でテーブルを作成しています。 \database\migrations\YYYY_MM_DD_[0-9]{6,6}_create_tests_table.php <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateTestTable extends Migration { public function up() { Schema::create('tests', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('title', 100); $table->string('content', 100); $table->timestamps(); }); } public function down() { Schema::dropIfExists('tests'); } } database\migrations\にYYYY_MM_DD_[0-9]{6,6}_create_test_table.phpが作成されますので、上記の様に内容を変更します。 Schema::create('test',の'test'で、作成するテーブル名を指定します。 $table->でテーブル内に作成するカラムを指定します。 bigIncrements('id');は、idというカラムを、Bigint型で自動で増分(1->2->3...)していくように設定しています。 string('title', 100);は、String型で100(文字？バイト？)と指定しています。 timestamps();は、データが作成、更新された年月日時分秒(Datetime)を指定しています。 powershell php artisan make:model Test Dockerに構築したローカルサーバー上でphp artisan make:model Testを実行します。 app/Test.php <?php namespace App; use Illuminate\Database\Eloquent\Model; class Test extends Model { protected $fillable = [ 'title', 'content', ]; } app/にTest.phpが作成されますので、上記の様に内容を変更します。 Laravelでは、Eloquentというものでデータベースの操作ができます。 データの操作をする前に、モデルに対してfillableかguardedという属性をつけないといけない様です。 今回は、protected $fillableでfillableという属性をつけ、 titleとcontentのカラムを編集していいよ、といった設定をしています。 guardedをつけると、逆にtitleとcontentのカラムが編集できないようになる様です。 powershell php artisan make:seeder TestTableSeeder Dockerに構築したローカルサーバー上でphp artisan make:seeder TestTableSeederを実行します。 database\seeds\TestTableSeeder.php <?php use App\Test; use Illuminate\Database\Seeder; class TestTableSeeder extends Seeder { public function run() { for ($i = 1; $i <= 3; $i++) { Test::create([ 'title' => 'title' . $i, 'content' => 'content' . $i, ]); } } } database\seeds\にTestTableSeeder.phpが作成されますので、上記の様に内容を変更します。 For文を回し、Task::create([で生成したテストデータをデータベース上のtestテーブルに格納します。 database/seeds/DatabaseSeeder.php public function run() { $this->call(TestTableSeeder::class); } database/seeds/DatabaseSeeder.phpを上記の様に変更します。 $this->call(TestTableSeeder::class);で、先ほど作成したTestTableSeeder.phpを呼ぶようにします。 powershell php artisan migrate --seed migrateコマンドを実行します。 powershell php artisan tinker Test::all(); php artisan tinkerで、Laravel搭載のデバッグ用の対話シェルであるtinkerを起動します。 tinker内でTest::all();を実行することで、migrationによって作成されたテーブルに挿入されたデータが確認できると思います。 LaravelとVueの連携 \app\Http\Controllers\TestController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\View; use App\Test; class TestController extends Controller { public function index() { $data = [ 'test'=>'Test data from controller', ]; return view('app', $data); } public function getAllRecords() { return Test::all(); } } \app\Http\Controllers\TestController.phpにgetAllRecords関数を追加します。 Test::all();で、取得したtestsテーブル内の全レコードを、returnで返します。 \routes\api.php <?php Route::get('/test', 'TestController@getAllRecords'); \routes\api.phpを上記の様に変更して、 http://localhost:8000/api/testで作動する関数をgetAllRecordsに変更します。 \resources\js\components\TestComponent.vue <template> <div class="container"> <table> <tbody> <tr v-for="test in tests"> <th scope="row">{{ test.id }}</th> <td>{{ test.title }}</td> <td>{{ test.content }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data: function () { return { tests: [] } }, methods: { getAllRecords() { axios.get('/api/test') .then((res) => { this.tests= res.data; }); } }, mounted() { this.getAllRecords(); } } </script> \resources\js\components\TestComponent.vueを上記の様に変更します。 書き方上、<template></template>から書いていますが、実際に先に動くのは<script></script>です。 data: functionでtestsの配列を定義しています。 このtestsがtemplate内で読み込むときの名前になります。 methods:にgetAllRecords()という関数を定義します。 axios.get('/api/test')で、/api/testのパスに対してGetメソッドでリクエストを投げています。 .then((res) => {~});に`axios.getが成功した際の処理を書いています。 this.tests= res.data;でres(HTTPレスポンス)の中のdataをtestsに代入しています。 流れでいうと、/api/testのパスに対してGetメソッドでリクエストを投げ、 routes/api.phpのtestに指定されたクラスの関数を実行し、 成功した場合、実行の結果(testsテーブルの全レコード)がresに格納され、 testの中に実行の結果(testsテーブルの全レコード)が代入される、という感じです。 mounted() {~}で、DOMが作成された直後の処理を定義しています。 this.getAllRecords();を記述しているので、このクラスのgetAllRecords()を実行します。 resources/views/app.blade.php <div id="app"> <router-view></router-view> </div> VueRouterの動作確認用に、 resources/views/app.blade.phpの<div id="app"></div>に<router-view></router-view>を記述してください。 動作確認 ソースをビルドnpm run devしてから、http://localhost:8000/testにアクセスします。 http://localhost:8000/api/test　ではありません。 http://localhost:8000/api/testにアクセスすると、Json形式のレコードデータが見れると思います。 こんな感じで動作が確認できると思います。 　おわりに 複雑だな～、と思って軽くまとめようとおもったら激重な内容になりました。 複雑すぎる。

状況 正規表現を用いて、文字の検索をかけたいのでpreg_matchを使ったところタイトルのエラーが発生。 コード $target = '/' . $request->name . '/'; $names = $collection->filter(function($value) use ($target){ return preg_match($value['name'], $target); }); 原因 preg_matchの第一引数と第二引数を逆に記述したことによるエラー。 本来は第一引数に正規表現、第二引数に元データを記述しなくてはならない。 return preg_match($target, $value['name']); とっても単純なエラーでした。

背景 キーワード検索でcontroller側でDBにアクセスしてデータを取得する処理はよく行われるが 今回は既に出来上がった多次元配列の変数にキーワード検索を行い、View側に返す処理を実行します。 処理概要 View側で部署検索フォームに文字を入れた際に部分検索で該当するデータを返すようにします。 処理内容 preg_matchとCollectionクラスのfilterメソッドを使用します。 【多次元配列のデータ】 $departments = [ ['name' => '佐藤', 'department' => '営業部'], ['name' => '鈴木', 'department' => '総務部'], ['name' => '田中', 'department' => '人事部'], ]; 処理。検索キーワードは$request->departmentに入ってる事とします。 $collection = collect($departments); $target = '/' . $request->department . '/'; $filtered = $collection->filter(function($value) use ($target){ return preg_match($target, $value['department']); }); return view("***", compact('filtered')); filterなどの無名関数を引数に取るメソッドは、外部から変数を渡す際にuseが必要になります。 例えばView側から営業という文字列が送信されてきた場合 ['name' => '佐藤', 'department' => '営業部'], のデータを返す処理となります。

php artisan queue:restart

概要 laravelからReactにpropsでデータを渡したいが、vueほど簡単にいかなかったのでメモ。 もっといい簡単な方法がありそう。 （この記事を執筆時点で私はreact歴１週間しかないです。vueは一年くらいは。） 手順 '/' を生成するルートを作る。 ドメインはこれで取得できるがプロトコル部分がまだない。 web.php Route::get('/',[\App\Http\Controllers\Web\TopController::class, 'index'])->name('web.top'); http:　か https: を判別して頭につける。 blade内に適当にidつけた任意のタグに任意のプロパティでURLを記述する。 Reffererからとれるかと思ったけど初回こけるのでだめだった。 getElementByIdとgetAttributeでbladeから上記の値をとってくる。 とれた値をReact.renderのprops部分にあてこむ。 main.tsx import React from "react"; import {render} from "react-dom"; import {Accordion} from "../components/accordion"; const baseUrl = (document.getElementById('base_url')?.getAttribute('baseUrl')) console.log(baseUrl); // http://localhost:3000 render(<Accordion baseUrl={baseUrl}></Accordion>,document.getElementById("member_accordion")); これでreactコンポーネント内部にベースURLが送れたので、他のデータはコンポーネント内でベースURLにサブディレクトリを足してajaxでとってくるか、同様に流し込む。

はじめに 株式会社じげんの山形です。 主にバックエンドとフロントエンドの実装を担当してます。 Twilioではプログラムからユーザーに対して自動電話をかける事ができます。 実装していて困ったのが、人が電話に出ても、留守電が起動しても、自動電話が指定したメッセージを流し続けてしまう事でした。その時に役立ったのがTwilioのAnswering Machine Detection（以後AMDと呼称）の機能でした。今回その機能を色々試して分かったことを書いていきます。 環境 ・PHP7.2以上 ・Twilio Sdk をインストール済み(twilio/sdk: 6.31) ※筆者はLaravel5系を使用しております 前提 ・Twilioのアカウントを所有 ・（電話可能な）電話番号を取得済み ・PHPで通話を発信する方法を知っていること（ご存知ない方は公式のドキュメントを参照してください） 目次 AMDを使用してみる（PHP） AMDを非同期で使用する おまけ 本編 AMDの公式ドキュメントは下記です。 Answering Machine Detection - Twilio AMDの使用には1callあたり$.0075かかるようなので、こちらは注意してください（公式ドキュメントより引用）。 Answering Machine Detection will be charged at $.0075 per call where enabled and the called party picks up. Busy or Failed calls may engage our AMD system but will not be charged. 1.AMDを使用してみる（PHP） AMDを使用するのはcallするときにmachineDetection: Enableを追加すれば使用できます。 use Twilio\Rest\Client; ========= $client = new Client($sid, $token); //自身のアカウントのsidとtoken $calls = $client->calls ->create( $toNumber, //宛先の電話番号 $fromNumber, 　//通話元の電話番号 [ "url" => $callUrl,　 // ユーザーが受電した直後にリクエストが行くURLを指定 "timeout" => 30, "machineDetection" => "Enable", 　// AMDを使用するためのパラメータ ] ); 上記のように指定することで、$callUrlのリクエストにAnweredByというパラメータが返ってきます。 人の場合はAnsweredBy:human 留守電の場合はAnsweredBy:machine_start と返ってきました。 この値によって、$callUrl内の処理を分岐させることが可能です。 ただし、注意点としてAMDが判断するまでに時間が少々かかります。 $callUrlが実行されるまで大体7秒程度かかってしまいました。 2. AMDを非同期で使用する AMDの監視を非同期で行う事ができます。 use Twilio\Rest\Client; ========= $client = new Client($sid, $token); //自身のアカウントのsidとtoken $calls = $client->calls ->create( $toNumber, //宛先の電話番号 $fromNumber, 　//通話元の電話番号 [ "url" => $callUrl,　 // ユーザーが受電した直後にリクエストが行くURLを指定 "timeout" => 30, "machineDetection" => "Enable", 　// AMDを使用するパラメータ "asyncAmd" => true, // AMDを非同期で使用 'asyncAmdStatusCallback' => $checkAmdUrl,　　// AMDの結果を返すURL 'asyncAmdStatusCallbackMethod' => "POST", // 上記URLのHTTPメソッド ] ); 上記のように asyncAmd:true、asyncAmdStatusCallbackに監視する用のURL（今回の場合は$checkAmdUrlとしてます）を指定、asyncAmdStatusCallbackMethod:POST（こちらはデフォルトでPOSTが指定される為省略可）を設定することで、$checkAmdUrlに結果が返されます。 こちらを使用すれば$callUrlの実行が待たされることはありませんが、当然$callUrl内でAnsweredByによる分岐は不可能となります。 3. おまけ 1のように単純にAMDを使用すると、"url"に指定したURL実行まで数秒の待ち時間が発生します。 2のように非同期でAMDを使用すると、待ち時間は無くなりますが、"url"に指定したURLにおけるAMDの判定結果による分岐ができなくなります。 そこで個人的に便利だと思ったのが通話の上書きです。つまり、実行中の自動電話を停止し、新しいメッセージを流す事ができます。 例えば下記のように指定することで通話の上書きが実行できます。 use Twilio\Rest\Client; ========= $client = new Client($sid, $token); //自身のアカウントのsidとtoken $calls = $client->calls($callSid) // request内のCallSidを指定 ->update( [ "url" => $updateCallUrl,　 // URLを指定 "method" => "POST", ] ); どういう場面で使用できるかというと、 2で記述したように、AMDを非同期で使用し、asyncAmdStatusCallbackに指定したURL内で留守電検知が完了したタイミングで通話の上書きを行えば、待ち時間をほとんど与えることなく通話を続ける事が可能となります。 最後に TwilioのAMDはアメリカの電話文化に合わせた実装になっているとのことで、実装前は日本でこの機能が正常に使用できるとは思ってませんでした。（ラグが発生することを除けば）AMDの機能を試してみて、使用にそこまで問題がなかった事は驚きでした。 （参照：Twilio で相手が人間か機械かを判別することはできますか？ – Twilio - KDDI Web Communications） Twilioには便利機能たくさんあるようですが、英語のドキュメントも多いので（英語苦手ですが）勉強続けていきたいです。 関連 ・Twilio - KDDI Web Communications｜コミュニケーションAPI ・Answering Machine Detection - Twilio