ui.html

<style>
  .section {
    margin: 16px;
    padding: 16px;
    border-radius: 8px;
    background-color: #f5f5f5;
  }

  h2, h3 {
    margin: 0 0 16px 0;
    color: #333;
  }

  h2 { font-size: 16px; }
  h3 { font-size: 14px; }

  textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }

  button {
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }

  .primary-button {
    width: 100%;
    background-color: #3F6ECC;
    color: white;
    border: none;
  }

  .primary-button:hover {
    background-color: #0055FF;
  }

  .secondary-button {
    background-color: #fff;
    border: 1px solid #3F6ECC;
    color: #3F6ECC;
  }

  .secondary-button:hover {
    background-color: #3F6ECC;
    color: white;
  }

  .language-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #extracted-texts {
    max-height: 200px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
  }

  .file-upload {
    width: 100%;
    text-align: center;
  }

  #file-name {
    word-break: break-all;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
  }
</style>

<div class="section">
  <h2>多言語テキスト置換</h2>
  <div class="file-upload">
    <input type="file" 
           id="translation-file" 
           accept=".json"
           style="display: none"
           onchange="handleFileSelect(event)">
    <button class="primary-button" onclick="document.getElementById('translation-file').click()">
      翻訳ファイルを選択
    </button>
    <div id="file-name" style="margin-top: 8px; font-size: 12px; color: #666;"></div>
    <p style="margin-top: 8px; font-size: 12px; color: #666; text-align: left;">※インポート可能なファイル形式はjsonのみです。<br>※インポートが不要な場合はスキップしてください。</p>
  </div>
</div>

<div class="section">
  <h3>言語切り替え</h3>
  <div class="language-buttons">
    <button class="secondary-button" onclick="replaceTexts('ja')">日本語</button>
    <button class="secondary-button" onclick="replaceTexts('en')">英語</button>
    <button class="secondary-button" onclick="replaceTexts('zhCN')">簡体字</button>
    <button class="secondary-button" onclick="replaceTexts('zhTW')">繁体字</button>
  </div>
</div>

<div class="section">
  <h3>テキスト抽出</h3>
  <button class="secondary-button" style="width: 100%; margin-bottom: 16px;" onclick="extractTexts()">テキスト抽出</button>
  <div id="extracted-texts"></div>
</div>

<script>
  async function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) return;

    // ファイル名を表示
    document.getElementById('file-name').textContent = `選択されたファイル: ${file.name}`;

    try {
      // ファイルを読み込む
      const text = await file.text();
      // JSONとして解析できるか確認
      JSON.parse(text); // バリデーション
      
      // Figmaプラグインにデータを送信
      parent.postMessage({ 
        pluginMessage: { 
          type: 'import-translations', 
          data: text 
        } 
      }, '*');
    } catch (error) {
      alert('無効なJSONファイルです');
    }
  }

  function replaceTexts(language) {
    parent.postMessage({ 
      pluginMessage: { 
        type: 'replace-texts', 
        language: language 
      } 
    }, '*');
  }

  function extractTexts() {
    parent.postMessage({ 
      pluginMessage: { 
        type: 'extract-texts' 
      } 
    }, '*');
  }

  // テキスト抽出結果の受信
  window.onmessage = (event) => {
    const msg = event.data.pluginMessage;
    if (msg.type === 'extracted-texts') {
      const extractedTextsDiv = document.getElementById('extracted-texts');
      extractedTextsDiv.innerHTML = msg.texts.map(text => 
        `<div>${text}</div>`
      ).join('');
    }
  };
</script>