クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

Vue Fes Japan Online 2022 にクラウドワークスのエンジニアが登壇します

登壇 フロントエンド Vue.js

アイキャッチ：Vue Fes Japan Online 2022 にクラウドワークスのエンジニアが登壇します

Vue Fes Japan とは

Vue Fes Japan は Vue.js 日本ユーザーグループが主催する日本最大の Vue.js カンファレンスです。

Vue Fes Japan Online 2022 TOPページのスクリーンショット

日本における Vue.js 開発者たちによる発表や、 Evan You といった Vue.js コアコントリビューターの方たちも登壇されます。

今回、2018年に開催されてから4年ぶりにオンラインで開催されることになりました。

vuefes.jp

登壇情報

弊社からはクラウドワークスエンジニアの @t0yohei と @yamanoku がそれぞれ登壇いたします。

負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話

t0yohei

とある Rails のテンプレート + CoffeeScript で構築された画面を、 Vue.js でリプレイスしました。

その際の知見を、具体的な工夫や悩んだポイント、実際の遭遇した技術的負債の話を交えて共有できればと思います。

本セッションのキーワードは以下になります。

  • Vue3 の script setup + TypeScript に始まる開発体験の良さ
  • Container Component、Layout Component などの開発プラクティス
  • Storybook、 StoryShots(VRT) によるフロントエンド DX
  • あるべき姿に至るまでの長い道のりと取捨選択
  • 命令的 UI から宣言的 UI へのパラダイムの変更
  • Ajax のリクエストを送ると、json にシリアライズされた html が帰ってくる API のエンドポイント
  • 忍耐力

メドピアトラック（13:30 - 13:50）にて発表

vuefes.jp

Vue.js でアクセシブルなコンポーネントをつくるために

yamanoku

昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。

最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。

しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシブルでなくなる可能性もあります。

この発表ではそうした間違いや疑問を解消し Vue.js でのアクセシビリティ向上に取り組みやすくするやり方を発表いたします。

FUTURE トラック（13:55 - 14:15）にて発表

vuefes.jp

おわりに

2018年にカンファレンスが開催されてからの間に Vue3 がリリースされたり Vue.js にまつわる OSS においても様々な変化がありました。

クラウドワークスにおいても Vue3 に移行し、Composition API や script setup を活用してフロントエンド開発しています。私たちからはそうした経験談や知見といったものを通じて Vue.js コミュニティに還元していければと思っております。

その他の登壇者の発表やスポンサーセッションもそれぞれ興味深い内容がたくさんあります。

当日は是非ご参加ください。

vuefes.jp

決済機関上への返金に対応した話

序文

こんにちは、私達は「かけたくないコストを削減し、クラウドワークスをスケールさせる環境をつくる」ことを目的としているチームです。 今回は半年以上かけてやってきた施策である「決済機関上への返金」の仕組みの導入とそれに伴うDBテーブルの段階的な切り替えについて効果や工夫した点など紹介します。

なぜ「決済機関上への返金」を導入したか

今までクラウドワークスではユーザーからお支払いいただいたお金を返金する場合、クレジットカード等の決済機関経由の支払いの返金も、ユーザーの銀行口座に対してクラウドワークスから出金していました。 このような仕組みだと、決済機関経由で支払ったユーザーが返金を受け取りたい場合、出金の申請を行う必要があるという課題がありました。 この課題を解決するために、「決済機関上への返金」の仕組みの導入施策に取り組みました。 （具体例：「クレジットカードで支払ったお金は、クレジットカード決済会社経由で返金するようにする」です）

続きを読む

AtlantisでTerraformのドリフト検出

SRE Atlantis Terraform

こんにちは。crowdworks.jp SREチームの@kangaechuです。 先日開催されたイベント HashiTalks: Japanを見ていましたが、Terraformのドリフト検出に関する発表が多く、Terraform運用において重要なポイントなんだなと感じました。 流行りに乗ったわけではないですが、今回はTerraformのドリフト検出をAtlantisで行った方法をご紹介します。

この記事は以下環境で検証しています。

ドリフト検出

Terraformはインフラストラクチャを安全かつ期待通りに構築するために使用する、Infrastructure as Codeのソフトウェアです。 crowdworks.jpではAWS、GitHub、GCPの管理をTerraformで行っていますが、今回はAWSに絞って話します。

TerraformではリソースをHCLで記述したコードと、前回のapply時の状態が保存されたtfstateファイルと、実際のリソースの3つの要素で管理します。 基本的にこの3つの状態は一致しています。 しかしさまざまな理由により、これらの状態が一致しなくなることがあります。たとえば以下のようなものが挙げられます。

  • Terraform外（AWSマネジメントコンソールなど）での変更
  • Apply のし忘れ
  • Terraformやプロバイダのバージョンアップによる破壊的変更

Terraformのコードの状態と実リソースの状態に差異が発生した場合、できるだけ早期に検出したいですね。 そのために「ドリフト検出」を行います。 ドリフトは「想定とは異なった状態」を表し、ドリフト検出とは「想定と異なった状態を検出する」ことを指します。 この記事ではTerraformで全部のディレクトリにterraform planを行い、plan結果に差分がないことを確認する処理を「ドリフト検出」と呼びます。

続きを読む

WordPressを静的ホスティングサービスのShifterへ移行しました

はじめに

SREチームの @bayashi_ok です。

今回はクラウドワークスで運営しているWordPressサイトを静的ホスティングサービスであるShifterへ移行した話を書きます。

Shifterについて

www.getshifter.io

特徴は公式リンクに詳しく書かれていますが、内部の仕組みとしては

  • DockerでWordPressを更新時に起動
  • WordPressのコンテンツを静的HTMLに変換しS3に配置
  • CDN(CloudFront)からコンテンツを配信

となっており、

  • フロントエンドでは、WordPressを直接公開しなくなるのでWordPress本体やプラグインの脆弱性を気にすることなく運用できる

  • バックエンドでは、必要な時のみDockerでWordPressを起動するため、セキュリティリスクが低減される

と運用上かなり助かる仕組みだなと感じました。

続きを読む

今年もRubyKaigi2022にてスポンサーとして協賛・ノベルティ配布します

RubyKaigi ノベルティ

こんにちは。みーたです。

株式会社クラウドワークスは2022年9月8日から10日までの3日間で開催される、プログラミング言語 Ruby に関する世界最大級の国際カンファレンス「RubyKaigi 2022」のゴールドスポンサーとして協賛します。

また、今年はRubyKaigi として3年ぶりに三重県総合文化センター（およびオンライン）にて開催されるため、クラウドワークスのエンジニアメンバーも私を含む7名で現地参加いたします。やったぁ✧＼\ ٩( 'ω' )و /／✧

会場ではこの後紹介するノベルティTシャツを着ながら飴を配っておりますので、サービス開発やエンジニアリング組織のことなどお気軽に話しかけてもらえたら嬉しいです🫶

Rubyとクラウドワークス

創業事業である crowdworks.jp では開発の基盤として Ruby on Rails を使用しており、去年サービスリリース10周年を迎えました。 クラウドテック、新規事業のPARKなど複数のプロダクトでRubyを使用しております。 Rubyコミュニティのさらなる活性化に寄与するとともに、これからのRubyの発展に一層貢献してまいります。改めまして、よろしくお願いいたします。

RubyKaigi 2022 概要

主催：RubyKaigi 2022チーム ・ 一般社団法人日本Rubyの会

開催期間：2022年9月8日(木) ～ 9月10日(土)

場所：三重県総合文化センター および オンライン

基調講演：まつもと ゆきひろ氏 ほか

公式サイトURL：https://rubykaigi.org/2022/

ノベルティもたくさん作りました

RubyKaigiのロゴをあしらったTシャツとスマホ防水ケース、クラウドワークスのロゴ組飴

今回は、RubyKaigi 2022のロゴをあしらったTシャツ・スマホ防水ケースを用意しました！ 今年3月に新しくなったクラウドワークスのコーポレートロゴを使った組飴も持っていきます。

Tシャツは4.4オンスのドライ素材を使用しており、とても軽く風通しが良いものになっています。拡大するとメッシュ状になっているのが伝わるでしょうか...??

数に限りがあるため、こちらのTシャツはこのエンジニアブログをSNSで拡散してくださった方にお渡ししたいと思っております。詳しくは会場にて💁‍♀️

RubyKaigi2022とクラウドワークスのロゴをあしらったスマホ防水ケーススマホ防水ケースにiPhone12を入れた様子でしっかり余裕がある

スマホ防水ケースは柄が見やすいように中に白い紙を入れておりますが、実際は背景色は透明になっており、スマホを入れたままでも操作が出来ます。実際に私が使用しているiPhone12を入れてみましたが入れやすく、操作も問題なく行えました。これがあればお風呂でスマホ使う時に濡れずに済むので安心ですね。

新しくなったクラウドワークスのコーポレートロゴを使った組飴

そして見てください！！！

以前のコーポレートロゴの青だとなかなか美味しそうなお菓子にならず悩んでいた*1のですが、めちゃくちゃ可愛い組飴が出来ました🍬

しかも塩サイダー味で、材料に塩が入っているので熱中症対策にも役立ちます💪

たっっっっっっくさん持っていくのでスマホ防水ケースに詰めちゃってください。それもまた可愛いです。

Rubyistの皆さんへ

3年ぶりのオフライン開催ということで、わくわくしながら準備をしてまいりました！

当日はたくさんのRubyistさんたちとお会いできることを心より楽しみにしています。

また、現地にまで来ちゃうRuby愛が収まらないRubyistさんたち💖とお仕事も一緒にしていきたいので、もし転職で「Ruby（Ruby on Rails）を使っている企業探したいな...」と思っていらっしゃいましたら、弊社にも興味を持っていただけたら嬉しいです🙌

www.green-japan.com

*1:真っ青なクッキー https://engineer.crowdworks.jp/entry/rubykaigi2019

© 2016 CrowdWorks, Inc., All rights reserved.