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

本日2023年3月29日で、株式会社ヌーラボは創業19周年を迎えることができました。これまでヌーラボに関わってくださったすべての方に感謝申し上げます。 2004年3月29日、ヌーラボは福岡県福岡市で創業者自らも現場にエンジニアとしてお客様先に常駐するスタイルの事業を軸に産声を上げました。その後、受託開発事業、自社サービス事業を展開し、2013年からは現在も続く「Backlog」「Cacoo」「Typetalk」の自社サービス事業に集中、そして2020年には「Nulab Pass」をリリースすることができました。 今日はヌーラボのこれまでを、創業者である橋本と田端、そしてヌーラボの受託開発事業の初めてのお客様である、インクルージョン・ジャパン株式会社の吉沢様にインタビューしました。 「Null」＋「Lab」は後付け！”名刺交換”で決まった社名「ヌーラボ」 — 創業メンバーである橋本さんと田端

はじめに テレワークでの作業環境は、厚生労働省からガイドラインやチェックリストが公開されています。事務所衛生基準規則などの法規制は適用されないようですが、これらの基準と同等の作業環境になるよう改善を図ることが重要と書かれています。 テレワークの適切な導入及び実施の推進のためのガイドライン(厚生労働省) (3) 自宅等でテレワークを行う際の作業環境整備の留意点 テレワークを行う作業場が、労働者の自宅等事業者が業務のために提供している作業場以外である場合には、事務所衛生基準規則(昭和47年労働省令第43号)、労働安全衛生規則(一部、労働者を就業させる建設物その他の作業場に係る規定)及び「情報機器作業における労働衛生管理のためのガイドライン」(令和元年7月12日基発0712第3号)は一般には適用されないが、安全衛生に配慮したテレワークが実施されるよう、これらの衛生基準と同

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

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

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

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はブラウザ

ヌーラボの松本です。「Backlog Playプロジェクト」に2017年2月から途中参加し、プロジェクト解散の2019年7月までメンバーの一員として動いていました（プロジェクトの概要は 時系列でみる！4年の歳月をかけてPlay Frameworkで「大規模リプレイス」した話をご覧ください）。 このBacklog Playプロジェクト(以下、Play化プロジェクト)では、期間によって私の役割は変わりました。 参加した当初は開発メンバーとしてコードを書いていましたが、2018年4月からプロジェクト終了の2019年7月までは、開発をしながらプロジェクトの取りまとめをしていました。 マネジメントのような役割ははじめてだったので、いろいろ未熟な点もありましたが、プロジェクトの機能リリースを早めるために、不具合対策や手戻り削減といった問題と向き合いました。 本記事では、私のPlay化プロジェクトでの役

こんにちは。Backlogチームの中川です。 本記事では、Backlogが最近おこなっているスクリーンリーダー向けアクセシビリティ改善の取り組みを元に、明日から、いや、今開いてる画面からでも始められるアクセシビリティ改善についてご紹介します。 ちなみに、スクリーンリーダーって何？という方のために簡単にご説明しますと、スクリーンリーダーとは、視覚障がいを持つ方がPCを操作するのに使用する音声読み上げソフトです。無料で代表的なものは、Windows では NVDA、Mac では標準搭載されている VoiceOver などがあります。Backlogの改善では主にNVDAを使用して確認作業を行っています。 すぐにでも始められる作業コストが少ない改善 見出しをちゃんとマークアップする スクリーンリーダーではコンテンツ間を移動するのに、見出しを手がかりにすることが多いので、見た目の文字サイズではなく文

こんにちは。Cacooチームの中原です。 今回はプログラムを書くときArrayだけでなくSet, Mapを意識して使うことで大きくパフォーマンスを改善できるかもしれないという話です。 ここではJavaScriptで説明していますが、多くのプログラミング言語がArray、Set、MapといったAPIを標準でもっています。ぜひJavaScript以外の言語でも試してみてください。 ではさっそく初めましょう。この12個の数字の中に 15 が含まれているか探してみましょう。どう書きますか？ 6, 11, 2, 1, 13, 4, 15, 18, 14, 16, 12, 8 See the Pen PVzqNv by shoji (@shoji-nulab) on CodePen. 次に探す数字が複数になったらどうでしょう。今度は4つの数字 15, 2, 5, 9 のうちいくつ、12個の数の中に含ま

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

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

こんにちは。Nulab Appsチームの_fpです。Nulabではそれぞれのプロジェクトに合ったWeb Frameworkを使った開発を行なっており、Nulab AppsではReactを使用しています。 さて、Reactで苦労するポイントといえばいろいろありますが、中でもやはり状態管理とライフサイクル、イベントハンドラ、RefとDOMのあたりではないでしょうか。 実装方法はいくつかありますが、ー般的なのは公式ドキュメントにあるようにReact.Componentを継承したクラスに機能を実装することかと思います。 ただ、いくつかクラスを作ると、だんだん似たような状態やライフサイクルを持つものばかりになることも少なくありません。 そこで、今回はFunctional ComponentsとHOCの組み合わせについて紹介してみたいと思います。サンプルコードは末尾のCodePenで試すことができます

プランニングポーカー 最初は、プランニングポーカーです。アジャイル開発の見積もりのときによく使われる手法で、聞いたことがある・使ったことがある方も多いのではと思います。 まず、1, 2, 3, 5, 8, … といった、フィボナッチ数が書かれたカードを各自が用意します。そして、ベースラインとなるものの大きさを2と定めたとき、今から見積もりしようとするものが2と比べてどれくらいか？をカードの数でメンバー一斉に表現します。 数が大きく異なった場合、一番小さい数を出した人と大きい数を出した人で議論した後、再度カードを出し直します。詳細は、下図のkawaguti氏によるプランニングポーカーかんたんガイドに簡潔にまとまっているので、参照ください。 試してみると分かりますが、このプランニングポーカーは会議を前に進めるのに非常に効果的です。通常の見積もりの場でよくある、声が大きい人に引きづられる・なかな

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

ようこそ、サル先生のWiki入門へ。ここは、主に仕事の組織やチーム内で情報共有をしたい方に向けて、Wiki（ウィキ）を使った情報共有の方法を解説するサイトです。「入門編」では Wiki を使うことによるメリットと、基本的な使い方を解説します。「実践編」では Wiki の具体的な操作方法や、Wiki を使った情報共有のコツを解説します。

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

こんにちは。@agataです。突然ですが、 JavaScript を使ったことはありますか？「JavaScript？私には関係のないエンジニアの世界」だと思っていませんか？JavaScriptを少し知ると、業務の中の様々なルーティンワークをなくせます。特にマーケティング担当の方は「たくさんの情報を集めて、ひたすら整形する」ような作業を何度もやったことがあるのではないでしょうか。もし JavaScript が使えたら、その作業は限りなく０になるかもしれません。 本ブログでは、「非エンジニアの方もJavaScriptが使えると業務を効率化できるはず」という視点で、「JavaScriptの基本」と「コピペで使える具体的な活用例」をご紹介します。 今回使うのは、 Chrome ：無料ブラウザ Google Spread Sheet(Googleの無料サービス) または Excel：表計算ソフト の

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