2014/2/19(水)の弊社イベント、ヒカ☆ラボにて使用された資料を公開します。 エンジニア・デザイナーの技術＆知識UPのための無料イベント「ヒカ☆ラボ」はこちら http://at-agent.jp/service/event/

1. チャットワークを支える技術
- ヒカ☆ラボ -
山本正喜

2. -自己紹介 ChatWork株式会社
専務取締役CTO 山本 正喜
ビジネスチャットツール「チャットワーク」を展開中
東京：15人
大阪：20人
USA：6人
現在ルクセンブルクに子会社を設立準備中

4. チャットワークのコンセプト
クラウド型ビジネスチャットツール
チャットの効率性・シンプルさをビジネスへ
+
ビデオ通話
in the cloud
チャット
タスク管理

5. 導入数 ３万８千社、３１万ユーザー突破！
（2014年2月現在）
導入企業例：
ユーザー数：
300000
225000
150000
75000
0
2011
6
9
12
2012
6
9
12
2013
6
9
12

6. ChatWorkの規模感 (2014年2月現在)
ユーザー数
約３１万
利用ユーザー国数
約１７０ヵ国
メッセージ数
約２億４千万
チャットルーム数
約１千８００万
タスク数
約１千１００万
ファイル数
約１千１００万 (約２４.９TB)

7. 本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド

8. 本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド

9. チャットワークの運営体制
Global
サービス開発 / 運営
Development
グロース 5人
UI Design
2人
Mobile:
12人
Web Design
Support
Web:
Server:
17人
Marketing
3人
2人
3人

10. 進行管理の要 - 週ベースガントチャート
１カラム１週間のスパン。職種問わず全メンバーを網羅。
週次でアップデート。3ヶ月先まで入れる。

11. 運用上のちょっとした工夫
会社のイベント
リリースマイルストーン
大きなリリースのみ記載。
ここを確認すれば大きな動きは把握できる。
※非プロジェクトメンバーはここを確認

12. プロジェクトの進め方
プロジェクトごとにディレクター(PD)を決める
プロジェクトの専用グループチャットを作成
仕様書のマインドマップを作成
チャットの概要にリンクをはる
必要に応じてGoogle Docsの資料も

13. PivotalTracker / GitHub Issuesで詳細タスク管理

14. プロジェクト進行のポイント
ほとんどのコミュニケーションはチャットで。
メールはしない。口頭確認やMTGは最低限に。
プロジェクトごとにグループチャットを作成し、
関係者を全員入れる。(Dev/Ops/Biz問わず)
タスクの生まれる「背景」を共有する。言われた
ことだけをする”作業者”をつくらない。
!

15. 困ったときは・・・
社内の部活チャットで聞く

16. さらに困ったときは・・・
PHP
AWS
iOS
Security
ISMS
Law
IA
PR
PPC
Titanium
FB Marketing
社外の専門家とのチャットで聞く
チャットコンサル、おすすめです

17. 本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド

18. チャットワークのフロントエンド

19. 特徴
画面遷移の無いフルAjaxアプリケーション
リアルタイム通信により更新が即座に反映
HTML5の技術を使ったリッチな機能
フレームワーク
jQuery
Backbone.js (一部)
jQuery.scrollTo jQuery.JSON
ライブラリ
jQuery.Cookie jQuery.JSONP
Zero Clipboard ChatWorkUI

20. リアルタイム通信の仕組み
DB
操作を送信
内容を取得
Web
Bさん
Aさん
Comet
プッシュ
Channel API Server
Comet
通知

21. 使用してるHTML5の機能１
Web Notifications
デスクトップ通知をブラウザの外で表示する。
チャットサービスでは必須！
Chromeが先行して実装。(webkitnotifications)
他のブラウザも後追いで実装。(Firefox Safari Opera)
ブラウザごとに微妙に挙動が違う・・・

22. 使用してるHTML5の機能２
File API + XML Http Request Level 2
複数ファイルをドラッグ&ドロップで送信。
ファイル送信時にプログレス表示。
IE9以下では隠しiframeにPOSTして実装。。。

23. 使用してるHTML5の機能３
WebRTC
ブラウザ上でのビデオ通話・画面共有を実現。
各ブラウザでの実装はまだまだ途中。
WebRTCをエミュレーションするプラグインで実装。
http://iswebrtcreadyyet.com/

24. モバイル

25. 特徴
iOS / Android 両アプリ対応
Titanium Mobile でクロスプラットフォーム開発
フレームワーク
Titanium Mobile
Backbone.js (+独自FW)
Zepto.js Lo-Dash
ライブラリ
Moment.js Hogan.js
Securely TiExtendNW

26. Titanium Mobileを採用した理由
CWリリース初期でWeb版の激しい機能アップデート
に、ネイティブで書いていては追いつけなかった。
Web版はフルAjax。コードを共有できるかも！
試したらWeb版のViewを書き換えるだけで基本動いた。

27. Titanium Mobileを採用した結果
Web版とのコード共有化は幻想だった。
安定したネットワークと潤沢なスペックを持つWebと、
プアなモバイルではまったくコードの書き方が違う。
結局、ゼロベースでTitaniumのベストプラクティスで書き
換えることに・・・

28. 十分安定したアプリをつくれるようになってきたが
iOS7の登場
Titanium SDKが対応するまで何もできない・・
ネイティブ化を決意。現在絶賛開発中です！
モバイルネイティブエンジニア募集中！

29. 本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド

30. サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App
Service
Admin
EC desk
…
…
Phest
EC Framework
ほぼすべてのコードはPHP。一部Python。

31. サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App
Service
Admin
…
EC desk
Phest
EC Framework
ChatWork App
チャットワークのアプリケーション部分。
フルAjaxなので、ほとんどがAPIの通信処理。
EC Framework
自社開発のシンプルなフルスタックフレームワーク。
名称は旧社名 (EC studio) から

32. サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App
Service
Admin
EC desk
…
Phest
EC Framework
EC desk
サービスプラットフォーム。
パッケージとしてサービスを複数アドオンできる。
一つのログインアカウントで多数のサービスを利用できる。
権限管理、ユーザー管理の仕組みなどを備える。
名称は(ry

33. サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App
Service … …
Admin
EC desk
Phest
EC Framework
ChatWork Admin
チャットワークの管理画面。
遷移ベースの一般的なWebアプリケーション。
Service Admin
社内用の顧客管理、システム管理、レポートなどのツール

34. サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App
Service … …
Admin
EC desk
Phest
EC Framework
Phest
デザイナ向け静的サイトジェネレーター。
テンプレートエンジンの処理結果を書き出す。
Amazon S3へのデプロイ機能も内蔵。
オープンソースとして公開中。
http://github.com/chatwork/Phest

35. APIをプレビュー公開しました！
http://developer.chatwork.com/ja/

36. APIの裏側
API定義 (YAML)
バリデーションルールの生成
APIドキュメントページの生成
ChatWork
API Server
API利用
Amazon S3でホスティング

37. 時間の都合で詳細をお話できなかったこと
インフラ
AWS + GAE。AutoScalingで負荷平準化。
DBは RDS(MySQL) + DynamoDB + ElastiCache(Memcached)
検索は Groonga。Elasticsearchを検証中。
監視は fluentd + Nagios + New Relic + SumoLogic。
デプロイ
GitHub + Jenkins + Capistrano + ChatWork
開発環境
Vagrant + Ansible + GitHub + Amazon S3

38. ありがとうございました！
エンジニア募集中です！
http://www.chatwork.com/ja/recruit.html
山本正喜