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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

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

├── 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関数をどのように実装するか学びます。

1. js/index.jsファイルを開きます。
2. 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});：この行は、ページの左下に表示されるページ番号を更新します。

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

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

ユーザー入力を処理する

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

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

// 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()関数が呼び出されます。

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

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

goLeft と goRight 関数を実装する

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

1. js/index.js ファイルを開きます。
2. 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 関数を呼び出します。

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

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

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

まとめ

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