SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年（2023年）の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し

ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo

はじめに 先日話題になった「Webの将来はサーバサイドレンダリング（SSR）に回帰していく」という記事によると、Isomorphic /Universal JavaScriptのような、単一のコードでサーバーとクライアントの両方で実行できるアプリケーションを構築する手法が再び注目を集めているようです。そこで、本記事では以前書いたタスクボードアプリを題材として、Isomorphic RustなフロントエンドフレームワークであるLeptosを使ったサーバーサイドレンダリング (SSR) とハイドレーションを行う方法を紹介します。 なお、ソースコードはGitHubに上げていますが、前回のブログ記事からLeptosのバージョンが上がっており、前回から多少ソースコードを変更しています (本記事ではLeptos v0.2.4を使っています)。 前回のおさらいと今回の概要 前回作ったアプリはクライアント

こんにちは。CacooチームのYAMLエンジニアの木村（@cohhei）です。「readiness」は「ready」の名詞形で「レディネス」と読むことをわりと最近知りました。今回はプルリクエスト向けに検証環境が構築される仕組みを作ったので紹介します。 忙しい人のためのざっくりとした説明 プルリクエストが作られたら自動で検証環境が構築される仕組みをつくりました。 環境まるごと作るわけではなく、フロントエンドJavaScript配信用のPodだけに対応しています。 レビュアーやテスターはクエリパラメーターが追加されたURLにアクセスするだけでその検証環境にアクセスできます。 プルリクエストをマージする前にそのバージョンを非エンジニアでも試すことができます。 プルリクエストごとに環境が作られるので、複数の開発プロジェクトが同時に走っているときに便利です。 コミットしてプルリクエストを作るだけです

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

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

はじめに こんにちは。ビジネスチャットサービス Typetalkを開発・運用している吉田です。先日PostgreSQLでのALTER文をいかに無停止で安全に行うかという記事を公開しました。その中で以下のようにNULLを不許可にしたカラムを追加する際の注意点について述べていました。（参照 NULLを不許可にしたカラムを追加する） 新しいカラムを追加する際、NULLを不許可にしたいことがあります。その場合よく使われるのがALTER TABLE構文で同時に追加できるNOT NULL制約です。このNOT NULL制約をつけるためには、既存レコードにデフォルト値を設定する必要があるため、DEFAULT構文を同時に使用することになります。 ALTER TABLE todo ADD COLUMN completed BOOLEAN NOT NULL DEFAULT false; この構文は自動的に既存の

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

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

お客様各位 2020年6月15日策定 株式会社ヌーラボ カスタマーハラスメントへの対応に関する方針 ■方針作成の背景 私たち株式会社ヌーラボは、チームのコラボレーションを促進し働くを楽しくするツール「Backlog (バックログ)」「Cacoo (カクー)」「Typetalk (タイプトーク)」を開発、提供する会社です。昨今の働き方改革やテレワークの導入推進による「働き方の多様化」を受け入れるための1つの手段として、弊社の提供するようなツールの導入を行う企業が増加しており、現在たくさんのお客様よりお問い合わせをいただいております。 しかし、改正労働施策総合推進法（通称：パワハラ防止法）に則って考えた際、ハラスメントと断定されるような言動をとるお客さまが、ごく僅かですが見受けられることも事実です。われわれサービス提供をしている者もお客様と同じ感情を持つ「人」です。その点をご考慮いただくために

TypetalkのSREの二橋です。今回は、Gossの紹介をしたいと思います。 TypetalkではサーバーのテストにServerspecを利用していました。機能的には申し分なかったのですが、サーバーの台数/環境/テストの項目が増えるにつれて、ツールの実行速度やメンテナンス性に改善が必要になりました。Gossに乗り換えることで問題が解消されました。 サーバーのテストとは？ サーバーのテストとは、サーバーの状態が意図したものになっているか検証するものです。例えば、以下のような項目を検証します。 意図したパッケージのバージョンがインストールされているか？ 意図したサーバーと通信できるか？ 意図したポートが待ち受けているか？ 意図したユーザー/グループが存在するか？ 意図したプロセスが動作しているか？ 意図したファイルに指定した記述が存在するか？ Serverspecで困っていたこと ①テスト実

令和7年末までに行政手続きを全オンライン化へ！急増するプロジェクトを支えるBacklog ――Backlogをご利用いただいている部署と主な業務内容について教えていただけますか？ 経済産業省では、従来行政自体のDXに力を入れておりましたが、2022年7月に省全体のDXをさらに強力に推進する体制を整え、省内のシステム担当部署の職員やベンダーと力を合わせて業務に取り組んでいます。 大臣官房デジタル・トランスフォーメーション室（以下、DX室）の前身となる情報プロジェクト室では、2018年からプロジェクト管理ツールとしてBacklogを利用していました。関与する情報システム開発等のプロジェクト増加に伴い、Backlogの活用の幅も大きく広がりました。 ――どのように活用が広がっているのか、詳しくお聞かせください。 政府では、令和7年末までに民間から行政への申請に伴う手続は、すべてオンライン化する方

BacklogにmacOSの指紋認証でログインする様子 ヌーラボでは2019年3月にW3Cで標準化されたパスワードレス認証の「Web Authentication API」（WebAuthn: ウェブオースン）と、「FIDO2」（Fast IDentity Online: ファイド）対応のサーバを実装することで、Backlog / Cacoo / Typetalk上でのパスワードを使わない新しい認証に対応しました。 WebAuthn / FIDO2を使用した生体認証ログインのメリットは次のとおりです。 生体認証でログインが素早く簡単になります 生体情報はネットワーク上には流れず、ローカルのセキュリティ デバイスに保存されるため安全です 2要素認証※2のため安全です サーバに登録する認証情報は公開鍵のため、パスワードリスト型攻撃や情報漏洩のリスクがありません ドメインが検証されるため、フィッ

Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 YewはRustで書かれたフロントエンド向けのフレームワークです。 書かれたコードはWebAssemblyに変換されて、ブラウザ上で実行することができます。プロジェクトのREADMEに「ElmとReactに影響を受けた」と書かれているように、JSX風のHTMLを書けるようなマクロが用意されていて、Rustのコード内にHTMLっぽく表現でビューを書くことができます。 また、Elmアーキテクチャのように、モデルとビューがあり、メッセージによって状態の更新がされるようになっています。 というわけで、以前、このブログでsakiが書いた「Vue.js でかんばんライクなタスク管理アプリを作ってみました。」という記事を参考に、見ためがほとんど同じようなかんばんライクなタスク管理アプリ (タスクボード

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

こんにちは。Backlog開発チームのshomaです。 先日、GoogleスプレッドシートからBacklogへ課題を一括登録できるツール(以降、課題一括登録ツールといいます)を、Nulabの公式ツールとしてリリースしました。プレスリリース：Backlog、Googleスプレッドシートから課題の一括登録が可能に この記事では、GoogleスプレッドシートとGoogle Apps Scriptを用いたアプリケーションの作成についてご紹介します。 課題一括登録ツールとは？ 課題一括登録ツールでは、Googleスプレッドシート上にBacklogの課題を入力しておくことで、Backlogに一括してその課題を登録することができます。定期的に同じタスクを作成されている場合など、ぜひご活用ください。詳細のご利用方法等はREADME.mdをご参照ください。 このツールは弊社のikikkoが個人的に開発してい

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を利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編

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 は、オープンなウェブテクノロジーを