自前アーキテクチャなコードを Redux 構成に書き換えているお話 - Chatwork Creator's Note
こんにちは、フロントエンド開発部の西口 (cw_nishiguchi) です。 Chatwork はおかげさまで、サービス開始から来年で 10 年を迎えようとしています。 この記事は、その歳月においての Web クライアントのアーキテクチャの変遷をたどるお話になります。 アーキテクチャの変遷 これまでのアーキテクチャを大まかに分けると、 サービス開始当初の jQuery 期 React 導入期 Redux 導入期 となり、現在は Redux へ移行中というステータスです。 便宜的に 3 期に分けて書きましたが、実際には jQuery 期のコードも部分的にですが、まだ現役で動いています。 アーキテクチャの刷新を実際におこなうには、それなりのコストが発生します。また、その間機能開発を止めるわけにもいかないので、エイやで一度に置き換えられないため、部分的に少しずつ機能開発と並行して進めています。
祝 🎉 アクセシビリティ改善チームができました！ - Chatwork Creator's Note
こんにちは、守谷（@emim）です。 今までWebアクセシビリティについて、デザイン部*1内で勉強会を実施したり、クリエイティブ職以外への啓蒙活動などを社内でちょこちょこ開催してきました。 実施内容すべて漏れなくは報告できていませんが、このCreator's Noteでも私以外の複数のメンバーもブログ記事にまとめてくれています（Accessibilityあるいはa11yというタグで、閲覧いただけます）。 そんな中しばらく私を悩ませていたのは、いくら自分自身（デザイナー）が知識を貯めて啓蒙を進めたところで、実際プロダクトの設計フローに「アクセシビリティ施策実施」という要件が乗らない限り、永遠に改善を深部まで進められない……という現実とのジレンマでした。 そんな中！ 今夏やっと、プロダクトに改善施策を反映していくためのチームを立ち上げることができました！！！👏🏻 名付けて……と思ってはいた
リモートでのモブワークにオススメ「やることリスト」メソッド - Chatwork Creator's Note
こんにちは、新井です。 子供と並んでアゲサゲコンボするのが愉快な今日この頃です。 チームでリモート環境を前提としたモブワークを始めて約1年が経ちました。 当初部分的に始めたモブプロが、プログラミング以外に領域を広げてモブワークになり、モブをベースとして仕事をするようになり……という変遷がありました。この経験で得られた知見を共有したいと思います。 リモート環境で"1つのことを考える"ことの重要さ、困難さ モブワークを始めた当時「モブプログラミング・ベストプラクティス」*1を読みました。 かなり詳細かつ具体的にモブプロのプラクティスが紹介されていましたが、 物理的に同じ場所にいることが前提になっていて、そのまま自分たちに適用できないなーと思ったのを覚えています。 私が思うに、モブプロ、モブワークをする上で最も重要なポイントは「1つのことを考える」です。 モブワークには知識の共有・同期をはじめと
Biryani プロジェクト(メッセージ検索機能のCloudSearchからElasticsearchへのリプレイス)について vol.2 - Chatwork Creator's Note
こんにちわ、cw-tomitaです。 前回の記事に続いて、Biryaniプロジェクトに関して、あれこれと書いていきたいと思います。なお、この記事は、先日公開した以下の記事の続きとなりますので、こちらを未読の方は、是非vol.1からお読みいただければと！ creators-note.chatwork.com 先の記事では、PJが始まった経緯、Elasticsearchを第一候補として選んだ理由等について書きました。今回は、POC/実装を進めていく中で、苦戦したポイントと解決方法に関して、主だったポイントを挙げていきたいと思います。 最初にどのようなものを作ったかをざっと紹介し、その上で、 今回の記事の中では、Elasticsearch 自体にフォーカスをあてて、色々と紹介していきたいと思います。 Sparkでのデータマイグレーションや、Scalaのindexerの実装等に関しては今回は取り上
日付と時間帯と私 - Chatwork Creator's Note
こんにちは、あらいです。 「言の葉の庭」のBDを買ったので雨の日に社内シアタールームでゲリラ上映会をしてやろうと企んでいます。 先日、と言っても連休前ですが「タスク〆切時間」機能をリリースしました。 その中でいくつか知見を得たので共有したいと思います。 blog-ja.chatwork.com 日付と時刻のデータ特性の違い このリリース以前では、Chatworkのタスクは「日付」の単位で期限を指定することができました。 日付は主観的なデータです。地球上には時差があり、ある地点の日付が5/1だった時に 隣の地点での日付は4/30かもしれませんし5/2かもしれません。 どこの地点を基準に考えるかによって「日付がいつか」が決まります。 日付は相対的で、幅を持ったデータだとも言えます。 「時刻」も同様に相対的なデータです。例えば「夜の8時」がいつの時点かは、基準とする地点によって変わります。 しか
インクルーシブな企業を訪問してきました - Chatwork Creator's Note
こんにちは、守谷です。この記事は、Webじゃないアクセシビリティ Advent Calendar 2018の1記事として公開しています。 Chatworkでは、昨年春にアクセシビリティ方針を公開しました。その後、アクセシビリティ熱を消さないためにできることでも紹介したように、社内での啓蒙活動を続けています。 こうした原動力となっているのが、ユーザーからの声です。 日々様々なフィードバックが届けられる中、最近になって障害当事者からの声もいただくようになりました。中には感謝という形で、熱い思いを届けてくださる企業もあります。 今回そのうち、福岡で障害者就労継続支援A型事業・就労移行支援事業をされている株式会社カムラックにお願いをして、実際の働き方やChatworkの使い方を伺う機会をいただきました。この記事ではその一部を紹介します。 すべてのひと、は本当に「すべて」なのか？ そもそもの発端は、
アクセシビリティ熱を消さないためにできること - Chatwork Creator's Note
毎年12月3日は、国際障害者デーだそうです。日本でも毎年12月3日から9日まで、「障害者週間」と定められています。有楽町のほうではこの期間中に特別セミナーも開催されています。Webアクセシビリティに特化した内容はありませんが、カラーユニバーサルデザインや障害者の生活を理解するためのワークショップなど参考になりそうな講座も幾つかあります。 期間限定ではありますが、こうしたイベントを通してアクセシビリティに興味をもつ方が増えることは素晴らしいことです。ただ、事業会社でアクセシビリティを啓蒙・対応していく立場として『期間限定』というわけにはいきません。 昨年Chatworkは、アクセシビリティ方針 を発表し、働くことは誰もがもっている権利というミッションの基、小さな活動を続けていました。例えば社内エンジニア、ビジネスサイドそれぞれにカスタマイズしたセミナーを実施したり、背景と文字色のコントラスト
akka-httpでの総当たり攻撃(brute-force-attack)対策について - ChatWork Creator's Note
こんにちはかとじゅん(@j5ik2o)です。 akka-httpで特定の失敗条件を元に、特定のリクエストをブロックするための仕組みを、akka-guardとして実装したので、設計思想や使い方に関して簡単にお知らせします。今回、想定したシナリオは、認証の総当たり攻撃(brute-force-attack)の対策で、認証の失敗回数が閾値を超えた場合、一定期間認証リクエストをブロックする対策を想定しています。 設計は主に僕がやりましたので僕の方から紹介します。実装は主に藤井(@yoshiyoshifujii)さんにお願いしたので、後半は藤井さん対応で。 akka-guard github.com 設計(担当:かとう) akka-httpで認証・認可を伴うAPIを公開した際に、セキュリティ対策の一貫として、総当たり攻撃(brute-force-attack)対策は必須にする必要がありました。さまざ
TypeScriptのString Literal Typesを使った状態の管理 - Chatwork Creator's Note
この記事はbuilderscon tokyo 2018のスピーカーディナーに参加した勢いで書きました。 @kyo_agoです。 最初に Scalaの場合はsealed修飾子を使いましょう。 TypeScriptで状態を扱う TypeScriptでon / offの値を持つ3つの状態を管理する場合、ぱっと思いつくのは以下のようなコードだと思います。 class HogeEntity { constructor( readonly enable: boolean, readonly selected: boolean, readonly focused: boolean ) {} } let hogeEntity = new HogeEntity(true, false, false); 実際に使う場合も簡単に使うには以下のようなコードになると思います。 function render({ h
ドメインモデルの根拠とドメインモデル貧血症の対策について - Chatwork Creator's Note
ChatWork Advent Calendar 2017の10日目の記事です。 こんにちは。かとじゅん([Twitter:@j5ik2o]) です。 何を書こうかと悩んだのですが、社内で意見を聞いたところ、やはりDDD関連がよいとなりました。 Scalaコードでわかった気になるDDD この記事も、もう四年前ですっかり古くなりました。最近どういう観点で実践しているかまとめてみます。(DDD初級者という方は、まず上の記事を読むことをお勧めします) DDDを実践するにあたっての個人的な問題点は2つあります。ひとつは、「いきなりドメインモデルを作ることができない」という問題。もうひとつは、ドメインモデルを作り上げても実装コードに役に立つ振る舞いが思いつかず、いわゆる「ドメインモデル貧血症*1」になりやすいという問題です。このような問題は、僕がコミュニティで関わった多くのエンジニアから耳にします。
ChatWork Liveの刷新とScala.jsについて - Chatwork Creator's Note
こんにちは。クライアントアプリケーション開発部の田中です。 好きな麻雀の役は七対子です。 先日、ChatWork LiveのUIが変更されました。 詳細は下記を御覧ください。 blog-ja.chatwork.com UIについては今後デザイン部の方がブログを書くと思うので、今回私の方では技術的なところの紹介をしたいと思います。 （尚、この記事にはWebRTCやビデオ会議システムの話は全く出てきませんので、ご了承ください。） ChatWork Liveのフロントエンド技術について 実は今月のUI更新とは別に、JavaScript部分の大幅な変更を4月末に実施しています。 大まかな設計はすべて@kyo_ago氏がやってくれて、 私は敷かれたレールをただただ歩くだけだったので割と楽させてもらいました。 ChatWork LiveのWebクライアント側は主に以下の技術を使って実装されています。
アイトラッカーデバイス初体験 - Chatwork Creator's Note
こんにちは、デザイナーの（@emim）です。チャットワークのUIデザインをおこなう傍ら、社内でのアクセシビリティ関連の対応・施策や啓蒙を進める係をしています。 先日、AccSell Meetup 013 『ユーザーと一緒に試してみよう! ～あの○○はどこまで使えるのか～』 | Peatixというアクセシビリティのイベントに参加しました。元々アクセシビリティの情報をメルマガ／ポッドキャストで配信されているAccSell（アクセル）というサイトが定期的に開催しているセミナー形式のイベントで、13回目は視覚障害者の普段のWebの使い方を見る（ユーザーテストの公開）、という回でした。 今回はそのイベントの導入セッションでおこなわれた、アイトラッカーデバイス「Tobii Eye Tracker 4C」の操作デモと、実際に私自身が体験させてもらった操作感が衝撃的だったので紹介します。 Tobiiってな
ScalaJS for TypeScripter - Chatwork Creator's Note
こんにちは。@kyo_agoです。 だいぶScalaJSでの開発知見が溜まってきたので共有したいと思います。 d.tsから.scalaへの変換 TypeScriptを使っていると真っ先に思い浮かぶのが「型定義は？」ということだと思います。 これに関してはScalaJSでもTypeScriptと同じようにScala側のコードからJS側のコードを呼び出す際に型定義が必要になります。 基本的には TypeScript Importer for Scala.js を使うことでd.tsから.scalaのコードを出力できますが、一部の機能は変換できないためエラーになったり定義が出力されなかったりします。 （ Type Definition Importer for Scala.js でWeb上から試すことができますが、必ずしも最新版でない可能性があるので注意してください） サポート範囲に関しては sc
バグバウンティ（BugBounty）はじめました - Chatwork Creator's Note
こんにちは。モンハンは弓か片手剣の田中です。 弊社ChatWorkでは昨年からバグバウンティの導入をし、先月報奨金制度をスタートさせました。 ChatWork BugBounty.jp - バグバウンティ・プラットフォーム 今回は、バグバウンティ導入についてのあれこれを書いておきたいと思います。 導入に至った背景 弊社が運営している「チャットワーク」は現在導入社数が16万社を超え、おかげさまで広く使われるようになりました。 しかし、サービスが成長すると同時に、セキュリティをどう担保していくかという課題がでてきました。 Webサービスを運営している以上、セキュリティ対策はその運営会社の一つの責任であり、出来る限り脆弱性によるリスクは小さく保っていきたいです。 日々の業務、新規機能開発との両立をどうしていくか・・・その一つの回答がバグバウンティでした。 バグバウンティとは？ バグバウンティとは
カラーユニバーサルデザイン（CUD）を意識してUIを改善した話 - Chatwork Creator's Note
こんにちは！ChatWork Advent Calendar 2017の20日目担当、デザイン部の@cw-marikoです。 好きなものは猫とバイクです。 私は昨年の入社以来、Webサイトのデザインを主におこなっていましたが、2ヶ月ほど前よりUIデザインを担当するようになりました。 今回は私がおこなったチャットワークのUI（ユーザーインターフェース）改善と、そこで意識したカラーユニバーサルデザイン（CUD）についてのお話をしたいと思います。 チャットワークとアクセシビリティ ChatWorkでは、アクセシビリティ方針を公表しており、サービスサイトおよびコーポレートサイトの対応に取り組んでいます。 （アクセシビリティ対応についてのブログ記事も分かりやすいので、あわせてご覧ください。） 上記のアクセシビリティ方針ではチャットワークのサービスやアプリケーション自体は対応範囲には含まれておりません
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
