Technical Track memo

nucon.md

Nulab のカンファレンス NUCON (2014/02/04)

始まる前に

• CodeIQ が飲み物とおやつを提供
  • 専用のコラボドーナツを作ってる！
• 意外とラップトップを開いている人は多くない
• やっぱり Mac が多い
• スーツ姿の人も多い
• 雨天決行でも、人の入りは良い感じ
• スタッフは Nulab パーカー着てる
• パーカー良いなぁ

基調講演 (株式会社ヌーラボ 代表取締役：橋本正徳)

• nucon は4年ぶりのヌーラボイベント
• 新機能などの紹介を行う
• 社員数は22名
• ウェブサイトでは15名と表示しているが、更新が間に合っていない
• ほとんどエンジニア
• 本社は福岡
• オフィスは東京、京都、シンガポール、インドネシア、台湾
• 海外でも展開していることを知らない人が多い
• We are Providing Collaboration Services
• Backlog
• 20万アカウント, 10万プロジェクト
• 日本語、英語、中国語、韓国語
• Backlog の iPhone 版を開発している!
  • 複数スペース対応
  • 最近の更新
  • お知らせ通知
  • コメントやスター
• Cacoo
• 110万アカウント、400万シート
• 86%が海外ユーザー (うち13%が USA で次が台湾 9%, 次がコロンビア 5%)
• Enterprise Edition (オンプレ版)
  • DeNA, Cookpad, DMM Labo
• SDK Edition
  • ADFlow
• typetalk
• 今日正式リリース

How Typetalk is born?

• Backlog ではタスクが生まれた経緯がわかりづらかった
• 2010/10 にイベントを開催し、オープンなディスカッションを行い、魅力を感じた
• 2011/10 に Prototype の開発を開始 (HTML5, Server Push, Scala)
• 2012/02 に会社の中にプライベートオープン (Twitter Bootstrap デザイン)
  • 社内からのフィードバック集める
• 2014/02 に正式ローンチ
• いいねを伝える Like 機能
• 絵文字
  • 「ありがとう」と「ありがとう :)」では後者の方が良い感じ
• Twitter や YouTube などの「インライン表示」
  • 見た目を鮮やかに
• まとめて共有
  • 話し合いからタスクが生まれた経緯を簡単にわかるようにする
• モバイル対応
  • IOS / Android
  • iOS 7 / Android 4 (アグレッシブだな! うらやましい!)
• API 提供
  • OAuth 2.0 対応
• デモ
  • 機能のデモ
    • インライン表示
    • いいね
      • 遊び心がある感じのエフェクト
  • iPhone から投稿するデモ
• ロードマップ
  • Backlog 連携強化
  • デスクトップアプリ
  • ダイレクトチャット (なかったのか!)
  • プレミアムプラン

Nulab Account

• Cacoo アカウント持ってる人 > Backlog アカウント持ってる人 > Typetalk アカウント持ってる人
• これまではサービスごとにアカウントが分かれていた
• これからは1つのアカウントにまとめられる
• Backlog の場合は会社ごとにアカウントを持っていることもあったが、これも大丈夫
  • シングルサインオンができる
• Nulab Launch Box
  • Nulab のすべてのサービスの左上にアイコンがついて、ここから Backlog のスペースや Cacco, Typetalk にアクセス可能
• デモ
  • シンプルなログイン画面
  • はじめからアカウント名 / パスワードを入力するボックスが表示されている
  • Launch Box から別のスペースに簡単にアクセス可能
  • Cacoo にも Typetalk にも入力なしでログイン可能
  • Backlog にログインしているアカウントのスペースが使えれば、 Typetalk へリンク張ったときに自動的にリンクを有効化
• ロードマップ
  • グループ管理機能を強化
  • セキュリティ強化
    • 管理者がパスワードポリシー設定
    • 二段階認証
  • 契約管理
  • API
    • 3rd アプリでログインできるようにしたり、 Launch Box の中にアプリを入れたりできるようにする

開発者が語るヌーラボのコラボレーションサービス API 最前線

始まる前に

• 満員御礼 (立ち見がいる, 人が会場の外まであふれてる)
• API への注目度の高さがうかがえる
• スーツの人がぐっと減った
• やはりエンジニアが多い感じ
• 大ホールではなく、よくある「会議室」みたいな感じ
• iPhone / iPad ユーザー多い

始まり

Backlog 染田

• 2008/09 から API を提供
• 2010 からマッシュアップアワード提供企業
• 課題管理、ファイル共有、バージョン管理、WIki
• API でできるのは課題管理に特化
  • ファイル共有は WebDAV
  • バージョン管理は SVN / Git
  • Wiki はなし
• Backlog Manager という iOS アプリ
  • Backlog API を使ったサードパーティ製アプリ
• Jenkins Backlog Plugin
  • Backlog のファイル管理が更新されるとフックが走って、 Jenkins が何かして、結果が Backlog に戻ってくる
• Clojure, Scala, Java, Perl, PHP, Python, .NET, Node.js でライブラリを提供
  • 有志の開発
  • Java, Perl, Python は公式
  • Java 版はオフィシャルライブラリ化
  • API v2
    • OAuth 2
    • REST
    • v1 で未提供の各種データをカバー
      • 課題への添付ファイル, 通知, スター, Wiki

Cacoo 中原

• API 自体ははじめから
• 2013 から SDK 版を提供
• API でできること
  • PNG 形式で画像取得
  • 図の一覧・情報
  • 図の内容を取得できる
    • XML で
    • Cacoo で図を書くと、XML をパースして、EC2 のインスタンスを実際に立ち上げられる！
    • サンプルもある
  • SDK Edition
    • 自社サービスに図の編集機能を組み込む
    • アカウントに縛られない柔軟なアクセス制御
    • ロゴの変更
    • エディタの表示の変更
      • ボタン、パネル、シートタブなどを非表示
    • ADFlow 社で使っている
  • Cacoo miru
    • Android アプリ
  • Cacoo で書いた図を HTML を出力できる
• 今後の予定
• CMS 向けプラグイン
  • WordPress, Drupal
• PDF エクスポート (有料ユーザーのみ)

Typetalk 後藤

• フル API ベース
  • OAuth 2
  • REST API
  • developers.typetalk.in
• フル Ajax (Typetalk API (JSON))
  • 公式の iOS / Android でも全く同じ API を使っている
  • Web アプリはセッション, モバイルアプリは OAuth 2
  • Web アプリでは管理機能も提供
  • 管理機能以外の API を公開 (スマートフォン向けと全く同じもの)
    • 管理機能は今後提供
  • みんなクライアント作って！
  • Jenkins 通知なども簡単に使える
  • ユーザー数の通知 bot, 検証環境リリース案内 bot, リリース日告知 bot, 掃除時間通知 bot などを作っている
  • ストリーミング API 提供
  • 認証方式の追加
    • bot アカウント作ったりするの面倒くさいでしょ？
    • hubot みたいな対話 bot 作る？

Nulab Developers (仮)

• API を使った開発者のサポート
• ウェブサイトの整備
• API 情報の集約
• 入門ドキュメント
• サンプルアプリケーション
• オンラインコミュニティ
  • 利用方法についてのサポート
  • 開発中の API プレビュー
  • 開発者同士のコミュニケーションの場
• ハッカソンの開催
• @nulabjp でフォローアップします

Cacooを支える技術 〜世界の100万ユーザを支えるドローツールの今と未来〜

始まる前に

• 立ち見がいる状況は継続
• API 話よりも若干開発者色が薄くなった感じ
• ほとんど同じ感じだけども

始まり

• iPad と AirPlay でプレゼン
• 技術
  • Java : Apache Tomcat, Seasar, Mayaa
  • Flash : BlazeDS, Adobe Flex
  • DB : PostgresSQL
  • • Python スクリプトなど
• Flex で UI を作っている
• Flex の UI パーツの上にスキンをかぶせている
• Cacoo なりの UI (魂) をねじ込んでいる
• 編集画面では状態管理をパターン化して管理している (State パターン)
  • 保存中
  • フリーハンドで書いている
  • などなど
• 操作に応じてコマンドをサーバに逐一投げている (Command パターン)
  • コマンドがオブジェクトに積み重なっていくと図になる
  • 共同編集は BlazeDS にコマンドを投げて、コマンドを共同編集者にプッシュする
  • オブジェクトに対してコマンドを「再生」させるイメージ
  • コマンドが競合する場合はクライアント側で判定して実行させない
• Cacoo は Flash 関連にかなり依存している
  • コマンドは XML や JSON ではなく、 ActionScript ネイティブのバイナリデータ (ByteArray)
  • BlazeDS を使ったサーバーサイドプッシュを使っている
• 今時で考えると
  • Canvas, CSS3 を使ったリッチな UI
  • JSON オブジェクト (with gzip)
  • Socket.io で良いじゃない
• Cacoo は 2008 年誕生
  • IE7, 8
  • Safari 3
  • Chrome ベータ
  • HTML5 ドラフト発表
    • だからこそ、 Flex だった
• HTML5 は Flash の代替たり得るのか
  • Nulab も HTML5 に取り組んでいる
  • Typetalk の表は AngularJS だし
  • Flash は再描画範囲だけが書き換わる
    • Canvas でやろうと思うと、 Canvas 全体が基本になってしまう
  • 中抜きがある画像を選択したくても、基本のあたり判定が矩形になってしまう
  • Flash も Canvas も似たようなことはできるが、 Cacoo 的には Flash の方が良い感じ
  • 代替できるかどうかは調査が必要
    • ブラウザごとの挙動の違い
    • 同じブラウザの古いバージョン
    • モバイル対応
    • プラグインが必要
    • 新しい技術 VS 枯れた技術 (Flash は枯れすぎかも)
    • 新しい技術を使うと変化への追従は難しいかも
    • ユーザーの利便性
    • 提供者側の気持ち
  • 将来への取り組み
    • HTML5
    • ローカルアプリとの連携
      • スクリーンショット撮影
      • クリップボードイメージ利用
    • デスクトップ版 / タブレット版開発中
      • デスクトップ版は AIR
      • オフライン編集可能

職人任せにしないインフラ構築/運用 ~ DevOps時代を生きぬくために ~

始まる前に

• 立ち見いっぱい
• 意外と開発者ばっかりという感じもない

始まり

• @ikikko
• 日本 Jenkins ユーザー会’
• Backlog 側でアプリより開発をしていたが、最近はインフラより
• Jenkins やビルド環境の整備

背景

• ちょっと前までのインフラ
  • 2人のインフラ担当者が超がんばってた
  • その上にアプリ開発者が乗っかっていた
  • インフラ担当者が超職人だった
    • シェルスクリプトをがりがり書いてたり
    • ノウハウ共有がない状態
• 今のインフラ
  • みんなでやってる
  • アプリ開発レイヤーの中にもインフラを見る人がいる状態
    • インフラ職人は全体改善や緊急対応をやる
    • アプリ開発レイヤーの人がツール群を使いつつ、インフラも見る
      • Chef / AWS
    • 緊急対応が必要ない状態でも職人を抱えておく必要があるのは不健康
    • アプリレイヤーの人がインフラを理解していれば、職人は本質に集中できる
      • アプリとインフラの両面から問題に対処できるようになる
      • コードががんばるより、 nginx の設定などでスマートに対処できるのではないかという当たりがつけられる

インフラ構築・運用時の方針

• ノウハウを共有しやすくする
  • 動く仕様書が理想的
    • Excel とかそういうのでスクリーンショットとって、それで管理するなんてナンセンス
  • 作業手順を起こしておく
    • GUI 設定ではなく、 CUI で
    • AWS Management Console 経由ではなく、 AWS CLI で
  • シェルスクリプトは良くない
    • 別のツールを使おうよ
• 構築 / 運用作業を減らす
  • PaaS を使う
    • RDS / ElastiCache 使おう
    • ただし、費用や柔軟性に注意
    • ないものを作る
      • たとえばファイル共有部分は PaaS で提供できないので、そこを作る
      • これが価値になる

インフラの構成要素

• Jenkins / Packer / Ansible / serverspec
• Packer と Ansible で AMI を作る
  • できたものに対して serverspec でテスト
  • 結果を Typetalk に通知
• デプロイは Fabric で行う
  • Jenkins からデプロイ
  • デプロイ後は serverspec でテスト
  • 結果は Typetalk に通知
• Ansbile の冪等性 (何度実行しても結果は同じ) こそがノウハウ共有に必須
  • サーバ側は Python 実行環境と sshd だけ
  • Chef だと Knife-solo とかの組み合わせが必要で面倒くさい！
  • 使い筒蹴るかわからないツールのためにライブラリ入れるのはいやだ
• Fabric
  • シェルスクリプトをよりわかりやすくする
  • シェルスクリプトから移行しやすい
  • yum で gcc などを入れるのは冪等性の観点からよろしくない
    • こうしたものは Ansible で
  • 複数のサーバに同時にコマンド実行できるのが良いところ
• 補助的なツール
  • Packer
    • Vagrant 作者と同じ
  • AMI 作るためのツール
    • Ansible を起動時に実行可能
    • 定期実行して AMI を最新版にする
      • 一週間に1回最新にする
  • serverspec
    • RSpec 風のサーバー構成の管理テストツール
    • 例) Tomcat は走っているかなど
    • 稼働中のサーバにテストを走らせて、設定をテストする

TIPS

• 接続先ホストの管理を統一
• ssh.config は同一のものを流用
• 運用手順は極力 Fabric に寄せる
  • Fabric の中で Ansible をたたく

まとめ

• アプリの人もインフラを理解しよう
  • インフラの人がより高度な作業に注力できるようになる！
• 今後やりたいことは
  • 自動ユニットテスト
    • 今は動いているものに対して serverspec をかけているので、問題の検知がちょっと遅れる
    • コミット時点でテストが動くようにしたい
  • オートスケール
    • 今はコマンド1つで環境が作られるが、展開はできるようにしていない
    • いろいろと考えることはあるが……
  • Immutable Infrastructure
    • 冪等性がある Ansbile を動かしているのに、なぜか同じにならないことがある
    • サーバ対して再び Ansbile とか走らせるのではなく、新しくサーバ立ち上げて、設定して、DNS 切り替えれば良いじゃない！

今どきのリアルタイムコラボレーションツールの作り方 〜Backlog、Cacoo、Typetalkにおける実践例〜

始まる前に

• 立ち見いっぱい

始まり

• ニッチなテーマかも？
• @agata (CTO 兼 製品開発責任者)
  • Backlog / Cacoo 企画・開発
  • Typetalk は iOS 版アプリの開発担当 (!!)

なぜリアルタイム？

• Google Wave とか Linger あたりから注目を浴びるようになった
• ネットで仕事をする人が増えた
  • 会社を超えて
  • リモートで
  • Web で仕事をすることが普通になった
    • リアルタイムは便利！
    • Excel より Google Apps の方が簡単！便利！
• 機が熟した
  • ライブラリ / プロトコルのサポートが充実した

どうやってリアルタイム？

Backlog (XHR ポーリング)

• プロジェクト管理ツール
• 画面遷移型のウェブアプリ
• アクティブユーザーが多い
• 別タブでたくさん開く
• リアルタイム機能はお知らせ機能
  • ファビコンにも通知がつく
  • サーバやミドルウェアは増やしたくない
  • サーバの負荷は最小限に抑えたい
  • 数十秒の遅延は問題なし
    1. コメントをフォームで POST
    2. DB に保存
    3. 受け取り側は XHR でポーリングして情報を取得
    4. 表示を更新
    5. タブごとにリクエストされたくないので、 LocalStorage を使って結果を保存し、タブは書き込みイベントを受け取る
  • 同一ユーザからのアクセスは1分間は 304 を返す
  • ポーリング間隔はアクティブなタブとそうでないタブで変える
• Backlog はリアルタイムに感じるような仕組みを古い技術で再現している

Cacoo (Comet)

• 複数人で共同編集できる
• 遅延なしで変更を反映したい
  • メッセージングサーバは Flex / Flash 用の BlazeDS を利用
    • Cacoo のセッションメモを参照のこと
• クライアントはコマンドパターン実装
  • コマンドをモデル化
  • モデル化できれば、これをシリアライズしてメッセージングサーバに送信
    • 受領通知をその後受け取り、送信側の操作が確定する
    • AユーザとBユーザがほぼ同時に操作したら、早い者勝ち
    • 負けた後は実行できればもう一度、実行できなかったらさようなら
  • 他のユーザにプッシュ
  • デシリアライズしてオブジェクトにしてモデルに反映

Typetalk (WebSocket)

• チャットツールだが、機能豊富で、リアルタイム部分が多い
  • ユーザーアクションのほとんどがリアルタイム
• アーキテクチャ
  • AngularJS / socket.io (WebSocket が基本!)
  • nginx (受け口)
  • node.js (ストリーミング)
  • Redis (PubSub)
  • Play + Scala (アプリ)
  • PostgreSQL (DB)
• 流れ
  1. XHR で POST
  2. アプリサーバが JSON 形式の値で Redis に配信
  3. そのイベントを node.js が受け取る
  4. socket.io でそのままクライアントに情報を渡す
  5. AngularJS がビューモデルの更新
• バケツリレーアーキテクチャ
• iOS はリアルタイムできていない
  • 現在はポーリングベース
  • ストリーミング API できたら？
  • 方式は検討中

リアルタイムな UI

• 変更がぽーんと通知が飛んでくる
• 今、誰が何かを見ているというものがアイコンで表示される