こんにちは、クロスマートでエンジニアをしている大田です。 最近クロスオーダー請求書の画面（Nuxt の SPA）に、Playwright で E2E テストを整備しています。 ここでいう E2E テストは、QA やリリース前の受け入れテストのためのものではなく、開発者が実装中に自分の変更を確認するためのものです。これまで手で行っていた動作確認を、どこまで自動化できるかに取り組んでいます。 E2E テストの書き方については良い記事がたくさんあるので、この記事では E2E テストを入れて動作確認の何が楽になったのかを中心にお話しします。 これまでの動作確認 これまでも、動作確認は基本的に手元で行っ…

プロローグ 地下生活者の手記 審判 比較 パフォーマンス Next.jsでの実装が有効であった部分 SPAでの実装が有効であった部分 その他の機能から見るNext.jsを選定するべきタイミング パフォーマンス・実装難易度から見るNext.jsを選ぶべきでないタイミング まとめ 採用情報 プロローグ 地下生活者の手記 この手記の著者も、この手記も、架空のものである。 わたしことクロスマート株式会社のフロントエンジニアの福留（@fal_engineer）とこの手記の著者とは無関係であるが、この人物が自己の業務を遂行する上で、著名な OSS のリリースノートや SNS を眺めたりする中で思うところが…

こんにちは、クロスマートで SRE をしている渡辺です。最近、社内では DB に関する書籍の輪読会が盛り上がっています。 DB に対して「いつ・誰が・どんなクエリを実行したか」を後から追える状態は、監査やインシデント対応の観点で欠かせません。しかし、これまで私たちの環境では、エンジニアが全員同じユーザーで DB に接続していたため、ログを見ても「誰が」を復元できない状態でした。 この記事では、共有 DB ユーザーをやめて個人別の DB ユーザーに切り替え、Amazon Aurora の監査ログで「いつ・誰が・どんなクエリ」を追えるようにするまでに整備した内容を紹介します。 現状の構成と課題 現…

こんにちは、エンジニアの山田です。 2026年8月18日 （コミックマーケット(コミケ)108が終わった2日後） 。ビッグサイトにて開催された展示会「DXPO東京'26 夏」に自分達が作ったプロダクトを引っ提げて出店・参加してきました。 この記事はその出店・参加のレポです。 クロスオーダーバディとは？ クロスオーダーバディとは — FAX注文書の手入力を、AIに任せる FAXの注文書やPDFで受け取った帳票を、担当者が1枚ずつ見ながら基幹システムに打ち込む業務…。 取引相手・業務内容により呼称も変換処理の仕方も各社固有であり、基幹システムに入れるための修正手順は個々人の頭の中にしかない。 結果…

こんにちは。エンジニアの山本です。 PyCon JP 2026という技術カンファレンスに、会社の勉強会支援制度を利用して行かせていただきました。 8月21日〜22日に広島で開催され、翌日の8月23日のスプリント（ハッカソン的なプログラム）にも参加しました。 2026.pycon.jp このキャッチーなタイトルは自分の話ですが、今回は後輩エンジニアの石橋と2人での参加でした。 この記事は前半が山本パート、後半が石橋パートで、それぞれの視点で書いていきます。 行かせていただいた経緯 山本パート 特に勉強になった＆自分でも深めたいと思ったセッション Pythonの実行はどこまで賢くなったのか：CPy…

こんにちは、バックエンドエンジニアの田村です。 Claude Codeを使っていて、ずっと気になっていたことがあります。 セッションをまたぐと何もかも忘れてしまうことです。 新しいセッションを開くたびにプロジェクトの前提を説明し直して、一度「それはやめて」と伝えたことを翌日にはまたやる。毎朝オンボーディングをやり直しているような気分でした。 CLAUDE.mdに書いておけばいいという話ではあります。しかし、学びが出てくるのは会話の中なのに、書き足すのは自分の手作業です。 しかも書き足してCLAUDE.mdが増えれば増えるほど毎セッションのコンテキストを食っていく。これだけだと追いつきませんでし…

こんにちは、クロスマート開発部 SRE の渡辺です。 ECS Fargate タスクのメモリ使用率を「タスク単位で」監視しようとしたところ、標準の Container Insights メトリクスでは素直に実現できず、CloudWatch Logs のメトリクスフィルターを使って工夫することになりました。本記事ではその設計と実装をまとめます。 背景 弊社のバッチ処理の一部は、サービス(常駐)ではなく都度起動される standalone タスクとして、Step Functions から ECS Fargate タスクを起動する形で動かしています。 構成上の重要なポイントが 1 つあります。 バッ…

クロスマートでSREをしている長野(ながの)と申します。 このたび、SRE NEXT 2026 に登壇してきました！ この記事では、登壇して感じたことと、いち参加者としてイベントから得られたものを書き残しておこうと思います。 登壇してきました speakerdeck.com まずは、無事に登壇を終えることができました。 登壇のきっかけをくれて練習にも付き合ってもらい、さらに登壇前に実施した社内リハーサルではたくさんの温かなコメントをくれた会社メンバーに大感謝です！ 今回は、一人目のSREとして入社してから、SREチームを立ち上げるまでの取り組みについて話したのですが、登壇準備を通して、2024…

老若男女のみなさま、お久しぶりです。バックエンドエンジニアの宮崎です。 以前、デスクトップアプリフレームワーク3つを実装して比較する記事 xmart-techblog.hatenablog.com を書かせていただいたのですが思ったより見ていただいている方が多いようでしたので、 今回その続編として、Wails v3 alpha 編をお送りさせていただきたいと思います！ なぜなぜな〜ぜ、Wails? 正直なところ、2026年現在のデスクトップアプリ開発は「実績のElectronか、軽量のTauriか」の二択で語られることがほとんどかと認知しております。 しかしながら、Wailsは現在v3開発の真…

こんにちは、クロスマート開発部のうえだです。 サービスで画像を提供するとき、JPEGのような非可逆圧縮を使うことはよくあります。 いろいろな画像圧縮形式が出ている中で「どれを使えば良いのか」「品質係数はどのくらいの数値にすれば良いのか」は個人の経験で決めていたりデフォルト値を使っている人が多いかと思います。 現時点(2026年)で何がベストなのかを調べるためにいろいろな画像形式で比較してみました。 TL;DR エンコーダ間で品質係数の数字はバラバラ libjpegの品質係数80相当はJPEG互換エンコーダでは80前後ですが、WebPでは83.0、AVIFでは64.7、HEICでは48.7でした…

はじめに こんにちは！給食施設向けサービス「クロスオーダー給食」を開発している佐藤です。 今回「クロスオーダー給食」の一部のページでLighthouseパフォーマンススコアを改善しました。 一般的なフロントエンド最適化(lazy load、CSS分割、外部スクリプト遅延ロードなど)だけでなく、フロントコードに手を入れる前段階の配信時gzip有効化を合わせて行うことで大きな成果を得られるという気付きを本記事にまとめます。 計測環境 項目 Before After 配信元 stagingサーバー(gzip無効) stagingサーバー(gzip有効) API staging API staging…

こんにちは、クロスマートSREチームの渡辺です！ みなさんのチームでは、AWS リソースのエラー通知をどうやって受け取っていますか？ AWS リソースのエラー通知を Slack に飛ばす方法はいくつかありますが、その中でも Amazon Q Developer は圧倒的に設定が手軽です。 CloudWatch Alarm → SNS → Amazon Q → Slack という流れでマネージドサービスを設定するだけで、すぐにエラー通知を Slack で受け取れるようになります。 ただ、運用していくうちに「通知は来るけど、結局 AWS コンソールを開かないと何も分からない」という課題が見えてきま…

プロジェクト背景 問題設定 アプローチ選定 一般的なアプローチが使えない理由 理想と現実 発想の転換 開発ストーリー 初期モデル（Day1~2） 結果 改善モデル（Day3~4） 結果 最終モデル 結果 アプローチ詳細 前処理 特徴量設計 特徴量1：行線の数・間隔 特徴量2：文字行の間隔 特徴量3：行線と文字行の関係 特徴量4：グリッド構造 設計の本質 分類器の構成 データ改善による精度向上 まとめ クロスマートで業務委託として関わらせていただいているエンジニアの伏田と申します。 現在世の中ではLLMを活用したソリューションが花盛りですが、そんな時代にあえて手動特徴量抽出＋基礎的な分類モデルで…

どうも、クロスマートの小久保です。バックエンドエンジニアをやっております。 突然ですがみなさん、個人開発してますか？？ 僕はUnityで顔の長いバンダが主人公のアクションゲームを作っています。 非常に楽しくて良いのですが、いかんせんゲーム開発というものは時間がかかります。 気づけば開発開始から3年が経とうとしております。 3年...。3年ですよ？ キレそうですよね？ 原因はなにか？ 色々原因はあるとは思いますが、個人開発がうまくいかないってのはどう考えても 「自分が怠け者だから...」 となりがちです。 が、何かあったときに人の能力不足で帰結するのは良くありません。僕は悪くない。もっと考えまし…

はじめまして！ クロスオーダー請求書チームの石橋です！ 2025年の10月にSIerから転職し、 クロスマート株式会社にバックエンドエンジニアとして入社しました。 はじめに エンジニアとして入社し半年が経ちました。 技術面はもちろんですが、クロスマートに来て特に印象的だったのが、 日々のコミュニケーションの取りやすさや、チーム・組織全体の空気感です。 前職でもリモートワークを経験していたため、 フルリモート環境の難しさも感じてきている立場です。 一方で実際に働き始めてみると、そうした難しさを強く感じることなく日々業務にあたることができています。 その背景には、日々のコミュニケーションの取り方や…

はじめに こんにちは、エンジニアチームのおおくらです。 クロスマートでは2022年からテックブログの運営を始め、4年間にわたって記事を書き続けてきました。 これまで記事の管理ははてなブログ上で完結していましたが、2026年からは、はてなさんが提供している Hatena-Blog-Workflows-Boilerplate を導入し、記事の管理をGitHubに移行しています。 この記事では、すでに100記事以上ある状態からGitHubへ移行した流れを紹介したうえで、GitHub管理によって改善されたことや、運用方法が変わったことで新たに見えてきた課題についてお話しします。 GitHubでブログ記…

EMになって、1年が経ちました。ちょうどテックブログの担当が回ってきたので、この節目に自分なりの「EMってこういうことだよな」と考えている部分を言語化しておこうと思います。全てを完全に理解した、という話ではなく、迷ったこととかまだわかってないこととかも全部ひっくるめて書き留めていこうと思います。EMを目指している方や、「EMって何してる人なの？」と思われている方にも、少しでも参考になれば嬉しいです。

はじめに こんにちは！先日新規プロダクトのチームに異動したバックエンドエンジニアの中松です。 私たちのプロジェクトでは、PythonのパッケージマネージャーとしてPoetryを使用していました。しかし、uvの登場により、その圧倒的な速度と使いやすさに魅力を感じ、移行することにしました。 本記事では、実際にPoetryからuvへ移行した際の手順、変更点、そして得られたメリットについて解説します。 uvとは？ uvは、Astral社が開発したRust製の超高速Pythonパッケージマネージャーです。同社はRuffというPython用のLinter/Formatterでも有名です。 uvの特徴 圧倒…

こんにちは！クロスマートでフロントエンドの開発を主に担当している朝井です！ クロスマートが提供する飲食店向け発注ツール「クロスオーダー」では、発注画面のフルリプレイスを行いました。 本記事では、 Vue2 / Nuxt で構築された既存の発注画面を、React SPA に置き換えるにあたって、実装側でどのような判断をし、どのように進めてきたか を振り返ります。 デザイン面での背景や思想についてはこちらの記事で詳しく語られていますので、 ここでは主に 実装・進め方・判断 の話にフォーカスします。 なぜ React を選定したのか 今回のリニューアルは、単なる UI の刷新ではなく、フロントエンド…

クロスマートでUIデザインを担当している大島です！ 先日、弊社が飲食店向けに提供する発注ツール「クロスオーダー」の全画面を対象としたデザインリニューアルを行いました。今回のテックブログでは、リニューアルに至った背景やデザインにまつわる制作秘話をお伝えしたいと思います✨️ 🧐 リニューアルを実施した背景 「クロスオーダー（以下、XO）」は、食品卸と飲食店間の仕入れ業務をスムーズに行うための受発注ツールです。今回のリニューアルの対象となるのは、厨房やバックヤードで働く現場スタッフであり、仕込みや接客の合間にスマートフォン片手で素早く操作できる使い勝手が求められてきました。 サービス開始から５年、利…

はじめに こんにちは、クロスオーダー請求書チームでフロントエンドエンジニアをしている大田です。 私たちの開発チームでは、アプリケーションの品質担保のためにSentryを導入しています。 現状は、本番・ステージング環境での予期せぬエラーを検知するために利用しており、特定の重要機能では明示的にエラーをキャプチャして通知を受け取る運用を行っています。 この基本的なエラー監視だけでも十分に役立ってはいるのですが、Sentryにはエラーの再現を助ける機能や、より詳細な分析機能など、まだ私たちが活用しきれていない便利な機能がたくさんあります。 せっかくSentryを入れているならもっと開発を楽にするために…

Security for App Builders @ Loft #1 参加レポート イベント概要 アジェンダ 脅威モデリングとは 脅威モデリングで実現できること とはいえ脅威モデリングって難しいんでしょう？ 脅威モデリングの実践方法 ところでSTRIDEフレームワークとは？ STRIDEフレームワークの使い方 生成AIで脅威モデリングを実践しやすくする たたき台の作成で最初のハードルを下げる STRIDEフレームワークとAIの組み合わせで網羅性を担保 チームでの実践 ドメイン観点を中心に脅威を考える 多様なペルソナで考える 脅威への対応を戦略的に考える まとめ Security for Ap…

はじめに この記事の対象読者 この記事を読んでわかること Remix v3 について 今回コントリビュートした内容と手順、背景 背景 コントリビュート内容 Issue PR 今回行った手順 1. 対象 Repository を fork 2. fork した Repository をClone 3. README.md を読み込み、PJ概要とコントリビュートを行う上でのルールを探す 4. CONTRIBUTING.md を読み込む 5. ミドルウェアのバージョンを合わせる。パッケージをインストールする 6. 動作環境のテストのため、テストを実行してみる 7. テストがこけたのでIssueを作成…

バックエンドエンジニアの山田です。 社員に同じ苗字の人が妙に増えているため、最近は1号（数えて最初に入社したため）と言われています。 ある日、仕事が終わって X をダラダラと眺めていたら… 人生で何度、REST APIのレスポンス構造の設計をすればいいのか。知らないうちにRFC 9457とかいうのが爆誕してて、エラーレスポンスの構造が標準化されていた。時代は進んでいる。（もう独自でエラーレスポンスの構造を考えなくていいんや…！— GitHub CI/CD実践ガイド＠tmknom (@tmknom) 2025年10月28日 … …… …マジで！？！！？！？ と思って調べたのですが、マジでした。 …

こんにちは、バックエンドエンジニアのタムシンこと田村慎です。 AI開発の「指示忘れ」、「考慮漏れ」による手戻り多くないですか？ この記事では、AIに「仕様書」を書かせ、「厳しくレビューさせる」新しいワークフローを紹介します。 AIに「仕様書」をレビューさせる新しい開発フロー ステップ1：人間が「初期指示書」を作る (initial_instruction.md) ステップ2：AIが「仕様書草案」を作る ステップ3：【最重要】AIに「自己レビュー」させて、精度を上げさせる ステップ4：確定版仕様書から「タスク分解」と「実装」へ 具体例：「ToDoアプリ[API]」を作ってみる 1. AIによる …

はじめに はじめまして。バックエンドエンジニアの山本です。 私は先月入社したばかりですが、クロスマートでは業務委託として3年前から開発業務をしておりました。 何故ずっと業務委託だったのにこのタイミングで入社を決めたのか？、そのリアルな事情をオープンに書いていこうと思います。 現在転職活動中の方や、業務委託から正社員への転向を考えている方の参考になれば幸いです。 私の状況 私は、新卒では独立系SIerに入社し、5年半働いていました。 新卒で入社した会社には大変お世話になり、今でも沢山の方と交流があるくらいです。 ただ、もっと色んな現場を経験したいと思い、フリーに転向し、色んな会社さんと、時には掛…

はじめに 弊社クロスマートの3つのバリューの中に「現場」というものが含まれています。 クロスマートの3つのバリュー この「現場」というバリューには、従業員一人一人がお客様と向き合い、業務の解像度を上げることが、良いプロダクトを提供するために大切であるというメッセージが込められています。 この現場第一主義の指針はもちろん我々エンジニアも例外ではありません。 実際に、弊社のエンジニアは結構な頻度でお客様の現場に訪問させていただいております。 とはいえ、普段PCとばかり向き合っている私としては、お客様の現場に同行することは少しハードルが高く感じるものです。 たとえば、正直にいうと お客さんの現場に行…

はじめに ssosyncとは 解決したい課題 実装手順 事前設定の手順 1. Identity Centerの設定 2. GWSでSAMLアプリケーションを作成 3. GCPプロジェクトの準備 4. Google Workspaceでのドメイン全体の委任設定 切替時に実施した手順 ① アイデンティティソースの変更 ② Identity CenterでSCIMを有効化 ③ ssosyncの作成・設定 ④ グループへの許可セット割り当て 実現できた運用フローの改善 従来の運用フロー 導入後の運用フロー 改善効果 まとめ はじめに クロスマートでSREをしている長野(ながの)と申します。 今回はAW…

比較用アプリの実装 共通のフロントエンド構造 Electron実装 Tauri実装 Wails実装 実装の違いまとめ パフォーマンス比較 バンドルサイズ（概算） 起動時間の傾向 AIに出してもらった開発体験（DX）の違い Electron Tauri Wails AIに出してもらった機能面の比較 ファイルシステムアクセス ネイティブ機能 クロスプラットフォーム対応 開発・配布機能 実装してみての所感 まとめ 最後に おひさしぶりです！バックエンドエンジニアの宮崎です。 以前の記事でElectron + SvelteKitでデスクトップアプリを作った話を書かせていただきましたが、 今回はその簡単…

はじめに Q. LLM Week中の開発効率は普段よりも高かったですか? Q. 「自分で書いた方が早い」と思ったコードの変更行数の割合はどのくらいですか? Q. LLM Weekで一番使ったコーディングエージェントを教えてください Q. コーディングエージェントでの開発に向いている・向いていないと思った開発内容を教えてください 向いている領域 向いていない領域 LLM Firstな開発にするために 最後に はじめに こんにちは。クロスマートで開発部部長をしている上田です。 前回の佐藤さんの記事に書かれていたとおり、7月末にクロスマート社内でLLM Weekが開催されました。 フロントエンド・バ…