Twitterクローンを作ります #10 画面の細かい修正

前回はクラウド上にデプロイしてみました。
今回は画面のこまかな修正を行っていきましょう。

# 余計なファイルの整理

今更ですが、不要なファイルを削除したり整理したりしましょう。
下記ファイルを削除します。

- client/src/views/AboutView.vue
- client/src/components/HelloWorld.vue
- client/src/assets/

HomeView.vueは下記のように修正します。

```vue:client/src/views/HomeView.vue
<template>
  <div>
    This is Home
  </div>
</template>
```

ルーターも修正します。

```javascript:client/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/register',
    name: 'register',
    meta: { layout: 'simple-layout' },
    component: () => import('../views/RegisterView.vue')
  },
  {
    path: '/login',
    name: 'login',
    meta: { layout: 'simple-layout' },
    component: () => import('../views/LoginView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
```

あとはfavicon.icoがVueのデフォルトのままなので好みのものに変えて、index.htmlも少し修正しておきます。

```html:client/public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
```

あと、package.json の "name" も変更しておきましょう

```client/package.json
{
  "name": "toitta",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.26.0",
    "core-js": "^3.8.3",
    "uikit": "^3.11.1",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  }
}
```

![スクリーンショット 2022-03-13 22.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2536525/e641f081-5128-45b8-7858-3de432915464.png)

余計なファイルがなくなり、タイトルやfaviconも適切なものになりました。



# App.vueのスタイルを削除

App.vueのスタイルが残ったままだったのでまずはこれを削除します

```vue:client/src/App.vue
<template>
  <div>
    <component v-bind:is="layout()"></component>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';
import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
import SimpleLayout from '@/components/layouts/SimpleLayout.vue';

export default {
  components: {
    DefaultLayout,
    SimpleLayout
  },
  setup() {
    const route = useRoute();
    const layout = () => {
      return route.meta.layout ? route.meta.layout : 'default-layout';
    };
    return {
      layout
    }
  },
}
</script>
```

ただ、これを削除するとログイン画面やユーザー登録画面が少しおかしくなるのでこちらも修正していきます。

```vue:client/src/views/LoginView.vue
<template>
    <div class="uk-container uk-width-1-2 uk-text-center uk-padding">
        <h1>Toitta Login</h1>
...
```

```vue:client/src/views/RegisterView.vue
<template>
    <div class="uk-container uk-text-center uk-padding">
        <h1>ユーザー登録</h1>
...
```

どちらも最上位のdivのクラスを少し修正しました。


# ホーム画面の準備

次回以降はホーム画面の開発を進めていこうと思っているので、ついでなので少し準備しておきましょう。

まずはHomeViewを修正します。

```vue:cleint/src/views/HomeView.vue
<template>
  <div>
    <h3 class="uk-margin-top">Home</h3>
    <post-edit></post-edit>
    <hr class="uk-margin-right">
  </div>
</template>

<script>
import PostEdit from '@/components/PostEdit.vue';

export default {
  components: {
    PostEdit
  },
  setup() {
    
  },
}
</script>
```

つぶやき編集部分にあたるPostEditは以下のようにしました。

```vue:client/src/components/PostEdit.vue
<template>
    <div>
        <div class="uk-flex uk-flex-top">
            <img src="https://ui-avatars.com/api/?name=あぽろ" class="uk-border-circle avatar">
            <textarea placeholder="いまどうしてる？" class="uk-textarea uk-margin-left textarea"></textarea>
        </div>
        <div class="uk-flex uk-flex-right">
            <button class="uk-button uk-button-primary uk-margin-right">ツイートする</button>
        </div>
    </div>
</template>

<style scoped>
.textarea {
    resize: none;
    border: 0;
    height: 100px;
    margin-top: 5px;
}

.avatar {
    width: 50px;
    height: 50px;
}
</style>
```

ユーザーの画像が登録されていない場合に代理で利用する画像ですが、ちょっと検索してみつけた https://ui-avatars.com/ をとりあえず使ってみましたが、急にサービス停止されちゃったりすると困るのであとで別の方法を考えましょう。

画面はこんな感じになりました。

![スクリーンショット 2022-03-13 23.05.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2536525/fd31fe49-5c05-7fa3-c331-16be70e5fb01.png)

ちょっといじりはしましたが、ほぼUIKitのみなのにそこそこな感じになってるように思います。

次回はつぶやきを投稿できるようにしていきましょう。