株式会社ZOZO

【TECH BLOG】WEAR Webフロントエンドの自動テスト構成 2023

こんにちは。WEAR Webフロントエンドチームの冨川 (@ssssota) です。私たちのチームでは普段WEARのWebフロントエンド全般の開発から運用までを行なっています。また、あと半年ほどで10年になるVBScript+jQuery環境からNext.js/React環境へのリプレイスを進めています。リプレイスの詳細は弊チームの藤井が書いた記事をご覧ください。本記事では、WEARのWebリプレイス環境における自動テストの構成について紹介します。自動テストの構成を悩んでいる方の決断の一助になれば幸いです。はじめに前提構成の決定と判断QAチームによるE2EテストPlaywrightによる...

【TECH BLOG】ベースラインプロファイル導入によるアプリのパフォーマンス改善と測定方法

はじめにこんにちは、ブランドソリューション開発本部フロントエンド部WEAR Androidブロックの安土琢朗です。普段はファッションコーディネートアプリWEARのAndroidアプリを開発しています。WEARではすでにXMLで書かれたレイアウトをJetpack Composeにリファクタリングする作業を進めています。作業を進める中で、Jetpack ComposeのLazyColumn利用箇所でスクロールが以前よりスムーズに動かない、初回起動時にスクロールが遅いなどのパフォーマンス問題に直面しました。本投稿では、最適なパフォーマンスを実現する方法の1つであるベースラインプロファイルの導入...

【TECH BLOG】CompositionalLayoutを用いた横スクロールのレイアウト改修で直面した問題と解決方法

こんにちは。WEAR部iOSチームの小野寺です。先日CollectionViewで実装しているトップページを改修しました。改修はトップページに並べていたコンテンツを1つにまとめて、横スクロール（手動 / 自動）によってコンテンツを切り替え可能にしました。横スクロールによってコンテンツを切り替える仕様なので、CompositionalLayoutで実装しました。上記の方針で進めていく中で、困難な実装に直面したので紹介します。セクション全体への装飾最初に直面した問題が、セクション全体に対するViewの装飾です。今回画像の赤枠部分について、次のように改修が必要になりました。トップページ改修の要...

ゼロからはじめたUXリサーチ

この記事はプロダクトマネージャー Advent Calendar 8 日目の記事です。こんにちは。ブランドソリューションプロダクト戦略部のルナ（@jeuxd1eau）です🌙私はファッションコーディネートアプリ「WEAR」のプロダクトマネージャーの1人として、新機能の企画からリリースまでのプロセスを主に担っています。現在WEARのPMチームでは、Google Analyticsなどの定量データと、インタビューやアンケートなどの定性データを併せて活用しながらサービスに向き合っています。しかし1年ほど前までは、定量データの活用は当たり前だったものの、定性データについては収集し管理する担当者がい...

実例から知る！ZOZOのAIプロダクトマネージャーの仕事

はじめにこんにちは！ML・データ部AI R&D推進ブロックの川田です。AI R&D推進ブロックは、AIプロダクトの企画とその推進を行うことでZOZOのサービス価値を向上させることをミッションとするチームです。先日は、ZHDグループのAI人材育成コミュニティー「ZAIアカデミア」について記事を公開しました。そんなAI R&D推進ブロックの社内での職種名は「AIプロダクトマネージャー（PdM）」。ZOZOの「AIプロダクトマネージャー」とはどんな役割で、どういった仕事をしているのかご紹介します！AIプロダクトマネージャーのジョブ定義と役割ジョブ定義ZOZOにおけるAIプロダクトマネージャーの...

10年目を迎える「WEAR」、ZOZOのOMO「ZOZOMO」。開発責任者が語るその魅力

今月、運営開始から10年目を迎える日本最大級のファッションコーディネートアプリ「WEAR」と、昨年11月に開始したOMOプラットフォームの新規事業「ZOZOMO」。2つのプロダクトの開発責任者を務める長尾がエンジニア組織を進化させる中で、部署独自にマトリクス組織を構築するなどの新たな取り組みとともに、それぞれの事業の魅力について語ります。【プロフィール】長尾 優毅（ブランドソリューション開発本部本部長 / 2020年中途入社）食品EC企業や国内製薬メーカーでシステムの開発に携わった後、2020年6月に株式会社ZOZOテクノロジーズ（現株式会社ZOZO）に入社。WEAR/生産プラットフォー...

【TECH BLOG】WEARにおけるSLOを用いた信頼性改善の取り組み

こんにちは、WEAR部バックエンドブロックの小山とSREブロックの繁谷です。WEARでは日々システムの信頼性を向上させるため改善に取り組んでいます。今回はその中でもSLOに基づいた改善について紹介いたします。WEARリプレイスの歩みWEARでは2019年から本格的にリプレイスを開始しましたが、当初は専属のSREはおらずインフラ構築など緊急度の高いものをバックエンドのエンジニアや、プロダクト横断のSREが担っていました。WEARのSREとして活動に割ける時間も短かったためSLI(Service Level Indicator)1やSLO(Service Level Objective)2の...

【TECH BLOG】UICollectionViewのCompositional Layoutsでセル全体にドロップシャドウをつける方法

はじめにこんにちは、フロントエンド部WEARiOSブロックの西山です。iOS 13から登場したCompositional Layoutsを使うことで、App Storeのような複雑なUIが簡単に実現できるようになりました。登場前は、UICollectionView in UICollectionViewまたは、UIStackView + UIScrollView in UICollectionViewで頑張って実現していたところをUICollectionView1つで実現できます。一方で、登場前の方法では簡単に出来ていたカスタマイズをCompositional Layoutsで実現しよう...

【TECH BLOG】動画の音声を任意の別データに差し替えてエンコードする方法

こんにちは。WEAR部Androidチームの御立田です。先日、WEARチームでコーディネート動画を投稿できる機能を追加しました。その際、WEARが提供する音楽リストから、ユーザーが好きな音楽を選択する機能を実装する必要がありました。今回は、動画ファイルの音楽データの変更をAndroidの端末上で行ったのでそこで得られた知見を共有したいと思います。動画ファイル、音楽ファイルのフォーマットや、エンコード、デコードの設定は多岐にわたります。本投稿では、シンプルなパターンでやや抽象的に説明し、この投稿を読んだ人が「Androidにおいて動画の変換する時に何を調べれば良いのかがわかるようになる」を...

【TECH BLOG】WEARにおけるKubernetes導入と改善の歩み

はじめにこんにちは。ブランドソリューション開発本部　WEAR部　SREの和田（@wadason）です。普段は「ファッションコーディネートアプリ WEAR」のSREとしてクラウドの運用やリプレイスをおこなっています。WEARはサービス開始から10年が経ち、クラウドやオンプレミスを含む大小様々なシステムが稼働しています。アプリケーションを動かすための基盤にはAmazon ECSのようなコンテナを前提としたものから、オンプレミスのAPIやBatchを動かすIISまで幅広く扱っています。そうした中で、約1年前にSREチームが結成され、技術負債の脱却やクラウドを中心としたインフラの運用を行なってき...

【TECH BLOG】WEARに動画投稿を実装した際にハマった事とその解決策

はじめにこんにちは。WEAR部iOSチームの坂倉です。先日、WEARにコーディネート動画の投稿機能を実装しました。iOSで動画を扱うにはAVFoundationを使う必要がありますが、原因がわかりにくいエラーを引き起こすことが多々あり、実装になかなか苦労しました。この記事では、動画投稿の開発中に起きた問題とその解決法をお伝えします。WEARの動画投稿には以下の機能が存在します。動画を選択する動画をプレビューする動画に付与する音楽を選択する動画に付与する音楽の範囲を指定してトリミングする動画に関する情報を付与する動画と音楽をミックスしてエンコードする完成した動画を投稿するこれらを実装する中...

【TECH BLOG】WorkManagerを使ったバックグラウンドでのAPI呼び出し

はじめにこんにちは。WEAR部Androidチームの半澤です。普段は、「ファッションコーディネートアプリ WEAR」のAndroidアプリ開発を担当しております。今回は、WorkManagerを使ったバックグラウンドでのAPI呼び出しについて紹介いたします。WorkManagerは時間がかかる処理や永続的な処理などをバックグラウンドで実行するために推奨されるソリューションです。例えばサイズの大きいデータのアップロード処理や定期的なタスクをバックグラウンドで実行したいといったケースで利用されます。背景「WorkManagerを使ってアプリのプロセスの状況に依存せずAPI通信をしたい」という...

【TECH BLOG】WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行

はじめにこんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。なぜリプレイスするのかWEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。リプレイス前の環境リプレイス前の環境はオ...

【インタビュー】データ分析とエンジニアリングで「WEAR」の成長を目指す。プロダクト愛溢れる、ZOZOのデータサイエンティスト

【プロフィール】松井 宏史（技術本部 データサイエンス部 データサイエンス1 / 2019年新卒入社）2019年に株式会社スタートトゥデイテクノロジーズ（現 株式会社ZOZO）に入社し、ZOZO研究所で機械学習の研究開発を行う。現在は、データサイエンス部でWEARをはじめとするプロダクト改善のための研究開発を担当。社内での愛称は「WEAR大好き ぴろし」。ファッションに対する価値観を180度転換してくれた、「WEAR」との出会い就職活動では「プログラミングと数学を活かして社会に貢献できる」、「ユーザーから愛される事業会社」という、この二つを叶えられる会社を探し、考え方やプロダクトに共感し...

【インタビュー】技術を磨き、成長を止めない。入社1年目のエンジニアが感じるZOZOでの自分らしい働き方。

【プロフィール】近 海斗（メディアプラットフォーム本部 WEAR部 サービス開発ブロック／2021年新卒入社）2021年に株式会社ZOZOテクノロジーズ（現株式会社ZOZO）に新卒として入社。現在は新潟の実家でリモートワークをしながらファッションコーディネートアプリ「WEAR」の開発業務に携わる。毎日WEARを開くため、トレンドのキーワードやオシャレなユーザー、ファッションに関する知識が日々増えている。ZOZOはとにかく、人も会社も明るいZOZOのサービスは学生時代から利用していて興味もあったのですが、自分の技術レベルで入社できるとは思っておらず、実はもともとは就職先の候補として考えてい...