はてなブックマーク

はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A

こんにちは。Cacooチームの木村です。以前プルリクを起点に検証環境が自動で構築されるようにしたら すぐにレビューできるようになったのでみんなハッピーになれた話をしたのですが、色々課題があったのでKubernetesのJobを使って改善しましたので紹介します。 この記事はヌーラバー真夏のブログリレー2024の12日目の記事です。 【経緯】プルリク環境は便利 前回の記事では、以下のような経緯からプルリク環境を構築しました。 開発中の機能を試せる検証環境がある 検証環境があると複数人でレビューできて便利 便利すぎてみんなが検証環境のリビジョンを変更したがる プルリクエスト用の環境が構築される仕組みをつくった 複数のプロジェクトが同時進行してても、みんながそれぞれの環境を試せて便利 プルリク環境はチーム内でたいへん好評でした。使い方は非常に簡単で、プルリクエストを作成すると、CIがそのブランチの

こんにちは、ヌーラボの中村です。Backlog の Git チームで開発やメンテナンスをやっています。 最近Git機能に手を入れる際、Git コマンドの Two dots (..) と Three dots (...) がなかなかややこしいなぁと感じました。本記事ではそのあたりをまとめます。 ※これはヌーラバー真夏のブログリレー2024の14日目の記事です。 概要 git diff もしくは git logで比較対象のブランチ名を指定するとき、ドットを付けないのか・ドットを2つ（Two dots）にするのか・ドットを3つ（Three dots）にするのか・ドットを4つ以上付けるのか（実際はエラーになりますが……）迷う方も多いのではないでしょうか。私も昔は雰囲気で使っていました。 この記事ではドットの意味と、その内容を深堀って行きます。 git log と git diff のオプションの違

Moi! ヌーラボに入社してから3年目のUXエンジニアのヨーナスです。久しぶりのブログ投稿ですごく緊張しています。 今回は、アクセシビリティに特化することを決める前に色覚特性について知りたかったことを書こうと思います。このブログは、ヌーラバー真夏のブログリレー2024の8日目のブログとして更新しています。 まずは言っておきたいのは、私は色覚特性（色弱、色覚異常と呼ばれることもありますが、このブログでは色覚特性と表記します）を持っていないため、この投稿に書いてあることは間接的に得た情報に基づいています。色のアクセシビリティの判断は、できるだけ当事者に相談しましょう。 最初は、色覚特性について解説しようと思います。そのあと、ありがちな誤解をいくつか紹介します。最後に、基本的な対応方法を紹介します。 目に見えない障害としての色覚特性 さまざまな障害について考えるときによく頭に浮かぶのは、車椅子や

この記事は ヌーラボブログリレー2023 for Tech Advent Calendar 2023 – Adventar 24 日目の記事です。昨日の記事は Makoto Fukuda さんの イベントで撮影スタッフを依頼される時に思うこと でした。 こんにちは、SRE 課 Backlog Platform Engineering チームで Backlog のプラットフォームとして Kubernetes(Amazon EKS ※以下 EKS と記載) クラスターの開発運用をしている大野、吉岩です。この記事では EKS クラスターの運用で重要な要素の一つであるクラスターの継続的なアップデートを実現するために、私達がどのようにアップデートに取り組んでいるかについて書いています。 Backlog で利用している EKS クラスターについてはアプリケーションのコンテナ化の発表で触れていますが、E

こんにちは。情報システム課の市川です。 先日、社内で利用しているGoogle Workspaceのプライマリドメインを10数年使われていた ”nulab.co.jp”から”nulab.com”へ変更しました（以下、ドメイン変更）。 ドメイン変更は、Google Workspaceだけでなく、広範囲に影響を及ぼす大変な作業でした。例えば、Google Workspace以外のGoogleサービスやGoogle認証を行っているSaaSサービスなどに影響を与えます。 そして今回、同じように大変な思いをしている方々の参考になればとブログを書くことにしました。また、現在 情報システム課の仲間を募集中（2023年12月時点）ですので、弊社の情シスに興味がある方にもお読みいただけると嬉しいです。

この記事では、Backlog クラシックプランからの移行フローリニューアルの開発プロジェクトで、 Playwright を使いテストデータの作成を自動化したことについて紹介します。 今回、初めて Playwright をさわってみたのですが、複雑な手順をわかりやすいコードとして表現できるのがとても便利だったので知見と今後の課題をまとめます。 要約 テストデータの作成に時間がかかり、十分に手動テストができていなかった Playwright などのツールを使って自動化することで、効率よく不具合を発見できるようになった 継続的に E2E テストとしてメンテナンスしてゆくためにはさらに工夫が必要 開発を進める上で感じた課題 仕様変更によって多くのテストデータを用意する必要が発生した このプロジェクトでは、開発チームが中心となって大まかなフローや画面設計を作っていました。その一方で、画面上の文言やシ

いつもTypetalkをご利用いただきありがとうございます。 この度、株式会社ヌーラボはビジネスチャットツール「Typetalk」のサービスを終了することを決定いたしました。サービス終了にあたり、今までご利用いただいた皆様に感謝申し上げます。 2024年12月1日（日）をもってプランの更新を停止し、お客様それぞれの利用期間の終了をもって、サービスが利用できなくなります。サービス終了までのスケジュールおよび詳細については、以下をご確認ください。 終了までのスケジュール 2023年11月15日（水） 無料トライアルおよびフリープランの新規申し込みを停止 2024年12月1日（日） プラン更新停止、利用期間が満了した組織から順次利用停止（※） フリープランからスタンダードプランへのアップグレード停止 ※ 利用期間中であればユーザー数の追加ができます ※ 例として、利用期間が2024年11月14日

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()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し

こんにちは、ヌーラボの中村です。BacklogのGitチームで開発やメンテナンス、その他諸々をやっています。本記事ではMySQLクライアントのバージョンアップの際に出くわしたおもしろい挙動を解説します。 概要 MySQL 5.7サーバーへの接続について、MySQL5系クライアントからMySQL8系クライアントへのバージョンアップを検証していたところ、特定のクエリだけ実行結果が0件になる現象が発生しました。（あるPerlのプログラムで5系のクライアントをサポートしていない環境があり、やむを得ずアップグレードを実施しました） インターネットで検索すると、「クエリに空白を入れる」「改行を追加する」などおまじないのような解決方法が散見されましたが、そんなはずはないと思い調査を進めました。 調査したところ、原因は以下の3つが合わさったことによるものでした。 MySQL 5.7ではクエリキャッシュが有

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

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

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

Backlog課の＠vvatanabeです。我々Gitチームの毎朝のルーティンの一つに、 「前日の各種アプリケーション・AWSリソースのアラートやメトリクスを把握する」 と言うものがあります。 これは、SREの@maaaato氏がGitチームにエンベッドされてから毎朝欠かさずやっている習慣です。 先日開催された #NuCon2022 の彼のセッション「チームでサービスの運用をうまく支えていくための取り組み ~SREと共に~」でも、継続している取り組みの一つとして紹介しています。 この取り組みのおかげで、実際に問題を検知して改善に繋げたケースも多々あります。今回はその中から一つ、大容量のストレージを持つサーバーの奇妙なメモリ使用量の増加原因を究明して改善に繋げた話をご紹介します。 TL;DR Amazon Linux 2のようなRHEL/CentOS系のディストリビューションに大量のファイル

本記事はヌーラバーブログリレー2022 Advent Calendar 2022の17日目の記事です。 NulabAppsチームでSFA/MA連携を担当しているgillaxです（SFA/MA = Sales Force Automation/Marketing Automation）。 いわゆる”中年”の私がミッドライフ・クライシスを感じ、試行錯誤しながらどう乗り越えた（乗り越えようとしている）かについて体験談をもとに書こうと思います。ここで紹介するのはあくまで私の体験記です。気になる症状がある方はまずはカウンセリングを受けることをおすすめします。 ミッドライフ・クライシスとは ウィキペディアによると、ミッドライフ・クライシスとは、40歳〜60歳の中年層に起こりうるアイデンティティと自信の移り変わりのことで、加齢や達成感が感じられない出来事によってもたらされる心理的危機のことです。これによ

こんにちは、UXエンジニアのヨーナスです。今回のブログリレー投稿では、よく後回しにされがちなSassの@importアットルールの廃止に伴うリファクタについて書きます。 基本的には人間というのは、変化が苦手なものです。もちろん、僕もそうです。一度いいやり方を見つけるとそれにずっと従いがちな性格です。何かの明らかなメリットが見えないと一回慣れたやり方でずっとやってしまうタイプです。ですが、いざ新しいことに挑戦してみると、結局やってみてよかった〜と毎回終わりに思います。そもそもSass自体もそうでしたし、TypeScriptもそうでした。一度その良さを味わうと元には戻れなくなります。 新しいことに挑戦するのはいいことですが、実は、今回の記事の内容は「挑戦」というまでもなく、まったく複雑ではありません。それでも、記事として少しでも役に立てばなーと思いながら書きます。僕は初めて@importを@u

Backlog 開発チームの saki です。最近、Web フロントエンドの技術を使い、タスクの順番や階層をドラッグアンドドロップ(DnD)で変えられる、木構造 Todo の習作をしました。後学のために作り方の主要な部分を紹介します。また、DnD 周りではまった問題と解消法を共有します。 作った Todo は以下 gif のようなものです。基本的な Todo 機能(タスクの追加、完了、削除)に加えて、DnD で順番や階層を変えられたり、タスクの開閉状態を切り替えて子タスクを表示非表示できます。DnD でタスクを意図した位置に移動できるよう、タスクや階層の間にはスペーサーを設けています。 記事内のコードには TypeScript 4.6、UI ライブラリには Preact 10 系を用います。前提として、コードは実装を一部省略して記載します。そのままでは動かないため注意してください。動作する

みなさんこんにちは。Backlog課のGitチームに所属するテリーです。Gitを触ってるとたまにちょっとした集計をしたくなります。その度に検索したり考えたりするのも少しめんどくさいので、業務上ではあまり必要ではないがたまに確認したくなるようなコマンドを集めてみました。どのコマンドも書き換えることなくコピーアンドペーストで動くようになっているのでぜひ興味を持った方は自分の環境で試してもらえると嬉しいです。 リポジトリの傾向を知るコマンド 一定期間毎のコミット数を知る 「このリポジトリっていつ頃が一番盛んにコミットされていたのかなー？」 GitHubなどが提供しているこの機能実はBacklogでは提供されていません。（今後の機能開発頑張ります）そのためちょっと気になった時にコマンドで探れると大変嬉しいです。 年別・月別を知る git logの出力結果をAuthor dateだけにして--dat

macOS Ventura と iOS 16, iPadOS 16 で新しい認証の仕組みであるパスキー(Passkeys)が導入されました。このブログではAppleのパスキーとは何か、ヌーラボでの利用方法、パスキーの今後について簡単に説明したいと思います。 パスキーとは 簡単にいうとパスワードの代わりになるものです。パスキーはパスワードよりもずっと安全で簡単に利用することができます。 パスキーを使うとログインにパスワードが不要になり、面倒で危険なパスワードをなくすことができます。 パスキーはFIDOという国際規格であるセキュリティキーの仕組みを拡張したものです。 FIDOはフィッシングに強く、SMSや認証アプリよりも安全と言われています。 従来のセキュリティキーはYubiKeyなどのドングルの中やPC内蔵のセキュリティエリアにクレデンシャル（ログインのために必要な秘密データ）を保管していま

はじめに ヌーラボでサービス開発部長をしている馬場です。 自分が身につけた技術や知識を惜しげもなく技術ブログに書いているソフトウェア開発者がいます。かっこいいですね。憧れます。彼らのように、ソフトウェア開発者が技術ブログを書くことにはどのような価値があるのでしょう？僕の考えをまとめてみました。 人に教えることほど、勉強になることはない 僕が一番大きな価値だと考えているのは、技術ブログを書いてアウトプットすることによって、ソフトウェア開発者自身のスキルを向上させることです。 ブログを書くということはつまり、自分の知識をその読者に教えるということです。教えるという行為は教わる側だけではなく、教える側も学べることが多いのです。ピーター・ドラッカーも「No one learns as much about a subject as one who is forced to teach it. /人

今年の４月に入社したBacklogのUXエンジニアのヨーナスです。もともとフロントエンドエンジニアとして働いていましたが、ユーザビリティとアクセシビリティがどうしても気になって、割と自然にUXの方に移動しました。 前からずっとアクセシビリティを大事にしてきたと思っていましたが、ある日、Backlogのコントラストテーマ対応が足りていないというフィードバックを目にしました。ふわっとしたイメージがあったけど、一回も使ったことがなくて、まだまだ意識が足りないところがあるなーとしみじみ感じました。その対応で学んだことを元に、ウェブサイトにおけるコントラストテーマ対応について簡単に書こうと思っています。 コントラストテーマってそもそも何なんだ？ 少し思い出してみたら、コントラスト設定を、Windowsの設定の中で確かに見たことがあったが、コントラストテーマは実際に何をするかは正直に言えばよく分かりま

本記事はブログリレーの8/8分になります。 こんにちはMakkyです。 会社が完全テレワークOKになって2年ちょっとが経ちました。 ヌーラボは出社したい人は出社してもOKという感じなんですが、家で仕事する人が多いので、各々自分の仕事環境が思い思いのものになっています。 こうなると、他の人の仕事環境ってやっぱり気になりますよね？ 以前はオフィスに出社していたので同僚のデスクが視界に入ったりして、なんとなく使ってるマウスやキーボードを知っていたりしたんですが、そういうことも無くなったので今回マウスとキーボードの動向を調査してみました！ こういうのってエンジニアの人が対象になりがちですが、せっかくなのでいろんな部署の人にアンケートをとってみました。 ※複数使ってる人も想定して「仕事で使ってるメインのもの」としています 調査概要 対象者: ヌーラボ日本拠点所属社員（部署は問わない） 回答数: 77

CacooチームのKawabataです。本記事はヌーラバーブログリレー2022の8月4日分の記事です。 本記事では、自作のツールのバグのせいで悔しい思いをしつつも、改善につなげた話をします。あくまで個人的に作っているツールについての話なので、ヌーラボでの業務とは無関係です。記事を通して会社で働きながらも盆栽いじりのように個人開発を行うエンジニアライフの楽しさや大変さが伝われば幸いです。 ツールのバグによって、妻の仕事のデータを吹き飛ばしてしまいましたが、File System Access APIを使って改善につなげました。ヌーラボには個人開発倶楽部という部活があり、個人開発者同士で作ったものを紹介したり情報を共有したりしてお互いにモチベーションを高め合っています。 私は個人的にプレゼン動画作成ツールを作っています。簡単に説明すると「プレゼンテーションのスライドに音声を録音して、一本のプレ

こんにちは！カスタマーサポートチームのMisatoです。 カスタマーサポートチームでは問い合わせ対応がメインの業務です。 単純に顧客からの質問に回答するだけでなく、問い合わせの背景について積極的にヒアリングを行ってみました。 すると、当初想像していた以上の効果があり、私自身にとって良い経験になりました。 このブログではどういう経緯でヒアリングに取り組んだのかや、具体的に何をやって、どんな効果があったかをまとめました。 ブログを書いてみてはいますが、まだまだ勉強中ですので、温かい目で読んでいただけると幸いです。 はじめに 私は新卒3年目の時に地元福岡へのUターンとともにヌーラボへ転職し、サポート経験ゼロでカスタマーサポートチームに入社しました。 入社したての時のカスタマーサポートのイメージは問い合わせに回答するチームで、顧客にとって良いサポートとは「すぐに回答が返ってくること！」と考えて、問

SRE課で、主にBacklogのSREを担当しているMuziです。 物理サーバやインスタンスで動作していたアプリケーションを、Kubernetesクラスタに移行する際には、いままで暗黙的に存在していた前提に目を向ける必要があります。そのような前提を無視すると、アプリケーションは動作したとしても、可用性が悪化する可能性があるためです。 私たちがBacklogをEC2インスタンスからKubernetesクラスタに移行した際にも、可用性の悪化に繋がる問題に対処する必要が生じました。今回は、そのような問題の一つであるGraceful Shutdownに関する注意点を、私たちの実体験をもとにご紹介します。 なお、以下の内容はAmazon EKSのKubernetesバージョン1.22で確認しました。Amazon EKSに固有の話題も含みますが、Kubernetes全般に共通する部分も多いかと思います