プログラムのお話

ロボットの為のVue.js 簡単なwebサイトを作る 写真の一覧を表示

今回はカテゴリごとに写真を表示するコンポーネントを作っていきます。このコンポーネントでレイアウトなどの部分はVuetifyを使っていきます。

メインコンテンツを作る

メインコンテンツを作っていきます。App.vueにメインコンテンツを表示する部分(v-content)を追加します。

<template>
  <v-app>
    <sideMenuItem />
    <headerItem />
    <v-content>
      <router-view>
    </v-content>
    <footerItem />
  </v-app>
</template>

次はカテゴリーごとのコンポーネントを作成します。カテゴリーは人と動物にします。viewフォルダの直下にPerson.vueとAnimal.vueを作成します。ちなみにルーティングするコンポーネントはview直下にそれ以外の共通して使うものはcomponents直下に作成します。

Person、Animal.vueはほとんど同じで変数が違うぐらいです。

簡単な流れを説明していきます。

  1. 画像をassetsにpersonフォルダを作成します。そのperson配下に画像を9枚用意します。私はhttps://pixabay.com/ja/で写真を取得しました。
  2. dataにpersonsに追加します。personsは写真の相対パス(../assets/person/person**.jpg)のリストです。
  3. Vuetifyのグリッドシステムを使い3×3のレイアウトを作成します。
  4. v-forと使ってpresonsを一個ずつ取り出し、<img>タグで一個ずつ画像を表示していきます
<template>
  <v-card>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex v-for="person in persons" :key="person" xs4 d-flex>
          <img :src="person" />
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    persons: [
      require("../assets/person/person01.jpg"),
      require("../assets/person/person02.jpg"),
      require("../assets/person/person03.jpg"),
      require("../assets/person/person04.jpg"),
      require("../assets/person/person05.jpg"),
      require("../assets/person/person06.jpg"),
      require("../assets/person/person07.jpg"),
      require("../assets/person/person08.jpg"),
      require("../assets/person/person09.jpg")
    ]
  })
};
</script>

Animal.vueも同様に作成します(persons=>animalsに変更する等必要)。

メインコンテンツのルーティング

先程作成したPerson.vueとAnimal.vueをrouter.jsに追加します。router.jsに追加する流れを以下のようになります。

  1. 追加したいコンポーネントをimportします。
  2. routesのリストに追加します
  3. 完了
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Person from "./views/Person.vue";
import Animal from "./views/Animal.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    },
    {
      path: "/person",
      name: "person",
      component: Person
    },
    {
      path: "/animal",
      name: "animal",
      component: Animal
    }
  ]
});

サイドメニューにボタンを追加する

ルーティングしたので、/personや/animalでメインコンテンツのコンポーネントを変更できます。

しかし、現状ではurlの直打ちでしか変更できないので、ボタンをクリックしたら変更できるようにサイドメニューに追加します。

簡単な流れを説明していきます。

  1. メインコンテンツ変更用(ページ遷移)のメソッド(movePage)を用意します。moveページはpersonかanimalという文字列の引数を受け取ります。受け取った文字列によって、this.$router.pushで/personか/animalのページに遷移します。
  2. メソッド呼び出し用のボタンを作成します。人物の場合はメソッド引数に@cliked=”movePage(‘person’)”となるようにします
  3. 完了
<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>
    <ul>
      <div class="text-xs-center">
        <v-btn round color="primary" dark @click="movePage('person')">人物</v-btn>
      </div>
      <div class="text-xs-center">
        <v-btn round color="primary" dark @click="movePage('animal')">動物</v-btn>
      </div>
    </ul>
  </v-navigation-drawer>
</template>

<script>
export default {
  methods: {
    movePage(link) {
      this.$router.push(link);
    }
  }
};
</script>

完成

完成しました。人物と動物で写真を切り替えられます。完成版のコードをgitにアップしておきました

https://github.com/eskmoguran/samplewebsite

webサイトの作成を終えて

ロボットの為のVue.js 簡単なwebサイトを作る編が完了しました。作って見るとほとんどコーディングはせずに、Vuetifyに頼りきりでした。

「まったく、ロボットと関係なくないか?」

「早く本題に入ってくれよ」

と思う人もいる気がしますが、これ以降もVuetifyは大活躍していくと思うのでお付き合いお願いします。

次回は実際にロボットを動かすコードを書いていきたいと思います。