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