技術面接
本日はお忙しい中、貴重なお時間をいただき、ありがとうございます。盛偉と申します。
私は中国の名門大学で電気工学とシステム分析を学んだ後、来日してから八年以上にわたり、完全日本語環境でソフトウェア開発に従事してきました。これまでの経験では、ウェブシステムから機械学習基盤、そして最近では生成AIを活用した運用監視自動化システムや社内エージェントシステムの構築まで、多岐にわたるプロジェクトを主導・開発してきました。
今回の技術課題では、「Intelligent Presenter for HTML Slides」というプロダクトを開発し、BacklogのプロジェクトデータからAIを活用してHTMLスライドを自動生成するシステムを構築しました。MCP協議の採用、Vue 3とSlidevによるモダンなフロントエンド、そして日本語TTS機能まで統合した包括的なソリューションに仕上げました。この課題を通じて、Nulabの技術方針やプロダクト理念に深く共感し、特にBacklog AI助手の機能拡張という方向性で、既存サービスとの統合を意識した設計を心がけました。
私がNulabに魅力を感じるのは、「このチームで一緒に仕事できてよかった」という理念と、TRY FIRST、LOVE DIFFERENCES、GOAL ORIENTEDという行動方針です。これまでの経験でも、多様なメンバーとのチームワークを重視し、新しい技術への挑戦を恐れず、常に共通の目標に向かって努力することを大切にしてきました。
Nulabでは、これまでの豊富な開発経験とAI技術への深い理解を活かし、Backlog AI助手をはじめとする次世代プロダクトの開発に貢献したいと考えています。特に、ユーザーの業務効率化と新しい価値創造の両立を目指し、技術的な革新とユーザビリティの向上を同時に実現するプロダクト開発に取り組みたいと思います。
本日はどうぞよろしくお願いいたします。
Intelligent Presenter for HTML Slides
技術課題発表資料
スライド1: プロジェクト概要
Intelligent Presenter for HTML Slidesは、BacklogプロジェクトデータからAIを活用してHTMLスライドを自動生成するシステムです。
主要機能
- BacklogプロジェクトデータをMCP協議で取得
- AIによる10種類のテーマ別スライド自動生成
- 日本語TTS音声解説機能
- リアルタイム流式処理によるスライド配信
解説文
こんにちは。私が開発したIntelligent Presenter for HTML Slidesについてご紹介させていただきます。このシステムは、BacklogのプロジェクトデータからAIを使ってHTMLスライドを自動で生成するシステムです。Backlogプロジェクトのデータを自動で取得し、AIが十種類のテーマに分けてスライドを作成します。さらに、日本語の音声解説も付けることができます。
スライド2: 技術アーキテクチャ
1 | TypeScript Frontend (Vue 3) ↔ Go Backend (MCP Gateway) ↔ MCP Servers |
主要コンポーネント
- フロントエンド: Vue 3 + TypeScript + Slidev
- バックエンド: Go + Gin + WebSocket
- MCP統合: Backlog MCP Server + Speech TTS Server
- 認証: OAuth 2.0 + JWT
解説文
システムのアーキテクチャは三層構造になっています。フロントエンドはVue 3とTypeScript、Slidevを使用しています。バックエンドはGo言語とGinフレームワークで構築し、WebSocketでリアルタイム通信を行います。外部サービスとの連携はMCP協議を使い、Backlog MCP ServerとTTS音声合成サーバーに接続しています。認証はOAuth 2.0とJWTを使用して実装しました。
スライド3: 10種類のスライドテーマ
プロジェクト管理の全側面をカバー
- プロジェクト概況と基本情報
- プロジェクト進度と状態
- 課題詳細と管理
- プロジェクトリスクと瓶頸予警
- チームメンバーと協作状態
- ドキュメントと知識庫管理
- コードベースと開発活動
- 通知とコミュニケーション管理
- 智能化輔助と予測分析
- 総括と次段階計画
解説文
システムでは十種類のスライドテーマを用意しています。プロジェクト概要から始まり、進捗状況、課題管理、リスク分析、チーム協力状況、文書管理、開発活動、コミュニケーション管理、そして予測分析まで、プロジェクト管理の全ての側面をカバーしています。最後に総括と次の段階の計画を自動生成します。これにより、包括的なプロジェクトレポートを短時間で作成できます。
スライド4: リアルタイム生成フロー
非同期流式処理
graph TD A[ユーザー要求] --> B[Backlogデータ取得] B --> C[AI内容生成] C --> D[スライド配信] D --> E[TTS音声生成] E --> F[完了通知] B -.-> G[WebSocket] C -.-> G D -.-> G E -.-> G
解説文
システムの生成フローは非同期で処理されます。ユーザーからのリクエストを受けると、まずBacklogからプロジェクトデータを取得します。次に、AIがそのデータを分析してスライドの内容を生成し、WebSocketを通じてリアルタイムでフロントエンドに配信します。同時に、TTS機能で日本語の音声解説も生成します。すべての処理が完了すると、完了通知をユーザーに送信します。
スライド5: マルチモーダル統合
豊富なコンテンツ表現
- Markdown + Mermaid: フローチャート・図表自動生成
- Chart.js: インタラクティブデータ可視化
- Slidev: モダンHTML5プレゼンテーション
- TTS音声: 日本語ナレーション自動生成
AI統合
- OpenAI GPT-4: 内容生成とテキスト処理
- AWS Bedrock: マルチプロバイダーAIサポート
- RealtimeTTS: 日本語音声合成
解説文
システムは複数のコンテンツ表現方法を統合しています。MarkdownとMermaidでフローチャートや図表を自動生成し、Chart.jsでインタラクティブなデータ可視化を実現します。Slidevを使ってモダンなHTML5プレゼンテーションを作成し、TTS機能で日本語のナレーションも自動生成します。AIの統合では、OpenAI GPT-4とAWS Bedrockを使用し、RealtimeTTSで高品質な日本語音声を生成します。
スライド6: 技術的特長と創新点
Nulab AI戦略との整合性
- 既存Backlog AIアシスタントの機能拡張
- プレゼンテーション領域への応用展開
- MCP協議によるサービス統合の先進実装
セキュリティ・品質
- OAuth 2.0 + JWT認証
- Go言語による高性能バックエンド
- TypeScriptによる型安全フロントエンド
- Docker コンテナ化デプロイ
解説文
技術的な特長として、NulabのAI戦略との整合性を重視しました。既存のBacklog AIアシスタントの機能を拡張し、プレゼンテーション領域に応用展開しています。MCP協議を使った先進的なサービス統合も実装しました。セキュリティ面では、OAuth 2.0とJWTによる認証を実装し、Go言語による高性能なバックエンドとTypeScriptによる型安全なフロントエンドを構築しています。Dockerによるコンテナ化デプロイも対応しています。
スライド7: 実装成果と検証
実装完了機能
✅ OAuth 2.0 認証システム
✅ MCP Client統合(Go実装)
✅ リアルタイムWebSocket通信
✅ Vue 3 + Slidev フロントエンド
✅ 10テーマ自動生成システム
✅ TTS音声合成統合
✅ Docker コンテナ化
テスト・品質管理
- Go単体テスト(80%カバレッジ)
- TypeScript統合テスト
- APIエンドポイント検証
解説文
実装の成果をご報告します。OAuth 2.0による認証システム、Go言語でのMCP Client統合、WebSocketによるリアルタイム通信、Vue 3とSlidevによるフロントエンド、十種類のテーマによる自動生成システム、TTS音声合成の統合、そしてDockerによるコンテナ化まで、全ての主要機能を実装完了しました。品質管理では、Go言語の単体テストで80パーセントのカバレッジを達成し、TypeScriptでは統合テストを実装し、全てのAPIエンドポイントの検証も完了しています。
スライド8: 今後の展望
機能拡張計画
- 多言語対応: 英語・中国語コンテンツ生成
- カスタムテーマ: ユーザー定義スライドテーマ
- 高度分析: 予測分析・トレンド検出強化
- エクスポート機能: PDF・PowerPoint出力
スケーラビリティ
- クラウドネイティブ対応
- マルチテナント対応
- パフォーマンス最適化
解説文
今後の展望としては、まず多言語対応を計画しています。英語や中国語でのコンテンツ生成も可能にします。また、ユーザーが独自のスライドテーマを定義できるカスタムテーマ機能や、予測分析とトレンド検出を強化した高度分析機能、PDFやPowerPointへのエクスポート機能も追加予定です。スケーラビリティ面では、クラウドネイティブ対応、マルチテナント対応、そしてパフォーマンスの最適化を進めていきます。
まとめ: Nulabへの価値提供
ビジネス価値
- 効率化: プロジェクトレポート作成時間90%削減
- 品質向上: AI分析による見落とし防止
- 標準化: 統一フォーマットでの情報共有
技術価値
- 先進性: MCP協議・AI統合の実践
- 拡張性: マイクロサービス対応アーキテクチャ
- 保守性: 型安全言語による堅牢性
解説文
最後に、このシステムがNulabに提供できる価値についてまとめます。ビジネス価値としては、プロジェクトレポートの作成時間を九十パーセント削減し、AIによる分析で人間の見落としを防止し、統一されたフォーマットでの情報共有を実現します。技術価値としては、MCP協議とAI統合の実践により最先端技術を活用し、マイクロサービス対応のアーキテクチャで高い拡張性を実現し、型安全言語を使用することで堅牢で保守性の高いシステムを構築しています。この技術課題を通じて、Nulabの革新的なプロダクト開発に貢献できると確信しています。
二次面接用自己紹介(2-3分間)
本日はお忙しい中、貴重なお時間をいただき、ありがとうございます。ソフトウェアエンジニアとしてBacklog生成AI開発チームへの参加を希望している盛偉と申します。
私は中国の名門大学で電気工学とシステム分析を学んだ後、来日してから八年以上にわたり、完全日本語環境でソフトウェア開発に従事してきました。これまでの経験では、ウェブシステムから機械学習基盤、そして最近では生成AIを活用した運用監視自動化システムや社内エージェントシステムの構築まで、多岐にわたるプロジェクトを主導・開発してきました。
特に最新のプロジェクトでは、AWSの生成AIサンプルプロジェクトを活用した社内エージェントシステム「Intelligent Agent Platform」の設計・実装を担当し、MCP(Model Context Protocol)を採用したサーバーレス構成によるスケーラブルな自動化システムを構築しました。また、複数のLLMモデル(Claude 3 Haiku、Cohere Command R+など)の統合や、RAG機能を使った知識検索システムの実装も経験しています。
技術スタックとしては、バックエンドではGo、Python、Scala、フロントエンドではTypeScript、React、Vue.jsを使用し、クラウドではAWS、Azure、GCPすべてでの開発・運用経験があります。特にAI・機械学習分野では、LangChain、TensorFlow、PyTorchを使った実装経験を持ち、最近はOpenAI API、AWS Bedrock、Anthropic Claudeなどの最新LLMサービスの統合開発に深く関わっています。
今回の技術課題では、「Intelligent Presenter for HTML Slides」というプロダクトを開発し、BacklogのプロジェクトデータからAIを活用してHTMLスライドを自動生成するシステムを構築しました。MCP協議の採用、Vue 3とSlidevによるモダンなフロントエンド、そして日本語TTS機能まで統合した包括的なソリューションに仕上げました。この課題を通じて、Nulabの技術方針やプロダクト理念に深く共感し、特にBacklog AI助手の機能拡張という方向性で、既存サービスとの統合を意識した設計を心がけました。
私がNulabに魅力を感じるのは、「このチームで一緒に仕事できてよかった」という理念と、TRY FIRST、LOVE DIFFERENCES、GOAL ORIENTEDという行動方針です。これまでの経験でも、多様なメンバーとのチームワークを重視し、新しい技術への挑戦を恐れず、常に共通の目標に向かって努力することを大切にしてきました。
Nulabでは、これまでの豊富な開発経験とAI技術への深い理解を活かし、Backlog AI助手をはじめとする次世代プロダクトの開発に貢献したいと考えています。特に、ユーザーの業務効率化と新しい価値創造の両立を目指し、技術的な革新とユーザビリティの向上を同時に実現するプロダクト開発に取り組みたいと思います。
本日はどうぞよろしくお願いいたします。
面接Q&A集(日本語)
面接官からの予想質問と回答
Q1: 今回の技術課題でなぜこのアーキテクチャを選択しましたか?
A1:
三つの主要な理由があります。まず、Nulabの技術スタックとの親和性を重視し、TypeScriptとGoという御社が推奨する技術を採用しました。次に、スケーラビリティを考慮し、フロントエンドとバックエンドを分離したマイクロサービス指向のアーキテクチャを設計しました。最後に、将来的な機能拡張を見据えて、MCP協議による柔軟なサービス統合を実現しました。これにより、新しいデータソースやAIサービスを容易に追加できる拡張性の高いシステムになっています。
Q2: OAuth 2.0を選択した理由と実装で工夫した点を教えてください。
A2:
OAuth 2.0の選択は、セキュリティ要件とユーザビリティの両立を目的としています。APIキー認証と比べて、ユーザーのクレデンシャル情報を直接扱わず、スコープ制限により必要最小限の権限のみアクセスできるため、セキュリティリスクを大幅に軽減できます。実装では、CSRF攻撃を防ぐためのstate parameterによる検証、JWT tokenの適切な有効期限設定、そして認証状態の効率的なキャッシュ管理を実装しました。また、refresh tokenによる自動更新機能も組み込み、ユーザーの継続的な利用体験を確保しています。
Q3: MCP(Model Context Protocol)を採用した技術的な理由は何ですか?
A3:
MCP採用の主な理由は三つあります。第一に、標準化されたプロトコルを使用することで、異なるサービス間の統合が容易になります。第二に、JSON-RPC 2.0ベースの非同期通信により、リアルタイム処理とパフォーマンスの最適化を実現できます。第三に、Nulabが公式に提供するbacklog-mcp-serverを活用することで、開発効率と保守性を向上できます。また、将来的にClaude DesktopやCursorなどの外部AIツールとの統合も容易になるため、エコシステムの拡張性も考慮しました。
Q4: リアルタイム処理でWebSocketを選択した理由を説明してください。
A4:
WebSocketを選択した理由は、スライド生成の非同期処理における優れたユーザー体験の実現です。従来のHTTPポーリングと比べて、WebSocketは双方向通信により、サーバー側からクライアントへリアルタイムで進捗情報を配信できます。スライド生成は時間のかかる処理のため、ユーザーがリアルタイムで進行状況を確認できることが重要です。また、ネットワーク効率の観点でも、持続的な接続によりオーバーヘッドを削減し、複数のスライドデータを段階的に配信する際の性能向上を実現できます。
Q5: AIの統合において、OpenAIとAWS Bedrockの両方を実装した理由は?
A5:
複数のAIプロバイダー統合は、可用性とリスク分散を目的としています。OpenAI APIは高品質な生成能力を持ちますが、サービス停止やレート制限のリスクがあります。AWS Bedrockは複数のモデル(Claude、Command、Jurassic)へのアクセスを提供し、企業レベルのSLAと地域対応を実現します。フォールバック機能により、一つのサービスに問題が発生した場合でも継続的な利用が可能です。また、コスト最適化の観点でも、用途に応じて最適なモデルを選択することで、運用コストの削減を図ることができます。
Q6: テスト戦略について説明してください。どのようなテストを実装しましたか?
A6:
包括的なテスト戦略を実装しました。Go backend では単体テストで80%のコードカバレッジを達成し、特に認証ロジック、MCP統合、WebSocket通信の重要な部分は100%カバーしています。TypeScript frontend では、Vitestを使用したコンポーネントテストと統合テストを実装し、APIとの連携部分やスライド生成フローの検証を行っています。また、Docker環境での結合テストにより、実際のデプロイ環境での動作確認も実施しています。テストの自動化により、CI/CDパイプラインでの品質保証も実現しています。
Q7: パフォーマンス最適化でどのような工夫をしましたか?
A7:
複数の段階でパフォーマンス最適化を実施しました。バックエンドでは、Go routineによる並行処理でBacklogデータ取得とAI生成を同時実行し、処理時間を短縮しています。フロントエンドでは、Vue 3のComposition APIとreactivity systemを活用し、不要な再描画を最小限に抑制しています。また、WebSocketによるストリーミング配信で、スライドを生成次第順次配信することで、ユーザーの待機時間を短縮しています。Redisによるキャッシングで、同じプロジェクトの繰り返しアクセス時の応答速度も向上させています。
Q8: セキュリティ面でどのような対策を実装していますか?
A8:
多層的なセキュリティ対策を実装しています。認証レベルでは、OAuth 2.0によるセキュアな認証フロー、JWTトークンの適切な有効期限管理、CSRF対策のためのstateパラメーター検証を実装しています。通信レベルでは、HTTPS強制、WebSocketのSecure接続、CORS設定による適切なオリジン制限を行っています。データ保護では、機密情報の環境変数管理、APIキーの安全な保存、ログでの個人情報マスキングを実施しています。また、Docker securityの観点でも、non-rootユーザーでの実行、最小権限の原則を適用しています。
私からの質問
Q1: Backlog AI助手の今後のロードマップや重点領域について教えていただけますか?
Q2: チーム内での技術的な意思決定プロセスや、新しい技術導入時の検討フローについて伺えますか?
Q3: 現在のBacklog開発チームでの技術スタックや開発環境、特にAI関連の技術選択についてお聞かせください。
Q4: リモートワーク環境でのチームコラボレーションや知識共有の工夫について教えてください。
Q5: Nulabとして今後のAI技術トレンド(AGI、マルチモーダル、エージェント等)への取り組み方針はありますか?
Q6: エンジニアのスキルアップやキャリア成長に対する会社としてのサポート体制について教えてください。
Q7: プロダクト開発において、エンジニアチームとデザイナー、プロダクトマネージャーとの連携体制はどのようになっていますか?