Twitterクローンを作ります #42 チャット機能(4)

今回はチャットのメイン画面の見た目を作っていきます。

```vue:client/src/views/ChatView.vue
<template>
  <div class="uk-margin-right uk-flex uk-flex-column uk-height-1-1">
    <div>
      <h3 class="uk-margin-top">チャット</h3>
    </div>
    <div class="uk-text-bold">チャットのタイトル</div>
    <hr class="top-hr" />
    <div class="uk-flex-1 uk-flex uk-flex-column content">
      <div class="message mine uk-flex">
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="sender uk-text-muted uk-text-small">hoge</span>
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image">
          <img src="https://ui-avatars.com/api/?name=?" />
        </div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>

      <div class="message mine uk-flex">
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="sender uk-text-muted uk-text-small">hoge</span>
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image">
          <img src="https://ui-avatars.com/api/?name=?" />
        </div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>

      <div class="message mine uk-flex">
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="sender uk-text-muted uk-text-small">hoge</span>
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image">
          <img src="https://ui-avatars.com/api/?name=?" />
        </div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>

      <div class="message mine uk-flex">
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="sender uk-text-muted uk-text-small">hoge</span>
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image">
          <img src="https://ui-avatars.com/api/?name=?" />
        </div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="sender uk-text-muted uk-text-small">hoge</span>
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image"></div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
      <div class="message theirs uk-flex">
        <div class="image">
          <img src="https://ui-avatars.com/api/?name=?" />
        </div>
        <div class="container uk-flex uk-flex-column">
          <span class="body uk-text-small">
            hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi hi
          </span>
        </div>
      </div>
    </div>
    <hr class="bottom-hr" />
    <div class="uk-flex uk-flex-row uk-flex-middle uk-margin-small-bottom">
      <input type="text" class="uk-input uk-flex-1 uk-margin-right" />
      <span uk-icon="icon: comment; ratio: 1.5"></span>
    </div>
  </div>
</template>

<style scoped>
.content {
  overflow-y: auto;
  margin: 0;
  padding: 5px;
}

.top-hr {
  margin-bottom: 0;
}

.bottom-hr {
  margin-top: 0;
}

.message {
  align-items: flex-end;
  padding-bottom: 4px;
}

.message.mine {
  flex-direction: row-reverse;
}

.container {
  max-width: 55%;
}

.body {
  background-color: #f1f0f0;
  padding: 6px 12px;
  border-radius: 18px;
}

.mine .body {
  background-color: #1fa2f1;
  color: white;
}

.image {
  height: 24px;
  width: 24px;
  margin-right: 7px;
}

.image img {
  height: 100%;
  border-radius: 50%;
  vertical-align: bottom;
}
</style>
```

![スクリーンショット 2022-04-03 15.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2536525/1f6637c7-1cca-aa05-1bff-af062dd1aaeb.png)

UIkitに対応するような機能が無いため、CSSを直接書いている部分が他のページよりかなり多くなっています。スタイルはかなり元の講座を参考にしています。

次回はメッセージの投稿機能を作っていきます。