爆速でスライドを作って公開してみよう

こんにちは、4号です。

アイデアが浮かんだとき、すぐに形にして誰かに見てもらいたいと思ったことはありませんか？今回は、GeminiとGoogleのFirebase Hostingを組み合わせて、ものの数分でプレゼンスライドを作成し、世界中に公開するまでの手順をご紹介します。

専門的な知識はほとんど不要です。この記事を読みながら手を動かせば、あなたも「爆速」でアイデアを形にできます。

ステップ1: GeminiでスライドのHTMLを生成する

まずは、スライドの素案となるHTMLとCSSをGeminiに作ってもらいます。今回は「Google Workspaceの概要」というテーマで、以下のようなプロンプト（指示）を投げてみました。

プロンプトの例:

HTMLでプレゼンテーション用のスライドを作成してください。

テーマ: Google Workspaceについての概要

構成:

1. タイトル: Google Workspaceとは？
2. 主なツール紹介 (Gmail, カレンダー, ドライブ)
3. コラボレーション機能 (ドキュメント, スプレッドシート, スライド)
4. コミュニケーションを円滑に (Google Meet, Chat)
5. まとめ: 働き方をスマートに

デザイン:

• 青を基調とした、清潔感のあるモダンなデザインにしてください。
• ページめくりは左右の矢印キーで操作できるように、簡単なJavaScriptも追加してください。

すると、GeminiはすぐにHTML、CSS、JavaScriptが一体となったコードを生成してくれます。

ぶっちゃけここまで細かく指示しなくともよしなに生成してくれます。

このコードをコピーして、お使いのテキストエディタ（Visual Studio Codeやメモ帳など）に貼り付け、index.htmlという名前で保存してください。これでスライド本体は完成です。信じられないほど早いですよね！

ステップ2: Firebase Hostingで世界に公開する

次に、完成したindex.htmlファイルをインターネット上に公開します。ここでは、無料で利用できるFirebase Hostingを使います。

1. Firebaseの準備

まず、Firebaseの公式サイトへ行き、Googleアカウントでログインして新しいプロジェクトを作成します。プロジェクト名は好きなもので構いません。

2. Firebase CLIのセットアップ

次に、ご自身のPCからFirebaseを操作するためのツール（Firebase CLI）をインストールします。

• Node.jsのインストール: もしPCにNode.jsが入っていない場合は、公式サイトからインストールしておきましょう。
• Firebase CLIのインストール: ターミナル（WindowsならコマンドプロンプトやPowerShell）を開き、以下のコマンドを実行します。npm install -g firebase-tools
• Firebaseへのログイン: 続けて、以下のコマンドでGoogleアカウントにログインします。ブラウザが起動するので、指示に従って認証してください。firebase login

3. デプロイ（公開）作業

いよいよ公開作業です。index.htmlを保存したフォルダ（ディレクトリ）に移動して、ターミナルで以下のコマンドを順番に実行していきます。

• 初期化:firebase init
このコマンドを打つと、いくつか質問されます。以下のように答えてください。
  1. Are you ready to proceed? -> Y
  2. Which Firebase features do you want to set up? -> Hosting: Configure files for Firebase Hosting... をスペースキーで選択し、Enterキーを押します。
  3. Please select an option: -> Use an existing project を選択し、先ほど作成したプロジェクトを選びます。
  4. What do you want to use as your public directory? -> public と入力されている状態で、そのままEnterキーを押します。（publicという名前のフォルダが作られます）
  5. Configure as a single-page app (rewrite all urls to /index.html)? -> N
  6. Set up automatic builds and deploys with GitHub? -> N
  これで準備が整いました。publicというフォルダが作成されているはずです。そのpublicフォルダの中に、先ほどGeminiに作ってもらったindex.htmlファイルを移動（または上書き）してください。
• デプロイ:最後に、このコマンドでデプロイを実行します。firebase deploy
しばらく待つと、Hosting URL: の後にURLが表示されます。これが、あなたのスライドが公開されたアドレスです！

早速アクセスして、世界中から閲覧できるようになったスライドを確認してみましょう。

まとめ

いかがでしたか？Geminiに骨子を作ってもらい、Firebaseで公開する。この流れを使えば、本当に爆速で自分のアイデアを形にし、発信することができます。

• メリット
  • とにかく速い！思いついてから公開まで数分。
  • HTMLやサーバーの知識が少なくても簡単にできる。
  • Firebaseの無料枠で十分に運用できる。

このスピード感は、個人開発やプロトタイピング、ハッカソンなど、様々な場面で強力な武器になるはずです。ぜひ、あなたのアイデアもこの方法で形にしてみてください！