こんにちは、ソーシャルPLUSの三口です!弊社では Amazon EKS 上で Rails のアプリケーションを動かしていますが、これまでノードはすべて Intel/AMD (amd64) のインスタンスでした。今回、そのノードに AWS Graviton (arm64) を導入し、Spot インスタンスでは arm64 と amd64 を混ぜて運用する構成にしました。Graviton への移行自体はすでに多くの企業が取り組んでいて、真新しい話ではないと思います。ただ、4 月に入社した自分にとっては、インフラの知識だけでなく、各サービスがどう動いているかを知るきっかけにもなった案件...

こんにちは、koyablueです。ソーシャルPLUSでは、Shopify ストアなどのサービスと連携して使うログイン/会員登録画面（以下、ログイン画面）を、エンドユーザー向けのNext.js製アプリとして提供しています。今回このログイン画面を多言語化するにあたってフロントエンドで行った内容を紹介します。技術スタック:Next.js v16.3.8（Pages Router）i18next v21.9.2react-i18next v11.18.6 実装方針を決める全く多言語化されていないアプリなので、locale情報の取り扱いやライブラリ選定などを事前に決める必要が...

こんにちは、st-1985 です。先日、CSV を使った一括配信の処理中にメモリ使用量が増え続けている現象が見つかりました。調査したところ、原因は ActiveRecord の関連付け経由でレコードを作成していたことでした。今回はその詳細について書いていこうと思います。 状況開発しているアプリケーションには、アップロードされた CSV の各行に対してメッセージを配信する機能があります。CSV は最大 100,000 行で、Sidekiq のジョブの中で 1 行ずつ配信レコードを作成しています。モデル構成を簡略化すると以下のようになります。CsvImport: アップ...

こんにちは、tsub です 😄最近、Zenn の記事を Claude Code Desktop（Claude Desktop アプリの Code タブ）で書くようになったのですが、これが思っていた以上に快適だったので、どんなところが便利なのかを紹介します。Claude Code Desktop で執筆しているときの画面のイメージ（スクリーンショットをもとに ChatGPT で手書き風イラストに変換）やっていることは、Zenn CLI で管理している GitHub リポジトリを Claude Code Desktop で開いて、普段の開発と同じように Claude と一緒に記事を書...

okumudです。 はじめに弊社では Shopify アプリ「CRM PLUS on LINE」を提供しています。Shopify では長らく、Admin API へのアクセスに使うオフラインアクセストークンを「有効期限なし（non-expiring）」で発行できていました。しかし Shopify から、2027年1月1日以降、すべてのパブリックアプリで有効期限付き（expiring）トークンへの移行が必須となり、それ以降は期限なしトークンでの Admin API リクエストは認証エラーになる ことが案内されています。詳細は Shopify の公式アナウンスをご参照ください。h...

どうもこんにちは、たくびーです。弊社ではClaudeのチームプランに契約しており、開発者全員がClaude Codeを使うことができます。希望者はChatGPTのチームプランも使えてCodexを併用することも可能です。私はAI開発環境整備の一環でルールやスキルの作成やメンテナンスをすることが多いです。そこで最近はエージェントスキルの設計方針について考えることが多く、現時点でどういう観点でスキルを作成しているかということをご紹介したいと思います。!記事の内容は人間が書いていますが、調査などにAIを使用しています。 TL;DRスキルを書くときは振る舞いとナレッジを分ける...

概要弊社ではノードオートスケーラーとして Cluster Autoscaler を使っていましたが、AZ 分割 Node Group の運用負債や EKS Auto Mode への移行検討などをきっかけに、Karpenter への全面移行を行いました。移行によって、AZ ごとに Node Group を分割する必要がなくなり運用がシンプルになったほか、consolidation によるノードの最適化（余ったノードの削減や、過剰スペックなノードをより適切なインスタンスタイプに詰め替える動き）で狙い通りコスト最適化の効果も得られました。一方で、期待していたスケールアウト速度の向上は...

モチベーションTypeScriptを書いていると、たまにこんな型が欲しくなるtype Vector<T, N extends number> = ...Tは要素の型、Nは配列の長さで、例えば、Vector<string, 3>;なら、必ず3つのstringを持つ配列になる。普通のstring[]より、少しだけ多くの情報を型に持たせているわけだ。こういう型があると、面白いことができる。例えば head 関数はfunction head<T>(values: T[]): T { return values[0];}一見問題なさ...

こんにちは、steshima です。業務で、Next.js を使っているアプリの共通コンポーネントのちょっとしたリファクタをしたところ、画面が表示されなくなる不具合が発生しました。原因を調べてみると next/head の仕組みに行き着き、なるほどと思うことが多かったので、備忘録としてまとめてみました。先に結論を書いておくと、next/head の <Head> の中に、データ取得の hook を持つコンポーネントを置いてしまったのが原因でした。対象の環境は Next.js の 16.1.5（Pages Router） で、SSR で動かしているアプリです。 前提...

はじめにmasaki です。現在弊社では CRM PLUS on LINE という Shopify アプリを開発し、公開しています。https://crmplus.socialplus.jpCRM PLUS on LINE は REST API で実装しており、バックエンドではこれまでリクエストパラメータのバリデーションを Rails 標準の Strong Parameters で行ってきました。しかし機能を拡張していくにつれて、Strong Parameters だけで対応しようとするとコードが複雑になる場面が目立つようになってきました。そこで、OpenAPI のスキーマ...

はじめにソーシャル PLUS のフロントエンドでは、MSW で API をモックし、テストや Storybook、ローカル開発に使っています。今回、モノレポで管理しているそのモックをリファクタリングしました。この記事は「こう直しました」という手順書ではなく、どこで何を迷い、何を基準に決めたかを主に書いていきます 👌説明を簡単にするため、以降は API が1つだけの前提で書きます。 何が問題だったのかモックのディレクトリは、エンドポイントのパスに沿わせています。hoge/ が /hoge、hoge/draft/ が /hoge/draft、hoge/_identifier...

HTTP リクエスト／レスポンスのログを吐くとき、その中に秘匿情報が含まれていたら、きっちりマスクしないとダメですよね。// マスク前[ { id: '123', name: '佐藤ほげ丸', role: 'admin' }, { id: '456', name: '鈴木ふが美', role: 'member' }, { id: '789', name: '高橋ぴよ助', role: 'member' },]// マスク後[ { id: '123', name: '[MASKED]', role: 'admin' }, { id: '456', name:...

こんにちは、simomu です。2026年7月18日 に滋賀県で開催された関西 Ruby 会議 09 に参加してきました。https://regional.rubykaigi.org/kansai09/いわゆる地域 Ruby 会議というもので、東京 Ruby 会議や松江 Ruby 会議など様々な地域で開催されています。https://regional.rubykaigi.org/関西 Ruby 会議に関しては、前回の関西 Ruby 会議 08 にも参加していました。その時のレポートはこちらです。https://zenn.dev/socialplus/articles/e57...

概要Amazon EKS の Kubernetes API への IAM プリンシパルのアクセス許可は、長らく aws-auth ConfigMap で管理するのが一般的でした。枯れた仕組みではあるものの、AWS 公式ドキュメントで以下のように明記されている通り、現在は非推奨です。aws-auth ConfigMap は非推奨になりました。Kubernetes API へのアクセスを管理する推奨手段については、「EKS アクセスエントリを使用して Kubernetes へのアクセスを IAM ユーザーに許可する」を参照してください。— Amazon EKS ユーザーガイド...

こんにちは、koyablueです。弊社では、Webサイトに埋め込んで利用するサードパーティスクリプトを提供しています。管理画面に表示されるスクリプトをコピーして、ECサイトに直接埋め込んだり、GTM（Google Tag Manager）経由で使用される想定です。この埋め込み用スクリプトには当初 <script type="module"> が使われており、そのままGTMに設定するだけでは動作しないという不都合がありました（なので、GTMで動作する形式に変換してから設定する運用が行われていました）。この記事では、この問題に対応するために行った変更を紹介します。 変...

こんにちは、バックエンドエンジニアの otsubo です。弊社では Datadog でメトリクスを監視しています。定期開催している「Datadog を見る会」のおかげでグラフには見慣れてきましたが、意図通りに設定するのは意外と難しいです。この記事では、設定ミスや誤解釈をしないための注意点をまとめました。メトリクス収集に関しては扱いません。収集時の工夫は前回記事で三口さんがまとめてくれています！https://zenn.dev/socialplus/articles/ada79030bb7b8c メトリクスの Unit, Type, Interval当然ながら単位は大事です。秒...

こんにちは、4月にソーシャルPLUSに入社した三口です!Datadog では、AWS CloudWatch のメトリクスを取り込む方式として、デフォルトで API Polling が利用されます。この方式は約10分ごとにメトリクスを取得するため、実際のメトリクスとの間に少々遅延が発生してしまいます。そこで今回、メトリクスの遅延を最小限に抑えられる Metric Streams へ移行したため、その内容について紹介します! 導入背景API Polling によるメトリクスの遅延により、以下のような課題がありました。Datadog でダッシュボードを作成していたものの、メトリク...

こんにちは、Social PLUS のフロントエンドエンジニアのまっくすです。今回は、CircleCI のコストをきっかけに、普段あまり細かく見る機会のなかった CI のクレジット消費量を調べました。プロジェクトやジョブごとの利用状況を確認していくと、Storybook のビルドやスクリーンショット撮影を行うジョブが、フロントエンド全体のクレジット消費量の大きな割合を占めていることが分かりました。調査の結果、Storybook のビルドやスクリーンショット撮影を行うジョブが、フロントエンド全体のクレジット消費量の大きな割合を占めていることが分かりました。そこで、VRT の実行方法に...

1. はじめにまだ tsc がぐるぐる回っている。心当たりのある方、こんにちは。たいてい最初は身軽です。ところがコードは増える一方で、共有する処理も型も積み重なっていく。気づけば型チェックの待ち時間は、ジワジワと「いつか効いてくるボディブロー」になっています。誰も悪くない。ただコードが育っただけ。Microsoft が Go で全部書き直した TypeScript ネイティブ版（typescript-go / tsgo） 。型チェック約10倍だそうです。(TypeScript 7.0 として2026年中の安定版が予定されています。)本記事では、カタログスペックの「10倍...

こんにちは、st-1985 です。今回はCommon Table Expression (CTE)を使用したクエリの処理に時間がかかっていたので改善した話を書いていきたいと思います。 状況以下のようなメッセージの配信情報とその統計情報の単位(Unit)となるモデル構成があります。Unit: 統計集計の単位となるエンティティDelivery: unit_id と delivered_at を持つ配信レコード。Unit ごとに複数存在する管理画面には Unit の一覧ページ(1ページ最大10件)があり、そこでは各 Unit において最後に行った配信の時間を表示しています...