はじめに：ついに完結！テンプレート設定UI版

前回の記事「まじん式プロンプトv3を改造！GeminiとGoogleスライドテンプレート適用を制覇した記録」では、AIとの協調的デバッグを経て、GoogleスライドのテンプレートをGASで利用可能にする方法を確立しました。しかし、その方法ではテンプレートのスライドIDやレイアウト名をスクリプト内に直接書き込む（ハードコーディングする）必要があり、誰もが手軽に使える状態とは言えませんでした。

今回、その最後の課題を解決すべく、まじん式プロンプトv3をさらに改造し、Web UIからテンプレート情報を直接設定できる**「MCSM版」**を完成させました。

MCSM版の核心：テンプレート設定UI

今回追加したUIがこちらです。元のデザイン設定に加え、「テンプレート設定」という専用のアコーディオンパネルを設けました。

このUIにより、以下の項目をブラウザ上で手軽に設定できます。

• テンプレートのスライドURL: コピー元のベースとなるGoogleスライドのURLまたはID。
• 各種レイアウト名: テンプレート内で定義されている「タイトル」「セクション」「コンテンツ」用のレイアウトの表示名を、日本語のまま正確に指定できます。

これにより、スクリプトを一切触ることなく、誰でも自分の好きなテンプレートを使ってスライドを自動生成できるようになりました。

実装の裏側：コードの変更点

この機能を実現するために、まじんさんが提供する コード.gs と index.html に変更を加えました。

パート１： index.html の変更点

まず、UIを構築するために、index.html にテンプレート設定用のフォームを追加しました。アコーディオン形式で実装し、初期値として推奨されるレイアウト名が入力されています。

<!-- デザイン設定セクション内の任意の位置に追加 -->
<details class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6" open>
  <summary class="p-4 cursor-pointer font-bold text-lg text-gray-700 flex justify-between items-center">
    <span>テンプレート設定</span>
    <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </summary>
  <div class="p-4 border-t border-gray-200">
    <div class="mb-4">
      <label for="template-id" class="block text-sm font-medium text-gray-600 mb-1">テンプレートのスライドURL</label>
      <div class="flex">
        <input type="text" id="template-id" class="w-full p-2 border border-gray-300 rounded-l-md focus:ring-blue-500 focus:border-blue-500" placeholder="GoogleスライドのURLまたはID">
        <button id="open-template" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-r-md hover:bg-gray-300">開く</button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-4 mb-4">
      <div>
        <label for="title-layout" class="block text-sm font-medium text-gray-600 mb-1">タイトルレイアウト名</label>
        <input type="text" id="title-layout" class="w-full p-2 border border-gray-300 rounded-md" value="タイトル">
      </div>
      <div>
        <label for="section-layout" class="block text-sm font-medium text-gray-600 mb-1">セクションレイアウト名</label>
        <input type="text" id="section-layout" class="w-full p-2 border border-gray-300 rounded-md" value="セクションヘッダー">
      </div>
    </div>
    <div>
      <label for="content-layout" class="block text-sm font-medium text-gray-600 mb-1">コンテンツレイアウト名</label>
      <input type="text" id="content-layout" class="w-full p-2 border border-gray-300 rounded-md" value="タイトルのみ">
    </div>
  </div>
</details>

<!-- UIから設定値を取得するためのJavaScript部分に追加 -->
<script>
// ...
function getSettingsFromUI() {
  return {
    // ... 既存の設定 ...
    templateId: document.getElementById('template-id').value,
    titleLayout: document.getElementById('title-layout').value,
    sectionLayout: document.getElementById('section-layout').value,
    contentLayout: document.getElementById('content-layout').value
  };
}
// ...
</script>

パート2：コード.gs の doGet 関数の変更点

2. コード.gs の変更点

次に、コード.gs側でUIから送信された値を受け取り、スライド生成プロセスに反映させます。

a. doGet関数での設定値の読み込み

Webアプリ起動時に、保存されている設定にテンプレート関連の項目を追加します。

function doGet(e) {
  // ... (前略) ...
  const savedSettings = JSON.parse(userProperties.getProperty('savedSettings') || '{}');

  const defaultSettings = {
    // ... 既存のデフォルト設定 ...
    templateId: '',
    titleLayout: 'タイトル',
    sectionLayout: 'セクションヘッダー',
    contentLayout: 'タイトルのみ'
  };

  const currentSettings = { ...defaultSettings, ...savedSettings };
  // ... (後略) ...
}

パート3：コード.gs の createPresentation 関数の変更点

b. createPresentation関数での条件分岐

メインのスライド生成関数を改造し、テンプレートIDがUIから渡されてきたかどうかで処理を分岐させます。IDが空の場合は、従来通り白紙のスライドを作成することで、オリジナルの機能も損ないません。

function createPresentation(slideData, settings) {
  const finalName = createFileName(slideData, settings);
  let presentation;
  let presentationId;

  // UIからテンプレートIDが渡されているかチェック
  if (settings.templateId && settings.templateId.trim() !== '') {
    // 【テンプレート利用ルート】
    const templateFile = DriveApp.getFileById(extractIdFromUrl(settings.templateId));
    const newFile = templateFile.makeCopy(finalName);
    presentationId = newFile.getId();
    presentation = SlidesApp.openById(presentationId);
    presentation.getSlides().forEach(slide => slide.remove());
  } else {
    // 【従来ルート】白紙のスライドを作成
    presentation = SlidesApp.create(finalName);
    presentationId = presentation.getId();
  }

  // レイアウト名の取得（テンプレート利用時のみ意味を持つ）
  const contentLayoutName = settings.contentLayout || 'タイトルのみ';
  const sectionLayoutName = settings.sectionLayout || 'セクションヘッダー';
  const titleLayoutName = settings.titleLayout || 'タイトル スライド';

  // ... (後略、ループ処理の中で各レイアウト名を利用) ...
}

パート4：コード.gs のページ番号出力機能の変更点

c. ページ番号出力機能の追加

オリジナルの機能に加えて、フッターとページ番号を自動で挿入する関数を追加しました。これにより、生成されるスライドの完成度がさらに高まります。

// スライドのループ処理の中で呼び出す
// generator(slide, data, layout, pageCounter, settings); の後など
addFooterAndPageNumber(slide, settings, pageCounter, slideData.length - 2);


// --- 追加した関数 ---
function addFooterAndPageNumber(slide, settings, currentPage, totalPages) {
  if (settings.footerText) {
    const width = slide.getWidth();
    const height = slide.getHeight();
    const shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, width * 0.05, height * 0.9, width * 0.4, height * 0.05);
    const text = shape.getText();
    text.setText(settings.footerText);
    text.getTextStyle().setFontSize(10).setForegroundColor('#666666');
  }
  
  if (currentPage > 0) {
    const width = slide.getWidth();
    const height = slide.getHeight();
    const pageShape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, width * 0.9, height * 0.9, width * 0.05, height * 0.05);
    const pageText = pageShape.getText();
    pageText.setText(String(currentPage));
    pageText.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.RIGHT);
    pageText.getTextStyle().setFontSize(10).setForegroundColor('#666666');
  }
}

使い方とまとめ

使い方

1. オリジナルのまじん式プロンプトv3にある初期設定と同様にGASプロジェクトをセットアップします。
2. 各ファイルをダウンロードします。

3. コード.gs, index.html, appsscript.json を今回作成した「MCSM版」のファイルで上書きします。
4. Webアプリとしてデプロイし、UIを開きます。
5. 「テンプレート設定」パネルを開き、ご自身のテンプレートのスライドURLと、そのテンプレートで使われているレイアウト名を正確に入力します。（空欄のままにすれば、オリジナルのまじん式プロンプトのスライドが作成されます）
6. あとは通常通り、プロンプトを入力してスライドを生成するだけです。

まとめと今後の展望

これにて、当初の目的であった「まじん式プロンプトを好きなテンプレートで活用するツール」が完成しました。 前回の記事で確立したGASの核心部分と、まじん式v3の洗練されたUI・プロンプト設計を組み合わせることで、実用的なツールになったと思います。

ぜひ試していただき、気になる部分がありましたらご連絡ください！