bitbucket Webhooksでvueプロジェクトのデプロイとビルドを自動化

Webhooksを設定

Bitbucketリポジトリの

Settings > Webhooks 

に遷移

Add webook をクリック

titleとリクエスト先URLを入力

Triggers  > Repository push にチェックが入っているのを確認。リポジトリプッシュがトリガーになって入力したURLにリクエストを送られる。

Webhooksのリクエスト先を作成

webhooksのリクエスト先のdeploy.jsを作成
 
webhooksがリクエストすると、任意のディレクトリ(vue-project)でmasterをプルしてきて、yarn buildを実行


const http = require("http");
const url = require("url");
const util = require("util");
const childProcess = require("child_process");
const exec = util.promisify(childProcess.exec); //child_processをprmoise化

const pullMaster = async () => {
  const cmd_pull = `cd ${__dirname}/vue-project && git checkout master && git pull origin master`;
  return await exec(cmd_pull, { timeout: 90000 }, (error, stdout, stderr) => {
    if (error !== null) {
      console.log("exec error: " + error);
    }
  });
};

const build = async () => {
  await exec(`cd ${__dirname}/vue-project && yarn build`);
};

const pullAndBuild = async () => {
  await pullMaster();
  await build();
};

http
  .createServer((req, res) => {
    if (
      req.method == "POST"
    ) {
      pullAndBuild();
    }
  })
  .listen(3000);

次のイベントループで関数を実行するいくつかの方法

vue.jsだと、vue.nextTickでできる


this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout


setTimeout(()=>{
  ...
},0)

Promiseでもできる


Promise.resolve().then(() => {
  ...
});

ちょっと違うけど、ReactだとsetStateで関数を実行することで、上記の代替になるかも


setState(()=>{
 ...
})

vueでモバイル判定をする

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合


  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

ライブラリを追加

yarn add vue-mq

テンプレートで出し分けしたい場合


  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>

Vue.jsでWebサイトを作るときに使ったライブラリ

Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。

vue-backtotop

名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。

vue-scrollto

ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
  offset: -80 //headerの高さの分
})
 offset以外にもスクロールの速度なども設定できます。

他画面からの移動

idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
  mounted () {
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
  }
 しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。

setTimeout()してみたら動きました。

 mounted() {
    setTimeout(this.scroll, 300);
  },
 methods: {
    scroll() {
      const hash = this.$route.hash;
      if (hash && hash.match(/^#.+$/)) {
        this.$scrollTo(hash);
      }
   }
  }

vue-carousel

カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。

vue-material-design-icons

マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。

vue-meta

title、descriptionやogなど、headに記述するメタ情報の設定に使いました。

vue-social-sharing

FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。

google-maps-api-loader

GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。

date-fns

日付の書式を整えるときに使いました。