はじめに こんにちは、ヌーラボの池です。ビジネスチャットツール 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つのケ

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

こんにちは。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で試すことができます

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

こんにちは。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標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ

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

大好評の「エンジニアのためのCSS基礎講座」シリーズの続編です。今回は前回の記事でも少しだけ触れた Flexbox レイアウトについて解説したいと思います。 Flexbox は CSS3 から導入され、ヌーラボのサービスでも一部 Flexbox を使用しています。また最近では React Native のコンポーネントのレイアウトにもこの Flexbox が使われており大変注目が集まっています。なので「今更聞けない！」というより「今覚えたい！」技術になりますので、是非マスターしておきましょう。 Flexbox とは Flexbox は正確には CSS Flexible Box Layout Module といいます。その名の通り、柔軟なボックスレイアウトを可能にする CSS の新しいレイアウトモードです。横並びのレイアウトを組む際に従来の方法であれば float や inline-bloc

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

認証アプリとバックアップコードは、導入が簡単な事もあり全てのサービスで実装されています。 SMS の利用は送信ごとに料金がかかるので、サービスごとによって対応に差があります。 認証アプリをサポートするには? 認証アプリで発行されるトークンは TOTP：Time-based One Time Password RFC 6238 という仕様があります。 QRコード等で交換した秘密鍵と、現在時間を元にコードを生成します。オープンソースのライブラリが多くあるので、まずはそのライブラリが利用できるか検討してみましょう。 バックアップも必ず用意しよう スマートフォン紛失や機種変更でサービスにログインできなくなるのを防ぐため、必ずバックアップの方法を用意し、ユーザーをガイドしましょう。 バックアップコードの発行や、予備のアドレスを利用します。 SMS 送信のコストを試算する SMS の送信には ASP