kickflow Tech Blog

https://tech.kickflow.co.jp/

株式会社kickflowのプロダクト開発本部によるブログ

フィード

記事のアイキャッチ画像
画面の表示が遅い原因を調査したら Nuxt I18n にコントリビュートしていた
はてなブックマークアイコン 1
kickflow Tech Blog
こんにちは、プロダクト開発本部でエンジニアをしている秋山です。 kickflow ではほぼ毎日何らかのリリースを行っており、機能アップデートもハイペースです。今年はこの記事の執筆時点で 58 件のアップデートを行っています。 プロダクトは日毎に改善が進んでいるなか、「初回アクセス時に画面がなかなか表示されずに困っている」という報告が挙がりました。以前はそこまで遅くなかったのに、ここ最近表示の遅さが顕著になったという意見もありました。
8分前
記事のアイキャッチ画像
JSConf にスポンサーしました & 参加してきました!
はてなブックマークアイコン 2
kickflow Tech Blog
JS Conf 幕間のスポンサー一覧 こんにちは、kickflow開発チームの芳賀です。 食欲の秋、芸術の秋、そしてカンファレンスの秋! ということで、kickflowは2025年11月16日(日)に開催された JSConf JP 2025 にスポンサーとして参加いたしました。 JavaScriptコミュニティへの貢献と、素晴らしいエンジニアの皆様との交流を深めることを目的に協賛させていただきました。当日は私と同僚の秋山が一参加者として多くのセッションを聴講しましたので、本記事ではそのレポートをお届けします。
2日前
記事のアイキャッチ画像
Vue Fes Japan 2025 でフロントエンドの未来を感じてきた
kickflow Tech Blog
プロダクト開発本部でエンジニアをしている秋山です。 入社して3か月ほどが経ち、今回が自分の初めてのテックブログの投稿になります。 これから投稿を増やしていきますので、今後ともよろしくお願いします! さて、表題の Vue Fes Japan 2025 ですが、弊社は今回シルバースポンサーとして協賛しました。kickflow はフロントエンドが Nuxt 4 で構築されており、日々 Nuxt/Vue にはお世話になりっぱなしです。業務に新たな知見を得る機会としてはもちろん、コミュニティの貢献にもつながるという期待を込めて、この一大イベントに協賛できることを嬉しく感じています。
22日前
記事のアイキャッチ画像
AIとペアプロで100件超の監査ログテストをCypressで実装しました
kickflow Tech Blog
はじめに こんにちは。kickflow QAエンジニアのNです。今回は、AIの力を借りながらCypressで稟議ツールの重要な機能の1つである「監査ログ」のE2Eテストを実装した取り組みについてお話しします。
1ヶ月前
記事のアイキャッチ画像
VOCを反映するkickflow機能開発の優先度付けプロセス
kickflow Tech Blog
こんにちは、kickflowのPMチームでPMM(プロダクトマーケティングマネージャー)を担当している許です。 kickflowでは、お客様の課題を解決するために日々新機能の開発や改善を行っています。 多くのSaaSプロダクトがそうであるように、私たちのもとにもお客様から「こんな機能がほしい」「ここを改善してほしい」といったご要望が数多く寄せられます。「次に何を作るべきか?」という意思決定は、プロダクトの成長において非常に重要です。今回は、私たちが多数のご要望の中からどのように開発する機能を決定し、優先順位付けを行っているのか、そのプロセスをご紹介します。
1ヶ月前
記事のアイキャッチ画像
Kaigi on Rails 2025にシルバースポンサーとして参加しました
kickflow Tech Blog
Kaigi on Rails 2025 プロダクト開発本部の渡辺です。昨年に引き続き、「Kaigi on Rails 2025」に参加してきました。 kickflowは今年もシルバースポンサーとして協賛しており、次回の開催時にはブース出展も検討しております。 本記事では、会場レポートや個人的に気になったセッションなどをご紹介いたします。
2ヶ月前
記事のアイキャッチ画像
CREがテクニカルサポートチームに伴走して顧客体験の向上を目指す取り組み
kickflow Tech Blog
こんにちは。kickflow CREチームの西山です。 先日、テクニカルサポートチームがDifyを活用し、AIヘルプデスクを立ち上げた経緯をご紹介しました。 tech.kickflow.co.jp しかし、AIを導入して終わりではありません。ユーザーに安心して使ってもらうためには、情報の正確さや継続的な運用を支えるための技術的な仕組みが必要になります。 今回はCREの視点から、裏側の技術的な仕組みづくりを解説します。
2ヶ月前
記事のアイキャッチ画像
kickflow で作って使っているカスタムスラッシュコマンドを紹介します
kickflow Tech Blog
claude code を使っているイメージ こんにちは。 kickflowでエンジニアをしている芳賀です。 kickflowでは「AI 1st」というバリューを掲げており、AIをあらゆる業務や意思決定の一番最初の選択肢においています。 エンジニアチーム内でも、Claude CodeやDevinをはじめとした様々なAIを活用し、開発業務の効率化を進めています。 では具体的にどのような取り組みをしているのか? 本記事ではその一例として、開発チームで作成・運用しているClaude Codeのカスタムスラッシュコマンドをご紹介します。
2ヶ月前
記事のアイキャッチ画像
PRODUCT HISTORY CONFERENCE 2025 に出展しました
kickflow Tech Blog
こんにちは。開発チームでエンジニアリングマネージャーをしている森本です。 9/19〜20 に開催された PRODUCT HISTORY CONFERENCE 2025 というイベントに出展したのでレポートしたいと思います。
2ヶ月前
記事のアイキャッチ画像
7ヶ月でE2Eテスト3.6倍!本番不具合25%減を実現したQA活動の記録
kickflow Tech Blog
こんにちは、プロダクト開発本部 QA チームのNです。 今回は、E2E テスト自動化ツール「Autify」を用いて行った、E2Eの自動テストを爆増させた品質改善活動について共有します。 この取り組みの結果、以下の成果を達成しています! 本番環境での不具合検知数:月平均で 25%削減 リリース前の E2E テストによる不具合発見数:月平均で 22 倍に増加 同様の課題をお持ちのチームにとって、具体的な改善点の参考になれば幸いです。
2ヶ月前
記事のアイキャッチ画像
Difyで実現するAIヘルプデスク:顧客体験を向上させた構築の裏側
kickflow Tech Blog
こんにちは、kickflowでテクニカルサポートを担当している大谷です。 最近、多くのサービスでAIチャットボットを見かけるようになりました。kickflowでも、お客様の疑問をより迅速に解決し、顧客体験が向上することを目指し、AIヘルプデスクの構築に取り組みました。 今回のプロジェクトでは、テクニカルサポートチームが中心となり、CRE (Customer Reliability Engineer) と協力してAIヘルプデスクを構築しました。 この記事では、非エンジニアである私が、DifyというLLMアプリケーション開発プラットフォームを使い、プロンプトエンジニアリングを駆使して技術的な課題を…
3ヶ月前
記事のアイキャッチ画像
Nuxt 4 へのアップグレードが完了しました!段階的な移行戦略とロードマップをご紹介
kickflow Tech Blog
Nuxt4 移行のイメージ図 こんにちは。開発チームでフロントエンドを担当している芳賀です。 Nuxt 4 がリリースされましたね! kickflowでも、この度Nuxt 4へのアップグレード対応を行いました 🎉 結論から言うと、移行作業は想像以上にスムーズでした。これは、Nuxt 4の優れた後方互換性と、AIによる強力なサポートがあったからだと感じています。 本記事では、kickflowが実践したNuxt 4への移行プロジェクトの全貌をご紹介します。
3ヶ月前
記事のアイキャッチ画像
kickflowの品質を支えるQAチームのツールスタックを紹介します(2025年8月版)
kickflow Tech Blog
kickflow QAチームのツールスタック こんにちは、kickflow QAチームの川村です。 今回はQAチームがどのようなツールを導入し、どのように活用しているのかをご紹介します。 テスト管理ツールからE2Eテスト自動化、そして最新のAI活用まで、私たちのツールスタックを大公開します! プロジェクト・テスト管理 Asana Qase テスト自動化 Autify Cypress Postman GitHub Actions AI関連ツールの活用 kickchat Dify Google Gemini Anthropic Claude Devin まとめ
3ヶ月前
記事のアイキャッチ画像
Railsサーバーとブラウザで同一のJavaScriptコードを使う:mini_racer
kickflow Tech Blog
聖杯とされる物の一つ「サクロ・カティーノ」(本文とは関係ありません)。Sylvain Billet, CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0, via Wikimedia Commons kickflowプロダクト開発本部の小本です。 Write once, run anywhere(一度書けばどこでも動く)、それはプログラマーが太古より求め続ける聖杯です。 今回は Ruby gem「mini_racer」を使い、サーバーサイドとフロントエンドで数式評価エンジンを統一した事例をご紹介します。 なぜサーバーサイドでJ…
3ヶ月前
記事のアイキャッチ画像
QAエンジニアがGeminiを使ってQAポータルサイトを作った話
kickflow Tech Blog
コード経験ほぼゼロでも大丈夫!Geminiと挑んだ3日間のサイト制作 こんにちは!kickflowプロダクト開発本部 QAチームのNです。 今回は、普段はコードを書く機会がほとんどない私が、GoogleのAI Gemini という強力な相棒と一緒に、チームの業務効率を改善する 「QA ポータルサイト」 をゼロから作ったお話をご紹介します。 「自分も何か作ってみたいけど、プログラミングはちょっと…」と感じている方の背中をそっと押せるような記事になれば嬉しいです!
3ヶ月前
記事のアイキャッチ画像
kickflowのプロダクト開発におけるAI活用の現在地
kickflow Tech Blog
こんにちは、kickflowでCTOを務めている小林です。 3ヶ月ほど前の以下の記事で、AIコーディングツールClineの活用について少し触れましたが、この分野の進化は凄まじく、kickflowの開発現場でもツールの利用方法や業務フローが目まぐるしく変化しています。 tech.kickflow.co.jp 今回は、その後のkickflowのプロダクト開発におけるAI活用の現在地と、本格的な導入を進める中で得られた学びについてお話しします。
4ヶ月前
記事のアイキャッチ画像
ヘルプセンターのライティングフローをGitHub PRベースに改善した話
kickflow Tech Blog
こんにちは。kickflow CREチームの西山です。 SaaS企業においてテクニカルサポートは、顧客のプロダクトに対する信頼度や愛着といったロイヤリティを左右する重要な一要素です。中でもユーザーがセルフサービス(自己解決)できる質の高いヘルプセンターの提供が、カスタマー・エクスペリエンスの向上には不可欠となっています。 kickflowではヘルプセンターをZendesk Guideで運用していますが、記事の公開に至るまでの運用フローにいくつか課題を感じていました。 今回はこれらの課題を解決するために記事の執筆環境をGitHubに移行し、それによって実現したMarkdownベースの効率的なヘル…
4ヶ月前
記事のアイキャッチ画像
ローカル環境で動くCypressテストの並列実行を自作して高速化した話
kickflow Tech Blog
こんにちは、kickflow QAチームの川村です。 今回は、E2Eテストの実行時間を短縮するために、Cypressのテスト並列実行基盤を自作した話をします。 E2Eテストはプロダクトの品質を担保する上で非常に重要ですが、テストケースが増えるにつれて実行時間が長くなり、開発サイクルを遅延させる一因になりがちです。 私たちのチームでもこの課題に直面し、自動テストの実行時間短縮に取り組みました。 この記事では、Cypress Cloud公式のParallelization機能を使わずに、Node.jsを用いて独自の並列実行システムを構築し、テスト実行時間を1並列の約40分から8並列の約10分へと7…
4ヶ月前
記事のアイキャッチ画像
AIを使ってYARDからrbs-inlineへ移行しました
kickflow Tech Blog
ロボット掃除機に効率よく掃除させるには、部屋を整理整頓するのが重要です。整理整頓もロボットがしてくれればいいのに(本文には関係ありません)。 kickflowで主にバックエンドを担当している小本です。今回は、既存のRailsプロジェクトについて、AIを活用してYARDコメントをrbs-inlineに自動変換した事例を紹介します。 RBS / rbs-inlineとは なぜRBS / rbs-inlineを導入したいのか? AI使ったYARDからrbs-inlineへの移行 変換作業の概要 GitHub ActionsによるRBSファイルの自動生成 まとめ 最後に
4ヶ月前
記事のアイキャッチ画像
AIを活用してコードレビューを効率化!kickflowでの4つの取り組み事例
kickflow Tech Blog
こんにちは。開発チームでエンジニアをしている森本です。 皆さんは日々の開発でコードレビューをしていますか? kickflowでは、開発フローにコードレビューのステップを組み込んでおり、ほとんどすべてのコードでレビューが実施されます。しかし、このコードレビューは多くの企業で共通の課題となっているように、非常に負荷の高い作業です。複数の観点から品質に対する責任を伴うため、有識者が中心となって行うことが多く、開発のボトルネックになりやすい傾向があります。一方で、コードレビューを怠るとプロダクトの品質を担保できず、不具合や仕様齟齬が発生するリスクが高まります。 本記事では、弊社でのコードレビューへの取…
4ヶ月前
記事のアイキャッチ画像
Pull Request単位のホワイトボックステスト観点をAIで自動生成する
kickflow Tech Blog
こんにちは、kickflow QAチームの川村です。 ホワイトボックステストにおける観点抽出に課題を持つQAチームは多いと思います。 コードの実装に踏み込んだ観点は仕様書から読み取れず、どうしても担当者のスキルや経験に依存しがちです。 kickflowのQAチームでは、この課題を解決し、テストの品質と効率を向上させるために、AIを活用したテスト観点抽出の自動化に取り組みました。 この記事では、Devin と Slack を活用し、Pull Request (PR) の内容からホワイトボックステストの観点を自動で抽出し、テスト管理ツールである Qase にテスト項目書を作成するまでの仕組みをご紹…
4ヶ月前
記事のアイキャッチ画像
Claude APIを使ったアプリケーションの多言語対応
kickflow Tech Blog
こんにちは、kickflowでCTOをしている小林です。 kickflowでは先日中国語(簡体字・繁体字)と韓国語への対応をベータ版としてリリースしました。 今回は、kickflowのプロダクトを多言語対応するにあたり、AIを活用した自動翻訳アプローチについてご紹介します。 具体的には、Anthropic社のClaude APIとGitHub Actionsを駆使して、RailsとNuxt.jsで構築されたアプリケーションの翻訳ファイルを継続的に自動生成する仕組みを構築した話をします。
5ヶ月前
記事のアイキャッチ画像
Nuxt UIについて調べてみた
kickflow Tech Blog
社内AIにお願いして描いてもらったNuxt UIのイメージ こんにちは。kickflowエンジニアの芳賀と申します。 kickflowのフロントエンドはNuxtを利用しており、 Nuxt、および周辺のエコシステムまでふんだんに利活用し開発しております。 また、oxc の登場や rolldown の開発など、これからにも期待できますよね。 Nuxtは一通り触ってきたかな、と思っていた私ですが、Nuxt UI の存在がすっぽり抜けておりました。 業務では別のUIライブラリを使用しているため、他のキャッチアップが疎かになっていたなと反省しております。 今回は、私のキャッチアップがてらNuxt UIに…
5ヶ月前
記事のアイキャッチ画像
Autifyで効率的なE2Eテストシナリオを作ってみた 〜チケット削除機能の例〜
kickflow Tech Blog
こんにちは!kickflowのプロダクト開発本部 QAチームのNです。 私たちは、kickflowの品質向上のため、日々様々なテストに取り組んでいます。 その中でもE2E(End-to-End)テストは、ユーザーが実際に操作する流れを通して機能全体の動作を保証する上で非常に重要です。 しかし、E2Eテストは網羅性が高い反面、手動で行うと多くの時間と手間がかかるという課題もあります。 そこでkickflowでは、E2Eテスト自動化プラットフォームであるAutifyを活用し、テストの効率化を進めています。 今回は、Autifyを使って「チケット削除機能」のE2Eテストシナリオを作成した際の工夫やポ…
5ヶ月前
記事のアイキャッチ画像
TSKaigi 2025 にブロンズスポンサーとして参加しました
kickflow Tech Blog
TSKaigi2025の会場、ベルサール神田 こんにちは。 kickflowでエンジニアをしている芳賀です。 先日開催されたTSKaigi 2025に、kickflowはブロンズスポンサーとして参加させていただきました! 本記事では、イベントの様子や聴講したセッションの概要、そして独自に行った「フロントエンドのAI開発」に関するアンケートの結果などをご紹介します。
6ヶ月前
記事のアイキャッチ画像
kickflowの公式MCPサーバーを公開しました
kickflow Tech Blog
こんにちは、CTO の小林です。 最近、AI エージェントの活用が企業の業務効率化において重要なトピックとなっています。特に Claude や GPT などの大規模言語モデル(LLM)を活用したエージェントは、様々な業務タスクを自動化する可能性を秘めています。 そこで今回は、kickflow の API を AI エージェントから簡単に利用できるようにするため、Model Context Protocol(MCP)に対応したサーバーを開発しました。この記事では、MCP の概要と、kickflow 公式 MCP サーバーの開発について紹介します。
6ヶ月前
記事のアイキャッチ画像
CTOがClineを1ヶ月触りまくって分かったこと
kickflow Tech Blog
こんにちは、kickflowでCTOを務めている小林です。 kickflowでは、プロダクト開発の効率化と品質向上を目指して、常に新しい技術やツールを積極的に検証・導入しています。その一環として、最近注目を集めているAIコーディングツールのClineを約1ヶ月間、実際の開発業務で集中的に利用してみました。 本記事では、Clineを様々なプロジェクトで試した結果、どのようなことが可能になり、逆にどのような課題が見えてきたのか、そしてAIコーディングツールを効果的に活用するためのTipsについて、kickflowの開発現場からのリアルな声をお届けします。 Clineとは 利用環境 Clineででき…
6ヶ月前
記事のアイキャッチ画像
RubyKaigi 2025 in 松山にシルバースポンサーとして参加しました
kickflow Tech Blog
こんにちは。kickflowプロダクト開発本部の小本です。 2025年4月15日から18日にかけて愛媛県松山市で開催された「RubyKaigi 2025」に、kickflowがシルバースポンサーとして参加した際のレポートをお届けします。 RubyKaigi 2025 概要 kickflowのスポンサーシップについて セッションで感じた技術トレンド 次期Rubyの大型機能は「Namespace」 型チェック 「Prism」の存在感 VSCodeのデファクトスタンダード化 AI関連の話題は限定的 個人的に気になったツール・技術 rbs-inline: RBSをインラインコメントで記述 rbs-tr…
6ヶ月前
記事のアイキャッチ画像
DevinでOpenAPIスキーマを自動生成したお話
kickflow Tech Blog
社内AIにお願いして描いてもらったAIとOpenAPIのイメージ こんにちは。kickflow エンジニアの芳賀と申します。 AIエンジニア界隈、すごく盛り上がっていますよね。 私としてもお仕事がなくなってしまうのではないかと戦々恐々としております(笑) そんな中、弊社にも Devin ちゃんがジョインしております。 本記事ではDevinを開発で活用した事例についてご紹介します。
7ヶ月前
記事のアイキャッチ画像
ActiveRecordによるクエリを監視しファイルに出力する
kickflow Tech Blog
トラブルが起きたとき、昔ながらの方法が役立つこともある Wayne Truong from Houston, TX, CC BY 2.0, via Wikimedia Commons こんにちは。株式会社kickflowプロダクト開発本部の小本です。 Bulletは何の問題点も検出しないが実際に動かすと何故か遅い Rails業界ではBulletなどのクエリの問題点を検出するツールが普及していますが、それらも万能ではありません。時には生のクエリログが解決の糸口になることがあります。 普通にRailsアプリケーションを作ると、development環境では以下のようなクエリログが出力されるようにな…
7ヶ月前