Vue.js でウェブ会議アプリを構築する

はじめに

このプロジェクトでは、Vue.js 2.x を使ってウェブ会議アプリケーションを構築する方法を学びます。このプロジェクトは、ウェブ会議ソフトウェアにおける参加者リストのさまざまな表示効果の実装に焦点を当てています。

👀 プレビュー

Web 会議アプリのプレビュー

🎯 タスク

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

ログインと参加者ウィンドウでユーザーデータを取得して表示するための非同期データ読み取りとレンダリング機能を実装する方法。
ログインとログアウトの切り替え機能を実装し、ユーザーがアプリケーションにログインしたりログアウトしたりできるようにする方法。
参加者リストの最初のユーザーとして常にログイン中のユーザーが表示されるようにする方法。
参加者ウィンドウの表示切り替え機能を実装する方法。
参加者リストの表示効果を切り替える機能を実装する方法。これには、すべての参加者を表示する、参加者リストを非表示にする、現在ログイン中のユーザーのみを表示するなどが含まれます。

🏆 成果

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

さまざまなユーザーインターフェイス機能を備えた Vue.js 2.x を使ってウェブ会議アプリケーションを構築する。
Axios を使って非同期でデータを取得して表示する。
Vue.js アプリケーションにおける状態管理とイベントハンドリングを実装する。
動的なユーザーインターフェイスを作成し、さまざまな表示モード間で切り替える。

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

このステップでは、プロジェクト構造をセットアップする方法を学びます。以下の手順に従ってこのステップを完了します。

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

├── index.html
├── css
├── images
└── js
    ├── axios.min.js
    ├── userList.json
    └── vue.js

その中で：

index.html はメインページです。
css はスタイルフォルダです。
images は画像フォルダです。
js/axios.min.js は axios ファイルです。
js/userList.json は要求する必要のあるデータファイルです。
js/vue.js は Vue 2.x ファイルです。

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

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

画像の説明

非同期データの読み取りとレンダリングを実装する

このステップでは、非同期データ読み取りとレンダリング機能を実装する方法を学びます。

提供されたプロジェクトの index.html ファイルを開きます。
Vue インスタンスの data オプションに、後で使用するためのいくつかの属性を追加します。

new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});

new Vue() インスタンスで、mounted() ライフサイクルフックに次のコードを追加して、Axios を使って ./js/userList.json からユーザーデータを取得します。

new Vue({
  el: "#app",
  data: {
    //...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // サーバーからデータを取得するために axios を使用
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

ログインウィンドウで、取得したユーザーデータをドロップダウンに表示するようにコードを更新します。

<!-- 元のコード： -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- 更新後のコード： -->
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>

このステップを完了すると、ログインウィンドウには ./js/userList.json から非同期で取得したユーザーデータが表示されます。

効果は以下のとおりです。

ログインウィンドウにおける非同期データレンダリングの効果

ログインとログアウトの切り替えを実装する

このステップでは、ログインとログアウトの切り替え機能を実装する方法を学びます。

提供されたプロジェクトの index.html ファイルを開きます。
new Vue() インスタンスの methods に、login 関数を追加します。
login() メソッドに、ログインとログアウトウィンドウを切り替えるコードを追加します。

methods: {
  //...
  login() {
    this.isShow =!this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},

new Vue() インスタンスの computed に、テキスト表示を制御する isShow プロパティを追加します。

computed: {
  loinOrlogout() {
    return this.isShow? "Logout" : "Login";
  }
},
methods: {
  //...
},

ログインまたはログアウトウィンドウで、ログイン状態に基づいて適切なコンテンツを表示するようにコードを更新します。

<!-- 元のコード： -->
<!-- <h3>Login</h3>
<p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p>

<a class="login-btn">Login</a> -->

<!-- 更新後のコード： -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

このステップを完了すると、ログインとログアウトの切り替え機能が実装され、参加者ウィンドウはデフォルトで現在ログイン中のユーザーの情報のみを表示するようになります。

効果は以下のとおりです。

ログイン後の効果

ログアウト後の効果

参加者リストにおいて、ログイン中のユーザーが常に最初に表示されるようにする

このステップでは、参加者リストにおいて常にログインユーザーが最初に表示されるようにする方法を学びます。

提供されたプロジェクトの index.html ファイルを開きます。
参加者ウィンドウで、class="say-list" と class="user-list" のコードを更新して、デフォルトで現在ログイン中のユーザーの情報のみを表示するようにします。

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Being spoken to: {{list.find((item) => item.isHost).name}};</li>
</ul>
<ul v-if="isShow" class="user-list">
  <li v-if="isShowIndexUser">
    <img class="header" :src="user.imgPath" />
    <div class="user-name">
      <span v-if="user.isHost" class="iconfont icon-user header-icon"></span>
      <span class="iconfont icon-microphone"></span>
      {{user.name}}
    </div>
  </li>
  <li v-for="item in list" v-if="item.name!=user.name&&isShowOtherUser">
    <img class="header" :src="item.imgPath" />
    <div class="user-name">
      <span
        v-if="item.isHost&&changeBtnActive"
        class="iconfont icon-user header-icon"
      ></span>
      <span class="iconfont icon-microphone"></span>
      {{item.name}}
    </div>
  </li>
</ul>

このステップを完了すると、参加者リストにおいて常にログインユーザーが最初に表示されるようになります。

効果は以下のとおりです。

参加者リストの最初のユーザーが常にログインユーザー

参加者ウィンドウの表示切り替えを実装する

このステップでは、参加者ウィンドウの表示切り替え機能を実装する方法を学びます。

提供されたプロジェクトの index.html ファイルを開きます。
new Vue() インスタンスの methods に、showUserList 関数と showRbtn 関数を追加します。

methods: {
  showUserList() {
    this.isShowUserList =!this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn =!this.isShowRbtn;
  },
},

HTML で、参加者ウィンドウを表示または非表示にするボタンを追加するようにコードを更新します。

<!-- 元のコード： -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- 更新後のコード： -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

このステップを完了すると、ボタンをクリックすることで参加者ウィンドウを表示または非表示にできるようになります。

効果は以下のとおりです。

参加者ウィンドウの表示/非表示ボタンアイコンの位置

参加者リストの表示効果の切り替えを実装する

このステップでは、参加者リストの表示効果を切り替える機能を実装する方法を学びます。

提供されたプロジェクトの index.html ファイルを開きます。
new Vue() インスタンスの methods に、changeBtnActive 関数を追加します。
changeBtnActive() メソッドに、参加者リストの表示効果の切り替えを処理するコードを追加します。

methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},

HTML で、class="user-dialog" を探して、参加者リストの表示効果を切り替えるために使用するボタンを追加するようにコードを更新します。

<div v-if="isShowUserList&&isShow" class="user-dialog">
  <ul class="tools">
    <li class="tools-left">
      <button
        @click="changeBtnActive(false,false,1)"
        :class="{'active': buttonIndex==1? true : false}"
      >
        <span class="iconfont icon-close"></span>
      </button>
      <button
        @click="changeBtnActive(true,false,2)"
        :class="{'active': buttonIndex==2? true : false}"
      >
        <span class="iconfont icon-dialog"></span>
      </button>
      <button
        @click="changeBtnActive(true,true,3)"
        :class="{'active': buttonIndex==3? true : false}"
      >
        <span class="iconfont icon-list"></span>
      </button>
    </li>
    <li @click="showUserList" class="tools-right">
      <button class="show-list">
        <span class="iconfont icon-retract"></span>
      </button>
    </li>
  </ul>
  <!-- user list -->
  <!-- 既に挙げたコードは省略 -->
</div>

このステップを完了すると、対応するボタンをクリックすることで参加者リストの表示効果を切り替えることができるようになります。

効果は以下のとおりです。

全参加者を表示する効果