はじめに こんにちは、ヌーラボの池です。ビジネスチャットツール Typetalk の開発をしています。 さて、先日 Typetalk はフロントフレームワークを AngularJS から Angular バージョン2 以降(以下、Angular2系という) に完全移行しました。移行作業は数年にわたる長期プロジェクトとなりましたが無事完了させることができました。今回はこのような長期間の移行作業にかかったリソースや、プロジェクトの進める上で行ったこと、得られたことについて紹介したいと思います。具体的に行った移行作業については別記事にまとめていますのでそちらをご参照ください。 AngularJS を Angular に移行する際に必要だった作業 アサイン時の状況 まず、私が移行作業にアサインされた時の状態からお話しします。AngularJS の移行作業は私がアサインされる2年ほど前に開始されてい

こんにちは。ヌーラボAppsチームのsuzukiです。 皆さんはセキュリティキーを持ってますか？ ヌーラボアカウントのログインでは2段階認証やパスワードレス認証でセキュリティキーを利用することができます。 セキュリティキーを使うとヌーラボだけでなくGoogle、Microsoft アカウント、GitHubなど様々なサービスに安全にログインすることができます。 ここでは セキュリティキーってなに？ どんな製品があるの？ どんな光り方するの？(認証するときにピカピカ光るんです！) について話したいと思います。 セキュリティキーのことがよくわからないという方の参考になればと思います。 セキュリティキーって何？ 多要素認証のためのデバイスです。 2段階認証でパスワードと組み合わせて使ったり、パスワードレス認証といったパスワードを使わない認証に利用することができます。 ヌーラボだけでなくGoogle

React界隈で大注目のRecoilについて、先日紹介記事を書いた藤田です。 Recoilで快適フロントエンド開発 Recoilに新しいパッケージRecoil Syncが加わったので、簡単にご紹介します。 軽くおさらい：コンポーネントの状態を管理する最もシンプルな方法=useState React hooksで最も基本的なuseStateは、コンポーネント中に閉じた状態を手軽に定義する方法でした。 const MyComponent: React.FC<{defaultName:string}> = ({defaultName}) => { const [name, setName] = React.useState(defaultName) : : このようなコードで、コンポーネント中で変更できる値”name”が使えて、初期値はコンポーネント引数のdefaultNameとなります。 Re

こんにちは。ヌーラボのCacooチームの木村です。テックブログを書く上で個人的に気をつけていることを紹介します。 「せっかく苦労して記事を書いたのに全然読んでもらえない」「本筋とは関係ないコメントが来て消耗してしまう」といった悩みはないでしょうか。それらはもしかしたら技術記事の書き方に原因があるかもしれません。 僕は普段進めている仕事に、ある程度の成果が出たら、そこで得た知見を会社のテックブログに記事としてまとめるようにしています。そのときには以下の3つのことを心がけています。 「なぜ」を徹底的に書く 読者の認知負荷を下げる 想定読者の知識レベル下げる そうすることで以下のような効果が期待でき、読者と著者だけでなく著者が所属する会社にとってもいい記事になると考えられます。 記事の内容が正確に読者に伝わる 読者にとって有益な情報を提供できる 著者（たち）の置かれている状況や抱えている課題が読

こんにちは。BacklogのGit機能の開発を行っているテリーです。 今回はGitチーム（後述する僕の所属するチーム）でAutifyによるリグレッションテストの自動化を進めてみて感じたメリットと工夫したところ、苦戦したところを紹介したいと思います。 スモールチームの規模感とテストの現状 BacklogのGitチーム 長らくBacklogは固定のチームが専任で固定の機能をみるような体制になく、アプリケーションエンジニアが比較的流動的にBacklog全体の機能を担当しており、なんとなく“この人”は“この機能”が得意というような体制でした。 ですが最近のチーム編成により固定のチームが固定の機能を開発するようなフィーチャーチームがいくつかできました。Gitチームはその中で生まれたBacklogのGitの機能についての開発責任を持つチームです。チームメンバーは3人で、そのメンバーでインフラからフロン

「高卒のパパには分からないよ」 だと。 なんやそれ。 頭でっかちで自分で汗水垂らさないお前のような奴はもう子供でもなんでもない！ お前が誰に似たのか知らんが、勉強が出来るとチヤホヤされていた頃から俺だけは「手前で働いて食ってはじめて一人前だ」と釘を刺し続けた俺の事がよっぽど憎いのだろう。 いくらでも好きにしろ！だがもう金は出さん！うちを出て一人で生活しろ！ 大学院行きたきゃ手前で稼いで行け！ 散々嫁とも話したが、やっぱり俺の考えは間違っていなかった。 自分の責任で自分で食えるようになる事が人生で一番大切なのだから勉強を理由に甘やかすなと俺は何度も何度も何度も何度も言ってきた。 せっかく官僚になれる公務員に合格して来年から頑張れと言っていたのに実は大学院受けてました、そっちに行かせてくださいだと。 ふざけんなって。 俺は何度も何度も何度も何度も言ったけど嘘はつくなって言ったよな？ 官僚だ官僚

※ このブログはヌーラバー Advent Calendar 2020 12日目の記事です。明日は yuh kim さんの記事です。 こんにちは。本日32歳になりました。Cacoo課の川端(@kwbtsts)です。 Cacooは先日、図の編集画面上でビデオ会議ができる「ビデオ通話」機能をリリースしました！ 本記事では、ビデオ通話を実現するために必要なWebRTCという技術について解説したいと思います。ビデオ通話を実際にWebサービスで開発・運用していこうと考えている方や、WebRTCに興味がある方へのヒントになれば幸いです。 ビデオ通話機能についての詳しくはCacooリリースブログ『テレワークで使える！Cacooで「ビデオ通話」ができるようになりました！』をご覧ください。 WebRTC(Web Real-Time Communications)とは？ Cacooのビデオ通話ではWebRTC(

Cacooは図の編集画面上でビデオ通話ができる機能をリリースしました！ビデオ通話で相手の顔を見て会話をしながら共同作業ができるため、オンライン環境でもチームメンバーと密なコミュニケーションができます。 たとえば、テレワーク中の会議でビデオ通話機能を使うことで、チームメンバーと一緒にCacooで作成した資料を見ながら議論ができます。さらに、その場で意見を集約して図を用いた議事録も作成できます。テキストだと伝えにくいデザインレビューなども容易になるため、チームのコミュニケーションを促します。 本記事では、オンラインコミュニケーションやコラボレーションに役立つ「ビデオ通話機能」の活用方法と使い方をお届けします！ ※なお、ビデオ通話機能はまだ試験運用中の機能になりますので、「BETA」表記が付いています。 ※ビデオ通話機能は旧フリープランおよびプラスプランの図ではご利用できません。 Cacooビデ

TypetalkのEC2インスタンスをインテルプロセッサからARMベースのAWS Graviton2に完全移行。性能向上と費用削減を実現 はじめに こんにちは。SREの二橋です。最近の楽しみは、キャンプと釣りの動画を見ながら、お家で妄想を膨らませることです。 この度、TypetalkのEC2のインスタンスをインテルプロセッサを搭載したM5系からARMベースのAWS Graviton2を搭載したM6g系に完全移行しました。そこで、Graviton2の概要から移行しようと思った理由、作業内容、移行の効果などをお伝えしたいと思います。 AWS Graviton2とは？ Graviton2はAWSがArm Neoverse コアをベースに独自開発したプロセッサです。2020年夏にAmazon EC2で一般用途向け(M6gとM6gd)、コンピューティング最適化(C6gとC6gd)、メモリ最適化(R6

子どもに「おかえり」が言える幸せ！ヌーラボのインハウスシステムを黎明期から支える佐村さんのお話　#ヌーラバーになりませんか ヌーラボの社員「ヌーラバー」を紹介していくこの企画。今日はインハウスシステム課から大塚さんに続き、佐村さんにお話を伺います🎤 ヌーラボは、8月に採用時の勤務地条件を廃止することをお知らせしました。これにより、大きく社員の生活も変わったことと思います。今日はインハウスシステム課として、そしてママとしてのヌーラボでの「働く」について伺ってきました。 今日のInterviewee 管理部 インハウスシステム課 佐村 祥恵 大学では生物学を専攻。自身の薬疹の経験からシステムの必要性を感じ、新卒でITエンジニアとなる。社会人1年目の時にJavaを教えてくれたのは、当時ヌーラボを立ち上げたばかりの橋本さん。2社目として2017年にヌーラボに入社。社内システムの内製チームの黎明期

初めに こんにちは。ビジネスチャットサービスTypetalkを開発・運用している吉田です。Typetalkではデータの永続化ストレージとしてPostgreSQLを利用しています。扱うデータ量は多く、チャットというサービスの性質上書込み頻度はとても高いです。PostgreSQLを使い日々開発を進めていると、追加する機能によってはスキーマを変更する必要があります。メンテナンスを計画・告知してサービスを止めてしまえば、時間はかかるかもしれませんがスキーマの変更はそう難しくありません。しかしTypetalkはユーザーが日々の業務を進めるために利用しており、サービスが止まるとコミュニケーションが取れなくなります。業務を円滑に進めるためのビジネスチャットツールですので、極力サービスは止めたくありません（最後の計画メンテナンスは2019年6月30日で1年以上前となっています。）。本記事では以下の3つのケ

今の５ちゃんねる(旧２ちゃんねる)のニュース系の板には大きな3大勢力があって、 ニュース速報(嫌儲)板、ニュース速報＋板、そして通称旧速と呼ばれている無印のニュース速報板の3つに分かれている 簡単に歴史を説明するが、もともとは嫌韓・嫌中思想で右寄りの人達が集まるニュー速＋と、割と保守寄りだがニュー速＋の宗教のようなナショナリズムとなんでも陰謀論に結びつける思想を冷笑し若干見下している無印ニュー速の2大体制だったのだが、 10年ほど前に当時の2chまとめブログへの不満が無印ニュー速内で爆発し(細かい経緯は省くが 『まどマギ ステマ騒動』とかで検索したら大体出てくるはず) まとめブログに寛容だった当時の西村博之氏が反まとめブログ派の隔離場所として転載禁止ルールの元で作られた『ニュース速報(嫌儲)板』にほとんどの無印ニュー速民が移住することになる。 そこから嫌儲は2ch内の一大勢力となり、逆に住

TL;DR 「オペレーティングシステム？知ってるよ。WindowsとかMacのことだよね」というぐらいの知識だった私が、二週間ほどひたすらWikipediaでインプットしまくったクソ浅い情報を共有します。 最初の動機　「Go言語が対応しているアーキテクチャってなんだろ？」 Go言語には環境変数をコンパイラに渡すことで、出力されるバイナリの対応するOSとアーキテクチャを変えることができます。 GOOS がオペレーティングシステム(OS)、 GOARCH がアーキテクチャです。 こんな感じにビルドすると、 linux というオペレーティングシステムで、 ppc64 というアーキテクチャに対応したバイナリが出力されます。 なるほど。 じゃあ、 Go言語が対応しているOSとアーキテクチャって何があるの？ と疑問が湧いてきますね。 その疑問に応えるコマンドが go tool dist list です

Cacooで「データベーススキーマを自動生成できる」という素晴らしい機能が先週発表されました。 cacoo.com Cacooが提供するSQLクエリをデータベースで実行して、その結果をCSVファイルとしてエクスポートしてCacooにアップロードするだけでER図が生成されるというものです。 現時点で公式サポートされているのはMySQLとPostgreSQLですが、 一応1列目にRDBMSの名前が入るようになってるんですが、CSVのフォーマットとしては統一されてます。— Kohei Kimura (@cohhei) 2020年4月16日 ということなので、tbls out のサポートフォーマットにCacooのデータベーススキーマ機能用のCSV（ cacoo ）を追加しました。tbls v1.33.0で試すことができます。 MySQLのデータベーススキーマ まずはMySQLのデータベースで試して

データベースの構成図をゼロから作成する必要はもうありません。Cacooのデータベーススキーマ構成図の挿入機能を使って、データベースの構成図を自動で作成しましょう！ データベース図は、効率的なデータベースの設計や維持のために必要です。適切に設計されたデータベースは、冗長なデータを排除し、データの整合性を確保し、データへのアクセスを容易にします。 Cacooのデータベーススキーマ構成図は、データベースの情報をインポートすると構成図を自動で作成でき、チームへの共有や編集を簡単に実現します。 作成方法についてお届けします！ Cacooのデータベーススキーマ機能とは？ Cacooのデータベーススキーマ機能を使用すると、データベースのメタ情報をCSVフォーマットでインポートするだけで、データベースの構成図を自動で作成できます。 Cacooでデータベース図を管理すれば、チームへの共有や共同編集を通じた最

こんちには。Cacoo開発チームの木村（@cohhei）です。みなさんリモートワークしてますか？ テレワークを許可されても、約40%が活用していないという調査結果もありますが、現在ヌーラボでは原則オフィスに出社しない方針になっています。今回は福岡オフィスのCacoo開発チームで実施した「ふりかえり」についてご紹介します。 すべてがリモートになる ヌーラボはオンラインコラボレーションツールを提供しています。拠点が離れているメンバーや自宅で作業しているメンバーがいても問題なく業務が進められるよう、普段からBacklog、Cacoo、Typetalkを使ってやりとりをしています。 僕たちCacooの開発チームも家庭の事情などで週に数回ほど在宅勤務を選択するメンバーもいます。一方で、国内のメンバーは全員福岡にいることもあり、ミーティングを全員が出社する日に合わせることもありました。 ただ、昨今の情

Cacoo開発チームの木村（@cohhei）です。Cacooでは図形の描画にScalable Vector Graphics（以下、SVG）を採用しています。本記事では、CacooのサーバーサイドにおけるSVGの生成手法の刷新と、それによって得られた図のエクスポート機能のパフォーマンス向上についてご説明します。 要約 サーバーサイドでのSVGの生成方法を変更しました。 結果として、SVGエクスポートが約4倍速くなりました。 PDFエクスポートもその恩恵を受けて早くなりました。 図の内容に依存しますが、1シートあたり1.5〜2倍ほど高速化しました。 技術的にはHeadless Chromeからjsdomを使ったSVG生成に切り替えました。 クライアントサイドのTypeScriptのコードをNode.jsで実行させています。 SVG？エクスポート？生成？とは？ SVGとはXMLをベースとした2

サルでもわかるGit入門はサル先生のGit入門に改名しました。 サルでもわかるGit入門がPWAに対応しました。 iOSやAndroidのスマートフォンのホーム画面にサルでもわかるGit入門を追加することでネイティブアプリのように起動し、ブラウザよりも高速に閲覧することが可能になります。 こんにちは。 ヌーラボのマーケティング課所属のレオです。 私はヌーラボが運営するサイトやCacooの開発をサポートしたりとヌーラボ内を横断しているフロントエンドエンジニアです。 今回はレガシーな構成からNuxt.jsにリプレイスしたサルでもわかるGit入門を今更ながらPWAに対応させたので、かんたんにご紹介します。 そもそもPWAとは PWAとはProgressive Web Apps（プログレッシブウェブアプリ）の略です。 通常のWebサイト / Webアプリはブラウザ上で動作しますが、PWAはブラウザ

はてなブログMediaチームがBacklogで【顧客管理の仕組み化】を実現！問い合わせの温度感の定量化に成功したBacklogの活用方法とは Backlog導入前の課題 ■ セールスはグループウェアやExcel、エンジニアはGitHub、と部署ごとにツールが異なり、情報も一元管理できていない ■ 案件やチームメンバーの増加によって、既存のプロジェクト管理形態ではコミュニケーションストレスが発生している ■ メールでは顧客からの問い合わせを社内共有するときに必要な情報が抜けており「こういう情報もほしい」という部署間のコミュニケーションリレーが頻発していた Backlog導入後の効果 ■ Backlogでツールを一元管理できたことで、セールス、ディレクター、エンジニアの間で「部署をまたいで進捗を追う必要のある情報はBacklogを検索すれば確認できるよね」という状態ができた ■ ビジネスチーム

【Backlog総研/調査リリース】テレワークを許可されても、約40%が活用せず。テレワークは無給扱い、派遣社員は許可されないなどIT業界でも環境整備の課題はいまだ残るという調査結果に。 新型コロナウイルス感染症の流行をきっかけに急速に話題となり 導入への動きが高まったようにみえるテレワーク 導入が進まない実情が明らかに チームのコラボレーションを促進し、働くを楽しくするツール「Backlog（バックログ）」「Cacoo（カクー）」「Typetalk（タイプトーク）」を運営する株式会社ヌーラボ（本社：福岡県福岡市、代表取締役：橋本正徳、以下 ヌーラボ）は、プロジェクト管理ツールの「Backlog」ユーザーを中心とした688名(有効回答数462名)を対象に「新型コロナウイルス感染症に伴ったテレワークの導入に関する調査(以下、本調査)」を実施いたしました。 ＜主な調査結果＞ IT・インターネッ