Web ベースの PowerPoint プレゼンテーションを作成する | フロントエンド開発

はじめに

このプロジェクトでは、フロントエンド技術を使ってウェブベースの PowerPoint（PPT）プレゼンテーションを作成する方法を学びます。この種の PPT は、配布と視聴がより便利であり、フロントエンド技術のレイアウトとインタラクション機能を最大限に活用することができます。

👀 プレビュー

Web PPT preview demo

🎯 タスク

このプロジェクトでは、以下を学びます。

PPT ページ間を切り替えるswitchPage関数を実装する方法
キーボード押下やボタンクリックなどのユーザー入力を処理して、PPT ページをナビゲートする方法
PPT ページ間のナビゲーションを処理するgoLeft関数とgoRight関数を実装する方法
基本的な HTML 知識を教えるために、PPT スライドにコンテンツを追加する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

フロントエンド技術を使ってウェブベースの PowerPoint（PPT）プレゼンテーションを作成する
DOM を操作して PPT ページを表示および非表示にする
ユーザー入力を処理して UI を適切に更新する
HTML 関連のコンテンツを PPT 形式で構造化して提示する

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

ここで：

css/style.css はスタイルシートです。
images フォルダには、ページで使用されるアイコンが含まれています。
js/index.js はページ用の JavaScript ファイルです。
js/jquery-3.6.0.min.js は jQuery ファイルです。
index.html はメインページです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

switchPage 関数を実装する

このステップでは、PPT ページ間を切り替えるswitchPage関数をどのように実装するか学びます。

js/index.jsファイルを開きます。
switchPage関数を見つけて、以下のコードを追加します。

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

解説：

$("section").eq(activeIndex).show().siblings().hide();：この行は、現在のページ（セクション）を表示し、他のすべてのページを非表示にします。
$(".btn.left").toggleClass("disable", activeIndex === 0);：この行は、ユーザーが最初のページにいるときに「前へ」ボタンにdisableクラスを追加し、他のどのページにいるときでもクラスを削除します。
$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);：この行は、ユーザーが最後のページにいるときに「次へ」ボタンにdisableクラスを追加し、他のどのページにいるときでもクラスを削除します。
$(".page").text(${activeIndex + 1} / ${sectionsCount});：この行は、ページの左下に表示されるページ番号を更新します。

js/index.jsファイルを保存します。

これで、switchPage関数が実装され、ページ切り替え機能が期待通りに機能するはずです。

ユーザー入力を処理する

このステップでは、キーボード押下やボタンクリックなどのユーザー入力を処理して、PPT ページをナビゲートする方法を学びます。

js/index.jsファイルを開きます。
イベントリスナーのコードを見つけて、以下のコードを追加します。

// Listening for user presses of the space and arrow keys
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Listening to button click events
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

解説：

最初のイベントリスナーは、文書上のキーダウンイベントを監視します。ユーザーがスペースバーまたは右矢印キーを押すと、goRight()関数が呼び出されます。ユーザーが左矢印キーを押すと、goLeft()関数が呼び出されます。
2 番目のイベントリスナーセットは、「前へ」と「次へ」のボタンのクリックイベントを監視します。ユーザーが「前へ」ボタンをクリックすると、goLeft()関数が呼び出されます。ユーザーが「次へ」ボタンをクリックすると、goRight()関数が呼び出されます。

js/index.jsファイルを保存します。

これで、ユーザー入力の処理が実装され、ユーザーはキーボードまたはボタンを使って PPT ページをナビゲートできるようになります。

goLeft と goRight 関数を実装する

このステップでは、PPT ページ間のナビゲーションを処理する goLeft と goRight 関数をどのように実装するか学びます。

js/index.js ファイルを開きます。
goLeft と goRight 関数を見つけて、以下のコードを追加します。

// Functions for switching to the next sheet
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Functions for switching the previous sheet
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

解説：

goLeft 関数は、ユーザーが最初のページにいるかどうかを確認します。もしそうなら、何もせずに返します。それ以外の場合、activeIndex 変数を減算し、表示を更新するために switchPage 関数を呼び出します。
goRight 関数は、ユーザーが最後のページにいるかどうかを確認します。もしそうなら、何もせずに返します。それ以外の場合、activeIndex 変数を増加させ、表示を更新するために switchPage 関数を呼び出します。

js/index.js ファイルを保存します。

これで、goLeft と goRight 関数が実装され、ユーザーはキーボードまたはボタンを使って PPT ページをナビゲートできるようになります。

ページの最終的な表示は以下のようになるはずです。

Image Description

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

Web ベースの HTML プレゼンテーションビルダー