Laravelのオブザーバーが便利だった2021.08.31 オブザーバーを使って、モデルのCRUDイベントキャッチしようという試み オブザーバーを使う目的「データに手を加えたユーザーを記録したい」という要望があり、 データの作成者、編集者、削除者をDBに保存することになりました。 やることDBの各テーブルにcreator,editor,deleterカラムを追加マイグレーションファイル作成 (例) php artisan make:migration add_creator_editor_deleter_to_all_table Observer.phpを作成してCRUDイベントをキャッチnamespace App\Observers; use Illuminate\Database\Eloquent\Model; use Illuminate\Support\Facades\DB; c

Shopify の Storefront API を使ってサイトにEC機能を追加する2021.09.03 新規・既存問わず、ウェブサイトに簡単にEC機能を追加できるShopify の Storefront APIを紹介します。 弊社の担当したプロジェクトでサイトにEC機能を追加したいというを話をいただくことが度々あります。 参考事例） ・ 秘密厨房 -Himitsu Kitchen- https://himitsu.kitchen/ ・ Julie - ジュリー｜世界中のワインからあなただけの１本を https://julie.page/ その際に弊社では Shopify の利用をおすすめすることが多いのですが、どれだけ簡単にECのカート機能を追加できるのかというのをご紹介します。 カート機能を追加する際に利用するのは Shopify の Storefront API を利用します。 St

Laravelのログ出力のカスタマイズ2021.09.03 Laravelのアクセスログとクエリログを独自フォーマットで出力する方法をご紹介します。 環境Laravel6Loggingクラスの作成まず、app/Logging/ にActiondログの内容を定義するFormatterクラスを作成します。ActionとQueryは出力内容に関するフォーマット部分が違っています。また、これは環境にもよるのですが Auth::id() によりユーザIDを取得する際にDBへのアクセスが発生することがある為、QueryLogFormatterでは staticの変数 $disableUserId を使ってそれを制御しています。この制御方法はもっと適切な方法がありましたら教えて欲しいです。 // app/Logging/ActionLogFormatter.php <?php namespace App

この記事は Laravel Advent Calendar 2020 - Qiita 最終日の記事です。 TL;DR DDD や "真の" クリーンアーキテクチャは， Web 業界における大抵の現場ではオーバースペックだし，導入しても全員がついてこれるとは限らない app/UseCases ディレクトリだけ切って，ドメインごとに単一責務なクラスを置くと使いやすいよ ActiveRecord 指向のフレームワークで Repository パターンを無理に導入すると死ぬので， UseCase で Eloquent Model の機能を使うことを恐れるな はじめに Zenn では初投稿です。日本の Laravel コミュニティではもうお馴染みのようで実はあまり顔を出していない（？） @mpyw と申します。オンラインサロンの火付け役となった Synapse が最初の仕事でしたが，就職後すぐ会社が

※2022/01/04　運用後に ElastiCache -> DynamoDB にした部分を追記＆修正 AWS Lambda x Laravel でサーバーレス構築 ⇒ 本番リリースまで実施しました。 ベストプラクティスではなかったり、情報を見落としていたりもあると思いますが、 後々の Serverless Laraveler のために『こんな感じでしたよ』というのを残しておきます。 あと費用感。とても大切。 想定される読者像 AWS 完全に理解した！って人。 Laravel で Serverless したい人。 Serverless は理解しているけど『実際の費用感どうなん？』と思っている人。 背景とお気持ち 情報公開時にアクセス/トランザクションがスパイクするようなWEBサービスを作る 小規模開発なので予算は可能な限り抑えたい でも開発環境で本番環境と同等の検証ができるようにしたい

OpenAPI関連のサイト・ツールまとめ2020.10.29 OpenAPI関連のサイトやツールなどの情報が種々雑多にあるので、自分の中での整理と忘備録として残すためにまとめました。（2020年10月時点） 概要OpenAPIとはOpenAPIという表現が使われた場合、恐らくそれらの多くはOpenAPI Specification（以下OAS）に基づいてJSONやYAMLで記述されたREST APIの仕様書（スキーマ）を指しているように思います。 OASはREST APIの仕様を記述するための規格であり、それ自体がなにかのツールやサービスを提供するものではありません。 とはいえ関連するツールやサービスも普及してきているので、あまり言葉の意味を気にしすぎる必要もないかもしれませんが。 OpenAPI Specification (v3.0.3)Implementer’s Draft (OAS

DX（デジタルトランスフォーメーション）の全体像をざっくり解説2020.10.28 もはやバズワードと化したDXという言葉ですが、実際何を意味しているのか？ どのようなことをしたらいいのか？ といったことを相談されるようになってきたので、DXをイメージするための全体像をざっくり解説します。 コロナの影響もありDXという言葉はバズワードのように至る所で聞くようになりました。 同時に、言葉からどのようなことを意味しているのかが分からないと言った声をよく聞くようにもなりました。 2020年も残り少しとなって、大手企業だけでなく中小企業でもDXをという話が出るようになりましたが、そもそもそれが何かのか、何をすればいいのかというところから話が始まることが多いです。 今回はDXはどういうものなのか？を理解するためにDXの全体像をご説明します。 （長文のため、さくっと知りたい方はまとめだけご覧ください）

OpenAPI×Stoplight Prismでモックサーバーをたてる2020.10.23 OpenAPIをバックエンドとフロントエンドの橋渡し役としてさらに活用すべく、OpenAPIのスキーマをもとにモックサーバーをたてることのできるStoplight Prismを試してみました。 OpenAPIの活用について弊社ではこれまでにOpenAPIをサーバーサイドのAPIのテスト、フロントエンドのクライアントコードの自動生成などに活用してきました。 committee×OpenAPI×RailsでスキーマファーストなAPI開発OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活現状の課題自動生成されたクライアントコードがあったとしても返すデータがなければマークアップや組み込みを進めるには少し不便です。 せっかくスキーマから型まで生成

Railsでキャメルケースのリクエストを扱うために2020.10.12 RailsでAPIを実装する場合にRailsのコードではスネークケースを使いつつ、クライアントにはキャメルケースのリクエスト（あるいはレスポンス）を扱っているように振る舞うための方法を調べました。 背景過去の記事でOpenAPIをベースにした開発を進めているという話題がありました。 committee×OpenAPI×RailsでスキーマファーストなAPI開発 OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活そのなかでフロントの組み込みの段階でリクエストがあったのが、「リクエスト、レスポンスのJSONのキーをキャメルケースにして欲しい」というものでした。 簡単に説明すると、上の例がスネークケースで一般的にRubyで変数を扱うときによく使われます。 一方で

GraphQLやめました2020.05.27 当初Golang + GraphQLで作っていたAPIをRails + OpenAPIで作り直しました。なぜGraphQLで始めたのか、どうして作り直すことにしたのかなどを経緯とともにまとめました。 始まり弊社では qrop という農家さん向けのサービスを鋭意開発しています。 私はAPI等のバックエンドの開発を主に担当しており、このサービスの開発を始める段階でAPIは GraphQL にしよう、という話になりました。 GraphQL | A query language for your APIこの時点でGraphQLである必要性はなく、詳しいメンバーがいたわけでもなく、新しい技術に触れておきたいよねという程度の理由でした。 せっかくだしGolangで開発しよう、インフラはGCPにしよう、という具合にその時やりたいことを詰め込んで開発はスタート

テスト管理ツールQaseを使ってみての紹介と感想2020.04.03 少し前にQaseというテスト管理するツールが紹介されていて、使用する機会があったので、機能と感想を紹介します。 今までテストの管理はスプレッドシートやExcelを使っていました。Qaseの他にもテスト管理のソフトウェアはあるようですが、それらのアプリケーションに関しては使用したことがありません。また、今回の内容は無償プランの利用となっています。 Qaseの機能はこの方が詳しくまとめています。 https://qiita.com/henjiganai/items/9fadf6d1099357b49e9c 構造の解説先にQaseの構造を説明しておきます。有料バージョンではもっと機能が増えるようです。 Project - 名前のごとくプロジェクト毎に作成 L Repository - テストケースをここに追加していきます L

OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.29 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O

GiFTで2019年に利用した技術やサービスの感想まとめ2020.01.29 2019年の振り返りとして社内のプロジェクトや各個人で使った技術・ツール・サービスをまとめつつ、良かったところやそうじゃなかったところをみんなでそれぞれ挙げてみました。 概要職域ごとに分けてご紹介します。 ディレクション編デザイン編フロントエンド編バックエンド編その他編ディレクション編AsanaZenHubを使ってたZenHubリポジトリに紐づくのが単純に便利かんばんはステータス管理にとても便利だが、設定するプロパティが多く、扱いが難しくなってしまうこともあったつい直接GitHubのIssueを見てしまうInstaganttガントチャートツールとしては、現状一番ちょうど良い機能でも日本語入力だったりが少し残念なときもあるMiroさくっと作れるうえに高機能でUIも使いやすいただ、なんでも出来てしまうのでどのタイミン

GitHubを少し便利に使えるようなChrome拡張機能を作った2020.02.24 日々使うGitHubで外部リンクをブラウザの別タブで開けたらいいなと日頃から思っていたので、それを解決するChrome拡張機能を作って動かしてみました。 前書き最近は仕事・プライベートに限らず、PCやスマホでWebブラウザを開かない日はないと言っても過言ではないように思います。 その中でも GitHub は個人的に利用する頻度が高いサービスのひとつです。 自分の関わるプロジェクトでPull RequestやIssueを見るだけでなく、OSSのリポジトリでREADMEを読んで使い方を学んだり、ソースコードを直接読むこともあるでしょう。 そんななかでちょっとした不満というか、ここがこうだったらいいのになと思ったのがリンクを開く時の挙動でした。 やりたいことGitHubのWebページで外部リンクを新規タブで開け

GiFTの制作ワークフロー [2020 ver.]2020.02.24 制作する上でのさまざまなコミュニケーションの方法を共有しつつ、どうしていきたいか、どう変えていくか考えていきます。 在宅勤務が推奨されている現在、さまざまな会社での現状が共有されていていますね。 クックパッドの在宅勤務環境 - クックパッド開発者ブログ GMO ペパボのリモートワーク状況 2020 - ペパボテックブログ 1つ1つのノウハウの共有というのはもちろん、社員を多く抱える企業がこのような取り組みを共有してくれるのは業界全体にとっても良いことだなと思います。 業界や社会を構成しているのは1つ1つの会社であり、それを動かしているのは自分だという意識と実践を忘れないようにしたいです。ということでGiFTでのコミュニケーションについてもまとめました。 とはいえ現状は4人の会社ですし、リモートワークに限らずどのように仕

Prisma2を使ってREST APIを実装してみる2020.01.23 Modern DB toolkitと謳うPrisma2の使い心地を試すべく、Prisma2のツールを使ってREST APIを実装してみました。 Prisma というデータベースに関する便利な機能を提供するツールをずっと触ってみようと思っていたのですが、次期バージョンが鋭意開発中でプレビュー版として使えるようなので簡単なREST APIを開発しながら使い勝手を見てみました。（現行のバージョン1は全く触れたことがありません） Prismaprisma/prisma2Prisma2についてREADMEによると Prisma2 は以下のツールで構成されます。 Prisma Client JS: Type-safe and auto-generated database client (“ORM replacement”)Pr

NuxtプロジェクトへのStorybookの導入2019.11.18 StorybookのNuxtを使っているプロジェクトへの導入と所感をまとめました。 * 2020/04/14 @storybook/vue 5.3.0以降のアップデートを追記しました。 最近フロントエンドのチーム開発環境の整備の一環として、Storybookの導入を行いました。 Storybook 5.3の公開により、設定方法が変更されましたので、追記・修正いたしました。 参考： https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78 導入背景背景としては、現在弊社チームとしてはデザイナー、フロントエンドエンジニアの他に、インターン的にマークアップを手伝ってくれている人がいます。 デザイナー、エンジニア間では過去に何度も

Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】2019.08.11 Headless CMSとしても有名なContentfulですが、ブログ記事を見ているとそこまで使い倒している記事を見たことはない気がしたので、一歩踏み込んだ使い方を書いてみようかと思います。 （実際にやってみながら少しずつ追記します） タグ付けとタグでの絞り込みまずタグの作り方ですが、 Contentでブログ以外にTagなどを作成します。 Authorと同じですね。 そして、Blog記事のContent modelを編集し、 Referencesを追加します。 この時、1個のみでも複数でも構いません。 Contentでタグをいくつか作成し、記事に紐づけてみましょう。（Authorを選択するのと同じ要領です） それだけで記事にはタグ付けができた状態になります。 あとは、ブログ記事を表示