[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
SlideShare a Scribd company logo
チャットワークを支える技術
- ヒカ☆ラボ -

山本正喜
-自己紹介 ChatWork株式会社	

専務取締役CTO 山本 正喜
ビジネスチャットツール「チャットワーク」を展開中

東京:15人

大阪:20人

USA:6人
現在ルクセンブルクに子会社を設立準備中
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
チャットワークのコンセプト
クラウド型ビジネスチャットツール
チャットの効率性・シンプルさをビジネスへ

+
ビデオ通話

in the cloud

チャット

タスク管理
導入数 3万8千社、31万ユーザー突破!
(2014年2月現在)

導入企業例:

ユーザー数:
300000
225000
150000
75000
0

2011

6

9

12

2012

6

9

12

2013

6

9

12
ChatWorkの規模感 (2014年2月現在)
ユーザー数

約31万

利用ユーザー国数

約170ヵ国

メッセージ数

約2億4千万

チャットルーム数

約1千800万

タスク数

約1千100万

ファイル数

約1千100万 (約24.9TB)
本日お話すること

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

運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
チャットワークの運営体制
Global

サービス開発 / 運営

Development

グロース 5人

UI Design
2人

Mobile:

12人

Web Design

Support

Web:
Server:

17人

Marketing

3人

2人
3人
進行管理の要 - 週ベースガントチャート

1カラム1週間のスパン。職種問わず全メンバーを網羅。

週次でアップデート。3ヶ月先まで入れる。
運用上のちょっとした工夫
会社のイベント

リリースマイルストーン
大きなリリースのみ記載。	

ここを確認すれば大きな動きは把握できる。	

※非プロジェクトメンバーはここを確認
プロジェクトの進め方
プロジェクトごとにディレクター(PD)を決める	

プロジェクトの専用グループチャットを作成	

仕様書のマインドマップを作成	


チャットの概要にリンクをはる
必要に応じてGoogle Docsの資料も
PivotalTracker / GitHub Issuesで詳細タスク管理
プロジェクト進行のポイント
ほとんどのコミュニケーションはチャットで。

メールはしない。口頭確認やMTGは最低限に。	

プロジェクトごとにグループチャットを作成し、
関係者を全員入れる。(Dev/Ops/Biz問わず)	

タスクの生まれる「背景」を共有する。言われた
ことだけをする”作業者”をつくらない。	

!
困ったときは・・・

社内の部活チャットで聞く
さらに困ったときは・・・

PHP

AWS

iOS

Security

ISMS

Law

IA

PR

PPC

Titanium

FB Marketing

社外の専門家とのチャットで聞く
チャットコンサル、おすすめです
本日お話すること

運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
チャットワークのフロントエンド
特徴
画面遷移の無いフルAjaxアプリケーション	

リアルタイム通信により更新が即座に反映	

HTML5の技術を使ったリッチな機能	


フレームワーク

jQuery	

Backbone.js (一部)
jQuery.scrollTo jQuery.JSON	


ライブラリ

jQuery.Cookie jQuery.JSONP	

Zero Clipboard ChatWorkUI
リアルタイム通信の仕組み

DB

操作を送信

内容を取得

Web
Bさん

Aさん

Comet

プッシュ

Channel API Server

Comet

通知
使用してるHTML5の機能1

Web Notifications
デスクトップ通知をブラウザの外で表示する。	

チャットサービスでは必須!

Chromeが先行して実装。(webkitnotifications)	

他のブラウザも後追いで実装。(Firefox Safari Opera)	

ブラウザごとに微妙に挙動が違う・・・
使用してるHTML5の機能2

File API + XML Http Request Level 2
複数ファイルをドラッグ&ドロップで送信。	

ファイル送信時にプログレス表示。

IE9以下では隠しiframeにPOSTして実装。。。
使用してるHTML5の機能3

WebRTC
ブラウザ上でのビデオ通話・画面共有を実現。

各ブラウザでの実装はまだまだ途中。	


WebRTCをエミュレーションするプラグインで実装。
http://iswebrtcreadyyet.com/
モバイル
特徴
iOS / Android 両アプリ対応	

Titanium Mobile でクロスプラットフォーム開発	


フレームワーク

Titanium Mobile	

Backbone.js (+独自FW)
Zepto.js Lo-Dash 	


ライブラリ

Moment.js Hogan.js	

Securely TiExtendNW
Titanium Mobileを採用した理由

CWリリース初期でWeb版の激しい機能アップデート
に、ネイティブで書いていては追いつけなかった。	

Web版はフルAjax。コードを共有できるかも!

試したらWeb版のViewを書き換えるだけで基本動いた。
Titanium Mobileを採用した結果

Web版とのコード共有化は幻想だった。
安定したネットワークと潤沢なスペックを持つWebと、

プアなモバイルではまったくコードの書き方が違う。	

結局、ゼロベースでTitaniumのベストプラクティスで書き
換えることに・・・
十分安定したアプリをつくれるようになってきたが

iOS7の登場
Titanium SDKが対応するまで何もできない・・	

ネイティブ化を決意。現在絶賛開発中です!
モバイルネイティブエンジニア募集中!
本日お話すること

運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App

Service
Admin
EC desk

…
…
Phest

EC Framework

ほぼすべてのコードはPHP。一部Python。
サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App

Service
Admin

…

EC desk

Phest

EC Framework
ChatWork App
チャットワークのアプリケーション部分。	

フルAjaxなので、ほとんどがAPIの通信処理。

EC Framework
自社開発のシンプルなフルスタックフレームワーク。	

名称は旧社名 (EC studio) から
サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App

Service
Admin
EC desk

…
Phest

EC Framework
EC desk

サービスプラットフォーム。	

パッケージとしてサービスを複数アドオンできる。	

一つのログインアカウントで多数のサービスを利用できる。
権限管理、ユーザー管理の仕組みなどを備える。	

名称は(ry
サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App

Service … …
Admin
EC desk

Phest

EC Framework
ChatWork Admin
チャットワークの管理画面。	

遷移ベースの一般的なWebアプリケーション。

Service Admin
社内用の顧客管理、システム管理、レポートなどのツール
サーバーサイドのアーキテクチャ
ChatWork
ChatWork
Admin
App

Service … …
Admin
EC desk

Phest

EC Framework
Phest
デザイナ向け静的サイトジェネレーター。	

テンプレートエンジンの処理結果を書き出す。	

Amazon S3へのデプロイ機能も内蔵。	

オープンソースとして公開中。
http://github.com/chatwork/Phest
APIをプレビュー公開しました!

http://developer.chatwork.com/ja/
APIの裏側

API定義 (YAML)

バリデーションルールの生成

APIドキュメントページの生成

ChatWork	

API Server

API利用

Amazon S3でホスティング
時間の都合で詳細をお話できなかったこと

インフラ
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
ありがとうございました!

エンジニア募集中です!

http://www.chatwork.com/ja/recruit.html
山本正喜

More Related Content

【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社