これは SRE Advent Calendar 11日目の記事です。 こんにちは、Backlog の SRE を担当している吉澤（Muzi と呼ばれている人）です。 本記事では、SRE Lounge #5 で講演した際に、時間の都合で省略した「ヌーラボ社内での Backlog のサービスレベル計測とその結果の活用」についてご紹介します。 長年運用されてきたサービスを改善するために、SRE ができる取り組みの一例としてご参考ください。 SRE とは？ SRE とは、Site Reliability Engineering の略です。これは Google で初めて提唱された概念で、その提唱者自身は著書「SRE サイトリライアビリティエンジニアリング」（いわゆる「SRE 本」）のなかで以下のように述べています。 Google 内で規定されることになったサイトリライアビリティエンジニアリングとは、

こんにちは。Backlogグロースハックチームの砂川です。 今回はBacklogがサービス改善のために行なっている「アンケートを表示する機能」と、その機能によって回答率がどれほど改善されたかについてご紹介します。ユーザーの方々の声をサービスの改善に役立てたい方の参考になれば嬉しいです。 Backlogが行なった取り組み Backlogでは、これまでユーザーの方々にアンケートをとりたい場合、Backlogの上部にお知らせとしてGoogleフォームへのリンクを張っていました。 こんなやつです。 しかし、Backlogユーザーの方々のような、アンケート目的に集められていない人々を対象にしたwebアンケートでは、一般的に回答率がかなり低くなってしまいます。実際Backlogでも、上記のような形式では回答率が1%を大きく切っていました。直近のアンケートではなんと約0.3%……。アンケートは答えていた

Typetalkチームのインフラ担当の二橋 (@futahashi) です。 本稿ではTypetalkでキャッシュしないCDNを用いたAPI高速化を実現しましたので、その技術を紹介したいと思います。 Webアプリケーションに汎用的に使える技術で、簡単に導入できて改善効果も大きいので、興味を持たれた方は是非試してみて下さい！ Typetalkが抱えてた課題 Typetalk は世界中にサービス展開しているチャットツールです。 しかし、ユーザがサービスを利用する地域に依存してネットワークの応答時間に差がある問題がありました。 これは、サービスを単一のリージョンで提供しており、リージョンから離れた地域よりアクセスされると応答に時間がかかってしまうためです。 静的なコンテンツ部分はCDNによるキャッシュで高速化できていたのですが、動的な部分は対応ができていなかったため、応答に時間がかかっていました

＜トピックス＞ 全世界300万人が利用するオンライン描画ツール「Cacoo」、AWSのインフラ構成図を自動で描画する機能をリリース AWSのアイコンを自動で配置するため、AWS構成図を簡単に素早く描画することができるように ベータユーザーの方からは「既存のAWS環境を図に起こす作業にかかる時間が半分くらいには短縮できそうだ」とのコメントも 株式会社ヌーラボ(本社：福岡県福岡市、代表取締役：橋本正徳)が提供しているビジュアルコラボレーションツール「Cacoo (カクー)」は、AWSのインフラ構成図(以下、AWS構成図)を自動で描画する機能(以下、本機能)をリリースしました。「Cacoo」からAWSに通信を行い、AWSのアイコンを自動で配置するため、AWS構成図を簡単に素早く描画することができるようになります。 ■ 本機能の詳細について ダウンロード不要で共同編集ができるビジュアルコラボレーシ

ヌーラボのスケートボード担当のReoです。プロスケーターとして活動する傍らヌーラボでは当サイトやBacklog / Cacoo / Typetalkのサイト更新を担当しています。 ヌーラボは大半がエンジニアで構成されており、サイト更新をメインで行う担当者がいなかったため2017年10月にWebサイトの担当者として入社しました。 マーケティングチームの所属ではありますが、技術者としてスキルアップを目指せるポジションで入社させてもらい、個人的にもWebアプリを作りたいという気持ちもあります。 そこで本稿では、Webデザイナーだった私がフロントエンドエンジニアを目指すためにJavaScriptとReactを学んでオセロゲームを制作したお話しをします。 はじめに ヌーラボ入社前は未経験のWebデザイナーとして、社長と従業員1人の小さな制作会社に1年ほど雇ってもらい、HTMLとCSS、サイト制作に必

こんにちは。Cacoo チームの木村（@cohhei）です。Cacoo チームでは、 Kubernetes によるアーキテクチャの microservices 化に取り組んでいます。今回は私たち Cacoo チームが microservices 化によって解決しようとしている課題と取り組みの内容、その成果についてご紹介します。 この記事では以下の内容を含みます。 Cacoo の開発チームがどんな課題を抱えていたか 何故 microservices の道を選んだか どんな技術を選んだか microservices 化してどうだったか 現状の課題 課題：古いフレームワークとモノリシックなアプリケーション Cacoo は2009年にベータ版がリリースされた歴史のあるプロダクトで、モノリシックなアプリケーション上ですべての機能が実行されていました。 そのため、それぞれのコードの依存関係を十分に理解

Backlogは、ブラウザでの操作のほぼすべての機能をAPIで提供しています。Backlog APIを皆様はご活用してますでしょうか？ヌーラボでも、日頃の業務を自動化するためにBacklog APIをフル活用しています。今回は私の仕事で利用する機会のあったBacklog APIについてご紹介させて頂きます。 Backlogには「ファイル共有」というファイルサーバの機能があります。このファイルサーバーにアップロードされたファイルの一部を、S3(AmazonS3)へ自動的に同期したい、という思いがありました。 この作業をBacklog APIとAWS Lambdaを使って自動化しましたので、今回の記事では、Bakclog APIの設定からAWS Lambdaでのプログラミング、そして、Serverless Frameworkを使った自動デプロイの方法まで詳しくご紹介します。 構成 では今回の仕

こんにちは、Cacooチームの平山です。僕は対外的には技術のことをお話しする機会は最近はあまり無いのですが、今回はCacooのUIリニューアルに伴い追加された、内部的には「自動保存」と呼ばれる機能の技術的な仕組みについてお話しします。 皆さん（きっと）ご存知の通り、Cacooは2018年6月28日に全面的なユーザーインターフェースの刷新を行いました。これに伴い、以前は図の閲覧用と編集用に分かれていたページを、編集機能を持つ一つのエディタで担うという変更を実施しました。Google Docsをはじめとする、オンラインのドキュメントツールと同等のユーザー体験に倣うような変更とも言えます。 新しいユーザーインターフェースのエディター さて、以前からCacooを利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編

Cacoo 開発チームの山岸です。ウェブにおけるアニメーション・インタラクションが好きなので今回は Web Animations API を紹介します。 Web Animations API (以下 WAAPI)とは これまでの CSS Transitions / Animations や SVG Animation を JavaScript で実現するための API です。WAAPI によりアニメーションにおける統一的なインターフェースを提供することを目的として仕様策定が進められています。 何を解決するか CSS によるアニメーションの場合、実行時の制御ができないことや複雑な CSS Animations の修正の大変さがありました。 また、CSS と JavaScript の両方を用いることも多いですが、アニメーション表現と実行のコントロールが別になることでの管理のしづらさ、reque

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを

Backlog 開発チームの saki です。仕事は Scala と Java ですが、Ruby や JavaScript などのいわゆる動的型付け言語も好きです。最近はフロントエンドに興味がありプライベートで Vue.js を触っています。 Vue はプログレッシブフレームワークを謳っており、その名の通り最初は小さく導入でき、ソフトウェアの成長に合わせて他のライブラリを組み合わせることで規模の大きい開発にも利用できる柔軟さが気に入りました。ドキュメントも充実しており学びやすいと思います。どのライブラリも自分が一番と宣伝する中で、他のフレームワークとの比較 のページには誠意を感じました。 今回はそんな Vue を使って、かんばんライクなタスク管理アプリの簡単な作り方を紹介します。アウトラインは以下です。 基礎の作成 状態別にタスクを抽出する処理を作成 task-card コンポーネントの作

2017年9月21日にいよいよ Java 9 がリリースされます。 Java 9 を利用することのメリットは一体何でしょうか？こんにちは。ヌーラボのアカウント基盤を Java で支える Nulab Apps チームの加藤です。 Nulab Apps チームが開発するアカウントの基盤はサード パーティ製の Java ライブラリだけでも 154 個の依存関係を有します。154 個の Java ライブラリは数々の破壊的変更を乗り越え、おおよそ最新の安定バージョンに更新し続けてきました。 もちろん言語のメジャーバージョンアップにも対応し、現在では Java 8 の関数型をプロダクト コードで使用可能な環境を維持しています（これが楽しい）。本ブログは、ヌーラボのアカウント基盤を先行して (ローカル開発環境のみで) Java 9 にマイグレーションして発生した問題と一時的な対処法を記録した奮戦録です。

以下の3コマンド、これだけでプロジェクトに必要な開発環境ができあがる。そんな環境を Docker で作ってみませんか？ $ git clone https://github.com/dataich/sample-docker.git $ cd sample-docker $ docker-compose up こんにちは、Typetalkチームのエンジニアの吉田です！ 新しいエンジニアがチームに入ってきてまずやることは、DBやWebサーバなどの開発環境を構築することでしょう（9月に新しい人がチームに入ります、やったね！）。 Typetalkチームでも以前はREADMEに記述された手順に従って、開発者が個別に構築していました。その際READMEに書かれたミドルウェアのバージョンが古かったり、実は手順そのものが変わっていたりすることもあり、ハマることもありました。また、複数のプロジェクトで違う

こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if

こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ

こんにちは。Cacooチームのイニエスタこと、とおのぶです。CacooはデータベースのPostgreSQLのバージョンアップを実施しました。基本的には公式のpg_upgradeの手順に従っています。ここではドキュメントには記載の少ない具体的な作業内容の流れを紹介したいと思います。 理由 ユーザアンケートからみる Cacoo のコア・バリューで記されたとおり、全体的なパフォーマンスの向上については重要度の高い課題の一つです。PostgreSQL 9.5ではソート性能の大幅な改善が強化点の一つで、パフォーマンスの改善が見込まれます。またフェイルオーバ後、新しいマスターに追従するスタンバイとして、古いマスターサーバをオンラインに戻すことができるpg_rewindも、PostgreSQL 9.5の魅力の一つです。 バージョンアップ前の構成 構成は、マスタとスレーブのストリーミング・レプリケーション

Photo via Visual hunt Backlog の一部のスペースにて Amazon Aurora へと移行しました。ここでは、その経緯と実際に実施した作業を簡単にご紹介させていただきます。 移行の経緯 昨年末データベース障害が発生しユーザー様には多大なご迷惑をお掛けしてしまいました。 Backlog には Terraform をどう使っているかを紹介したブログ にあるように複数の運用環境があります。 その各々の環境の構築時期によって EC2 上で自前運用していた MySQL もあれば、RDS for MySQL もある、といった統一されていない状況でした。また EC2 上ではまだ MySQL 5.1 も稼働していました。 移行を検討するにあたり、優先したのは障害時の復旧が素早く出来ることと、少しでも運用の管理コストを下げることでした。Backlog のサーバは 100 台以上で

Docker 社のユースケースでもあげられているように、CI/CD で Docker を使うというのは、プロダクションシステム以外で Docker の特性を活用できる良い場所だと考えています。ヌーラボではBacklog でのプルリクエストの提供以降、CI のジョブの実行のために Docker を利用しています。ここではその運用から学んだ５つの Tips を紹介したいと思います。 ヌーラボの CI 環境の全体図 これがヌーラボの CI 環境の全体図です。 CI には Jenkins を利用しており、Jenkins のジョブのトリガーとなるのは左側の Backlog や Typetalk です。実際には Jenkins Backlog Plugin や Jenkins Typetalk Plugin を利用してジョブを処理しています。これらのプラグインの詳細については本ブログ末に参照先をのせて

注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ