非エンジニア・非デザイナーの立場から、AIを活用したバイブコーディングでバナー制作アプリ「Vibe Draw」を開発。デザイナーが設計したテンプレートに自然言語で指示するだけで統一感のあるクリエイティブを生成できる仕組みを構築し、従来2週間かかっていたコンテンツ制作を10時間程度に短縮することに成功した実験レポート。

こんにちは、プロダクト開発部コアグループの井上です。 新決済画面のSmart Checkoutでは住所比較APIを作成して、数ヶ月前から注文者住所と受取先住所の揺らぎを吸収しています。 今回は作成に至った背景やAPIについて紹介します。 背景 makeshopの仕様 makeshop管理画面では注文者と受取人が異なる場合に以下のような仕様があります。 管理画面上で「注文者と異なる送付先」のアラート表示をしている 一部出荷伝票用のCSV出力時に送り主がショップ情報から注文者情報に変わる 課題 住所表記の揺らぎによる誤判定 実際には同じ住所なのに表記揺れで「異なる住所」と判定され、て困っているとい…

こんにちは、プロダクト開発部コアグループの井上です。 現在ECSでgithub.com/RichardKnop/machineryを使って実行している定時処理をEventBridge + Lambda/ECSをSAMを使って管理する形に置き換えています。 LambdaがあらかたできたのでECSを追加しようとしていたところ不思議な挙動にハマってしまいました*1 構成 環境別のsamconfigにparameters_overrideを設定してsam deploy時に--config-fileで読み込む構成です。 sam ├─ samconfig-dev.yaml ├─ samconfig-stg…

こんにちは、プロダクト開発部コアグループの井上です。 6月からClaude Maxプランでclaude codeを使い出して1ヶ月弱経過したので感想などを書いていこうと思います。 筆者のAI利用遍歴 GitHubCopilot 主にCopilotChatでゼロベースの実装に使っていました。自動補完はノイズだなくらいの感想 GoogleWorkspaceにバンドルされた Gemini 2.5Pro, DeepResearchはかなり愛用していました。 実際に使ってみたユースケース 普段の開発ではGeminiを使っていましたが、Claude Codeを使い始めてからは完全に置き換わりました。 実際…

こんにちは。makeshopエンジニアの森です。今回はAI搭載の次世代ターミナル Warp を紹介します。 私自身iTerm2から乗り換えてみてその魅力を実感しているので、実際の使用体験を交えなが解説していきます。 1. Warpとは？ 2. 主な特徴 ブロックベースのUI設計 高機能な入力エディター AIアシスタント機能 3. プランと料金 4. まとめ 1. Warpとは？ Warpは、Rustで開発されたGPUレンダリング対応のモダンなターミナルアプリケーションです。 従来のテキストベースなCLIとは一線を画すUI/UXと、AIによる支援機能が特徴です。 技術的特徴： 開発言語: Rus…

こんにちは。GMOメイクショップの森です。 弊社のシステム makeshopでは日々アーキテクチャ改善を進めています。本記事では、その一環として導入を進めている Container/Presentationalパターン について、実装例を交えながらそのメリット・デメリットや Vue 3 における実践的なポイントを解説します。 過去にもmakeshopのContainer/Presentationalパターン導入について解説した記事がありますので、こちらもあわせてご覧ください。 tech.makeshop.co.jp Container/Presentationalパターンとは？ Contain…

LocalStackを使ってローカル環境にAWS環境を構築した方法を解説しています。

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のコンテナにデ…