作業指示：WebUI連携機能の実装¶

RedmineのWebUIからテンプレートを選択してチケットを作成する機能を実装する作業を進めてください。この作業は、テンプレート拡充作業（#290）の完了後に開始することを推奨します。

前提条件¶

• 基本的なテンプレート機能の実装（#287）が完了していること
• テンプレート拡充（#290）が完了していること
• RedmineのWebUI拡張の知識があること

作業手順¶

1. 新ブランチの作成

   cd /root/redmine-mcp
   git checkout feature/additional-templates # テンプレート拡充が完了した後のブランチ
   git pull
   git checkout -b feature/template-webui
   

2. テンプレート一覧取得APIの実装

   • /root/redmine-mcp/mcp-redmine/webui/api-endpoint.rb ファイルを作成
   • テンプレート一覧を取得するエンドポイントを実装
   • テンプレート内容を取得するエンドポイントを実装
   • ミドルウェアとしてSinatraまたはRackを使用することを検討

3. WebUI拡張用JavaScriptの作成

   • /root/redmine-mcp/mcp-redmine/webui/template-selector.js ファイルを作成
   • チケット作成画面を検出するロジックを実装
   • テンプレート選択ドロップダウンを追加する機能を実装
   • 選択したテンプレートを説明フィールドに挿入する機能を実装
   • jQuery互換性を確保（Redmineで使用されているため）

4. Redmine設定への統合

   • RedmineのカスタムJavaScriptを追加する設定を行う
   • /root/redmine-prod/config/additional_environment.rb または同等の設定ファイルを修正
   • または、プラグインとして実装することも検討

5. デプロイスクリプトの作成

   • /root/redmine-mcp/mcp-redmine/webui/deploy.sh スクリプトを作成
   • APIエンドポイントのセットアップ
   • JavaScriptファイルのデプロイ
   • 必要な設定変更の自動化

6. READMEの更新

   • /root/redmine-mcp/mcp-redmine/README.md を更新し、WebUI機能の説明と使用方法を追加

7. テスト

   • 異なるブラウザ（Chrome, Firefox, Safari）でのテスト
   • テンプレート選択と適用が正常に動作することを確認
   • エラー処理が適切に機能することを確認

8. 変更のコミット

   git add .
   git commit -m 'WebUI連携: テンプレート選択機能のRedmine UI統合 (#291)'
   git push origin feature/template-webui
   

実装のポイント¶

• 非侵襲的な実装: Redmineのコアコードを変更せず、JavaScriptによる拡張に留める
• 互換性: 既存のRedmine機能と干渉しないようにする
• ユーザー体験: 直感的で使いやすいインターフェースを設計する
• エラー処理: ネットワークエラーや例外を適切に処理する
• パフォーマンス: テンプレート読み込みが高速であることを確認する

WebUI実装の技術的アプローチ¶

APIエンドポイント実装例¶

# api-endpoint.rb
require 'sinatra'
require 'json'
require 'yaml'

set :bind, '0.0.0.0'
set :port, 3010

# テンプレートディレクトリの設定
TEMPLATE_DIR = '/path/to/templates'

# CORSヘッダー設定
before do
  content_type :json
  headers 'Access-Control-Allow-Origin' => '*'
  headers 'Access-Control-Allow-Methods' => 'GET, POST, OPTIONS'
end

# テンプレート一覧を取得
get '/templates' do
  templates = Dir.glob(File.join(TEMPLATE_DIR, '*.md')).map do |file|
    name = File.basename(file)
    description = File.open(file, 'r:utf-8') { |f| f.readline.strip rescue "説明なし" }
    { id: name, name: name, description: description.gsub(/^#\s*/, '') }
  end
  
  JSON.generate(templates)
end

# テンプレート内容を取得
get '/templates/:id' do
  template_path = File.join(TEMPLATE_DIR, params[:id])
  
  if File.exist?(template_path)
    content = File.read(template_path, encoding: 'utf-8')
    JSON.generate({ id: params[:id], content: content })
  else
    status 404
    JSON.generate({ error: "Template not found" })
  end
end

フロントエンド実装例¶

// template-selector.js
$(document).ready(function() {
  // チケット作成/編集画面かどうかを確認
  if ($('form#issue-form').length > 0) {
    // テンプレート選択UIを追加
    addTemplateSelector();
    
    // テンプレート一覧を取得
    loadTemplates();
  }
});

// テンプレート選択UIの追加
function addTemplateSelector() {
  const selectorHtml = `
    <div class="template-selector">
      <label for="template-select">テンプレートを選択:</label>
      <select id="template-select">
        <option value="">-- テンプレートを選択 --</option>
      </select>
      <button type="button" id="apply-template">適用</button>
    </div>
  `;
  
  // 説明フィールドの前に挿入
  $('#issue_description_and_toolbar').before(selectorHtml);
  
  // 適用ボタンのイベントハンドラを設定
  $('#apply-template').click(function() {
    const templateId = $('#template-select').val();
    if (templateId) {
      applyTemplate(templateId);
    }
  });
}

// テンプレート一覧の取得
function loadTemplates() {
  $.getJSON('http://localhost:3010/templates', function(data) {
    const select = $('#template-select');
    
    // テンプレート一覧をドロップダウンに追加
    data.forEach(function(template) {
      select.append(`<option value="${template.id}">${template.name}: ${template.description}</option>`);
    });
  }).fail(function(error) {
    console.error('テンプレート一覧の取得に失敗しました', error);
  });
}

// テンプレートの適用
function applyTemplate(templateId) {
  $.getJSON(`http://localhost:3010/templates/${templateId}`, function(data) {
    // 説明フィールドにテンプレート内容を設定
    $('#issue_description').val(data.content);
  }).fail(function(error) {
    console.error('テンプレートの取得に失敗しました', error);
  });
}

完了条件¶

• WebUIからテンプレートを選択・適用できる
• すべてのテンプレートが正しく表示・適用される
• 複数のブラウザで正常に動作する
• エラー処理が適切に実装されている
• READMEに使用方法が記載されている
• 変更がGitにコミットされている

注意事項¶

• Redmineの既存機能と干渉しないように注意する
• セキュリティを考慮してAPIアクセス制限を実装する
• ブラウザの互換性を確保する
• ユーザー体験を考慮した設計にする

完了したら、このチケットにコメントを追加し、スクリーンショットなどを含めて報告してください。