makeshopでは、WebP形式の画像アップロードに対応しました。特にanimated WebPの対応には課題が多く、Goライブラリの選定や圧縮処理の最適化に試行錯誤を重ねました。最終的に品質と性能を考慮し、animated WebPは1MB以下のアップロード制限を設けることで対応しました。

話題のMCP(Model Context Protocol)を活用し、Vue3/Vuetifyベースのデザインシステム向けに独自サーバーを実装。LLM連携による開発効率化、実装ノウハウ、課題を詳解します。

GMOメイクショップ コアグループ エンジニアの森です。 先日、業務効率化を目的としたAI活用ツールを開発しました。 このツールでは Slack, AWS, GAS 等複数の連携を実装しましたが、この記事ではSlackからAmazon API Gatewayへのリクエスト送信部分について解説していきます。 作成したツールの全体像についてはこちらの記事で解説しています。ご興味があればご覧ください。 tech.makeshop.co.jp 1.Slack Workflow 2.Slack Outgoing Webhooks 3.Amazon API Gateway モデル リソース メソッドリクエ…

OSSライセンスをホワイトリスト方式で自動チェックする方法を考え、導入した時のことを記録として書いてます。

こんにちは、プロダクト開発部コアグループの井上です。 コアグループでは、次世代ECの開発を行っています。 最近、新規リリースされるAPIと連携するタスクを行なっていたので、今回は外部に公開するAPIを作る際にはこういうポイントに気をつけたいなと思ったポイントをリソースを作成するAPIに焦点を当てて考えてみました。 1. 冪等性かつ同じレスポンスを返す 冪等でない場合 2回目以降レスポンスの一部、または全部を受け取れない場合 2. エラー時にリトライ可能かを示す 3. 入力値チェックの仕様はドキュメントもしくはエラーコードで明示する まとめ 1. 冪等性かつ同じレスポンスを返す 例えば以下のよう…

EC2からECSへ移行した際の経験をまとめました

約半年間続けているチーム内勉強会の概要やメリットを紹介。設計戦略やAIツールの検証、トレンド技術の要約共有など多彩なテーマを短時間LT形式で共有し、効率化の工夫や運営のポイントも振り返っています。

GMOメイクショップの2024年の開発経験を振り返り、2025年に活かすための改善点や取り組みを共有。ドキュメントの読み合わせ、デイリーコミュニケーション、意思決定の記録、情報の集約など、効率的なプロジェクト管理のポイントを解説します。

新管理画面の注文詳細をリニューアル!将来的なデザイン変更や柔軟な機能改善に対応するため、アーキテクチャをゼロから見直し、Container/PresentationalパターンやRepositoryパターンを採用しました。

TypeSpecを活用して、OpenAPIドキュメントを効率的に作成し、フロントエンドで型安全なREST API通信を実現する方法を解説します。

ジェネレーターを作成するJavascriptライブラリであるPlopの使い方を解説しつつ、PlopでStoryファイルの自動生成を行った経験を書いてます。

GMOメイクショップ コアグループ エンジニアの森です。 最近業務効率化のためにOpenAIのAPIを利用して大量の文章データを自動整理するツールを開発をしました。 この記事ではAIを使った文章要約と、過去データとの重複チェックを実装した過程について紹介したいと思います。 開発の背景 課題 解決策 ツールの概要 使用した技術 全体像 ツールでの処理内容 APIを呼び出すメソッド 要約処理 処理内容 プロンプト 出力結果 重複チェック 処理内容 プロンプト 出力結果 まとめ 開発の背景 課題 makeshopをご利用いただいているショップ運営者から日々様々なご意見・ご要望をカスタマーサポート（C…

次世代ECの管理画面で工夫した機能CSV出力に関して、悩んだ部分や解消方法についてまとめてみました。

データベースドキュメントのメンテナンス性を向上させるため、tblsという自動生成ツールを導入しました。tblsを活用することで、ドキュメント作成の手間を大幅に削減し、常に最新の情報を反映できるようになりました。この記事では、tblsの導入経緯と具体的な活用事例を紹介します。

VSCodeのワークスペース機能について紹介します。設定を1ファイルで共有する方法、複数のフォルダやリポジトリをまとめて管理する方法など、ワークスペース機能の利便性を解説します。環境構築の手間を省き、開発効率を向上させるためのヒントが満載!

ESLint設定ファイルのFlat Config移行方法

こんにちは、プロダクト開発部コアグループの井上です。コアグループでは、次世代ECの開発を行っています。今回はgovulncheckとGitHub ActionsをつかってGoの脆弱性チェックを自動化した取り組みについて紹介します。

Vue3 + Vite + Vuetify環境でStorybook8を導入する方法を紹介しています。また、vue-component-metaを利用しコンポーネントからDocsを自動生成する方法も詳しく書いています。

AIツールを活用してシフト作成の業務効率向上

新管理画面の開発でリリース対応漏れを防ぐために、Linterを開発・導入しました。Linterの開発背景、概要、使用例について詳しく紹介します。導入後の効果や今後の改善点についても触れていますので、リリース対応に課題を感じている方はぜひご一読ください。

次世代ECの決済画面リニューアルにおいて、OpenAPI(3.0)とコード生成ツールを使用して効率的なAPI開発とドキュメント共有を実現しました。

Vuetify3のカスタムアイコン名の入力ミスを無くすために、型定義を改善しました。この記事では、型定義をより厳密にするための方法を紹介します。TypeScriptの先進的な機能を用いた型定義の最適化に興味がある方、ぜひご一読ください。

GMOメイクショップ コアグループ エンジニアの越川です。 直近の開発でAPIの開発がありました。シナリオテストを導入したかったので、今回の案件で導入してみました。 導入したruunが便利だったので、記事にさせていただきました。 1. 動機・モチベーション 2. 構成 3. runnについて 4. 実装 5. GithubActionsに埋め込み 6. 実行結果 7. まとめ 1. 動機・モチベーション シナリオテストに関して、前々から、導入検討していました。 弊社の開発環境ではCI/CDが導入されているため、Githubのブランチへのマージを契機に Actionsが自動でECSのコンテナにデ…

GMO メイクショップ コアグループでエンジニアをしている池田です。 今回はOpenTelemetryを用いた分散トレーシング環境を構築したので、そのプロセスを綴っていきます。 導入の目的 前提 プロジェクトについて 筆者について 構成 ローカル環境 開発環境 セットアップ Jaegerコンテナの準備 ポート 計装 トレースの構成要素について トレーサーの定義 スパンの生成 サービス間でトレースデータを共有する ログ出力 Jaeger AWS X-Ray aws-otel-collectorの設定 完成したもの ローカル環境(Jaeger) 開発環境(AWS X-Ray) まとめ 参考 導入の…

GMOメイクショップ コアグループ エンジニアの森です。 現在のチームではずっと次世代ECのフロントエンドをメインに開発してきましたが、最近バックエンド開発も触るようになってきました。 そんな中、直近の業務で作成したAPIに対する負荷試験を担当しました。私にとっては初めての負荷試験だったのですがk6というツールを使うと簡単に実施できたので、その手順を書いていきます。 私と同じような初心者の助けになれば嬉しいです。 負荷試験とは k6とは 試験実施 1.シナリオ作成 2.オプション 3.実行コマンド 4.実行結果 5.実行結果（エラー例） まとめ 負荷試験とは 負荷試験は、実際に発生し得るシステ…

GMOメイクショップの黒木です。Golangでデータの整合性やセキュリティを保つためのReadonly型の擬似的な実装方法を紹介します。Readonly型を自前で定義する方法とLinterを使った方法を実用例も交えて解説します。これでコードレビューも効率化できます。

GMOメイクショップの原田です。Vue3向けツリービューライブラリ phphe/he-treeを使い、ドラッグドロップ対応の大規模なツリービューを開発しました。最適化のために選定したライブラリの理由や実装方法、工夫点について詳しく紹介します。

はじめに はじめまして。GMO メイクショップの高橋です。プロダクトオーナーとして次世代ECの開発に携わっています。 わたしはカスタマーサポートとしてmakeshopに入社し、その後、開発チームとの橋渡し役をやりながら次世代管理画面のプロダクトオーナーとしてプロジェクトに参加をしています。 開発出身ではないため、システム開発のイロハなど勉強中の箇所も多く様々な場所でチームメンバーに支えてもらいながら日々を過ごしています。 エンジニア出身ではなくプロダクトオーナーになる方も多くいると思いますので、わたしの経験・大切にしていることを残していこうと思います。 プロダクトオーナーは決めるのが仕事 プロ…

今日は、とても強力なAIサービスを紹介したいと思います!その名も **Create.xyz **Create.xyzは、テキストや画像からアプリケーションを開発することができる革新的なAIツールです。

GMOメイクショップ コアグループでフロントエンドエンジニアをしている池田です。 主にTypescriptとVue.jsを用いた開発をしています。 当記事ではJS・TSでモックサーバーとして利用できるライブラリMSWの紹介と、フロントエンド開発での導入方法について触れていきたいと思います。 MSWとは どのようなケースで使えるか 開発時のmockサーバーとして利用 APIリクエストを含むテストでの利用 類似ライブラリとの比較 API 環境 導入方法 mockServiceWorker.jsは本番ビルドに含めない モックの定義 REST GraphQL ワーカーを起動するコードを書く 最後に 参…