Ai Katoの記事一覧

Ai Kato について

印刷のラクスル(https://raksul.com/) の開発を経て、2018年8月より物流マッチングサービスのハコベル(https://hacobell.com/)、主にハコベルコネクトのサーバサイドを担当しています。

社内ハッカソンの意義 〜Raksul Hack Week #2 開催から見えてきたこと〜

こんにちは。ハコベル(物流サービス)チームのサーバサイドエンジニア 加藤です。

このブログでもお伝えしていた第2回社内ハッカソン Raksul Hack Week #2。6月第2週に開催しました。今回は開催のレポートをしつつ、そこから見えてきたものについて書いてみたいと思います。

開催概要と今回のテーマ

2回目となる今回も、Raksul Hack Week #1から基本的な開催概要は変えずに企画しました。

  • 参加者はエンジニア、プロダクトマネージャー、デザイナーとする
  • ハッカソンの期間は1週間とし、期間中はハッカソン100%コミット、普段の開発業務はやらない(※ ただし緊急対応系は最優先で)
  • チーム制とする
  • 最終日に各チームは成果発表する
  • ラクスルの事業、ステークホルダーに関わることであれば何に取り組んでも良い

結果として、4日間の作業期間+1日の発表会&表彰式という日程で、2〜5名の16チームが参加する大イベントとなりました。運営は各事業部から集まったエンジニア・PM・デザイナーの4人で行いました。

そして今回のテーマは、

 

みんなで創る次の世界

〜好きなことから始まる挑戦〜

課題 ✖️チーム✖️技術

 

第一回の開催の後、様々な背景を持ったメンバーが増えて続けているプロダクトチーム。普段は業務に集中していて、視野を広げたり、チームを超えてお互いを知り合う時間が十分にとれないのが現状です。今回は、普段の仕事の範囲を超えて、お客様や社内の課題を共有し、チームと技術の力を使って、次の世界を実現するきっかけにしようという気持ちを込めました。

開催までの取り組み

今年は、以下のように開催2ヶ月前から次ごとにテーマを区切り準備を進めてきました。

  • 4月:アイデア月間
  • 5月:チーミング月間
  • 6月:Raksul Hack Week #2

この期間に、各事業部のビジネスメンバーからお客様の課題、自分たちの業務の課題やこんなのがあれば嬉しいといった声を聞くランチイベント Hack Week Lunch や、チームビルディングイベント Hack Week Pre-event を開催しました。

詳しくは、今年も Raksul Hack Week を開催します! や いよいよRaksul Hack Weekが始まります!をご覧ください。

いよいよ本番

まずは、初日のキックオフ。毎週の全社朝会の後、スケジュールや注意事項の説明を聞き、くじで発表順を決めていざ開始!

キックオフの様子

初日は、それぞれのチームで、4日間をどんな風に進めるか、課題を整理したりプランニングしたりする様子が見受けられました。

ホワイトボードを前にチームでディスカッション

進め方を決めたあとはそれぞれで作業を進めたり、ラクスルでもすっかり定番になった、ペアプロやモブプログラミングを取り入れて進めるチームやユーザ調査に出かけるチームもありました。

モブプロで作業を進めるチーム

連日、いつもより遅くまで作業を続ける姿が見られました。すごいコミットメントですね。

バイキングデスクで仲良く作業する2人

ベトナムからは今回は2チームが参加。

作戦を練り直すベトナムチームのメンバー

発表会

発表会は、参加メンバーはもちろん、弁理士の先生や、ボードメンバー、ビジネスメンバーも参加して行われました。持ち時間は、各チーム7分。お昼を挟んでの2部構成で行いました。

ネットワークがつながりにくいというトラブルがある中、それぞれ、デモまで行って聞き応えのある発表となりました。1週間の熱量が発表にもこもります。

チームみんなで発表

技術的にも、AI、IoT、モバイルアプリやフロント技術を使ったものや、組み合わせ方に工夫を凝らしたものなど、様々な取り組みが発表されました。どのチームも課題設定が素晴らしく、ボードメンバーからも賞賛の声がありました。

発表を聞き入るCEO 松本とCTO 泉

投票&表彰式

前回は、シールをボードに貼る形式で行われましたが、今回は集計のことも考えて Google Form を利用。一人2チームを選ぶ形式で投票を行いました。また、どこが素晴らしいと思って投票したのか、投票コメントも記入してもらうようにし、翌週に全チームにフィードバックしました。

受賞したチームや受賞は逃したものの評価が高かったチームを3チームほどご紹介します。

技術負債の可視化ツールに取り組んだのは、以前からこのブログにも度々投稿している、エンジニアマネージャーの二串とチームメンバー。ラクスルは以前から技術負債解消に果敢に取り組んでいますが、その取り組みをダイエットに見立てて、楽しく可視化しようとしたアイデアがみんなの心を掴みました。

技術負債可視化チーム

そして今回一位は、古参の岡田と新卒からラクスルにジョインしている3人のメンバーのチームでした。

印刷マッチングプラットフォームであるラクスル。その重要なテーマの1つである、発注周りの改善提案に取り組みました。

ビジネスメンバーが思いつかなかった課題にテクノロジーを使って切り込み、見事な改善提案で、みんなをあっと言わせました。

リーダーシップをとったのは、3年目の岸野。「以前から個人的にやるべきだと思っていた課題。Hack Week という機会に取り組むことができました。」とコメント。ジョブローテーションをしながら、確実に成長している3人の今後がますます楽しみになりました。

CEO松本と1位のチーム

ちなみに私のチームは、CEO賞を受賞しました。ハコベル(物流サービス)の技術スタックを横展開し、他事業で数年前からの課題を解決するWebサービスとアプリを開発しました。運営しつつも、今回のテーマ「みんなで創る次の世界」を体現したいと思い、CTOの泉、アプリエンジニアのライアン、デザイナーの武末とともに、トライアル運用を目指して取り組みました。

未来を見つめるCEO賞受賞チーム

ここで紹介しきれませんが、本当にどのチームの成果も素晴らしく、今後どのようにするのかは継続議論がされることになりました。

懇親会で締めくくり

みんな全力投球したHack Weekを終えての懇親会は、それぞれ取り組んだテーマの話で盛り上がりました。また、期間中のエピソードもたくさん聞くことができました。

懇親会で挨拶するCTO

Raksul Hack Week #2 開催から見えてきたもの

Hack Week後のアンケートを通じて、参加メンバーからたくさんの声をいただきました。

「Hack Week Lunchもラクスル自体の理解度解像度が上がり良かった」

「普段あまり関わりの無いメンバーと開発でき、充実していた」

「ゼロからのプロダクトに少人数で考えて向かうという、実は普段あまりチャンスが無いようなことができたことにとても価値があったと思う」

「新しい技術にトライできて勉強になったし楽しかった」

「自分自身の課題も見えたり、メンバーとの交流できて、良い経験が得られたなと思った」

 

これらの声や運営している中での気づきから、ラクスルにおける社内ハッカソンの意義を私なりにまとめてみました。

  1. 学びの機会
    – 技術だけでなく、ビジネス課題に視野を広げる
    – 課題設定、プランニング、ゼロイチの開発を自分たちで行う力を養う(広義の開発力の向上)
  2. コミュニケーションの機会
    – 成長しているエンジニア組織でのチームを超えたコミュニケーションの促進
    – お互いを応援・賞賛しあう文化づくり
  3. 挑戦の機会
    – 新しい技術への挑戦
    – 結果が見えないテーマに挑戦(失敗できる機会)
  4. ビジョンの実現の加速の機会
    – 動くものを見せることで未着手のテーマに本格的に取組むきっかけにする

Hack Week はさながら冒険の旅のようでした。出発前の戸惑いあったり、チームで課題を乗り切る場面があったり。翌週出会ったみんなは、心なしか一回り力強くなったように感じました。

表彰式後の集合写真。何のポーズかな??

1週間業務を止めて行う社内ハッカソンの開催は、それなりの投資。決定するのにも勇気が要りますし、運営チームや参加者を含めて準備もあります。でも、上記にまとめたように、今回それ以上に意義のあるイベントだと思いました。

エンジニア組織の活性化をお考えの方は、社内ハッカソンに取り組んでみてはいかがでしょうか。

ラクスルでは事業をつくっていきたいエンジニアを絶賛募集しています!

自分の書くコードで、印刷・広告・物流といった大きな産業の課題を解決するようなインパクトを作り出してみませんか。技術・業界・業務など多角的に理解を深めながら、自らアイデアを出し、主体的に事業をつくっていく。そんな働き方をしたい方をお待ちしています!

ハコベルチームはHack Week後から五反田の新オフィスで勤務。新オフィスにもぜひ遊びに来てください!

今年も Raksul Hack Week を開催します!

こんにちは。ハコベル(物流サービス)チームの加藤です。

今年も社内ハッカソンイベントの開催が決まり、準備が進んでいるのでその様子をご紹介したいと思います。

Raksul Hack Week #1

昨年9月に開催した社内ハッカソンイベント Raksul Hack Week #1

こんな概要で、オフィス内で4日間の日程で開催しました。

  • 参加者はエンジニア、プロダクトマネージャー、デザイナーとする
  • ハッカソンの期間は1週間とし、期間中はハッカソン100%コミット、普段の開発業務はやらない(※ ただし緊急対応系は最優先で)
  • チーム制とする
  • 最終日に各チームは成果発表する
  • ラクスルの事業、ステークホルダーに関わることであれば何に取り組んでも良い

(詳しくは 1週間やる、楽しい社内ハッカソンの作り方 をご覧ください)

Raksul Hack Week #1

いつもの業務から離れたテーマを行ったり、いつもとは違う技術を使って開発したり、他のチームのメンバーと仕事したり。それぞれのチームの発表もお互いに刺激になり、とても好評なイベントとなりました。

さらに、この中からプロジェクトとして採用されたり、実際に世に出たりしたものもあります。

ラクスルデザインブログもその一つ。バナー、LPから、各サービスのプロダクトデザイン、イベントブースのデザイン、RubyKaigi などのノベルティなど、オールマイティに活躍するラクスルの優秀なデザイナーが綴るブログとなっています。ぜひご覧ください。

どうなるかわからない不安を乗り越えて

さて、参加メンバーにも経営陣にも好評だった第1回を受けて、今年もめでたくRaksul Hack Week を開催することになりました。

今回の開催にあたっては運営メンバーを一新。UXデザイナーで入社した新卒2年目のロビンが手をあげてリーダーを務めます。印刷・広告・物流の各チームからメンバーが集まり、前回の運営メンバーのアドバイスをもらいないがら、週一回のミーティングをベースに準備を進めることにしました。

開催日程は、6月中旬の1週間。会社が成長しているので、参加メンバーも増加。2回目で大枠の進め方が見えているとはいえ、運営メンバーの中には前回まだ入社していなかったメンバーもいるのでどう進めるのか不安も出てきました。まずは、”Wednesday Raksul” という社内の技術勉強会中にみんなに前回の参加のJourney Map を書いてもらって、運営メンバーで共有するところから始めました。

とあるメンバーの Journey Map (イベント開催前)

とあるメンバーのJourney Map (イベント開催中)

第1回目は最終的にとても楽しく刺激になるイベントだったのですが、開催前には「やることを決められるだろうか」「チームメンバーを集められるだろうか」といった不安があったことが見えてきました。新しく入社したメンバーからも同じような声があがったので、なるべくその2つの課題のサポートができるばと思いながら進めることにしました。

Raksul Hack Week #2 のテーマは…

さてそんな中から生まれてきた、今年のRaksul Hack Week #2のテーマは

 

みんなで創る次の世界

〜好きなことから始まる挑戦〜

課題 ✖️チーム✖️技術

 

事業部ごとに様々な背景を持ったメンバーが増えていたり、新卒メンバー4人は全員国籍が違うというほどダイバーシティーに力を入れていたりする現在のラクスル。

そんな中でラクスルの「仕組みを変えれば世界はもっと良くなる」というビジョンを実現する一つの手段として、次の世界をみんなの力を使って実現できるようなきっかけになるようなイベントにしたいという想いが込められています。

新しい試み Hack Week Lunch

Journey Map から見えてきたことや、今年のテーマを踏まえ、開催までの期間を以下のように区切りイベントを開催したり案内を出したりすることにしました。

  • 4月:アイデア月間
  • 5月:チーミング月間
  • 6月:Raksul Hack Week #2

4月から5月にかけては、各事業部のビジネスメンバーからお客様の課題、自分たちの業務の課題やこんなのがあれば嬉しいといった声を聞くランチイベント Hack Week Lunch を実施しました。

ディスカッションの内容をホワイトボードに記録。その場のディスカッションを盛り上げたり、その場でどんな話題が出たのか参加していないメンバーにも共有していきました。

Hack Week Lunch

さらにアイデアを共有するためのSlackチャンネル #hack_week_ideas を用意して、Hack Week に直接参加しないビジネスメンバーとエンジニア/デザイナー/PMがアイデアを出し合う場をオンライン上でも作りました。

#hack_week_ideas チャンネル

部門を超えて課題やアイデアを交換したりする場になってきて、次のステップの本質的な価値提供の話題も上ったりしています。このチャンネルを通年運用したいという声もありました。

開催まで1ヶ月弱

いよいよ開催まで1ヶ月弱となってきました。5月はチーミング月間。「チームメンバーを見つけられるだろうか」という声に少しでもお答えしようと、カジュアルなプレイベントを実施する予定です。

今年はどんなチームや取り組みが生まれるのでしょうか。意外な組み合わせが、面白い結果を生んだりすることもあります。偶然の流れも大切にしながら、Raksul Hack Week #2 を楽しんでいきたいと思います。

 

ラクスルでは事業をつくっていきたいエンジニアを絶賛募集しています!

自分の書くコードで、印刷・広告・物流といった大きな産業の課題を解決するようなインパクトを作り出してみませんか。技術・業界・業務など多角的に理解を深めながら、自らアイデアを出し、主体的に事業家人材と一緒に事業をつくっていく。そんな働き方をしたい方をお待ちしています!

ハコベルコネクトをリリースしました!

サーバサイドエンジニアの加藤です。
昨年8月に印刷から運送マッチングサービスのハコベルのチームに異動し、ハコベルコネクトの開発を進めてきました。

ハコベルコネクトとは

現在の物流業界における最大の課題はドライバー不足。ハコベルチームでは、現場の課題を調査し、その原因を探ってきました。見えてきたのは、複数の運送会社によって仕事が行われていることで、システム化が進まず紙・電話・FAXなどアナログで生産性を上げにくい現場環境でした。

ハコベルコネクトは、この情報断絶を解決すべく、大手物流荷主、一般貨物事業者など運送会社を自由度高くつなぐ物流プラットフォームを目指しています。

先月 1月24日に記者発表をし、日経新聞やTechCrunchにも取り上げられました。弊社CTOの泉がスマホのGoogle Chromeの新規タブで出てきたとのことで、社内でもちょっとした話題になりました。

今までも提供してきたサービスは、ハコベルカーゴ※に名称変更。これからもラストワンマイル向けのマッチングサービスを提供していきます。

仕事をする人に心地よい体験を

ハコベルコネクトは、PMやデザイナー・エンジニアが現場に足を運び、MVPを開発、実証実験を重ねて、徐々にその姿を明らかにしてできてきたプロダクトです。いくつもの運送会社の事業所に出向き、たくさんの方々にインタビューさせていただいたり、トラックに同乗させていただいたり。仕事をする人がどんな課題と向き合っているのか。様々なプロセスを経て、方向性が定まってきました。

ドライバーアプリイメージ

 

ハコベルコネクトという名前もその中で生まれてきました。SNSのように、会社と会社がつながりスムーズに情報のやりとりができることで、快適に仕事が出来るようにという想いが込められています。

ハコベルコネクトイメージ

技術負債の芽を最低限に ー今しかないでしょ!ー

さて、プロダクトとしてのリリースに向け、エンジニアとしてはどんなチャレンジがあったでしょうか。

  • 実証実験向けに急いで作られた側面があったため、既に技術負債気味なところがある
  • 業界独自の業務をモデリングしているため、キャッチアップしにくい
  • よくある機能でも複雑度が高く、要件の不整合が起きて開発が進みにくい

ハコベルチームには、私を含めラクスルの開発に関わってきたメンバーもいます。

「そうだ、ラクスルを作り直そう!」という投稿や「生まれ変わらNight -技術的負債からの一発逆転-」というイベントでご紹介させて頂いた通り、ラクスルは技術負債の課題に向き合ってきました。

(ちなみにまだまだ先はありますが、経営陣の理解もあり、ラクスルの技術負債の解消は着々と進んでいます。)

その教訓を活かして、ハコベルコネクトでは、リリース前に負債の芽の解消にも時間を使ってきました。リリース前ならば、ユーザー影響を気にせずにあらかじめアーキテクチャの整備を進めることが出来ます。「今しかないでしょ!」を合言葉に、気なっていたところはどんどん書き直しました。

ただし、特定業界向けのSaaSというサービスの成長特性を考えて、最初からドメイン分割やマイクロサービスを採用することはしていません。ラクスルで蓄積してきているベストプラクティスを取り入れ、まずはRails アプリケーションとしての Rail にきれいに乗るというところに集中しました。

フロントは、ラクスルの他のプロダクトでも採用しているVue.jsを使い、実証実験後にUIをフルリニューアル。Web APIが必要だったため、コントローラやサービスは約80%を書き換えました。

Web APIの開発中には、GraphQLが話題になったり、gRPC-Webが正式リリースになったりしたタイミングで、チーム内でGraphQLのPOCも行なったりしていたのですが、開発の状況を考慮して今回はオーソドックスにRESTful APIで開発していくことにしました。

フロントメンバーとのコミュニケーションやAPI エンドポイントの可視化のため、API仕様はSwaggerで記述することにしています。

チームでプロダクトを開発する ーペア&モブプロ、デザインスタジオー

先ほども書いた通り、ハコベルコネクトは、業界独自の業務をモデリングしているためキャッチアップしにくくチームの生産性がなかなか上がりにくい状態でした。

6ヶ月間でチームも倍増。新メンバーのキャッチアップスピードをあげたり、モチベーションを保ちつつ機能開発スピードを上げるのが重要課題になっていました。

そのため、複数人でコーディングするモブプログラミングやペアプログラミングを取り入れて、難しいドメイン知識を共有しつつ開発を進めたり、モチベーションが上がりにくい機能開発をわいわいと議論しながら進めました。

モブプログラミング用のスペースも導入され、今ではハコベルだけでなく他のチームで取り入れています。

モブプログラミングの様子

また、ラクスルの他のチームで行なっていた、コラボレーティブデザインの手法である「デザインスタジオ」も取り入れました。機能に対して色々なアイデアが出るのはもちろん、デザイナーも含めてこれから作る機能のデータ構造を共有したり、機能の背景を理解するのに役に立っています。

ハコベルチームには、運送業界出身のメンバーもいます。要件がわからない時はすぐに話を聞けるのも、チームで開発を進める上ですごく助けになりました。

新メンバー募集中です

さて、ハコベルコネクトはリリースしましたが、私たちの毎日を支えてくれている物流の現場には課題がたくさんあります。課題を解決すべく、ハコベルコネクトも成長させていきたいと思っています。

「仕組みを変えれば、世界はもっとよくなる」

エンジニアリングの力で世界を変えたいフロントエンドエンジニア、サーバサイドエンジニアを絶賛募集中です。興味を持たれた方は是非一度オフィスに遊びにきてください!

※ 2019/3/4 ハコベルマッチングからハコベルカーゴに再名称変更したためブランド画像更新しました。

そうだ スピードチェック入稿のテストを自動化しよう

ラクスルのサーバサイドエンジニア 加藤です。

今回はスピードチェック入稿(テスト対象が印刷用ファイルの場合)の自動テストについて書いてみたいと思います。

再びスピードチェック入稿とは

チラシや名刺などの印刷をインターネットで注文したことのある方はいらっしゃいますか。

印刷したいものを選んで購入し、自分で用意した印刷データをアップロードして待つと、チラシや名刺などが届きます。通常の通販サイトと違うのは、自分で印刷したいデータを用意し、アップロードする作業です。さらに入稿データはラクスルでチェックし、印刷に適した形式に変換されます。

ラクスルでは、昨年8月末にそれまでオペレータが手動で行ってきたこの工程を自動化、スピードチェック入稿をリリースしました。それまで、1日以上かかってしまうこともあったデータチェックが、その場で完了。印刷物のお届けまでの日数が想定よりかかってしまうということもなくなり、多くのお客様に使われるようになりました。

リリースまでの過程は、スピードチェック入稿リリース秘話でご紹介させていただきました。

スピードチェック入稿のその後

さて、スピードチェック入稿は、その後もどんどん進化してきました。

1. 対応商品の拡大
最初は、チラシ・フライヤーと名刺だけだった対応商品に、ポスター/ポストカード/カード/チラシ折加工/折パンフレットが加わりました。

2. 入稿ファイル形式の追加
入稿ファイル形式も最初はPDFのみでしたが、ai/jpg/png/tiffでも入稿できるようになりました。また、ラクスルで提供しているWEBブラウザから利用できる無料のデザインソフト「オンラインデザイン」で作成していただいたデータも入稿することができます。

3. UXの改善
面裏の入稿原稿向き、折の開き向きなどを実際の印刷物により近い形でご確認していただくために、仕上がりプレビューが生まれました。実際に、ひっくり返したり、開いたり閉じたりして仕上がりを確認することができます。

折加工商品の仕上がりプレビュー

さて、様々な機能追加があると、大変なのがテストです。

ファイルの変換が入るために、テストを自動化しようにも、通常のWebテストのフレームワークだけでは対応できません。悩んでいるうちにも開発は進み、リリースのたびにプロジェクトメンバーがかなりの時間をかけて、データを手動でチェックしてテストをしていました。また、テストの実施もれが発生してしまうことがありました。これでは、チームとして自信を持って開発・リリースすることができません。

テストを自動化するぞ!

なんとかしなきゃとディスカッションしていたところ、「正常リリースで生成された印刷データと変換方法に変更を加えた後に生成した印刷データを、画像に変換して比較したらいいのではないか」というアイデアと、実際にImageMagicのcompareコマンドで検証結果がチーム内でシェアされました。

印刷データ画像

差分なし

差分あり

変換方法を変えて差分ができた場合は、差分箇所が赤く表示されます。これなら、一目で問題に気づけそうです!

このアイデアをとっかかりに、さらに印刷データのファイルに関してテストしたい項目を整理してみました。

1. ファイルの規格、各BOX(*)のサイズ、カラーが注文情報と比較して正しいこと
2. 問題のあるファイルに対して正しくエラーが返されていること
3. 変更前後の印刷データの画像差分がないこと、もしくは差分が妥当であると確認できること

* ドキュメントの用紙サイズ、印刷用の裁ち落としや仕上がりサイズの定義

そして、実際にテストを開発に組み込んでいくために、非エンジニアでも気軽にテストを実施したいと考えました。それぞれテストファイルが30個だとしても、この3項目に対してテストすると3倍の90項目。テストが大変だという理由で改善が進まないのは残念です。

なるべく早く問題に気づけるようにする

早速、設計に取りかかりました。

自動テストの場合は、社内ツールでユーザは自分も含め同じプロジェクトのメンバーです。要件はユーザ向けの機能と違って自由に決められますが、今回は開発がスムーズに進むようにするためなので「開発のなるべく早い段階で問題に気づけるような仕組みを作る」を指針にしました。

スピードチェック入稿のシステムは大きく3つのレイヤーに分かれています。

・フロント:データチェック用のAPIを呼び出し結果を描画
・データチェック用のAPI: フロントから受け取ったリクエストを受けてジョブをキューイング
・バックエンドジョブ:データチェックファイル変換を実施

シンプルにするために、今回の3項目のテストの対象はバックエンドジョブに絞りました。

システム構成

先ほどの指針にしたがって、1. ファイルの規格のテストに関しては、QA環境でスピードデータチェック入稿が使われると必ずジョブ内で自動で実行され、問題が発見されればslackに通知されるようにしました。

 

ファイルアップロード後の処理の流れ

上記の処理の流れの中で、サムネイルの生成が終わったらステータスは終了にして、フロントが描画できるような状態にしつつ、データチェックエンジンのチェック用のスクリプトが走るような作りです。

2. エラーのテスト3. 画像比較テスト に関しては、実行するとしばらくQA環境のジョブを占有してしまうので、実行タイミングをコントロールできるように、手動でslackから実行できるようにしました。

実行するとテストケースのYAMLから、上記の処理のファイル検証〜サムネイル生成を行うジョブをまとめて生成、結果チェックまたは画像比較が順次実行されます。画像比較テストの場合はテストケースが何十個もあるため、期待画像を一括に生成するコマンドも用意。テストケースの更新の手間も軽減しました。

テストの結果も、既存ツールに表示しようかと思いましたが、もう少し要件があったため、以下の画像のように、Datacheck APIの管理画面に表示しています。

画像比較テストの結果一覧(差分がない場合)

 

画像比較テストの結果一覧(差分がある場合)

これで1日〜2日かかっていたテスト作業が、30分以内で実施できるようになりました!
さらにミスもなくなり自信を持ってリリースすることができるように。ファイルの処理で処理フローに変更が必要になって試行錯誤することがあっても、すぐに確認できると開発効率は上がりますし、様々な改善のアイデアも湧いてきます。

自動テストの開発後、スピードチェック入稿当初からやりたかった複雑な処理変更や細かい改善を無事にリリースすることができました。

自動テストを使い続ける

自動テストは、テスト自体のメンテナンスも必要ですね。

今回は同じリポジトリにテストケースの定義を含めたため、通常のWebテストフレームワークと同じように機能修正のPull Requestに含めてテストの変更、追加を行なっています。

自動テストに関するREADMEも用意しメンバーにシェア。エンジニアだけでなく、データチェックのエンジンの設定メンバーも、テストケースの変更・追加を行なって、テストを最新の状態に保っています。

まとめ

スピードチェック入稿の印刷用ファイルを対象にテストを自動化しました。

「開発のなるべく早い段階で問題に気づけるような仕組みを作る」を指針に3つの項目のテストが短時間に実施可能に。これにより、すぐにミスに気づけるようになり、開発効率も向上しました。

テストの自動化は後回しになってきましたが、スピードチェック入稿が進化していく上で重要な施策だったと思っていますし、早速その効果を実感することができました。

ラクスルでは、絶賛エンジニア募集中です。

「仕組みを変えれば世界はもっとよくなる」

ユーザ価値をさらに向上させつつ、より社内外のサービスと繋がっていくプラットホームを開発していきたいエンジニアを募集しています。是非一度オフィスに遊びにきてください!

スピードチェック入稿リリース秘話

ラクスルの数少ない女子エンジニアの加藤です。

今回は、8月末にリリースしたスピードチェック入稿のリリースまでのプロセスを書いてみたいと思います。

スピードチェック入稿とは

そもそも、チラシや名刺などの印刷をインターネットで注文したことのない方もいらっしゃるかもしれません。

ラクスルは、印刷物を扱うECサイトです。通常のECサイトと違って、商品を選んで配送先と決済方法を選んでもらうだけでは注文は完結しません。お客様が印刷するデータを入稿するという印刷ならではのステップがあります。

また、印刷用データはラクスルで印刷に適しているかどうかチェックして、適していない場合、お客様は再度入稿する必要があります。

これまで、ラクスルではデータが印刷に適しているかどうか、オペレーターが一つ一つチェックし、場合によっては微修正をしていました。人手でやっているため、印刷データが確定して実際に印刷工程に進む準備ができるまでに1日以上かかってしまうこともあり、急いで印刷物が欲しいというお客様の要望になかなか答えられていませんでした。

そこで、サイトを訪問している最中にその場でチェック結果がわかるようなシステムを開発しようということになりました。それが「スピードチェック入稿」です。

スピードチェック入稿画面

スピードチェック入稿画面

プロジェクトの始まり

入社してしばらく経ちそろそろ会社に慣れてきたかと思っていた4月末、プロジェクトのミーティングに呼ばれました。データチェックを自動化する理由が共有されて、成功させるぞという強い意志が感じられましたが、参加メンバーのドメイン知識が十分ではない状況で、議論も少し混乱気味。私個人としては不安がありつつも、とにかくやってみようという気持ちでミーティングを終えました。

プロジェクトは、ラクスルで提供しているデータチェック業務理解から始まりました。実際に、オペレーターの方が作業している所をメンバーみんなで見させてもらう時間もとりました。

・どんなデータが入稿されるのか
・どんなデータのどんな点を確認しているのか
・どんな修正を行っているのか
・どんなメールをお客様に送っているのか

最初はこのような基本的なポイントを一つ一つ確認していき、データチェックのドメイン知識の理解を深めていきました。

デザインと設計のプロセス

スピードチェック入稿のデザインチームはデザインスプリントを実施。毎スプリントごとにお客様からのフィードバックを受けてデザインが進みました。

使う人はどんな印象を受けるのか、どんなところで操作に詰まったり、戸惑ったりするのか。私自身はデザインチームではありませんでしたが、週ごとのデザインとフィードバックのシェアや、お客様へのインタビューの同行を通じで、ユーザ理解を深めることもできました。

ビジネスチームによるデータチェック要件の詳細化とデザインと同時並行で、システムの設計も始めました。

システムは、すぐにWebで時間のかかる処理を実装するときのオーソドックスな構成に決定。
・フロント:データチェック用のAPIを呼び出し結果を描画
・データチェック用のAPI: フロントから受け取ったリクエストを受けてジョブをキューイング
・バックエンドジョブ:データチェックやPDF変換を実施

システム構成

システム構成(模式図)

デザインスプリントが進んでいる間に、最小単位で連携して動くものを実装していきました。

初めて一緒に仕事をするメンバーで構成されたチームでしたが、REST APIなど共通した設計スタイルがあると設計検討も早く進むのを改めて感じました。

自走チームの開発スタイル

メンバーが各作業を進める中、試行錯誤したのはコミュニケーションとタスク管理でした。

ビジネスメンバー、デザイナー、エンジニアそれぞれに違うバックグラウンドを持ち、比較的自由に仕事をするメンバーが揃ったため、仕事自体はすごく速く進むのですが、みんなが協力しないと一つ一つの機能が動きません。

どんな風にコミュニケーションするか、どんな風にタスクの状況を共有したり管理したりするか。朝会や毎週の振り返りで、率直に意見やアイデアを言い合って、改善して進めました。

振り返り

毎週末の振り返り

以前のブログ記事では、開発スプリントやペアプロの紹介もありましたが、今回はペアプロは実施せず、また開発スプリントは回しつつも運用は比較的ゆるめ。それぞれのメンバーのやりやすさを優先させつつ、アクションが滞らないようにコミュニケーションをとって乗り切りました。

やっぱり何か起こる結合とテスト

いくつかのコンポーネントが連携するシステムの開発では、結合とテストの段階になって様々な考慮漏れが判明してスケジュールが遅れるというのが開発でよくある光景ではないでしょうか。

今回のプロジェクトでは、かなり前段階で様々なケースのテストデータを準備したりエラーケースの検討をしてきましたし、結合して動かすこともその都度行なっていましたが、それでもやはり本格的な結合やテストの段階で色々な問題が起こりました。

例えば、初めは入稿している原稿の縦横の方向を自動判別しようとしていましたが、チラシでは判定できるけれども、名刺では判定できないケースがあるということが間際になってわかったりしました。

もちろん前倒して考慮できればベストだと思いますが、初めての要素があるプロジェクトではなかなかそうもいかないものです。このプロジェクトでは見つかった時にその都度、チームで学習しながら、一つ一つアクションを決めていきました。

リリース!

風邪でチームメンバーが次々と休んでスケジュールが遅れ気味になったり、間際で解決が危ぶまれる課題が発生したりと、様々なことがありましたが、8月末に当初の予定通りリリース。日程的にタイトな状況になっていても、みんなでランチに行ったりとチームの雰囲気を保ち、コミュニケーションを密に取れるようにしていたのも、逆に予定通りのリリースに不可欠だったかもしれません。

リリース後も、スピードチェック入稿の状況をチームでモニタリングしながらの対応や改善、対象商品の追加が続き、多くのお客様に使われるサービスに育ってきました。フェーズが移り変わるとチームの状況ややることも変わっていきますが、これからもビジネスメンバー・デザイナー・エンジニアの垣根を超えて、お客様の体験がよくなっていくような開発を続けていきたいと思います。

 

ラクスルでは、絶賛エンジニア募集中です。
「仕組みを変えれば世界はもっとよくなる」
世界が変わっていく瞬間を一緒に体験したいエンジニアの方、お待ちしています♡