Vue.js で電子書籍リーダーを構築する

はじめに

このプロジェクトでは、Vue 2.x を使用してシンプルな電子書籍リーダーを構築する方法を学びます。この電子書籍リーダーでは、ユーザーがヘッダーツールバーの表示と非表示を切り替えたり、閲覧テーマを設定したり、テキストコンテンツのフォントサイズを調整したりできます。

👀 プレビュー

🎯 タスク

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

• ヘッダーツールバーの表示と非表示の切り替えを実装する方法
• 閲覧テーマの設定を実装する方法
• フォントサイズの設定を実装する方法

🏆 成果

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

• Vue.js を使用してインタラクティブなユーザーインターフェイスを作成する
• ユーザーの操作を処理し、それに応じて UI を更新する
• ユーザーの設定に基づいて要素のスタイルを動的に変更する
• アプリケーションがレスポンシブでアクセシブルな状態を維持する

ヘッダーツールバーの表示と非表示の切り替えを実装する

まずは、左側のファイルのディレクトリ構造を見てみましょう。以下の通りです。

├── index.html
├── css
└── js
    └── vue.js

ここで：

• index.html はメインページで、次に修正する必要があるファイルです。
• css はスタイルファイル用のフォルダです。
• js/vue.js は Vue 2.x のファイルです。

次に、すべての作業を index.html ファイルで行います。

このステップでは、ヘッダーツールバーの表示と非表示の切り替えを実装する方法を学びます。以下の手順に従ってこのステップを完了してください。

1. index.html ファイルを開き、el: "#app" の下の data で isShowTools 変数を定義して、ヘッダーツールバーの表示を制御します。デフォルト値を true に設定して、ヘッダーツールバーを表示します。

data: {
  isShowTools: true,
  //...
}

2. ヘッダーツールバーの内容（<div class="header"> 要素）を <transition> 要素でラップし、v-if ディレクティブを使用して isShowTools データプロパティにバインドします。これにより、isShowTools が true の場合にのみヘッダーツールバーが表示されるようになります。

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- header toolbar content -->
  </div>
</transition>

3. index.html ファイルで、クラスが iconfont icon-setting の <a> 要素を見つけます。この要素は、ヘッダーツールバーの表示と非表示を切り替えるために使用されます。
4. <a> 要素に @click ディレクティブを追加し、Vue インスタンス内の showTools メソッドにバインドします。このメソッドは、ヘッダーツールバーの表示を制御する isShowTools データプロパティを切り替えます。

<a @click="showTools" class="iconfont icon-setting"></a>

5. Vue インスタンス内の methods オブジェクトに showTools メソッドを追加します。このメソッドは、isShowTools データプロパティの値を切り替える必要があります。

methods: {
  showTools() {
    this.isShowTools =!this.isShowTools;
  },
}

6. ヘッダーツールバーに close アイコンを追加し、@click ディレクティブを showTools メソッドにバインドして、ユーザーがヘッダーツールバーを閉じられるようにします。

<li class="container">
  <a @click="showTools" class="iconfont icon-close"></a>
</li>

閲覧テーマの設定を実装する

このステップでは、閲覧テーマの設定を実装する方法を学びます。以下の手順に従ってこのステップを完了してください。

1. el: "#app" の下の data で isActiveColor 変数を定義し、デフォルト値を 0 に設定します。つまり、デフォルトの背景色は最初に選択された色になります。index.html ファイルで、<div class="right" id="setBG"> 要素を見つけます。ここに閲覧テーマの円形の色ブロックが表示されます。

data: {
  isActiveColor: 0,
  //...
}

2. v-for ディレクティブを使用して、テーマカラーのリストが含まれる bgList データプロパティをループ処理します。各カラーに対して、@click ディレクティブが付いた <a> 要素を作成し、changeColor メソッドを呼び出し、現在のインデックスを引数として渡します。

<div class="right" id="setBG">
  <a
    @click="changeColor(index)"
    v-for="(item,index) in bgList"
    :style="{'background-color':item}"
    :class="{'iconfont':true,'icon-selected':index==isActiveColor}"
  ></a>
</div>

3. Vue インスタンス内の methods オブジェクトに changeColor メソッドを追加します。このメソッドは、選択された色ブロックのインデックスで isActiveColor データプロパティを更新する必要があります。

methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}

4. クラスが text-content の <p> 要素で、:style ディレクティブを使用して、選択されたテーマカラーに基づいて背景色とフォントカラーを動的に設定します。

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333'
  }"
>
  <!-- content -->
</p>

フォントサイズの設定を実装する

このステップでは、フォントサイズの設定を実装する方法を学びます。以下の手順に従ってこのステップを完了してください。

1. el: "#app" の下の data で fontSize 変数を定義し、デフォルト値を 18 に設定します。index.html ファイルで、<div class="set-font"> 要素を見つけます。ここにフォントサイズのコントロールが表示されます。

data: {
  fontSize: 18,
  //...
}

2. <span class="lang">18</span> を見つけ、18 を fontSize 変数に置き換えます。

<span class="lang">{{ fontSize }}</span>

3. "A-" と "A+" のボタンに @click ディレクティブを追加し、Vue インスタンス内の updateFontSize メソッドにバインドします。フォントサイズを増やすか減らすかを示すブール値を渡します。

<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>

4. Vue インスタンス内の methods オブジェクトに updateFontSize メソッドを追加します。このメソッドは、fontSize データプロパティを更新し、フォントサイズが 12px から 48px の範囲内に収まるようにする必要があります。

methods: {
  updateFontSize(flag) {
    if (flag) {
      if (this.fontSize < 48) {
        this.fontSize += 2;
      }
    } else {
      if (this.fontSize > 12) {
        this.fontSize -= 2;
      }
    }
  }
}

5. クラスが text-content の <p> 要素で、:style ディレクティブを使用して、fontSize データプロパティに基づいてフォントサイズと行の高さを動的に設定します。

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333',
    'font-size': `${fontSize}px`,
    'line-height': `${fontSize + 10}px`
  }"
>
  <!-- content -->
</p>

これらの手順に従うことで、ヘッダーツールバーの表示と非表示の切り替え、閲覧テーマの設定、フォントサイズの設定を含む電子書籍リーダーの機能の実装が完了しました。

次に、WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。VM の上部にある "Web 8080" を開き、手動でページを更新すると、ページが表示されます。

まとめ

おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。