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

チームのコラボレーションを促進し、働くを楽しくするツール「Backlog (バックログ)」「Cacoo (カクー)」「Typetalk (タイプトーク)」を開発、提供する株式会社ヌーラボ（本社：福岡県福岡市、代表取締役：橋本 正徳、以下 ヌーラボ）は、宮古島市教育委員会と共同で、社員の宮古島におけるリモート就業を支援する社内制度「リゾートワーク制度」を始動しましたので、お知らせします。 ■ 「リゾートワーク制度」始動の背景 「リゾートワーク制度」は、宮古島からリモート環境で通常業務などに従事する「リゾートワーク」を希望する社員を社内公募し、選抜された社員(およびその家族)の旅費などの一部をヌーラボが負担する内容です。 ヌーラボは、自身が開発・提供する3つのコラボレーションツール「Backlog」「Cacoo」「Typetalk」によって、地球上のどこにいてもオンラインで仕事ができています。

AWS を使い倒す猛者が集結！！ Geeks Who Drink – AWS Edition 参加レポート #GWD_Nulab はじめまして。株式会社スタディストでSREの仕事をしている北野（@katsuhisa__）です。2017年11月10日にヌーラボさん東京オフィスにて行われた「Geeks Who Drink in Tokyo -AWS & 神楽坂 Edition-」に参加してきました！ 当日のイベントの要点をまとめていたところ、ヌーラバーのみほさんにお声がけいただき、本ブログに寄稿させていただくことになりました。 さっそくですが、本イベントを振り返ります！ 神楽坂オフィス最後の Geeks Who Drink -AWS Edition を開催しました！ ※当日の熱狂をリアルタイムで感じたい方は、Togetter 「#GWD_Nulab in Tokyo AWS Editionまと

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

すごいぞ！ヌーラボ 社員総会 はお祭り騒ぎ😎 Nulab General Meeting 2017( #nulabGM2017 )、とびっきりの3日間を徹底レポートします！ 「 社員総会 」といえば、厳粛なセレモニーを思い浮かべる方も多いのでは？「Fun. Creative. Collaboration.」が合言葉のヌーラボは、社員総会も全力で楽しみます。2017年の ヌーラボ 社員総会(以下、 General Meeting )は、6月28日(水)〜6月30日(金)の3日間で行われました。思いっきり楽しんで、思いっきり学んで、思いっきりコラボレーションした3日間を徹底レポートします！ 文末では「なぜ General Meeting を行なっているのか」について、代表の橋本に聞いたインタビューも記載していますので、ぜひ最後までお見逃しなく！ 6/28 AM10:00 世界各国のヌーラバー

Go言語 ってぶっちゃけた話どう？Go言語開発者が本音を語った Geeks Who Drink in Tokyo をレポート！ 2017年6月23日にヌーラボ東京オフィスにて「 Geeks Who Drink in Tokyo–Go Go Golang Edition!」を開催しました！本イベントは、6月28日に福岡で開催された「 Geeks Who Drink in Fukuoka -Go Go Golang Edition!-」のロードショーイベントです。実際の開発でGoを使っている Go言語開発者 や、今後使いたい！という方が集まり、様々な視点でGo言語を使った開発に関するノウハウを共有しました。議論が白熱したイベント模様をお届けします。 全員で「Go Go Golang!」の掛け声と共に写真を撮りました！ 他言語と比較したGo言語の良し悪し及び学習について 最初に登壇したのは、日本

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

働き方改革の一環としても注目され、導入企業も増えつつある「 リモートワーク 」。ヌーラボは、福岡、東京、京都、そしてニューヨークと拠点を分散して開発を進めていることもあり、リモートワークのメンバーも多数います。そういった背景を踏まえて、リモートワークが出来る環境を作るために苦悩するヌーラボの代表とスクラムマスターに「働き方」に対する考え方を話してもらいました。 代表取締役　橋本 ヌーラボ代表。普段は福岡本社にいながら、東京・京都支社へは数ヶ月に1回出張をしている。 Backlog スクラムマスター　中村 福岡・東京・京都に散らばる Backlog チームをまとめるスクラムマスター。日頃から円滑なチーム運営やコミュニケーションを行うために、努力している。取り組みの紹介などはこちらから。 実は、本ブログのインタビュー取材も東京、福岡、中村の自宅と3拠点で行われた。 ヌーラボの ”まだまだ道の途

Backlog インフラ担当の松浦です。正式リリースから今年で 11 年目を迎えたBacklogは、昨年2016年末に新しいユーザーインターフェース（以下UI）へ大幅にリニューアルしました。開発メンバーが新しいUIの開発を進める裏側では、さらに運用しやすくするために、粛々とインフラの改善を実施していました。今回はその改善内容の一部である EC2-Classic から EC2-VPC に移行したときの内容をご紹介します。 EC2-Classic と EC2-VPC の違いに関してはこちらをご参照ください EC2-Classic から EC2-VPC へ移行した理由 ヌーラボのサービスは全て AWS で運用されています。私自身、昔から AWS を使っていたこともあり、古い環境では EC2-Classic 利用していました。EC2-Classic で運用していて、不便に感じていた点を以下に挙げま

実はガンダムを見たことがないので、時々社内のガンダムトークについていけないことがあります、中村です。今日は、 Jenkins のビルドを高速化し、リリースまでの時間を大幅に短縮した、改善策をご紹介します。全体で2~3倍程度、一部処理では何と10倍以上もビルドを高速化できました。 改善策1 : push 型デプロイから pull 型デプロイへ 改善策2 : テストケースを自動分割して、よりアグレッシブに並列実行 全体のリリース時間に対する改善結果 ビルド時間の可視化 改善策1 : push 型デプロイから pull 型デプロイへ まずはデプロイ時の方式を、push型デプロイからpull型デプロイに変更した改善策を説明します。ここで、push型デプロイは中央サーバからデプロイ用ファイルを転送する方式で、pull 型デプロイは各サーバがファイルを取得する方式とします。 各フェーズの構成は、下図の

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

ヌーラボの新人研修 ヌーラボでは新しく入られた方を対象に、約1月ほどの新人研修を行っています。 各事務所で研修のメンターとなった人と新しく入られた方とで相談しながら内容を決めていくので、あまり形式だったものがないのですが、新しく一つサービスを開発してもらうことが多いです。京都事務所ならではの研修もあるのですが、それは後ほど紹介します。 研修で何を伝えたいか ヌーラボには新卒よりも中途で入られるかたが多く、基本的な技術の習得をメインの目的とするのではなく、チームでの仕事の進め方や、ヌーラボがサービスとして大事にしていること、一緒に仕事をしていくために必要な言葉では伝えにくい、文化のようなものを伝えるのをメインの目的としています。 ここでは、実際に最近の京都事務所で行われた研修の内容について紹介したいと思います。 どんな研修したの？ 今年3月に入社された松本さんの場合は、以下の縛りの中で興味を

Webサービスでアカウントを登録する際、パスワードを入力する度にその安全度を表してくれる強度メーター。皆様もおそらく目にしたことがあるのではないでしょうか。GoogleやFacebook、Twitterのような大規模なサービスでも、サインアップ画面等に設置されています。 このUIの要素は、MSR(Microsoft Research)の論文によると類推されづらいパスワードを促してサービスの安全性を高めることに効果的だということが証明されています。 お客様自身の大事な情報を守る上でとても重要なパスワード。ヌーラボアカウントでも、類推されにくいより強度の高い設定を促すためにパスワード強度メーターを設置しました。 この記事では、パスワード強度メーターを設置するに当って得た知見をもとに、その裏側の仕組みをご紹介させていただきます。 パスワード強度ってなに ？ そもそもパスワード強度とはなんなのか。

Photo via Visual hunt ヌーラボアカウントではつい先日、Amazon RDS for MySQL から Amazon Aurora へと移行しました。ここでは、その経緯と実際に実施した作業を簡単にご紹介させていただきます。 移行の経緯 ヌーラボアカウントは Backlog や Cacoo、Typetalk といったヌーラボのサービスへの認証機能を提供しています。もし認証機能が使えないとすべてのサービスを利用できなくなってしまいます。そのため、ヌーラボアカウントには常に認証機能を提供し続けられるような、高いアベイラビリティが求められています。 ヌーラボアカウントではこれまで RDS for MySQL を利用していましたので、MySQL 互換を掲げる Amazon Aurora は、リリースされたときから移行の可能性を検討をしてきました。Aurora のメリットについては

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

最近、リモートワークなど柔軟な働き方に関する記事をよく見かけるようになり、関心の高さを感じています。特に女性は結婚や出産などライフステージの変化と仕事のバランスに悩むことも多く、リモートワークに興味がある方も多いのではないでしょうか？ 私は結婚を機に離島に引っ越し、今年の5月からリモートワークをはじめました。そこで、人口701人の小さな島でリモートワークをする話を書いてみたいと思います。（リモートワークだからではなく、島ならではの話も含まれていますが、そこはご了承ください。） どんな島に住んでいるの？ 九州本島から船で30分程度のところにある、大島という島に住んでいます。 島の周囲は15kmほどで、車だと30分で一周できるくらいです。2015年3月の時点で島の人口は701人です。1950年には2,200人くらいの人が住んでいたそうですが、若い人が働きに本土へ移ったので、今はお年寄りが多くな

Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを

2015年3月25日に、株式会社ロフトワークさま主催の『ビジネスを躍進させる創造的チームの作り方』にて、千葉県の柏にある柏の葉オープンイノベーションラボ（KOIL）にて、「小さなままで世界を相手に冒険できる自己組織化したチーム」というタイトルでお話をさせていただきました。また、最近ではないですが、2012年9月には、Movida School にて「スタートアップは自己組織型であるべき」といったタイトルでスタートアップの起業家に向けてお話させていただきました。 いづれも、「チームの作り方」に触れるような内容でした。 また、同様の内容で、台湾のお客様の社内セミナーや、その他多くの場所でお話させて頂いてます。 自分自身もまだまだ勉強中だということもありますが、このような題材は、「こうすることが正解」というケースは無いと思います。なので、いずれも「会社の文化や、背景、業務内容などにあわせて、良さ

CDNが単一障害点にならないようにするために ヌーラボでは 2010 年 Cacoo の商用サービスの開始に合わせて AWS における運用を開始しました。当時、運用環境として AWS を採択する決め手の一つになったのが CloudFront でした。その後も着々とエッジロケーションは増え、独自ドメインのサポートなど魅力的な機能も提供され、今ではヌーラボの全サービスの静的ファイルの配信で利用している、無くてはならないサービスとなっています。 その魅力の反面、CloudFront の障害は、アプリケーションそのものに問題がなくても、以下のような表示が崩れた画面が表示されて、ユーザが全くサービスを使えなくなるという、その影響が非常に大きいものです。また障害の原因が DNS やネットワークの経路における問題といった、私たちが直接解決しにくい領域にあることもしばしばです。 ただ、どんな事情であれ、障

7月8日から10日までの三日間、ヌーラボの全ての開発者が福岡本社に集まり開発合宿を行いました。 今回の合宿では細かなルールは定めず ヌーラボのサービスに関係するでもよし、しないでもよし 事前の仕込みをしてもよし、初日にスクラッチから取り組んでもよし 個人でやってもよし、チームでやってもよし といった、いわばハッカソン的な形式での開催となりました。 一部で大好評を得ているヌーラボパーカーに引き続き、今回はヌーシャツが作成されました。 二日目と三日目はヌーラボが誇るシェフエンジニア平山によるまかない。二十名近い昼食を朝から仕込み。サラメシに出れないものかしら。 そして最後に成果発表会。ここでは各々のチームが発表し、その後投票して一位になったチームは豪華賞品をゲット出来るというルールで、大喜びの優勝チーム。 優勝「ぼくのかんがえた、さいきょうのでざいなむけぷろじぇくとかんりつーる」 優勝は「ぼく