メルカリShops の技術スタック、その後 | メルカリエンジニアリング
こんにちは。ソウゾウのSoftware Engineer(CTO)の@suguruです。連載：メルカリShops 開発の裏側 Vol.2の1日目を担当させていただきます。 去年、2021年に開始した メルカリShopsの技術スタック についての記事を書きましたが、今回はリリースまでに採用した技術スタックが、半年通してどのようにアップデートしてきたかを共有したいと思います。 ローンチ時に採用した技術が、実際の運用でどのように変遷したのかを共有することで、技術スタックを考える際の何らかの参考になれば幸いです。 monorepo メルカリShops ではサービスに必要なコードを1つに集約する monorepo を採用しています。リリース後半年たってコード量はかなり増えてきましたが、monorepo に対する満足度は非常に高く、うまく機能しています。 サービス全体の見通しが良くなることと、すべての
メルカリレンズβ WebAssembly × AIのプロダクト開発 | メルカリエンジニアリング
この記事は、Mercari Advent Calendar 2021 の22日目の記事です。 こんにちは、メルカリ EdgeAIチームの@tkatoです。私たちのチームでは、クライアントサイドでの機械学習応用について、アルゴリズム開発からプロダクション開発までを担当しています。 12月16日に、メルカリレンズβという新しいプロダクトが公開されました。この記事では、メルカリレンズβを開発するにあたり、Webブラウザ向けに機械学習を用いたUIを開発した経験から得た知見を紹介したいと思います。 メルカリレンズβは、スマホのカメラで商品をかざすだけでメルカリでの取引相場や類似商品などの情報を表示するWebアプリです。いくらで買えるか知りたいときや、出品する値段で迷ったときに、メルカリを使ったことのないお客様でも気軽に使えるアプリを目指しています。 技術的には、機械学習を利用した直感的なUIをクライ
JavaScriptがブラウザでどのように動くのか | メルカリエンジニアリング
実際にコードを用いてスタック領域とヒープ領域の概念を説明します。 person オブジェクトを宣言した時、JavaScript エンジンはオブジェクトの実体をヒープ領域にメモリ割り当てを行い、ヒープ領域にある実体への参照をスタック領域にメモリ割り当てを行います。 const person = { name: 'Taro', age: 24 }; 次のように新しい変数(newPerson)に再代入をすると参照がコピーされ、newPerson も person もヒープ領域に割り当てられた同じ実体に対する参照を持ちます。 const newPerson = person; Object.assign を使って新しいオブジェクトを生成するのは、参照コピーをしないための方法の一つで、よく使われる手法の1つです。 function getName(person) { return person.na
GitHub上のsensitive dataを削除するための手順と道のり | メルカリエンジニアリング
Advent Calendar day 7 担当の vvakame です。 予告では Apollo Federation Gateway Node.js実装についてポイント解説 としていましたが、社内各所のご協力によりAdvent Calendarの私の担当日に間に合う形で公開できる運びとなりました。そのため告知とは異なりますが GitHub上のsensitive data削除の手順と道のり をお届けしていきたいと思います。 メルペイVPoE hidekによるday 1の記事で振り返りがあったように、今年、弊社ではCodecovのBash Uploaderに係る情報流出という事案が発生しました。当該インシデント対応において、プレスリリースにも記載のある通り、ソースコード上に混入してしまった認証情報や一部個人情報などの機密性の高い情報（sensitive data）について調査を実施し、対応
メルカリShopsのためのWebViewの技術 | メルカリエンジニアリング
こんにちは、ソウゾウのSoftware Engineerの@gentleです。連載：「メルカリShops」プレオープンまでの開発の裏側の6日目を担当いたします。 メルカリShopsは既存のメルカリアプリの中に独立したWebアプリケーションを組み込む形で開発いたしました。本記事では、Webアプリケーションとして作成されたメルカリShopsを、既存のメルカリアプリでWebViewを使って表示する際のアプリとの連携について解説いたします。 メルカリアプリとの連携 メルカリShopsはメルカリアプリ内に組み込まれておりますが、独立したWebアプリケーションとして存在しており、WebViewにてShopsのWebページを表示する形になっています。しかし、単純にアプリ内でWebページを表示しただけでは、アプリとしてのUI/UXを満たせないため、WebViewとアプリとの連携が必要です。 アプリとの連携
メルカリShops のフロントエンド | メルカリエンジニアリング
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
メルカリShops の技術スタックと、その選定理由 | メルカリエンジニアリング
こんにちは。ソウゾウの Software Engineer (CTO) の @suguru です。連載：「メルカリShops」プレオープンまでの開発の裏側の1日目を担当させていただきます。 7月末にメルカリShopsという新しいサービスが公開されました。メルカリShops は、2021年1月にメルカリのグループ会社として設立したソウゾウが新たに立ち上げたサービスです。 この記事では、メルカリShops を作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 monorepo まず最初にプロジェクトをスタートしたときに、サービスのリポジトリを作るのですが、迷わず monorepo による構成を選択しました。monorepo は、システムを構成する複数のコンポーネントの独立性を保ちつつ、全ての構成を1つのリポジトリで管理する手法です。今
Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング
Mercari Advent Calendar 2020の14日目は、Developer Productivity EngineeringのNetworkチーム所属の@catatsuyがお送りします。 今回のエントリーでは画像変換とGoogle社が開発した画像フォーマットであるWebPに関して紹介します。 適切なサムネイル画像のサイズと画質 現在ではiPhoneのRetinaディスプレイのように、実際に画面に表示されるサイズよりも大きなサイズの画像を要求する端末が一般的になりました。 現在のスマートフォンでは画面に表示されるサイズの2倍以上のサイズ（端末によっては3倍に対応しているものもある）の画像を用意しなければ綺麗に表示されません。サムネイル画像の綺麗さはUXに直結しますし、サービスによっては画像の綺麗さがクリック率や売り上げに貢献するケースもあるでしょう。 しかし大きなサイズの画像を
「プログラミング言語Go完全入門」の「完全」公開のお知らせ | メルカリエンジニアリング
メルペイ エキスパートチームの@tenntennです。本稿は Merpay Tech Openness Month の11日目の記事です。 「プログラミング言語Go完全入門」の期間限定公開のお知らせでも書いたように、メルペイでは、社外の方向けにGopher道場という体系的にGoを学べる場を無償で提供してきました。Goの普及を目的にこれまでに8回開催し100人以上の方に参加していただきました。 また、Gopher道場の動画や資料はGopher道場 自習室として誰でも利用できるようになっており、現時点で300名以上の方が利用されています。 Gopher道場の資料のベースになっている「プログラミング言語Go完全入門」は、2020年7月31日までの限定公開になっていましたが、本日より公開期限を撤廃し、完全公開することになりました。 また、本日8月31日から始まる「Online Summer Int
マイクロサービスにおける決済トランザクション管理 | メルカリエンジニアリング
この記事はMERPAY TECH OPENNESS MONTHの15日目の記事です。 こんにちは。メルペイのPayment PlatformチームでPaymentServiceの開発を担当するエンジニアの @foghost です。 メルペイではマイクロサービスのアーキテクチャで決済システムを開発しています。その中でPaymentServiceは決済トランザクション管理の基盤サービスとして、下位層のサービス（外部サービスも含め）が提供する各種決済手段を利用して、上位層のサービス（メルカリ、NFC，コード払いなど）に必要な決済フローを共通APIとして提供しています。PaymentServiceが提供する決済処理に複数のサービスを跨いでお金の動きを正確に管理する必要があるので、作り始めた頃から決済トランザクション管理を最も重要な課題として、サービスを跨いでもデータの整合性が取れる仕組みを作ってき
WebAuthnことはじめ | メルカリエンジニアリング
こんにちは。株式会社メルペイのID Platformチームでエンジニアをしている @nerocrux です。この記事はMERPAY TECH OPENNESS MONTHの12日目の記事です。 はじめに WebAuthnについて 概要 システム構成 登録と認証 登録 認証 Attestation について Attestation検証の概要 AttestationObject のフォーマット AttestationObject の検証 1. AttestationObject のデコード 2. authenticatorData について 3. credentialPublicKey のパース 4. verificationData の準備 5. 証明書フォーマットの変換 6. 署名検証 Assertion について Assertion の検証 1. authenticatorData につ
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) | メルカリエンジニアリング
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、最近私たちが行なっているメルカリWeb版のUIテスト自動化と、その自動テスト環境についてご紹介したいと思います。 メルカリWeb版のUIテスト自動化について UI自動テスト環境に関する課題 Selenium Grid を Azure Kubernetes Service(AKS) 上で構築する Zaleniumを試す Azure Kubernetes Service(AKS)で受け
メルカリの写真検索を支えるバックエンド | メルカリエンジニアリング
メルカリのAI EngineeringでTech Leadを務めている中河です。今回は3/18に正式リリースされた「写真検索機能」を支えるバックエンド・インフラをシステム側からの視点でご紹介します。 写真検索とは 所謂、画像検索機能で商品名を知らなくても画像から商品を検索できる機能の事です。詳しくは下記の公式リリースをご覧ください。 about.mercari.com 基本的な写真検索の仕組みは、Deep Neural Networks (DNN)を使用して商品画像から特徴ベクトルを取得し、取得した特徴ベクトルをApproximate Nearest Neighbor Index(ANN Index)に追加して画像indexを構築。 検索時には同じく商品画像からDNNを介して特徴量ベクトルを取得し、ANN Indexから検索します。 アーキテクチャの概要 Figure1 上記がアーキテクチ
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
マイクロサービスチーム編成のベストプラクティスとメルカリでの構想 - Mercari Engineering Blog
今年もMercari Advent Calendar 2018 が始まりました。初日は @stanaka がお送りします。 メルカリでは創業以来開発してきたPHPのアプリケーションから(主に)Goで実装されたマイクロサービスアーキテクチャへの移行を進めています。これまでにMercari Tech Conferenceやその他のカンファレンスでMicroservice化の意義、移行の方法、基盤となるMicroservice Platformの概要などについて様々な発表をしてきました。 現在、来年からの本格的なマイクロサービスアーキテクチャでの開発に向けて、これまでのサービスの施策ドリブンのチーム編成から、マイクロサービスを軸としたチーム編成に移行しようとしています。 しかし、マイクロサービスアーキテクチャを成功させるためには、各種プラットフォームの機能を揃え、それらを利用したマイクロサービス
ImageFluxを利用した画像配信の最適化〜動的リサイズとWebP変換〜 | メルカリエンジニアリング
SREチームの@cubicdaiyaです。今回はメルカリにおける画像配信とImageFluxを利用した画像の動的なリサイズとWebP変換の導入によってアプリのデータ通信量を大幅に削減した事例について紹介します。 ImageFluxはクラウド画像変換サービスです。URLに画像変換用のパラメータを組み込むことで画像データの拡大・縮小やオーバレイ、フォーマット変換等が実現できます。 メルカリにおける画像データ メルカリのアプリ上で発生するデータ通信の大部分はタイムラインや検索結果に表示される画像データが占めています。種類はいろいろありますが例えば、 商品画像 プロフィール画像 バナー画像 といったものが挙げられます。特に商品画像はデータ量がとにかく多く、毎日百万個単位で増加するほか、タイムラインや検索結果をはじめ、多くの機能で活用されています。 ImageFluxを利用した画像変換でデータの通信
社内の面倒な手作業はZapierにやらせようーーノンプログラマーでも業務自動化ができるツールを導入してみて
社内の面倒な手作業はZapierにやらせようーーノンプログラマーでも業務自動化ができるツールを導入してみて QA Author: tadashi-nemoto0713 これは Mercari Advent Calendar 2017 22日目の記事です。 こんにちは、メルカリのQA-SETチームで自動化をぶりぶりしている tadashi0713 です。 前回は業務自動化の1つとして、Seleniumを使ったブラウザ操作自動化についてご紹介しました。 tech.mercari.com コメントや反応を見ますと、最近はRPA(Robotic Process Automation)をはじめとした業務自動化に関心が高い印象を受けました。 メルカリでは1ヶ月ほど前にZapierというツールをTeam Planで導入しました。 zapier.com このツールを使って、社員がより簡単に業務自動化ができ
モバイル開発に役立つJSデバッグ術 | メルカリエンジニアリング
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
メルカリの今年1年間の機械学習の取り組みとこれから
これはMercari Advent Calendar 2017 の2日目の記事です。 昨日は @stanaka の分散ファイルシステムはブロックチェーンの夢を見るか でした。 今回は@Hmj_kd が、メルカリの機械学習の取り組みや機械学習エンジニアの今年行ってきた活動のいくつかをご紹介したいと思います。 以下、一部にて機械学習をMLと略します。 この1年間で機械学習で取り組んだこと 私が入社したのは2017/01で、社内では二人目の機械学習エンジニアでした。 その当時は speakerdeck.com にあるように、プロダクトにMLに関するものはありませんでした。 現在は、チーム全体でマネージャも含めて約10人ほどの組織になり、活発に実験や開発が行われています。 いくつかを列挙しますと - 商品出品時の価格推定とサジェスト - 一部カテゴリについて商品タグの推定 - 商品出品時のカテゴリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://engineering.mercari.com/entry/2017/12/19/workbox
