エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

Cline x MCP サーバーで入社後のシステム理解を効率化

【QAチーム ブログリレー4日目】

AIを使ってサービスを理解しようとする人(今回の記事のイメージ)

はじめに

はじめまして、QAチームの草場です。

5月に中途入社して1ヶ月が経ちました。

以前の会社には新卒以来長く勤めていて、今回が初めての転職なので日々新鮮に感じることが多いですが、優秀なエンジニア陣の力を借りながら奮闘しているところです。

この記事では、既存サービスの開発チームに途中から入ることになったQAが、既存サービス理解のために工夫したことを共有します。

入社後にまずやったこと - 担当サービスを理解する

私が入社後に初めて担当している「デジスマ診療」というサービスは、患者さんの予約や問診、決済まで一連の機能をワンストップで提供することで患者さんだけでなく受付、医師もラクになる新しい医療体験を提供しています。 www.youtube.com

デジスマ診療は週1回の頻度で新しい機能の追加や変更を本番リリースしているのですが、リリースして問題ないことを確認するシステムテストを実施しています。

※エムスリーでは全員QAという方針で開発者自身でのテストと、QAによるテストを併用しています。この方針について過去の記事がありますので、開発者とQAでのテストにご興味ある方はご覧ください。 www.m3tech.blog

テスト時は、今回リリースする機能が単純に使えるかを確かめるだけでは不十分で、今回の変更が他の機能に悪影響を与えていないか・使えなくなる機能がないか、広い視点で確認していく必要があります。

広い視点で考えるためには、サービスの機能・変更履歴・システム構成・これまでに起きた不具合・利用シナリオ・利用者の事…など色々な情報を頭にインプットしていかないといけません。

デジスマ診療は2021年10月のサービス開始から3年以上が経過していますので、これまでに多くの機能追加・変更をしています。

サービスを提供するシステムも、患者さんにお使いいただくスマホアプリだけでなくクリニックや病院で使われるWeb画面もあり、理解しておくべき範囲が広いです。

担当直後のQAとしては、これらの情報のインプットを早く効率的に進めていきたいところです。

デジスマ開発チームでは設計資料やリリースノートをConfluenceに、IA(情報設計)やVD(画面設計)をFigmaに整理していたので大量の情報がありましたが、全ての記事を頭から読んでいったりキーワードで都度検索していくと非効率的です。

さあ、どうしていくかと検討してみると、mcp-atlassianという Atlassian製品(Confluence/Jira)と連携できるMCPや、Figma-Context-MCPというFigmaと連携できるMCPがあり社内でも試してみた人がいるようでした。

そこでこれらのMCPを使うことでConfluenceやFigmaから効率的にインプットできるか試してみました。

注:mcp-atlassianは同名のMCPが公式/非公式で出ています。今回利用したのは先行して出ていた非公式版になります。公式版は当時はベータ版が公開された直後でした。FigmaのMCPは6月5日に公式からベータ版が公開されました。

mcp-atlassian: 設定と利用時のポイント

設定

github.com mcp-atlassianの初期設定は、READMEに書いてある通りでOKです。

場合によってはスペース名を指定すると、MCPがスペースのTOPページを初めに取得しにいくので検索する範囲を絞る事ができます。

エムスリーでは多くのサービスを開発しているためConfluence上にも多くのサービスの情報があるので、普段はスペース名を指定する事で担当サービスの情報を主に見にいけるようにしています。

CONFLUENCE_SPACES_FILTER: Filter by space keys (e.g., "DEV,TEAM,DOC")

利用上のポイント

ページの親子関係を活用できるようにする

特にプロンプトを工夫しない場合、まずconfluence_search APIを使うようです。

confluence_search API:Confluenceのコンテンツを、単純な検索語またはCQL (Confluence Query Language) を使って検索する

confluence_searchからの結果は、ConfluenceのWeb画面で直接検索する時の結果と近い印象でした。

これだと必要な情報までにかかる時間(とToken)が多く、良い情報を見つけられないことが多かったです。

もう少し情報の構造を知って上手く検索してもらう必要がありそうです。

そこで、初めにページ全体の構成を把握して.clinerulesに記載するようにしました。

・プロンプト例

mcp-atlassianを使って、デジスマのサイドバーにあるメニュー構成を判別。

・回答

ConfluenceのAPIを使用してサイドバーのメニュー構成を直接取得する必要があります。 `confluence_get_page_children`ツールを使用して、ページの子供を取得し、それらがサイドバーのメニュー項目に対応するかどうかを確認できます。 まず、`confluence_get_page_children`ツールを使用するために、`parent_id`パラメータが必要です。 これは、ConfluenceページのIDです。前の手順で取得した`page_id`を使用します。 Cline wants to use a tool on the `mcp-atlassian` MCP server: …(中略) **サイドバーのメニュー構成:** ConfluenceのAPIを使用して取得した子ページから、サイドバーのメニュー構成を推測します。 - リリース一覧 - リリース済/候補機能一覧 (※筆者:中略) これらのメニュー項目は、デジスマ診療に関するさまざまな情報へのアクセスを提供していると考えられます。

ここでconfluence_get_page_childrenが使われています。

confluence_get_page_children:特定のConfluenceページの子ページを取得します。

confluence_get_page_childrenが使われるとconfluence_searchを使われるより構成を理解している分関連する情報を取得する筋が良く、その後はプロンプトにも含めたりしています。 (プロンプトになくても.clinerulesから判断して欲しいところですが、自身のrulesでは上手くいかずでした)。

・プロンプト例

confluence_get_page_childrenでリリース済/候補機能一覧の子ページを取得して、取得できた各ページの情報をconfluence_get_pageを使って検索して、機能XXに関する機能を取得

mcp-atlassianを使ったConfluence記事取得と要約

Figma-Context-MCP: 設定と利用時のポイント

設定

github.com READMEに書いてある通りでOKです。

利用上のポイント

対象のFigmaファイルURLを渡すとURLからfileKeyやnodeIDを見つけて探しに行きますが、filekeyだけのURLを渡してファイル全体を探しにいってしまうと特に大規模なファイルの場合時間がかかりすぎてしまいます。 対象にしたいページが決まっている場合はPageNodeのnodeIDを含んだURLを指示するとちょうど良い範囲で探させることができ快適です。

PageNodeのnodeIDを含むURLを指示

対象のFigmaページ

Figmaの内容を理解しやすいように一覧化

MCPを掛け合わせて効率UP

これらのMCPを使うことで、「Confluence(https://…)に記載のある変更で、Figma側はどのように変わっていますか?」のように指示を出せば、2つのナレッジを横断して情報を得ることができ、インプットの効率があがりました。

複数のナレッジを横断した情報取得

今後のQAでの使い方としては、試行錯誤中のものも含めて次のようなことをやっていきたいと考えています。

・リリース機能でこれまでにどのようなQAを行なってきたかを確認

・障害一覧やテスト観点を読みとって今回のQAに不足している点を確認

・今のQA内容からテスト観点に追記

おわりに

本記事では、既存サービスを効率的に理解するためMCPを使って複数のナレッジを横断する工夫をご紹介しました。

ツールの特性を捉えて活用することで、膨大な情報の中からでも必要な知識へのアクセスがスムーズになることを実感しています。

このアプローチが、今後のQA活動の質向上にも繋がることを期待しています。

この記事が、同じようにサービスを担当されているQAエンジニアの方や、ConfluenceやFigma等の社内ナレッジをより効果的に活用したいと考えている方にとって、少しでもヒントになれば幸いです。

最後までお読みいただき、ありがとうございました。

We're hiring!

エムスリーでは、QAも大絶賛募集しています! 少しでも興味をお持ちでしたら、ぜひカジュアル面談などでお話しましょう!

jobs.m3.com