【 itベンチャーを支えるテクノロジー...
DESCRIPTION
2014/2/19(水)の弊社イベント、ヒカ☆ラボにて使用された資料を公開します。 エンジニア・デザイナーの技術＆知識UPのための無料イベント「ヒカ☆ラボ」はこちら http://at-agent.jp/service/event/TRANSCRIPT
チャットワークを支える技術- ヒカ☆ラボ -
山本正喜
-自己紹介 -
ChatWork株式会社 専務取締役CTO 山本 正喜
ビジネスチャットツール「チャットワーク」を展開中
東京：15人
大阪：20人 USA：6人現在ルクセンブルクに子会社を設立準備中
チャットワークのコンセプト
クラウド型ビジネスチャットツールチャットの効率性・シンプルさをビジネスへ
+
ビデオ通話
in the cloud
チャット タスク管理
導入数 ３万８千社、３１万ユーザー突破！
導入企業例：（2014年2月現在）
0
75000
150000
225000
300000
2011 6 9 12 2012 6 9 12 2013 6 9 12
ユーザー数：
ChatWorkの規模感 (2014年2月現在)
ユーザー数 約３１万
利用ユーザー国数 約１７０ヵ国
メッセージ数 約２億４千万
チャットルーム数 約１千８００万
タスク数 約１千１００万
ファイル数 約１千１００万 (約２４.９TB)
本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
チャットワークの運営体制
Global
Web:
Mobile:
Server:
Development
12人
サービス開発 / 運営 17人
Web Design
Marketing
グロース
2人
3人
5人
UI Design
Support
2人
3人
進行管理の要 - 週ベースガントチャート
１カラム１週間のスパン。職種問わず全メンバーを網羅。
週次でアップデート。3ヶ月先まで入れる。
運用上のちょっとした工夫
会社のイベント
リリースマイルストーン大きなリリースのみ記載。 ここを確認すれば大きな動きは把握できる。 ※非プロジェクトメンバーはここを確認
プロジェクトの進め方プロジェクトごとにディレクター(PD)を決める
プロジェクトの専用グループチャットを作成
仕様書のマインドマップを作成
チャットの概要にリンクをはる必要に応じてGoogle Docsの資料も
PivotalTracker / GitHub Issuesで詳細タスク管理
プロジェクト進行のポイント
ほとんどのコミュニケーションはチャットで。
メールはしない。口頭確認やMTGは最低限に。
プロジェクトごとにグループチャットを作成し、
関係者を全員入れる。(Dev/Ops/Biz問わず)
タスクの生まれる「背景」を共有する。言われた
ことだけをする”作業者”をつくらない。
!
困ったときは・・・
社内の部活チャットで聞く
さらに困ったときは・・・
PHP
Security
AWS iOS Titanium
IA
ISMS
PPC FB Marketing
Law
社外の専門家とのチャットで聞く
PR
チャットコンサル、おすすめです
本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
チャットワークのフロントエンド
特徴画面遷移の無いフルAjaxアプリケーション
リアルタイム通信により更新が即座に反映
HTML5の技術を使ったリッチな機能
フレームワーク jQuery Backbone.js (一部)
ライブラリ
jQuery.scrollTo jQuery.JSON jQuery.Cookie jQuery.JSONP Zero Clipboard ChatWorkUI
リアルタイム通信の仕組み
Web
Channel API Server
DB
Comet Comet
内容を取得操作を送信
通知プッシュAさん Bさん
使用してるHTML5の機能１
Web Notifications
デスクトップ通知をブラウザの外で表示する。 チャットサービスでは必須！
Chromeが先行して実装。(webkitnotifications) 他のブラウザも後追いで実装。(Firefox Safari Opera) ブラウザごとに微妙に挙動が違う・・・
使用してるHTML5の機能２
File API + XML Http Request Level 2
複数ファイルをドラッグ&ドロップで送信。 ファイル送信時にプログレス表示。
IE9以下では隠しiframeにPOSTして実装。。。
使用してるHTML5の機能３
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と、
プアなモバイルではまったくコードの書き方が違う。
結局、ゼロベースでTitaniumのベストプラクティスで書き
換えることに・・・
Web版とのコード共有化は幻想だった。
十分安定したアプリをつくれるようになってきたが
Titanium SDKが対応するまで何もできない・・ ネイティブ化を決意。現在絶賛開発中です！
モバイルネイティブエンジニア募集中！
iOS7の登場
本日お話すること
運営体制 / プロジェクト管理
フロントエンド / モバイル
サーバーサイド
サーバーサイドのアーキテクチャ
EC Framework
ChatWork App
EC desk
ChatWork Admin
…
Phest
ChatWork Admin
ほぼすべてのコードはPHP。一部Python。
Service Admin
…
サーバーサイドのアーキテクチャ
自社開発のシンプルなフルスタックフレームワーク。 名称は旧社名 (EC studio) から
EC Framework
ChatWork App
チャットワークのアプリケーション部分。 フルAjaxなので、ほとんどがAPIの通信処理。
EC Framework
ChatWork App
EC desk
ChatWork Admin
…
Phest
ChatWork Admin
…Service Admin
サーバーサイドのアーキテクチャ
サービスプラットフォーム。 パッケージとしてサービスを複数アドオンできる。 一つのログインアカウントで多数のサービスを利用できる。 権限管理、ユーザー管理の仕組みなどを備える。 名称は(ry
EC desk
EC Framework
ChatWork App
EC desk
ChatWork Admin
…
Phest
ChatWork Admin
…Service Admin
サーバーサイドのアーキテクチャ
……
社内用の顧客管理、システム管理、レポートなどのツール
Service Admin
ChatWork Admin
チャットワークの管理画面。 遷移ベースの一般的なWebアプリケーション。
EC Framework
ChatWork App
EC desk
ChatWork Admin
…
Phest
ChatWork Admin
…Service Admin
サーバーサイドのアーキテクチャ
……
デザイナ向け静的サイトジェネレーター。 テンプレートエンジンの処理結果を書き出す。 Amazon S3へのデプロイ機能も内蔵。 オープンソースとして公開中。
Phest
EC Framework
ChatWork App
EC desk
ChatWork Admin
…
Phest
ChatWork Admin
…Service Admin
http://github.com/chatwork/Phest
APIの裏側
ChatWork API Server
バリデーションルールの生成 APIドキュメントページの生成
Amazon S3でホスティング
API利用
API定義 (YAML)
時間の都合で詳細をお話できなかったこと
インフラ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