Chatwork Creator's Note

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

読者になる

モバイルアプリチームのリリースフロー改善

みなさん、こんにちは〜😃

モバイルアプリケーション開発部のAndroidエンジニア、ジェロームです。 この記事では、モバイルアプリチームのリリースフロー改善について紹介します。

先日#ChatworkTechTalkで発表させていただいた内容をより多くの方に知ってもらいたいため、ブログにまとめました😄

続きを読む

祝 🎉 アクセシビリティ改善チームができました!

こんにちは、守谷(@emim)です。

今までWebアクセシビリティについて、デザイン部*1内で勉強会を実施したり、クリエイティブ職以外への啓蒙活動などを社内でちょこちょこ開催してきました。

実施内容すべて漏れなくは報告できていませんが、このCreator's Noteでも私以外の複数のメンバーもブログ記事にまとめてくれています(Accessibilityあるいはa11yというタグで、閲覧いただけます)。

そんな中しばらく私を悩ませていたのは、いくら自分自身(デザイナー)が知識を貯めて啓蒙を進めたところで、実際プロダクトの設計フローに「アクセシビリティ施策実施」という要件が乗らない限り、永遠に改善を深部まで進められない……という現実とのジレンマでした。

そんな中!

今夏やっと、プロダクトに改善施策を反映していくためのチームを立ち上げることができました!!!👏🏻

名付けて……と思ってはいたのですが、色々あってまだ仮称「アクセシビリティやってくぞい!」チームとなっています。

せっかくなので、今回はその経緯やプロセスをご紹介していこうと思います。

*1:デザイン部:現在のChatworkには「デザイン部」ではなく「プロダクトデザイン部」と「ブランドデザイン室」というものが存在していますが、過去記事の状況や両方を合わせた部署を表すラベルとして、デザイン部と表現しています。

続きを読む

jQuery時代のアーキテクチャをReact化するために大切なACL層のお話

こんにちは! フロントエンド開発部の澁谷(shibe23) です。Creator's Noteには初投稿となります。

「レガシーフロントエンド脱却への挑戦」というテーマで各メンバーが投稿してきましたが、今回の投稿で一区切りとなります。

各メンバーの投稿はこちらです。

最後のテーマは、jQuery -> Reactへの移行にあたって特に重要な役割を果たしている、ACL(腐敗防止)層です。

「jQueryからReactへの移行ってどうやってるの?」という質問をいただく機会も多いので、今回の記事が参考になれば幸いです。

Chatworkのアーキテクチャの変遷は 自前アーキテクチャなコードを Redux 構成に書き換えているお話 に詳しく書かれているので、あわせてご覧ください。

続きを読む

ウェブフロントエンドの設計力を高めるためにアプリケーションの構造を捉えてみる話

こんにちはー。

フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。 よろしくおねがいします。

以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。 主な担当している業務は「難しいバグ対応」と「これからChatworkのウェブフロントエンドをどうするかを考える」です。

昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。 さて、今回のお題は「レガシーフロントエンド脱却への挑戦」と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。 あってもオチがつきません。

ということで、設計に役立つかもしれない話をラフに書くことにしました。

  • アプリケーションの構造を表す型
  • Updater - 状態を遷移させて、副作用を起こす
  • Selector - 状態から必要な値を求める
  • 具体例 Reducerをアプリケーションの構造でとらえよう
  • 具体例 クラスをアプリケーションの構造でとらえよう
  • 具体例 React Componentをアプリケーションの構造でとらえよう
    • StateやEffectを持つコンポーネント
  • モデルを組みあわせて全体を考える
  • まとめ
  • もっと詳しく…書きたいが紙面が足りないので雑談
    • Redux Store
    • アプリケーションの構造とAction
    • StateでActionの代用
    • ReactによるDOMの反映とState
    • アプリケーションの構造の合成
  • あとがき
  • 幕切れ
続きを読む

【Chatworkフロントエンドを大解剖!!】フロントエンド開発部に入社して3ヶ月が経ちました

8月よりChatworkのフロントエンド開発部にジョインさせて頂いた、石山(@NaReto1125_)です!

皆さんはChatworkやChatworkフロントエンドにどんなイメージをお持ちですか?

入社前、僕がChatworkフロントエンドに持っていたイメージはこれらのようなものでした。

  • なんかReact使ってる
  • Scalaのイメージが強くて、フロントエンドはあまりイメージがない
  • そもそもどんな人がフロントエンドにいるのかわからない

ざっくり「React使ってるな〜」ぐらいでした。

いざ入社してみると、以前持っていた僕のイメージと現場とでは良い意味で全く違ったものでした。

そのため、この記事でChatworkフロントエンドのやっていることや雰囲気を少しでも多くの人に知っていただけたらと思います!

続きを読む

Migrating our PHP Legend System from EC2 to Kubernetes, Part 1

  • Why did Chatwork migrate from EC2 to Kubernetes?
    • Issue 1: Deployment becomes unstable when the EC2 instance exceeds about 40 machines
    • Issue 2: A rollback cannot be performed depending on the deployment status
  • Kubernetes as a solution
  • Kubernetes as an option
  • Conclusion


Hello! This is cw-ozaki of the SRE Department.

The task of migrating PHP’s legend system from EC2 to Kubernetes that I have been involved with for some time has settled down a bit, so I wanted to share how this migration was made possible.

This article and the referenced articles to follow are the complete versions of the discussions held during the Japan Container Days V18.12 Meetup and the AWS Dev Day Online. I will also talk about some things related to the PHP Conference 2020 Re:born held in December, so I hope you are looking forward to it.

続きを読む