BulmaをベースにしたUIフレームワーク「Buefy」で体裁を整える。／NUXT自己流チュートリアル（６）

今回は、ひととおりの締めとして、その画面にUIフレームワーク「Buefy」を適用して、画面の体裁を整えます。

NUXT自己流チュートリアル（５）までで、Nuxt.js・Vue.jsの基本機能をとりあえず試すため、簡単な画面を作りましたが・・体裁（CSS）は無視してきましたので、ちょっとだけ「マシに見える」程度にはしたいなと思います。

f:id:arakan_no_boku:20190509225706p:plain

事前に頭にいれといた方がいいこと

自己流チュートリアルのためのインストール時に選択したUIフレームワークは「Buefy」を使います。

arakan-pgm-ai.hatenablog.com

Buefyをざっくり説明するなら、「Bulma」のCSSをベースに、各パーツなどを、「Vue.js」を適用して強化した「Vue.jsのためのUIフレームワーク」です。

ざっくり役割分担を見てみると。

レイアウトや基本的なコンテンツ（h1とかpとか）は「Bulma」のclass
Formコントロールや拡張ICONとかは「b-input」などのBuefyで拡張した機能

それぞれ利用する感じです。

もちろん、混在もできますし、Vue.jsとの親和性も問題ありません。

まさに、Buefyは「Lightweight UI components for Vue.js based on Bulma」です。

どちらもフレームワークです。

なので、使用にあたっての決め事はきちんと守って使う必要があります。

例えば。

<h1>とか<ul>みたいな一般的なタグにCSSの効果を出すためには、「content」classで囲っておかないといけない・・とかですね。

そのあたりのルールは、BulmaおよびBuefyの各ドキュメントのサンプルを見るのがはやいです。

buefy.org

bulma.io

とりあえず体裁を整える

今回は「NUXT自己流チュートリアル（５）」のソースがベースです。

なので、ソースコードとしては、共通レイアウト（default.vue）以外のソースは<templete>～</templete>の部分だけを掲載しています。

全体のレイアウト（default.vue）

まず、共通レイアウトで、ヘダーとフッターを設定します。

とりあえず、こんな感じにします。

フッターには当日の日付と曜日を表示するようにしてみました。

真ん中に「<nuxt/>」と書いている部分に、pagesフォルダで定義したイメージが挿入される感じです。

なお、イメージです。

実際に＜nuxt/>と表示するようにレイアウトをつくったりはしていません（笑）。

f:id:arakan_no_boku:20190522204641p:plain

layouts/default.vue

<template>
  <div>
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container  has-text-centered">
              <h1 class="title">
                BOKUのサンプル画面
              </h1>
              <h2 class="subtitle">
                Nuxt自己流チュートリアル
              </h2>
        </div>
      </div>
    </section>
    <section>
      <nuxt />
    </section>  
    <footer class="footer">
      <div class="content has-text-centered">
        <p>
          <strong>今日は{{today}}です。</strong>
        </p>
      </div>
    </footer> 
  </div>
</template>

<script>
import moment from 'moment'
export default {
  computed:{
    today(){
      return moment().format('YYYY/MM/DD dddd');
    }
  }
}
</script>

ほぼ、BulmaのHeroとfooterタグをほぼサンプル通りに使っているだけです。

momentを使ってシステム日を取得してるとこと位ですかね。

違うところは。

pages/index.vue

pagesフォルダにおく「.vue」ファイルはの内容が、全体レイアウトの<nuxt/>の部分に展開されるわけです。

まず、ルート画面にあたる「index.vue」のイメージはこちらです。

f:id:arakan_no_boku:20190522203125p:plain

ソースはこちらです。

<template>
  <div>
    <div class="container content has-text-centered">
       <img src="~assets/00_nuxt.JPG" alt="image01" />
    </div>
    <div class="container content has-text-centered">
        <NLink to="/about">
          <h3>{{linkname1}}</h3>
        </NLink>
    </div>
    <div class="container content has-text-centered">
        <NLink to="/cityapi">
           <h3>{{linkname2}}</h3>
        </NLink>
    </div>
    <div class="container content has-text-centered">
        <a v-bind:href="outurl">
          <h3>{{linkname3}}</h3>
        </a>
    </div>
  </div>
</template>

補足しておきます。

ごくシンプルに真ん中寄せしています。

<div class="container content has-text-centered">

ある程度、これでいけます。

ただ、画像の中央寄せなどは注意が必要です。

Bulmaのサンプルを見ると、イメージファイルは「<figure class="image is-128x128">」みたいなタグで囲ってます。

しかし、そうすると「has-text_centered」では中央寄せができなくなります。

別のやり方を画像だけ適用しないといけなくなるわけです。

でも、上記のように、シンプルに<img>タグだけでやると「has-text-centered」がきくので、今回は手抜きして、そうしてます。

あと「content」。

これが重要です。

Bulmaでは「content」で囲っていないと、h1やp,ulなどのタグのCSS定義が適用されないようになってます。

pages/about.vue

郵便番号検索の画面です。

これも単純に中央に寄せて、スタイルを適用してるだけです。

表示したイメージはこんな感じで。

f:id:arakan_no_boku:20190522215528p:plain

ソースコードはこうです。

<template>
  <div>
    <div class="container content has-text-centered">
      <NLink to="/">
        <p>ルートのページへ戻ります</p>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <img src="/post.JPG" alt="image02" />
    </div>
    <div class="columns">
      <div class="column">
      </div>
      <div class="column">
        <b-field label="郵便番号">
          <b-input v-model="zip" placeholder="郵便番号を入力する"></b-input>
        </b-field>
      </div>
      <div class="column">
      </div>
    </div>  
    <div class="container  has-text-centered">
      <b-button type="is-primary" v-on:click="getAddr({zip})">住所情報取得</b-button>
    </div>
    <hr/>
    <div class="container content has-text-centered" v-if="datas != null">
      <div v-if="datas.status == 200">
        <h4>郵便番号：{{ datas.results[0].zipcode }}</h4>
        <h4>都道府県名：{{ datas.results[0].address1 }}</h4>
        <h4>市区町村名：{{ datas.results[0].address2 }}</h4>
        <h4>町域名：{{ datas.results[0].address3 }}</h4>
      </div>
      <div v-else>
        <h4>指定の郵便番号では住所情報の取得ができませんでした。</h4>
      </div>  
    </div>
    <div class="container content has-text-centered" v-else>
      <br/>
      <p>郵便番号を入力してボタン「住所情報取得を押します。</p>
    </div>  
  </div>
</template>

ポイントだけ補足します。

入力欄とボタンについては、<b-xxxx>のBuefyのタグを使ってます。

入力欄は。

<b-field label="郵便番号">
<b-input v-model="zip" placeholder="郵便番号を入力する"></b-input>
</b-field>

のように、<b-field>で囲います。

そうするとラベルをつけるのが楽です。

ただ、気をつけないといけないのが、位置合わせの方法です。

ボタンは「<b-button>」に変更しても、has-text-centeredでセンタリングできます。

でも、<b-input>はききません・・というか、めいっぱい横に広がってしまいます。

そのため「 <div class="columns">」のなかに「<div class="column">」を３つ配置して、真ん中に「<b-input>」を配置することで、位置合わせしてます。

pages/cityapi.vue

都道府県と市区町村の選択ページです。

これも単純に中央寄せして、スタイルを適用してるだけです。

f:id:arakan_no_boku:20190522225447p:plain

ソースコードはこうです。

<template>
  <div>
    <div class="container content has-text-centered">
      <NLink to="/">
        <p>ルートのページへ戻ります</p>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <img src="/jamap.JPG" alt="image03" />
    </div>
    <div class="columns" v-if=" prefecturesJson.message == null">
      <div class="column"></div>
      <div class="column is-half">
        <b-field horizontal label="都道府県" type="is-primary">
          <b-select v-model="prefecturesSelected" @input="updateMunicipalitiesJson({prefecturesSelected})" expanded>>
            <option v-for="pOption in prefecturesJson.result" v-bind:key="pOption.id" v-bind:value="pOption.prefCode">
              {{pOption.prefName}}
            </option>
          </b-select>
        </b-field>
      </div>
      <div class="column"></div>        
    </div>
    <div class="columns" v-if="municipalitiesJson != null">
      <div class="column"></div>
      <div class="column is-half">
        <b-field horizontal label="市区町村" type="is-primary" v-if="municipalitiesJson.message == null">
          <b-select v-model="municipalitiesSelected" expanded>
            <option v-for="mOption in municipalitiesJson.result" v-bind:key="mOption.id" v-bind:value="mOption.cityCode">
              {{mOption.cityName}}
            </option>
          </b-select>
        </b-field>      
      </div>
      <div class="column"></div>
    </div>  
    <div class="columns" v-else>
      <div class="column"></div>
      <div class="column is-half">
        <b-field  horizontal label="市区町村">
          <b-select v-model="municipalitiesSelected" expanded>
            <option value=""></option>
          </b-select>
        </b-field>
      </div> 
      <div class="column"></div> 
    </div>  
  </div>
</template>

ポイントを補足します。

Selectを使ってます。

Selectも「has-text-centered」はきかないので、<column>でレイアウトしてます。

Selectは「<b-select v-model="municipalitiesSelected" expanded>」のようにBuefyの「b-select」を使ってます。

Bulmaの「<select>」から、「<b-select>」に変更した時に、気をつけないといけないことがあります。

Bulmaの「<select>」の場合は「@change」で選択されたイベントをひろって、処理をキックすることができます。

でも、「<b-select>」に変更すると「@change」では発火しません。

イベントのトリガを「@input」に変更する必要があります。

まとめです

今回は、NUXT自己流チュートリアル（５）までで作った画面に、BlumaとBeufyのスタイルを適用して、体裁を整えて一区切りにしました。

多様な機能のごく一部しか使ってないですが、それでも、ヘダーとフッターをつけて、体裁を整えるだけで、かなり見た目が変わりますね

BuefyのようなUIフレームワークは、センスの良い人が考えたベストプラクティスを簡単にとりいれることができて、センスのない自分みたいな人間にはありがたいです。

さて、今回はこんなところで・・、最後に、<script>タグも含めたソース全体を以下にまとめときます。

Layouts/default.vueは上に書いているので、それ以外を。

pages/index.vue

<template>
  <div>
    <div class="container content has-text-centered">
       <img src="~assets/00_nuxt.JPG" alt="image01" />
    </div>
    <div class="container content has-text-centered">
        <NLink to="/about">
          <h3>{{linkname1}}</h3>
        </NLink>
    </div>
    <div class="container content has-text-centered">
        <NLink to="/cityapi">
           <h3>{{linkname2}}</h3>
        </NLink>
    </div>
    <div class="container content has-text-centered">
        <a v-bind:href="outurl">
          <h3>{{linkname3}}</h3>
        </a>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  head: {
    title: 'First page'
  },
  data(){
    return{
      outurl:'https://ja.nuxtjs.org/',
      linkname3:'（外部リンク）v-bindのサンプル',
      linkname2:'（内部リンク）市区町村サンプル',
      linkname1:'（内部リンク）郵便番号サンプル'
    }
  },
  computed:{
  }
}
</script>

pages/about.vue

  
<template>
  <div>
    <div class="container content has-text-centered">
      <NLink to="/">
        <p>ルートのページへ戻ります</p>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <img src="/post.JPG" alt="image02" />
    </div>
    <div class="columns">
      <div class="column">
      </div>
      <div class="column">
        <b-field label="郵便番号">
          <b-input v-model="zip" placeholder="郵便番号を入力する"></b-input>
        </b-field>
      </div>
      <div class="column">
      </div>
    </div>  
    <div class="container  has-text-centered">
      <b-button type="is-primary" v-on:click="getAddr({zip})">住所情報取得</b-button>
    </div>
    <hr/>
    <div class="container content has-text-centered" v-if="datas != null">
      <div v-if="datas.status == 200">
        <h4>郵便番号：{{ datas.results[0].zipcode }}</h4>
        <h4>都道府県名：{{ datas.results[0].address1 }}</h4>
        <h4>市区町村名：{{ datas.results[0].address2 }}</h4>
        <h4>町域名：{{ datas.results[0].address3 }}</h4>
      </div>
      <div v-else>
        <h4>指定の郵便番号では住所情報の取得ができませんでした。</h4>
      </div>  
    </div>
    <div class="container content has-text-centered" v-else>
      <br/>
      <p>郵便番号を入力してボタン「住所情報取得を押します。</p>
    </div>  
  </div>
</template>

<script>
import axios from 'axios'
export default {
  asyncData() {
 
  },
  data(){
    return{
      zip:'',
      datas:null
    }
  },
  methods: {
    async getAddr({zip}){
        let url = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&limit=1`
        return await axios.get(url)
        .then((res) => {
        this.datas  = res.data
      })
    }
  },
  head: {
    title: 'About page'
  }
}
</script>

pages/cityapi.vue

<template>
  <div>
    <div class="container content has-text-centered">
      <NLink to="/">
        <p>ルートのページへ戻ります</p>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <img src="/jamap.JPG" alt="image03" />
    </div>
    <div class="columns" v-if=" prefecturesJson.message == null">
      <div class="column"></div>
      <div class="column is-half">
        <b-field horizontal label="都道府県" type="is-primary">
          <b-select v-model="prefecturesSelected" @input="updateMunicipalitiesJson({prefecturesSelected})" expanded>>
            <option v-for="pOption in prefecturesJson.result" v-bind:key="pOption.id" v-bind:value="pOption.prefCode">
              {{pOption.prefName}}
            </option>
          </b-select>
        </b-field>
      </div>
      <div class="column"></div>        
    </div>
    <div class="columns" v-if="municipalitiesJson != null">
      <div class="column"></div>
      <div class="column is-half">
        <b-field horizontal label="市区町村" type="is-primary" v-if="municipalitiesJson.message == null">
          <b-select v-model="municipalitiesSelected" expanded>
            <option v-for="mOption in municipalitiesJson.result" v-bind:key="mOption.id" v-bind:value="mOption.cityCode">
              {{mOption.cityName}}
            </option>
          </b-select>
        </b-field>      
      </div>
      <div class="column"></div>
    </div>  
    <div class="columns" v-else>
      <div class="column"></div>
      <div class="column is-half">
        <b-field  horizontal label="市区町村">
          <b-select v-model="municipalitiesSelected" expanded>
            <option value=""></option>
          </b-select>
        </b-field>
      </div> 
      <div class="column"></div> 
    </div>  
  </div>
</template>

<script>
export default {
  async asyncData(context) {
   return {prefecturesJson: await context.app.$getPrefecturesJson()}
  },
  data(){
    return{
      prefecturesSelected:'',
      municipalitiesSelected:'',
      municipalitiesJson:null
    }
  },
  methods:{
    async updateMunicipalitiesJson({prefecturesSelected}){
      console.log("move")
      this.municipalitiesJson = await this.$getmunicipalitiesJson(prefecturesSelected)
    }  
  },
  head: {
    title: 'CityApi page'
  }
}
</script>

ではでは