Mercari Engineering Blog

We're the software engineers behind Mercari. Check out our blog to see the tech that powers our marketplace.

セキュリティの「衛り」の全国大会 Hardening II SU に出場してきたよ

こんにちは、メルペイでバックエンドエンジニアをしている id:koemu です。

去る2019/07/04〜05の間、私を含めたメルカリグループ3名のエンジニアが、セキュリティの「衛り」の全国大会 Hardening II SU に参加してきましたので、報告します。

f:id:koemu:20190710124836j:plain:w480

TL;DR

  • セキュリティの「衛り」の技術を競う大会に参加してきた
  • 自走できるレベルの高いメンバーが集まりOSSをはじめ成果物もできた
  • 惨敗だったがセキュリティの衛りの知見をたくさん得ることができた
続きを読む

Jamboardを使って楽しいデイリースクラムをするよ

はじめまして。メルカリの自動化&品質保証グループ(Automation & QA Group:通称AQA)の ____rina____です。

現在、福岡の開発拠点でQAとプロダクトチームのスクラムマスターをしています。

わたしたちのチームでは、デイリースクラムにJamboardを利用しています。

続きを読む

React-axe で React アプリケーションのアクセシビリティを向上させる

React-axe で React アプリケーションのアクセシビリティを向上させる

こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。

この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々なテストできるようになったりと、フロントエンド界隈におけるアクセシビリティへの関心の高まりを感じます。

本記事では React アプリケーションのアクセシビリティをチェックするためのライブラリである React-axe と、その中心技術である axe-core を応用した様々なツールをご紹介します

React-axe とは

React-axe は React アプリケーションのアクセシビリティをチェックするためのツールです。チェックの結果は Chrome DevTools に表示され、開発中にアクセシビリティの問題に気づけます。React-axe は Deque Systems, Inc. によって開発されている axe-core をアクセシビリティ確認の仕組みとして使用しています。チェックできるアクセシビリティの一覧は axe-core のリポジトリ から確認できます。

導入方法は簡単で、次のように axeReactReactDOM を与えてあげるだけです[^1]。開発環境でのみ結果を確認したいので dynamic import でライブラリをインポートしています。

if (process.env.NODE_ENV !== "production") {
  import("react-axe").then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById("root"));
  });
} else {
  ReactDOM.render(<App />, document.getElementById("root"));
}

今回は WebView で実装されているメルカリの取引ページ(下の画像のような画面)を React-axe を使用して確認してみます。

"取引画面上部のスクリーンショット""取引画面下部のスクリーンショット"
取引画面のスクリーンショット

続きを読む

Google Kubernetes Engine上のGoアプリケーションでのHTTPリクエストを行う方法

この記事はMERPAY TECH OPENNESS MONTHの最後の記事です。

こんにちは、メルペイのバックエンドエンジニアの@gia.nguyenです。 私は第3回のGopher道場を卒業してから2018年12月に入社しました。

他の記事にも記載されましたが、メルペイのバックエンドは、Google Kubernetes Engine(以下、GKE)を使用して、マイクロサービスアーキテクチャを採用した多数のマイクロサービスから構成されています。マイクロサービスは主にGo言語を使って、開発しています。マイクロサービス間のコミュニケーションはgRPCでやり取りしていますが、外部サービスに対してはほとんどHTTPで通信を行っています。本記事はGKE上のGoアプリケーションでHTTPリクエストを投げる際、いくつか工夫した点を紹介したいと思います。

TL;DR

  • httptraceはデバッグに役立つので使いましょう
  • GKEのDNSが不安定なのでdnscacheを使いましょう
  • サーバーがHTTP/2に対応すれば、Goのクライアントはhttp2.Transportを使うので意識しておいたほうがいいです
  • http2.Transportを使うならGo 1.12以上を使いましょう
  • HTTP/2のMAX_CONCURRENT_STREAMSの設定を上げられなければ、複数のHTTPクライアントか一定のコネクション数を維持するプールを使えば、パフォーマンスがより良くなります
続きを読む