プログラムのお話

Vue.jsとflaskで作る家計簿管理webアプリ ヘッダーなどのレイアウト作成

今回は実際に家計簿管理アプリWebアプリのレイアウトを作成していきます。目標としてヘッダー、フッター、サイドメニューを作っていきます。

Githubにレポジトリを作成する

プロジェクトを作成する前にGithubにレポジトリを作成します。レポジトリの名前は「hamburger-money」にします。名前の由来は昔コロコロコミックで連載していた金貨を集める漫画をモデルにしました。次にgit cloneでレポジトリを開発環境にクローンします。

$ git clone https://github.com/eskmoguran/hamburger-money.git

プロジェクトを作成する

Vue CLIでプロジェクトを作成します。作成のやり方は記事で書いた事があるので以下の記事を参考にして作ってみてください。プロジェクトは先程のクローンしたレポジトリの直下に作成します。プロジェクト名はgithubのレポジトリに-projectを語尾につけた「hamburger-money-project」にしました。ちなみに以下の記事ではVuexをインストールしていましたが、今回は使わないのでインストールしていません。
一応、実際に作成されたレポジトリ以下のフォルダは下の図を載せておきます。

不要なファイルとコードの削除

作成したばかりのプロジェクトには不要なファイルとコードがあります。以下が削除するコードとファイルの一覧です。一部コードのみ削除は青いマーカー、ファイル削除は赤いマーカーです。多分、Vue CLIでプロジェクトを作成した後に必ずやる作業なので、覚えておいて方がいいと思います。

  • hamburger-money-project/src/App.vue
  • hamburger-money-project/src/router.js
  • hamburger-money-project/src/views/Home.vue
  • hamburger-money-project/src/components/HelloWorld.vue
  • hamburger-money-project/src/views/About.vue

削除箇所をしっかり説明すると長くなるので、githubのcommit履歴を見ていただければと思います。削除前と削除後が一度に見れるので分かりやすいです。

https://github.com/eskmoguran/hamburger-money/commit/14c1300f69abd124572aae2191eb2350ce06fd59

ヘッダーとフッターとサイドメニューの作成

ヘッダーとフッターとサイドメニューは前に書いた以下の記事と殆ど同じです。今回は違う部分を説明していきます。src/components/organisms/の配下に作成していきます。


Header.vue


まずはヘッダーを作成していきます。Vuetifyを使って作るので、とても簡単に出来ます。以下がそのコードです。タイトルは「ハンバーガーMONEY」にします。タイトルの色の文字を変えたい場合はstyle=”color:white”の部分を変えてください。ヘッダー全体の色を変えたい場合はclass=”teal”を変えれば色が変わります。class=”blue”にすれば青になります。簡素ですが、後で色々ボタンなどを追加するかもしれないです。

色一覧: https://vuetifyjs.com/ja/framework/colors

<template>
  <v-toolbar class="teal" clipped-left app fixed>
    <v-toolbar-title style="color:white">
      ハンバーガーMONEY
    </v-toolbar-title>
  </v-toolbar>
</template>


Footer.vue


次にフッターを作っていきます。フッターもVuetifyを使っていきます。フッターには「Vue.jsで作る家計簿管理Webアプリ」とwebアプリの簡単な紹介文を書いておきます。また、一番下の黒い部分には一応、コピーライトを書いておきます。色を変えたい場合はヘッターと同じでclass=””の部分で色を指定できます。

<template>
  <v-footer dark height="auto" fixed>
    <v-card class="flex" flat tile>
      <v-card-title class="teal">
        <strong class="subheading">
          Vue.jsで作る家計簿管理Webアプリ
        </strong>
      </v-card-title>
      <v-card-actions class="grey darken-3 justify-center">
        ©2019 — <strong>skmoguran All Righta Reserved</strong>
      </v-card-actions>
    </v-card>
  </v-footer>
</template>


SideMenu.vue


最後にサイドメニューを作成します。サイドメニューもVuetifyで作成します。現在はタイトルで「メニュー」と表示していますが、後で各ページへ飛べるボタンを作成していこうと思います。

ちなみにこの<v-navigation-drawer><v-navigation-drawer />は画面をある程度縮めると自動で左側に隠れます。再度表示するにはヘッダーなどにボタンを実装する必要があります。Googleで下のようなボタンを見たことがある人はいると思います。これがサイドメニューを表示を制御するボタンです。

<template>
  <v-navigation-drawer clipped fixed app>
    <v-toolbar flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">
            メニュー
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-divider></v-divider>
  </v-navigation-drawer>
</template>

<script>
export default {
};
</script>

ヘッダーとフッターとサイドメニューを並べる

以下のコードのように先程作成したコンポーネントをインポートして並べるだけです。細かいレイアウトの微調整はVuetify側のコンポーネントがやってくれます。chromeでF12で開発オプションで確認すると、cssで細かい設定がされていると思います。時間があれば確認してみると面白いです。

    
<template>
  <v-app>
    <SideMenu />
    <Header />
    <v-content><router-view /></v-content>
    <Footer />
  </v-app>
</template>

<script>
import Header from "./components/organisms/Header"
import Footer from "./components/organisms/Footer"
import SideMenu from "./components/organisms/SideMenu"
export default {
  name: "App",
  components: {
    Header,
    Footer,
    SideMenu
  }
};
</script>

Vuetifyをフル活用

Vuetifyに頼り切りです 。

下手にCSSを書かなくていいので、少ないコードでしっかりとしたWebサイトが作れます。凝って作りたい方はBootstrap Vueなどを使ってみたり、自分でCSSを書く方がいいと思います。

次回は実際に収支を表示するコンポーネントを作成していきます。