ダイバーシティ

オンラインデザインのPHPからRailsへのリプレイス

こんにちは。サーバサイドエンジニアを担当している新卒のカグラです。

今回はオンラインデザインのRailsへのシステムリプレイスについて紹介します。

オンラインデザインとPHP

ラクスルでは、入稿データを無料でデザインできるサービス「オンラインデザイン」を提供しており、たくさんのお客さんに使ってもらっています。

オンラインデザインは、数年前にPHPで作られたアプリケーションです。そのため当時のレガシーな設計や、今後のスケールを考えた時に複数人でパフォーマンス高く運用するのが難しそうな設計が多くあったため、現在PHPの完全廃止とRailsへのリプレイスを進めています。

スムーズに開発を進めるために

オンラインデザインの多くのプロセスは、ajaxを使った非同期処理で作られており、現在50個ぐらいのAPIがあります。呼び出し元のフロントもjQueryを使った複雑な処理が多い状態でした。
使ってくれているお客さんがいる中で、サーバーサイドとフロントエンドとの複雑な処理を一緒に移行してしまうと、デザインのデータ内容の互換性などで思わぬ障害を招いてしまう危険性が高くなるため、一度に両方を修正するのではなく、まずサーバーサイドのロジック部分をRailsのAPIとして開発し、PHPから呼び出すようなプロセスにしました。

このように進めていますす。

① 元の状態

② PHPのAPIロジックがRailsのAPIに置きかわった状態

③ リプレイス完了状態

今RailsのAPIの開発はほとんど終わりました。開発当初ほぼ一人でPHPの立ち上げを行っていたこともあり、複数人での長期運用には向いていない設計となっていたため、今回開発中に作業コンフリクトなどいくつかの問題が起こりました。例えば、PHPを一部修正して、一般的なRailsのAPI呼び出し処理手順をまとめたAbstractクラスを作ってextendするようにして回避したりしました。
また、万一RailsのAPIレスポンスに問題があった時などに、元のPHPの処理にfallbackすることができるようにもしています。
以下のようになります。

abstract class CallApi  {
    abstract function internalApi($params, $endpoint);
    abstract function checkFallback($response);
}

class DesignService extends CallApi {
    function internalApi($params, $endpoint) {
        ...........
        return checkFallback($response);
    }
 
    function checkFallback($response){
        return $response.error
    }
}


$response = DesignService->internalApi($params);
if $response.error {
   fallBack();
}

function fallBack (){
   //fallbackした処理
    .........
}

 

英語でstand-up meetingは社内で唯一

オンラインデザインチームは国際化が進んでいて、日本人よりもアジア諸国からきたメンバーのほうが多いです。そしてベトナムのチームと一緒に開発しながら、英語でコミュニケーションを取ることを楽しんでいます。自分も外国人として、英語であろうと日本語であろうと母語ではないので、時々難しい感じがするんですが、これまで自信のなかった英語のレベルも時間が経つにつれて上がってきた上に、それぞれの文化に触れて積極的にコミュニケーションを取れることはとても楽しいです。

まとめ

Welcome to join our global team!

Rails Girls Saigon 1st 開催レポート


システムエンジニアの泉田史杏です。
ラクスルは7/20にベトナムホーチミンにて第一回Rails Girls Saigonのスポンサーとして参加しました。

またコンテンツの企画と当日のコーチも務めてきたので、今回はその様子をお伝えします。

ホーチミン初のRails Girls

Rails Girlsは日本含めて世界各国で行われている、女性がプログラミングに親しみ、アイデアを形にするための手助けを目的とするイベントです。ベトナムでは過去にハノイやダナンで行われていますが、ホーチミンでは初の開催となりました。

ラクスルはホーチミンにも開発チームがあるため、今回参加を決めました。

会場はメインオーガナイザーであり、ホーチミンのど真ん中、眺めも非常に素晴らしいTINYpulseさんのオフィス!このブログの写真も提供いただいています、ありがとうございます。

40人弱の参加者に対しコーチは19人。
ベトナム語が話せない、カナダやフランスの参加者も。
でも大丈夫。コンテンツは全て英語で用意しています!
コーディングは、ベトナム語と英語のグループに別れて実施しました。

準備

企画開始は約3ヶ月前(私は2ヶ月前頃から参加)。
Girls達がアプリケーションを楽しいと思える場にしたいという想いと、過去のRails Girlsのフィードバックから、以下二つを特に時間をかけて練りました。

  • ワクワクするアプリケーション
  • 環境構築の時間短縮

ワクワクするアプリケーション

Girls達が、作って楽しい、身近に感じられるウェブサイトってなんだろう?
というところから議論をはじめ、最終的にECサイトに決めました。
これは自分たちでコンテンツを全て準備する必要があるものの、それでもやりたいという多くのコーチの想いの元レビューやリハーサルを重ねながら独自に作っていきました。

仕事終わりにオフィスに集まったリハーサルの風景

開催2週間前のリハーサル。仕事終わりのオフィスにて

環境構築の時間短縮

Windowsにノウハウがあるスタッフがほぼおらず、Railsの開発に集中できなかったということが過去にはあったようです。
そこで今回は思い切って開催日を1日とし、環境はrails serverとrails consoleが、それぞれコマンド一発で立ち上がるDockerを事前にコーチ陣で準備をすることにしました。

結果、一部環境構築できなかったメンバーには、開始前にコーチがセットアップを手伝うことで大きな問題なく、アプリケーション開発に集中しながら進めることができました。

当日コーチ陣によるDockerセットアップサポート

当日コーチ陣によるDockerセットアップサポート

いざ開始!

ワークショップのメインコンテンツは3つ。

  • HTML + CSSを書いてみよう
  • 技術スタックの詰め合わせ”BentoBox”
  • RailsでECサイトの開発

 

HTML + CSSを書いてみよう

まずはWebページ作成の練習!

真っ白のindex.htmlとstyle.cssの二つのファイルから静的なページ作ります。時間は50分。

一緒にコードを見て解説やデバッグしながら、画像サイズが整ったり、バックグラウンドカラーが表示されたり、マウスオーバーで文字の色が変わったりと、だんだんできあがっていくことを楽しみました。

技術スタックの詰め合わせ”Bentobox”

弁当箱のように、技術スタックをフロントエンド、バックエンド、インフラとエリアを分けてカテゴライズしながら、アプリケーションの仕組みを学ぶゲーム。

空の弁当箱に技術スタックを書き込む

空の弁当箱の用紙に技術スタックを書き込んでいきます

私のチームでは、ラクスルの技術スタックを紹介。まず詳細は説明せず、Googleなどで5分で調べてもらいカテゴライズしてもらいました。少し難しいかなという思うものも、必ず誰かは正しくカテゴライズできていました。ラクスルでの具体的な使用例などを交えながら、紹介しました。

この後、ランチを食べていよいよRailsの開発です。

ベトナム料理のオードブル。弁当ではない。

ベトナム料理のオードブル。弁当ではない。

RailsでECサイト開発

いよいよECサイトの開発!3時間の長い時間になります。

解説をしながらも、「erb と html は何が違う?」、「json とは?」、「Gemfileって何?」、「サイトの商品の画像変えたいんだけどどうしたらいい?」など質問は盛り沢山。

独自に自分達で作ったコンテンツだからこそ、「ああ、たしかにこの説明だけだとわかんないよな…」みたいな瞬間もいくつかありました。

ペースはみんな違うのですが、グループメンバー同士でも活発に話し合いながら開発は進みました。最後はHerokuにデプロイをして完了です。

ECサイト完成イメージ

最終完成イメージ

発表〜懇親会

有志で2名から作ったアプリケーションを発表してもらった後、懇親会です。

参加者(左)に記念品を渡すオーガナイザーのNgocさん(右) Cảm ơn nhiều!

参加者(左)に記念品を渡すメインオーガナイザーのNgocさん(右) Cảm ơn nhiều!

様々なバックグラウンドの参加者と触れ合うことができました。例えば、こんな方達。

  • ITを活かせる方法を探している英語の教師
  • フランスからインターンシップと留学で来ていて、スタートアップに興味がある学生
  • 非エンジニアからフルスタックエンジニアを目指してジョブチェンジしようとしている新卒社員
  • カナダからやってきて、ベトナム現地印刷関連会社での営業

また、スポンサーとしてラクスルはサービスの紹介もさせていただき、多くの方に知ってもらうことができました。

不便なことをシステムで解決したいよね、という想いを持っている方は多かったです。

その他GitHubさん、Stack Overflowさんを始め、海外からも多くの会社にサポートしていただけ、素晴らしいイベントとなりました。

ちなみにこのうちわは、ラクスルのノベルティで作成したものでベトナムの開発チームメインで開発したアプリケーションです。

こういった活動も通して、一緒に働く仲間を増やしたり、コミュニティを広げていきたい方、ラクスルで是非一緒に盛り上げていきませんか?