プログラムのお話

ロボットの為のVue.js 簡単なwebサイトを作る ヘッダーなどのレイアウトを作成

今回は大まかなレイアウトを作っていきます。作るのは、ヘッダー、フッター、サイドメニューをです。また、デザインはWebアプリケーションフレームワークを使用していきます。フレームワークを使うと手軽にかっこいいWebサイトが作れるのでオススメです!!

Vuetifyプラグインを追加する

Vuetifyのプラグインを使う為にプラグインを追加します。サイドメニューにプラグインの項目を選択すると画面右上にプラグインを追加するというボタンがあるのでクリックします。検索フォームにvuetifyを入力すると「vue-cli-plugin-vuetify」があるのでインストールします。

Vuetify公式ページ: https://vuetifyjs.com/ja/

Vuetifyで作るヘッダー

ヘッダーを作っていきます。ヘッダーはルーティングしないコンポーネントなのでcomponentsの直下にファイルを作ります。ほぼ、Vuetifyのサンプルを流用していきます。

名前は「headerItem.vue」とします。命名は単語一つのみは推奨されていないので2つ以上の単語を組み合わせていきます。

vuetifyのUI Componentsの一つのToolbar(v-toolbar)を使っていきます。手軽にヘッダーを作れるのでとても便利です(^^)

<v-toolvar-title>にwebサイトの名前を入れます。今回プロジェクト名と同じSampleWebSiteとします。

<template>
  <v-toolbar class="teal" clipped-left app fixed>
    <v-toolbar-title>SampleWebsite</v-toolbar-title>
  </v-toolbar>
</template>

v-toolbarのAPIについて簡単な説明をしていきます。

  1. class=”teal”はヘッダー全体の色を決めています
  2. clipped-leftはサイドメニュ(v-navigation-drawer)を切り取ります。要するにヘッダーがサイドメニューの上になるようになります。デフォルトだとサイドメニューの方が上になっています。
  3. appはコンテンツのサイズ変更を動的に調整します。これはサイドメニューの項目で説明します。
  4. fixedはposition:fixedが適用されます

Vuetifyで作るフッター

フッターを作っていきます。フッターはルーティングしないコンポーネントなのでcomponentsの直下にファイルを作ります。名前は「footerItem.vue」とします。

vuetifyのUI Componentsの一つのFooter(v-footer)を使っていきます。これもヘッダーと同じで手軽にフッターを作れるのでとても便利です(^^)

<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>

<v-footer>、<v-card>、<v-cardactions>のAPIについて簡単な説明をしていきます。

  1. darkは暗いテーマが適用される
  2. height=”auto”は高さが自動調整されます
  3. class=”flex”はdisplay:flexが適用されます。
  4. flatはv-cardの影を取り除きます
  5. tileはborder-radius(枠線の角丸)を取り除きます
  6. class=””grey darken-3″は色を変更します
  7. class=”justify-center”はコンテンツを中央に配置できます

Vuetifyで作るサイドメニュー

サイドメニューを作っていきます。サイドメニューはルーティングしないコンポーネントなのでcomponentsの直下にファイルを作ります。名前は「sideMenuItem.vue」とします。

vuetifyのUI Componentsの一つのNavigation drawer(v-navigation-drawer)を使っていきます。これもフッターやフッターと同じで手軽にフッターを作れるのでとても便利です(^^)

<template>
  <v-navigation-drawer clipped app fixed>
    <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>

<v-navigation-drawer>のAPIについて簡単な説明をしていきます。

  1. appはコンテンツのサイズ変更を動的に調整します。サイドメニューのタイトルのメニューはヘッダーの下に隠れています(v-toolbarでclipped-leftが適用されている)。appが適用されるとサイドメニューの高さが自動的に変更されて、ヘッダーを重ならないように配置されます.

各種コンポーネントを表示してみる

先程まで作ったコンポーネントは下のようになります。

ヘッダーheaderItem.vue
フッターfooterItem.vue
サイドメニューsideMenuItem.vue

各種コンポーネントをApp.vueに追記していきます。ヘッダーとフッターとサイドメニューはページごとに共通なのでApp.vueに書いておきます。

大体、以下の流れでコンポーネントを追加していきます。

  1. 対象コンポーネントをimportする
  2. <script>内のcomponents:{}の中に先程importしたコンポーネントを追加する
  3. <template>に<haederItem />のように追加する
<template>
  <v-app>
    <headerItem />
    <sideMenuItem />
    <footerItem />
  </v-app>
</template>

<script>
import headerItem from "./components/headerItem"
import footerItem from "./components/footerItem"
import sideMenuItem from "./components/sideMenuItem"

export default {
  name: "App",
  components: {
    headerItem,
    footerItem,
    sideMenuItem
  }
}
</script>

実際にブラウザで表示すると下のようになります

Vuetifyは面白い

本当にVuetifyは偉大です。

Vuetifyを使わないとなると、コードの量がかなり大きくなりCSSも書いていく必要になります。もし、Vuetifyの使い方が分からない場合は公式のマニュアルを読むのがオススメです!!

私もマニュアルにお世話になりました(全部英語だからキツいけど…)。

次回はメインコンテンツの作成に入っていきます。