PROGRAMMING

SlackクローンアプリのUI作成

今日はSlackクローンアプリのUIを作成していきます!

UIやNuxt.jsについての説明は下に書いてあるので、わからない方はチェックしてみてください。

Nuxt.jsで開発環境の構築とプロジェクトの実行!

今日の内容
・vueの起動
・各フォルダの機能について
・UIの完成

それでは、作業に移っていきます!!!

vueの起動

$ cd slack-clone

$ npm install

                                                             
                                     :-:                     
                                   .==-+:                    
                                  .==. :+- .-=-              
                                 .==.   :==++-+=.            
                                :==.     -**: :+=.           
                               :+-      :*+++. .++.          
                              :+-      -*= .++: .=+.         
                             -+:      =*-   .+*: .=+:        
                            -+:     .=*-     .=*-  =+:       
                          .==:     .+*:        -*-  -+-      
                         .=+:.....:+*-.........:=*=..=*-     
                         .-=------=++============++====:     
                                         
                         Thanks for installing nuxtjs 
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                            Number of contributors: 0
                              Number of backers: 378
                              Annual budget: $69,740
                             Current balance: $38,586
                                         
             Donate: https://opencollective.com/nuxtjs/donate

こんな風になっていれば大丈夫ですね!

$ npm run dev

各フォルダの機能について

まずnuxtをやる前に、pages・layouts・components というフォルダについて勉強していこうと思います。

まずは pages について。

nuxt では pages フォルダ配下に .vue ファイルを作ることでルーティングができます!

たとえば、 pages/articles.vueというファイルを作れば、http://localhost:3000/articles という URLが生成されるということです。

index.vue の場合は特別で http://localhost:3000 が表示されます。これはrailsのroute.rbファイルみたいなものです。

ファイルを作れば自動でページができるので、すごく便利です!

次に、layoutsについて。

layouts はこのWebサイトにおける共通のテンプレートのようなもの!

たとえば、Webサイトはどのページを開いてもヘッダーやフッターが表示されているものです。共通部分を pages に毎度毎度かいておくのは面倒なので、layouts に記述します。

下記のページがわかりやすく説明されています!

最後にコンポーネントについて。

コンポーネントとは、機能ごとにHTML/JavaScript/CSSをセットしたパーツが入った箱の様なモノ。
コンポーネント指向は、複数のコンポーネントを作って、それを組み合わせることで一つのアプリケーション(ページ)を作るという考え方

とのことです。

<template>
HTML を書くところ
</template>

<script>
JavaScript を書くところ
</script>

<style>
CSSを書くところ
</style>

このような一つのファイルに HTML、JavaScript、CSSが一緒になっているものを指しています。

vueではこのコンポーネントを組み合わせてフロントエンドを作っていくとのことです。

こんな感じで各フォルダの説明は終わらせて、UIの完成させます!

UIの作成

index.vueをまずはいじっていきます。

画像に alt 属性が指定されていません。ファイル名: cd33b00256fcee84b87d1dfd4e034ba6-1200x588.png
<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        slack-clone-app
      </h1>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          rel="noopener noreferrer"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

まずはpages/index.vue が上のようになっているので、layouts/default.vueもいじってSlack風なシンプルなデザインに変更します。

<template>
 <div class="app-layout">
   <div class="sidebar">#左の茶色の部分
   </div>
   <div class="main-content">#メインのチャットの文字が入る部分
     <nuxt />
   </div>
 </div>
</template>

<style>

.sidebar {
 width: 300px;
 background: #4A4141;
 height: 100vh;
}

.main-content {
 width: 100%;
 background: #F1F1F1;
 height: 100vh;
}

</style>
スクリーンショット 2019-12-21 16.59.08

これでシンプルなデザインになりましたね!

変なエラー文が出るので、下記のコードを入力したら直りました!

上のようなエラーが出たらやってみてください。

$ node_modules/.bin/eslint --fix --ext .js,.vue --ignore-path .gitignore .

次はサイドバーに文字を入れていきます。

<template>
  <div class="app-layout">
    <div class="sidebar">
      <p>チャンネル一覧</p>
      <p>#test1</p>
      <p>#test2</p>
      <p>#test3</p>
    </div>
    <!--左の茶色の部分-->
    <div class="main-content">
      <!--メインのチャットの文字が入る部分-->
      <Nuxt />
    </div>
  </div>
</template>

<style>
.app-layout {
  display: flex;
}
.sidebar {
  width: 300px;
  background: #4a4141;
  height: 100vh;
  padding: 20px;
}
.sidebar p {
  color: #ddd;
  padding-top: 4px;
}

.main-content {
  width: 100%;
  background: #f1f1f1;
  height: 100vh;
}
</style>

メインの部分に文字を入れていきたいので、pagesの部分にコードを追加していきます。

<template>
  <div class="container">
    <div class="chats-container">
      <div class="chat-container">
        <div class="thumbnail-container">
          <img
            src="https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg"
          />
        </div>
        <div class="message-container">
          <div class="user-name">test0001</div>
          <div class="message">Hello!</div>
        </div>
      </div>

      <div class="chat-container">
        <div class="thumbnail-container">
          <img
            src="https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg"
          />
        </div>
        <div class="message-container">
          <div class="user-name">test0002</div>
          <div class="message">Hi!</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
}
</script>

<style scoped>
.chats-container {
  padding: 16px;
}

.chat-container {
  display: flex;
  padding: 8px;
}

.thumbnail-container {
  margin-right: 16px;
}

.thumbnail-container img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.user-name {
  font-weight: bold;
}
</style>

コンポーネント

このコードだとわかりにくいので、Messages.vueとMessage.vueのコンポーネントを作ってわかりやすいコードにします。

<template>
 <div class="container">
   <messages />
 </div>
</template>

<script>
import Messages from '~/components/Messages.vue'

export default {
 components: {
   Messages
 }
}
</script>

<style>
</style>
<template>
 <div class="chats-container">
   <message /> 
   <message />
 </div>
</template>

<script>
import Message from '~/components/Message'

export default {
 components: {
   Message
 }
}
</script>

<style>
.chats-container {
 padding: 16px;
}
</style>
<template>
  <div class="chat-container">
    <div class="thumbnail-container">
      <img
        src="https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg"
      />
    </div>
    <div class="message-container">
      <div class="user-name">test0001</div>
      <div class="message">Hello!</div>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
 display: flex;
 padding: 8px;
}

.thumbnail-container {
 margin-right: 16px;
}

.thumbnail-container img {
 width: 50px;
 height: 50px;
 border-radius: 10px;
}

.user-name {
 font-weight: bold;
}

こんな感じにすっきりしましたね!

index > Messages > Message 

イメージとしてはこんな感じになっています!

railsよりもずっとわかりやすい笑

vueでは、コンポーネントの機能をとにかく使って、コードをみやすいようにしていきます。

チャット機能の追加

それではチャットの入力の部分を追加していきます!

<template>
  <div class="container">
    <div class="chats-layout">
      <messages />
    </div>
    <div class="input-layout">
      <chat-form />
    </div>
  </div>
</template>

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'

export default {
  components: {
    Messages,
    ChatForm,
  },
}
</script>
<style scoped>
.container {
  height: 100%;
}
.chats-layout {
  overflow: scroll;
  height: 90%;
}
.input-layout {
  height: 10%;
}
</style>
<template>
  <div class="input-container">
    <textarea></textarea>
  </div>
</template>

<style scoped>
.input-container {
  padding: 10px;
  height: 100%;
}

textarea {
  width: 100%;
  height: 100%;
}
</style>

下の部分にテキスト入力するチャット機能がつきましたね。

これでフロントエンドの部分、UIの部分は完成です!

まとめ

とりあえずですが、UIの作成が完成いたしました!

次回は機能をつけていこうと思います。

機能をつける部分から難しくなっていくので、細かく書いていこうと思います!

最後まで読んでくださり、ありがとうございました😆

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.