Canvas上で編集できちゃう！？Geminiで作ろう､スライドAI【#AIとやってみた】

せっかちさんのために結論から｡

実現できたこと（アニメーション付き）

① Geminiがスライドを自動生成

② Canvas上でプレビューを編集

③ ファイルをダウンロード→PDF保存

こんにちは｡まじんです｡

「まじん」は中学時代のあだ名でして、
ぽっちゃり体型から「魔人ブゥ」と呼ばれ始めたのがキッカケ｡
ほのかにイジメの香りはしたけれど、可愛げのあるキャラだったので許容しました。

でも、日本人って何かと略したがるんですよね。
そのうち「ブゥ」が省略され、「まじん」で定着。

いや、残すなら「ブゥ」だろ。「魔人」って。

今ではお気に入りのペンネームです｡
冗談はこのくらいにして､本題に入りましょう｡

Google Workspaceで完結させたい

私は会社でDX担当を務めております｡
Google Workspaceを使った効率化を日々研究しておりまして､
「Google Workspaceだけでやり切ること」にロマンを感じてます｡
たぶん ラフテルには "AppSheet" が置いてある。
これはそんなGoogle大好きおじさんの、こだわりと格闘の記録 ——

🙋‍♀️「Genspark使いたーい」

ついに、社内からそんな声が上がるようになりました。
生成AIに関するアンケートを取ったところ、
「スライドづくりを効率化したい」
「オシャレな資料をつくってみたい」
という声がとても多かったのです。

今をトキめく スライド生成AI｡
ツールは色々と浮かぶけど､どれも課金が必要だったり､
そもそも 社員に外部ツールを使わせたくない｡（セキュリティ的に）
なんとか Geminiだけで実現できないかと考えはじめました｡

Geminiと壁打ちの日々

フェーズ1：PDFダウンロードボタンを実装できるだと…！？

GeminiでHTML形式のスライドは作れますよね。
でも、それをそのまま「資料」として使うには、地味に手間がかかります。
Windows環境でPDFにするには以下の流れ：

めんどくさい｡これは流行らない｡
そんな中、知人から「Canvas上で動作するPDFダウンロードボタンが実装できるらしいよ」との情報が。
「Canvasってプレビュー見るとこだからww」と思いながらも､試しにGeminiにお願いしてみる｡

すると……まさかの実装されたんですよ｡ちゃんと押せるボタンが。

プレビューからダウンロードできるってどういうこと！？

しかし、ダウンロードしたPDFを見てみると——
レイアウト崩れ、白紙のページが大量出現。

ガッカリしつつも、可能性はヒシヒシと感じます。
これはもう、プロンプト勝負だ。

フェーズ2：プロンプトとの格闘

PDF出力用の“最適プロンプト”を探す旅に出ましたが、
いくらやってもガチャ要素がつきまといます。
うまくいくときもあれば、スライドが真っ白だったり、ズレていたり。

毎回このデバッグでGeminiと喧嘩するのは現実的ではありません。

そこでアプローチを変更。
PDFを直接ダウンロードするのではなく、
一旦HTMLファイルとして保存して､
ブラウザの標準機能でPDF化する方法 に切り替えました｡

結果、動作がかなり安定しました。
手間は増えたが、メモ帳作成のクダリをまるまるカットできるので、これなら実用ラインに乗る。
よし､まだ舞える｡

フェーズ3：どこまで編集機能を盛れるか

実務で使えるレベルにするには、ある程度の編集機能が欠かせません。
Gensparkなどのスライド生成AIが人気を集めたのも、
テキストを直接編集できる点が大きかったですよね。
それをGeminiでも実現できないか？ものは試し。

結果はなんと……一発で実装成功。
コレ､教えてくれなかったGoogleに責任があるのでは？

そこからは、どこまで機能を盛れるかのチャレンジ。
HTMLで実現できることは多くあるとしても､
プロンプト一発で安定して動くかどうかが重要なんですよ｡
AIはランダム性があるから。

機能をひとつ追加しては、Gemを更新して出力をチェック｡
何度も試して､安定性を確かめる。
その結果、以下の機能については、そこそこ安定して動くプロンプトを作ることができました｡

• テキスト編集機能

• 画像リサイズ機能

• テキストカラム幅変更機能

• 個別要素削除機能

• スライド全体削除機能

• クリーンなHTMLダウンロード機能

たまにエラーも吐きますが､
これなら十分業務で活躍するレベルになったかなと｡

フェーズ4：Geminiに食わせるデータがすべて

いくら良いプロンプトが書けても、
Geminiに渡す素材がイマイチだと、カッコいいスライドにはなりません。
ライバル（※一方的に）であるGensparkさんは、情報収集までやってくれるのですが、このGemにはそこまでの機能は備わっていないんですよね。

情報を詳細かつ効率的にGeminiに渡す方法はないか ──
この「最適解」がなかなか見つからず、だんだん悩むのにも飽きてきた頃。

noteで知人の記事を読んでいたとき、運命的な出会いがありました。

「Obsidian Web Clipper」まじ便利

皆さま､Obsidian（オブシディアン）って知ってますか？
「第二の脳」とも呼ばれる、知識管理ツールです。
私はあまり活用できていないので､これ以上語るつもりはないですが､
専用のChrome拡張機能が､このGemと非常に相性が良かったのです｡

この拡張機能を使うと､いま開いているWebページを
マークダウン形式でクリップボードにコピーできます｡

たったの2クリックで｡

さらにスゴイのが､そのマークダウンテキストには､
記事に挿入されている画像リンクも埋め込まれているんです…！！

ハロー、非エンジニアの同志たち｡
そうですよね､これだけじゃピンと来ないですよね｡
では､このマークダウンをGemに渡すとどうなると思います？

試しにnote公式の「Google Geminiとnoteで、投稿コンテスト「#AIとやってみた」を開催します！」の情報を渡してみると､

なんと､スライドにnoteの画像（現物）を埋め込むことができるんです！！

これ､めちゃめちゃ可能性を感じません？

もう一つ例をご紹介｡
「#AIとやってみた」で紹介されていた「Google Geminiを使って紫式部と散歩しながら語彙力バトルしてみた」も同様にスライド化してみましょう｡

もはやGensparkより使えるのでは？
これ無料ですよ？もしかしておれ､Gensparkに勝った？

※著作権とか色々注意です｡あくまで個人の利用の範囲内で｡

まとめ

長い道のりでしたが､実務で使えるレベルのスライド生成Gemが完成しました！感動！
Chrome拡張でコピーしたテキストでなくても､会議の文字起こしや､普通にプレゼン原稿を渡すだけでもスライド化してくれます｡

「#AIとやってみた」でもし入賞できたらプロンプトを無料公開したいと思います。
note運営さん！よろしくお願いいたします😌

おまけ

プロンプトをアレンジして､
こういう両開きフリップブック型のGemも作れました｡

#AIとやってみた