【GAS】マークダウン形式のテキストを入力すると編集可能なGoogleスライドを出力するWebアプリを開発

2024年9月30日 21:01

はじめに：Google Apps Scriptで作る新時代のプレゼン作成ツール

Google Apps Script（GAS）は、広範囲な業務効率化ツールを開発する可能性を秘めていますが、その潜在能力はまだほとんど知られていません。
中小企業が9割を超える日本において、無料から月1,000円程度のランニングコストでシステムを運用できるGASという仕組みは、最適であると考えています。
さらに生成AIを組み合わせると最強です。
そのあたりも含めて今後このnoteで事例を掲載していきます。

今回、GAS応用事例として、マークダウン形式で書かれたテキストをそのままGoogleスライドに変換できるWebアプリを開発しました。生成AIは使用していない、シンプルな設計のアプリです。
100ページ以上のプレゼンテーション資料を複数作成する必要が出たため、開発しました。

これまで、マークダウン形式のテキストを使ったプレゼン作成には限界がありました。例えば、VSCodeの拡張機能であるMARPは、マークダウン形式のテキストから、スライドを画像として出力できる一方で、そのあとはパワーポイントなどで一切編集ができないという大きな制約がありました（あまり言われてませんが、重大な欠点です）。

また、生成AIを利用したGammaは、美しいデザインのスライドを作成してくれますが、最大16ページまでしか生成できず、業務用には少し物足りないのが現状です。

さらに、PowerPointやCanvaのようなデザインツールは、スライドを一から作成する必要があり、自動生成はできません。

その他、Perplexityなどを駆使し、イルシルなども含めて探してみましたが、有料、無料を問わず、しっくりくるものがない。

そこでふと閃いたのが、「GASで開発できないか？」というアイデア。

数日間の試行錯誤の結果、100ページを超える大規模なスライドをマークダウン形式のテキストを入れるだけで一気に生成でき、テンプレートに沿ってタイトルや本文を自動的に埋め込むことができるようになりました。
その結果、1ページごとにタイトルと本文を埋め込んだり、四角形のマウスで動かしたりする必要が一切なくなりました。

マークダウン形式からスライドを作れることには、さらにメリットがあります。ChatGPTのような大規模言語モデルを使ってマークダウン形式のテキストを大量に生成し、それをこのGASのWebアプリ（"Markdown to Slide"）で自動的にスライド化することもできます。

アプリの使用方法: Markdownからスライドを自動生成する手順

このWebアプリの使い方はとてもシンプルで、数ステップでスライドが完成します。以下では、その手順を詳しく説明します。

1. アプリの画面にアクセス

このWebアプリのURLにアクセスすると、次のような直感的なUIが表示されます。

マークダウン形式のテキストを入力し、「スライドを作成」ボタンを押すと、スライド作成がスタートできます。
`#`を使ってタイトルを入力し、`-`で箇条書きを追加するなど、マークダウンの基本的な書式に沿って入力すればOKです。

2. マークダウン形式の入力

次に、一般的なマークダウン入力例を紹介します。

# プレゼンテーション作成の手順

- 目的を明確にする
- 重要なポイントをリストアップする
- スライドのデザインを決める
- 本文をMarkdown形式で作成
- このアプリでスライドに変換

この例では、タイトルに続いて、箇条書きでプレゼンテーション作成の手順を簡潔に記述しています。アプリのテキストボックスにマークダウンを貼り付け、スライド化の準備を進めます。

3. 「スライドを作成」ボタンをクリック

マークダウンテキストの入力が完了したら、「スライドを作成」ボタンをクリックします。これでアプリが自動的にGoogleスライドを生成し、リンクが表示されます。以下の画面で作成されたスライドのURLが確認でき、Googleスライドで直接編集できます。

4. Googleスライドの確認

生成されたスライドは、Googleスライド形式で確認できます。100ページ以上のスライドがマークダウン形式から自動的に生成され、テンプレートに沿って配置されています。後からデザインの調整や編集も簡単に行えます。

参考：Google Apps Scriptエディタ画面

まとめ: 自動スライド作成ツールもGASなら簡単に作れる

自分が使いたいWebアプリを自分で作る時代です、といつも自分に言い聞かせていますし、私が喋るセミナーでもそう説明しています。

このWebアプリは、1週間ほど試行錯誤して開発しました。
もっとも苦労したのはこのアイデアを思いつくまでのリサーチと設計ですが、実装の際のコーディングもかなり苦戦しました。

コーディングには、v0, Gemini,o1-mini,o1-preview, Cursor, GPT-4oといろいろなコード生成AIを試しましたが、どれもバグが解消できず、うまくいかない状態でした。
Googleスライドは、GoogleDocs,GoogleSheetsなど他のGoogleWorkspaceアプリと比較しても、構造の階層が深く、複雑なため、コーディングも困難でした。
最終的な解決となったのは、以下のGPTsが出力したコードです。

ということで、大規模言語モデルをチューニングして使用するGPTsの、コーディング能力の比較優位性を実感したプロジェクトでもありました。
もちろん、現在の全てのGPTsのベースとなっているGPT-4oは、ちょくちょくバージョンアップされており、多くの分野で1位をキープし続けているのも理由にあります。

LLM（大規模言語モデル）のランキングを確認するためのリーダーボードに関する記事

【重版決定】AIアプリをプログラミング不要で開発する書籍

AIアプリを作って仕事で使いたい方と世界に公開したい方へ！