はてなブックマーク

アルダグラムでエンジニアをしている @sukechannnn です! 開発に携わっている KANNAレポート は、Excelを取り込んでその見た目のまま帳票を電子化できるサービスで、いくつかのExcel関数にも対応しています。 以前 @watabee が登壇した際にその仕組みについて触れていますが、現状は数式の依存関係(他セルの参照や他セル数式の計算結果を利用して計算するなど)を深さ優先探索(DFS)によるトポロジカルソートで構築した上で、各数式の計算は math.js を利用して行っています。 math.js は簡単に独自の数式を定義し計算できて便利なのですが、その柔軟さの代償として計算の度にパースして評価するため、どうしてもオーバーヘッドが大きくなってしまいます。KANNAレポートでも依存が5000個以上あるような関数はかなり遅くなってしまうという課題がありました。 高速化のためにでき

はじめに こんにちは!アルダグラムでQAのお手伝いをしているmiyashitaです! 最近、QAのシステムテスト設計でもAI使いたいなぁ〜と思い、色々と試行錯誤していました。 その中で、こんな勘所を持っていたらAIでうまくテスト設計していけるのかも?と感じたところがありましたので、今回はそちらを紹介できればと思います。 使用するツール ChatGPT:o4-mini-high 今回やりたいこと 仕様書を解析して、テスト観点表を作成してもらう 仕様書及びテスト観点表を基に、テストケースを作成してもらう 主な勘所 AIをテスト設計で活用するための勘所は、以下の3つです。 1. プロンプトチューニングは必須 2. プロンプトの指示は雰囲気で書かない 3. 依頼するタスク量に気を付ける 1. プロンプトチューニングは必須 最早これは言わずもがなですが、明らかにプロンプトをチューニングするのとしない

こんにちは。アルダグラムでエンジニアしている前山です。 最近だと新規プロダクトを作る際、モノレポ構成にしてコンテキストを集約させた方が Claude Code で開発しやすいかなと感じています。 ただ既存プロダクトで複数のリポジトリが分かれているケースが大いにあると思います。また、ghq のルートディレクトリで Claude Code を実行すると、タスクや開発に関係ないリポジトリまで子ディレクトリに含まれる状態になることもあるかなと思います。 本記事では、ghq で管理しているリポジトリをシンボリックリンクで1つのワークスペースに集約し、Claude Code がタスクに必要なリポジトリだけを参照できる環境を作る方法を紹介します。 ghq とは ghq は、Git リポジトリを統一的なディレクトリ構造で管理するツールです。 ghq get でリポジトリをクローンすると、自動的に ~/pr

こんにちは!アルダグラムでエンジニアをしている森下霞です。 インデックス削除の基本的な方法や「削除すると書き込みが速くなる」といった話は、Google検索等ですぐに見つかります。この投稿では、自分が実際に不要インデックス削除を進める中で、「MySQLが『使っていない』と言っているのに実際は使っていた」、いわゆる「クエリオプティマイザから見て未使用だが、ストレージエンジンから見れば外部キー制約等に必要だった」という矛盾に遭遇し、どのように確認し、判断したのかを中心にまとめます。 未使用インデックス確認 sys.schema_unused_indexes とは 未使用の可能性が高いインデックスをMySQLが判別しリストアップするビュー。 公式ドキュメント sys.schema_unused_indexes の落とし穴 未使用インデックスを調査する際、MySQL のオプティマイザが未使用と判断し

こんにちは!アルダグラムの田中です。 さて、先日引き継ぎ資料を書いたときに、こんな言葉を書きました。 「※(注記)歴史的な経緯でxxx環境の名前は「YYY」となっています。」 私の経験だと過去所属した会社でも、同僚に質問した際に「歴史的な経緯があって・・・」とかよく耳にしたことがあります。 今回はこの「歴史的な経緯」とは何なのか?について書いていきたいと思います。 社内Slackの「歴史的な経緯」のメッセージの様子 歴史的な経緯とは? あくまでも個人的な主観ですが、エンジニアが「歴史的な経緯があって...」と言うときは、ほとんどの場合以下のような意味が込められているのではないかと思います。 「現在のコードや設計は理想的ではないが、それなりの理由がある」 つまり、現状を正当化するための説明であり、同時に 「簡単には変更できない複雑な事情がある」 という警告でもあります。 技術的負債との違いですが、「

こんにちは!アルダグラムでQAエンジニアをしている千葉です! 最近AIの進化が目覚ましく、画像生成とかコードを書くAIとか何にでもAI使えるようになってきて、技術の進歩が凄まじい勢いだなって感じている今日この頃です。 突然ですが、私が担当している業務として、E2Eテストの自動化があります。 弊社でのE2Eテストの自動化は、MagicPodとPlaywrightを利用しており、併用してテストの自動化を進めている状況です。 開発のメンバーでは、様々なAIを駆使して開発業務の効率化を行っていますが、QAメンバーでもAIを利用してテスト自動化の工数を削減する取り組みを行っていきたいと考えています。 今回は、Playwright-mcpとCursorを使って、E2Eテストを自動で生成する方法の検証を行ったので、こちらをご紹介したいと思います! 1.Playwrightとは? まずはPlaywrigh

図に表すとこんな感じです(雑ですみません) 2. 作るもの 自社サービスの劣化版を作りつつ、そこにAIエージェントを搭載する体で実装していこうかと思います。 弊社のサービスについて 弊社は「KANNA」という建築や製造、不動産などの現場で働く方をターゲットにしたサービスを提供しています。メインとしては「プロジェクト管理アプリ」「デジタル帳票アプリ」という大きく2軸の機能で展開しています。 全体の流れとして、「案件」を作成し、そこに写真や資料を格納します。その案件ごとにチャットを作成することもできます。 「案件テンプレート」と呼ばれる案件の雛形を事前にカスタマイズし、プリセットを作る機能があります。 今回作るもの AIエージェントを介して、案件の操作をできるように実装をしていこうかと思います。以下のような操作が必要になるかと思います。 案件の作成 案件テンプレート/案件名/説明 の指定が必須

みなさんこんにちは!株式会社アルダグラムでエンジニアをしている大木です。 昨今AIの隆盛がとんでもなく、ついていくのに精一杯なのが正直なところです。けどついていけないと時代に取り残されそうなので頑張ります!ってことで何もわからんけど、とりあえずMCPサーバーを作っていこうと思います。 準備 今回は mcp-go を使って実装していきたいと思います。TypeScriptやKotlinはMCPの標準のSDK が用意されていますが、Goに関してはまだ存在しないようですね。 mcp-goの詳細は以下から確認いただけます!(サンプルも記載されていて、とてもありがたい...) 標準のmainのファイルを作成します package main import ( "fmt" ) func main() { fmt.Println("Hello World!") } 今回作るもの タスク管理ツールを想定したなんち

こんにちは!アルダグラムでエンジニアをしているkageyamaです。 最近のAIの発展は目覚ましく、普段の開発業務における生産性向上に大きく貢献しています。 弊社開発部でも、今年から積極的にAIツールの導入・活用を進めており、AI戦略ユニットも発足しました。 現在は色々なツールを各自が試しながら知見を共有して、より良い開発体験を模索しています。2025年4月時点で、開発部では以下のAIツールを全社員が利用できる環境を整えています。 ChatGPT Claude OpenAI Platform Devin Gemini Code Assist Cursor Junie Cline (RooClineも含む) この記事では、上記の中でも Cline を扱いやすくするために導入した .clinerules について、その知見を共有していきます。 目次 アルダグラムでの.clinerulesの役割

こんにちは、アルダグラムでSREを担当している okenak です。 今回は、2024年末に実施した KANNA の AWS インフラ基盤の全面リプレースについてご紹介します。 このプロジェクトは、昨年下期に実施した大規模な基盤移行であり、構成の見直しから段階的な切り替え、本番移行に至るまで、多くの検討と労力が求められました。 本記事では、移行に至った背景、当時直面していた課題、具体的な取り組み内容、そして移行を通じて得られた学びについてまとめています。どこか一部でもご参考になれば幸いです。 ▶️ KANNAのサービス紹介ページはこちら 🏗️ なぜ今、インフラ基盤のリプレースが必要だったのか? 急速に成長を続けるSaaSサービスに対し、初期に構築したインフラでは、柔軟性・拡張性・運用効率の面で徐々に限界が見え始めていました。 さらに、弊社自身もグロース期に差し掛かり、将来的なスケーラビリ

こんにちは! KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。 最近、Stable Audio という機械学習を用いた音楽生成モデルに興味を持ちました。 簡単なプロンプトを入力するだけで音楽を作成できるとのことで、ローカル環境で試してみることにしたのですが、セットアップには想像以上のハードルがありました。 今回は、その環境構築と試行錯誤の記録をまとめてみます。 実行環境とセットアップ 環境 MacBook Air M3 (2024) Python 3.9 PyTorch (MPS) Gradio torchaudio Hugging Face Hub Stable Audio のリポジトリは、Stability AI の公式 GitHub からクローンできます。 git clone https://github.com/Stability-AI

こんにちは!アルダグラムでエンジニアをしている秋田です。 弊社では以前、 フロントエンドのライブラリ134個を一気にアップデートしてリリース しました。今回はその中で起きたVRT(Visual Regression Testing)の課題と対応について紹介したいと思います。 前提 弊社サービス KANNA のフロントエンド開発にはVRTを導入しています。 使用技術としては Storybook + storycap + reg-suit で、GitHubへのpushをトリガーにして GitHub Actions のワークフローとして自動実行します。実行結果は Amazon S3 に保存され、UIの変更差分が確認可能です。便利ですね。 ところがフロントエンドのライブラリアップデートを実施した際に、2つの課題が発生しました。 起きたこと VRTの実行時間が長くなった アップデート前は15分程度で

みなさんこんにちは!株式会社アルダグラムでエンジニアをしている大木です。今回は、Storybook を学び直していこうかなと思います。 現在弊社ではStorybookを利用しており、レビューやデザイナーとの連携で活用しています。特に何かに困っているわけでもないのですが、もっとうまく使いこなせないのかなぁと考えていたところでした。 今までは6系を使っていたのですが、とあるチームが8系へのアップデートの作業をしてくださいました(ありがたい限りです)。 そういったキャッチアップのためにも学び直しをしていこうかと思います。 インストール インストールに関しては以下のページが参考になるかと思います。 今回は以下で実行します。 今回は React + Vite の構成でStorybookを作成してみようかと思います。プロジェクトが作成され、Storybookが起動するかと思います。Formatterは

エンジニアとしての歴も少し積み重なってきたせいか、レビューをしているといくつか過去の経験が浮かんでくることが最近ちらほらありました。 覚えてるうちにそれらを言語化してみようかなと思います。 テストのないコードはapproveしない 「変更とテストは必ずセットにすること」。昔、大先輩からいただいた言葉です。 一方で「テスト書いてください」って言いづらいですよね。わかります。うざいやつだって思われたくないし、目上の人が相手なら尚更。 僕の場合は、この先輩が本当にすごい人だったというのが大きいかもしれません。ちゃんとやってる人ってやっぱちゃんとしたすごいコードを書くんですよね。 最近の言い方だと「勇者ヒンメルならそうした」でしょうか。 心にヒンメルを宿して、やっていきましょう。 (もちろんHotfixすぎて時間ないとか、既存のコードやテストデータのセットアップが複雑でテストを書くのが容易ではない

こんにちは!アルダグラムでレポートチームのエンジニアをしている志茂です。 レポートチームでは、お客様が利用されているExcelファイルをKANNA上にアップロードし、 Webから編集できるような機能を開発しております。 今回の記事のスコープ スクラムの話をする際に、取り組んでるかそうでないかの話をよく聞くのですが、 実際に導入した上で、今のチームには効果的だったが、前のチームにはあまり効果出来でなかったような、具体的なケースを前提とした話はあまり聞かないような気がするので、自分が過去に所属した開発チーム(現職も含め)の体制を振り返って、帰納的にこんなケースだとスクラム効くんじゃないかという話をしたいと思います。 なのでアジャイルサムライのような教本に載っているような話ではなく、あくまで個人の体験として、具体でこんなケースだと結構良かったなという体験談をまとめたものになります。 スクラム開発

このアップデートは開発組織全体に影響を及ぼすため、QAスケジュールやリリーススケジュールをあらかじめ調整していました。 またアルダグラムではユニットテストやE2E、VRTなどを整備してはいるものの、フロントエンドの根幹となるライブラリをアップデートするため、全体的にQAした方が良いのでは?という考えに至り、QAチームとも連携し、アップデートに関する品質保証体制を固めました。 なぜ一気に上げることなったのか? 嬉しいことに目標としていたライブラリのアップデートが想定よりも早く終わりました。 そのため全体QAまでに一定の期間が開くことになりました。 (さてこの期間で何をするか・・・) (通常のSRE業務に戻ろうか・・・) (なんか他のライブラリも最新版バージョンと乖離があるものがかなり多いな・・・) (この後、全体のQAを行うし、他のライブラリもバージョンアップして技術的負債を一気に解消しよう

こんにちは!アルダグラムでエンジニアをしている渡邊です。 弊社では KANNA というサービスを提供しており、モバイルアプリは React Native で作られています。 そのモバイルアプリにおいて、現在 Kotlin Multiplatform と Compose Multiplatform を使って React Native をやめるように移行対応を進めています。 この記事では移行に至った経緯と、現在の状況について紹介します。 KANNA のモバイルアプリの歴史 弊社の KANNA のモバイルアプリは2019年頃に開発がスタートしました。私は当初はまだ参画していなかったのですが、当時の開発メンバーは WEB 開発を得意とするメンバーが多かったようです。また開発者4名で Web、iOS、Android 版を4ヶ月で0から開発する必要があり、開発スピードも重要でしたので、1つのコードで

こんにちは!アルダグラムでエンジニアをしている渡邊です。 弊社の KANNA のモバイルアプリでは、以前から画像に対して線やテキストを書き込み、書き込んだ内容を新しい画像として出力することができるという、画像編集機能があります。 画像編集時には画像を回転することができなかったのですが、先日、画像も回転させられるようにする機能拡張を行いました。 以下はそのサンプル動画です。 以前までは画像編集時には TouchImageView というライブラリを使って画像を表示していたのですが、このライブラリには画像を回転させる機能がありませんでした。 そのため回転機能がある画像表示ライブラリを探していたのですが、 ZoomImage というライブラリがかなり神がかっていた(注: 筆者の個人的な意見です)ので、今回はこのライブラリの紹介をしたいと思います。 ※(注記) ちなみにこのライブラリはチームメンバーの方が

コメント一つ一つに温度感がわかる prefix をつけることで、レビューコメントがすべて同列にならず、重要度の低い提案が明確になるので、レビュイーの負担を軽減することができます。また、こういった prefix をつけることで、締め切りに追われる状況 (プルリクエストをマージするために must で対応しないといけないかどうか) において柔軟性も提供できます。 細かいコメント (nits) だけなら、先に approve する 上記の「レビューコメントに温度感がわかる prefix をつける」に続いた話ですが、nits など、細かい指摘コメントはマージブロックになることはないので、先に approve を出して、「この部分は直せたら直しておいてね」程度の温度感で伝えると、レビュイーは余裕を持って後から対応できます。これにより、コミュニケーションの往復が減り、スムーズなデリバリーを実現しやすく

こんにちは!アルダグラムでレポートチームのエンジニアをしている志茂です。 レポートチームでは、お客様が利用されているExcelファイルをKANNA上にアップロードし、webから編集できるような機能をKotlinとSpring Bootで開発しております。 Excelファイルを読み込み編集できるようにするためには、色々な考慮事項があるのですが、 今回はその中でもExcel関数の読み込みで利用している、ANTLRという構文解析を行うためのツールをGoogle Colaboratory上で動作させ、解析した結果を構文木の画像として生成する方法をご紹介します。 構文解析ツールを使わないと大変? 単純な例を挙げながらお話しすると、Excelやプログラミング言語で、1+2*3という計算式があった場合、実行すると7という計算結果が得られます。これは1+2*3を単なるStringの文字列ではなく、1+2*

こんにちは!アルダグラムでエンジニアをしているカゲヤマです。 アルダグラム では、アルダグラムが使っている技術スタック(2021年 → 2023年)の記事の通り、Datadog を以前から利用しています。 私は、最近まで新機能の開発をしていたのですが、パフォーマンス計測およびその改善の目処を立てるにあたって Datadog にとても助けられたので、どのように使用していたか書こうと思います。 Datadogとは Datadog は、SaaS 型の運用監視ツールであり、監視ツールの他、APMツール、ログ分析、ネットワーク管理、データベース管理などを、オールインワンに扱えます。 その中でも、パフォーマンスのボトルネックの特定に役立つ APM を利用しました。 アルダグラムでもリクエスト単位でパフォーマンスを監視しています。GraphQL を採用しているため、GraphQLのリクエストが走ったタイ

どちらを利用するべき? 簡易的なグラフ描画には、SVGが適しているケースが多いと考えられます。 特に、拡大・縮小を伴うインタラクティブなUIの実装は、ベクタ方式が得手とするところです。 ただ、数万オーダーの要素や3D描画など、リッチな描画要件を実現する必要がある場合には Canvas を検討した方がよいかもしれません。 参考 ライブラリ グラフ描画のための機能を提供するライブラリ グラフ描画を主目的としたライブラリは多数ありますが、グラフ描画機能を直接提供するのではなく、視覚効果を提供するライブラリも存在します。 D3.js グラフ描画関連においては、よくこのライブラリの名称が上がります。 D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach

こんにちは!アルダグラムでエンジニアをしている柴田です。 はじめに 最近はCSSの進化が著しく、JavaScriptを使わずともCSSで高度なUIコンポーネントを実装できるようになってきました。特にカルーセルのようなUIもCSSだけで実現できることを知り、最新技術をキャッチアップしておきたいと感じました。 そこで今回は、CSSのscroll-snapプロパティを活用して、3種類のカルーセルを実装する方法をご紹介します。 scroll-snapプロパティの紹介 scroll-snapプロパティとは、スクロール時に要素を特定の位置でピタリと止めることができるCSSの機能です。これにより、ユーザーはスムーズかつ直感的にコンテンツを閲覧できます。 主なプロパティ scroll-snap-type: 要素がスクロールスナップコンテナかどうか、どの程度厳密にスナップするか、どの軸を考慮するかなどを定義

こんにちは!アルダグラムでエンジニアをしている今町です。 皆さん、コーディングをする際、どのようなエディタもしくは統合開発環境(IDE)を使っていますか?Vim、JetBrains が出している各種 IDE、それとも Visual Studio Code(VSCode)でしょうか?そんな私は、ずっと VSCode を愛用し続けています! VSCode を素晴らしいエディタたらしめているのは、なんといっても豊富な「拡張機能」の存在でしょう。VSCode の開発元である Microsoft 純正の拡張機能から、サードパーティ製の拡張機能まで、様々な便利ツールが拡張機能として提供されています。 とはいえ、星の数ほど拡張機能が存在しており(それは言い過ぎか)、最初はどれを使ったら良いのかわからなかったりします(なんなら、私が他人の使っている拡張機能を知りたいくらいです 👀) 普段は、以下のような

こんにちは!アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備

こんにちは!アルダグラムでエンジニアをしている渡邊です! 最近 Dify の話題を目にする機会が増えてきたので、今さらではありますが触ってみました。 この記事では Dify の使い方について共有いたします! Dify とは? Dify とはオープンソースで公開されているプロジェクトで、LLM(大規模言語モデル)アプリケーションを開発するためのプラットフォームです。 Dify を使うことで開発者でない人でも生成 AI アプリケーションを構築することができます。 GitHub https://github.com/langgenius/dify ドキュメント https://docs.dify.ai また Dify は以下の2通りの方法で使えます。 クラウドサービスで使う https://dify.ai/ からアクセス可能 独自のサーバーにホスティングして使う Dify で何ができる? Dif

こんにちは! KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。 今回は、XState を用いてステートマシーンを作り、アプリケーションの複雑な状態遷移をシンプルに実装する方法についてご紹介します。 背景 アルダグラムでは、デジタル帳票アプリケーション「KANNA レポート」を提供しています。 KANNA レポートは、Excel や Google スプレッドシートのようなユーザーインターフェースを備えた Next.js 製の Web アプリケーションとなっており、複雑な状態遷移を多く含んでいます。 このような複雑な状態遷移を管理するためには、React アプリケーションでは通常、Redux や useReducer を用いてステートマシンを構築することが多いと思います。 しかし、これらの方法は状態遷移に厳格な制約が必要な場面で手続き的なコードを多

こんにちは!アルダグラムでエンジニアをしている内倉です🦐 ユニットテストのカバレッジを出したいけれど「ちょっと見たいだけで Codecov とか使うほどではないんだよな」というようなこと、たまにありませんか? 今まで Rails のプロジェクトでは、テストカバレッジを GitHub の PR にコメントとして追加してみたことがあるのですが、Android + Kotlin ではやったことなかったので、少し調べてみました。 Android でカバレッジ取るなら、JaCoCo 一択なのかな?と思っていましたが、Kotlin だったら Kover というのが良さそうだったので導入してみたところ、出力したレポートをほぼそのままPRコメントにつけるだけでも、結構いい感じになりました。 Kover とは Kover は、JVM や Android プラットフォーム向けにコンパイルされた Kotlin