PROGBLOG Developers Blog

空想家 Developers Blog

稼ぐ力？　とにかくスキルが欲しい。

ローカルで作成したWordpressテーマを本番環境にアップするプラグイン

WordPress

前提

  • ローカルで新規wordpressテーマを作成した
  • 依存した記事がいくつかある
  • サーバー、データベースに触れたくない

簡単に本番環境にアップできるプラグイン

上記プラグインをローカル、本番環境ともにインストールする。

ローカル環境ではFILEをエクスポートし、エクスポートしたファイルを本番環境にインポートする。

ただそれだけで、ローカル環境と本番環境が同一になる。

あくまでも

簡易的な方法なので、ミニマルテーマとかに適用する。

大規模なテーマはしっかりと紐づけてサーバーにアップする。

Nuxt.js と Firebase で作成したログインシステムにローディング画面を付け足してみる

Firebase Nuxt.js

前提

Nuxt.js と Firebase でログインシステムを構築しておく。

上記ログインシステムの構築方法は別記事にて記載している。

上記システムの仕組み

まずは大枠 index.vue でコンポーネント（ログイン前） Hello.vue を表示する。

Hello.vue に組み込まれたGoogleログイン ボタンをクリック後、Googleログイン認証画面に飛び、ログイン完了できる。

その後しばらく経つと、index.vue でコンポーネントが Goodbye.vue に変更される。

ローディングページが欲しい

作成したシステムだとログイン判断中に、Hello.vue が表示されてしまう。

つまりユーザーがログイン後、しばらくの間もログイン前の画面が表示されている。

それを何とか解消するためにローディングページを導入する。

コード

<template>
<div id="app">
  <div v-if="!loading">ログイン中...</div>
  <Hello v-if="!isLogin && loading"></Hello>
  <Goodbye v-if="isLogin && loading" :user="userDate"></Goodbye>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {
      loading: false,
      isLogin: false,
      userDate: null
    };
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
        this.isLogin = true;
        this.userDate = user;
      } else {
        this.isLogin =false;
        this.userDate = null;
      }
      this.loading=true;
    });
  },
};
</script>

<style>
</style>

考え方

<div v-if="!loading">ログイン中...</div>

まずはローディング中に表示させる要素を作成し、v-if を使用し条件で出し入れを可能にする。

続いて条件を指定する。

初期値はfalse でfirebase.auth().onAuthStateChanged の処理を実行中のみtrue（表示） に変更する。

  <Hello v-if="!isLogin && loading"></Hello>
  <Goodbye v-if="isLogin && loading" :user="userDate"></Goodbye>

同時に、上記２つのコンポ―ネントにはloading を付与することで、常にtrue（表示） する。

Nuxt.js と Firebase でログアウトの設定をする

Nuxt.js Firebase

前提

Nuxt.js と Firebase でログインシステムを構築しておく。

上記ログインシステムの構築方法は別記事にて記載している。

コード

<template>
  <div >
    <h1>GOOD BYE</h1>
    <span>{{ user.displayName }}</span>
    <button @click="logout">ログアウト</button>
  </div>
</template>

<script>
import firebase from "~/plugins/firebase.js";

export default {
  props: ["user"],
  data() {
    return {};
  },
  methods: {
    logout: ()=> {
      firebase.auth().signOut();
    }
  }
}
</script>

<style>
</style>

ログアウトボタンクリック時に、logoutメソッドを呼び出している。

ログアウトの処理 ’firebase.auth().signOut();’ は構文として覚えて問題ない。

Nuxt.js と Firebase でログインユーザーの情報を表示する

Nuxt.js Firebase

前提

Nuxt.js と Firebase でログインシステムを構築しておく。

上記ログインシステムの構築方法は別記事にて記載している。

概要

前提でやったこと

まずは大枠 index.vue にHello.vue を表示する。

Hello.vue に組み込まれたGoogleログイン ボタンをクリック後、Googleログイン認証画面に飛ぶ。

ログイン後しばらく経つと、Hello.vue が Goodbye.vue に変更される。

今回やること

この時点で、ログイン情報は大枠の index.vue が所有している。

今回はログイン後に表示されているコンポーネント Goodbye.vue にログイン情報を表示する。

つまり、 index.vue から Goodbye.vue にログイン情報の受け渡しをする。

ログインユーザーを受け渡す仕組みを作る index.vue

<template>
<div id="app">
  <Hello v-if="!isLogin"></Hello>
  <Goodbye v-if="isLogin" :user="userDate"></Goodbye>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {
      isLogin: false,
      userDate: null
    };
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
        this.isLogin = true;
        this.userDate = user;
      } else {
        this.isLogin =false;
        this.userDate = null;
      }
    });
  },
};
</script>

<style>
</style>

Firebase で取得したデータはuser に格納されるので、userDate に格納する。

その後 Goodbye.vue を呼び出す際に :user="userDate" としてデータを引き渡すことができる。

ログインユーザーを受け取る Goodbye.vue

<template>
  <div >
    <h1>GOOD BYE</h1>
    <span>{{ user.displayName }}</span>
  </div>
</template>

<script>
export default {
  props: ["user"],
  data() {
    return {};
  }
}
</script>

<style>
</style>

porps という名前で親コンポーネントから受け継ぐデータを定義する*1。

Firebase のユーザーデータにはDisplayName というキーでユーザー名が格納されているので、それを表示する。

Firebase のユーザーデータはこちらの記事を参考に。

*1:別記事参照

Nuxt.js と Firebase でGoogleログイン状況でコンポーネントを出し入れする

Firebase Nuxt.js

前提

Nuxt.js と Firebase Googleアカウントログインの仕組みを作成しておく。

仕組みの作り方は別記事にて。

コンポーネントの構成

仕組みを言語化

まずは大枠 index.vue でコンポーネント（ログイン前） Hello.vue を表示する。

Hello.vue に組み込まれたGoogleログイン ボタンをクリック後、Googleログイン認証画面に飛び、ログイン完了後する。

その後しばらく経つと、index.vue でコンポーネントが Goodbye.vue に変更される。

サンプルコード

大枠 index.vue

// index.vue

<template>
<div id="app">
  <Hello v-if="!isLogin"></Hello>
  <Goodbye v-if="isLogin"></Goodbye>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {
      isLogin: false
    };
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
        this.isLogin = true;
        var uid = user.uid;
      } else {
        this.isLogin =false;
      }
    });
  },
};
</script>

<style>
</style>

コンポーネント Hello.vue

// Hello.vue

<template>
<div>
  <h1>HELLO</h1>
  <button @click="googleLogin">Googleアカウントでログイン</button>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {};
  },
  methods: {
    googleLogin: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithRedirect(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    }
  }
}
</script>
<style>
</style>

コンポーネント Goodbye.vue

// Goodbye.vue

<template>
  <div >
    <h1>GOOD BYE</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style>
</style>

JavaScript のアロー関数で this を使いたい

JavaScript

サンプルコード

<!-- HTML -->
<button class="fnBtn">function</button>
<button class="arrowThis">() => this</button>
<button class="arrowEvent">() => event.currentTarget</button>
<!-- HTML -->

<script>

    // 従来のfunction() 用いた通常関数で this の値を取得する
    const fnBtn = document.querySelector('.fnBtn');
    fnBtn.addEventListener('click', function() {
        console.log(this);
    })

    // アロー関数で this の値を取得する
    const arrowThis = document.querySelector('.arrowThis');
    arrowThis.addEventListener('click', () => {
        console.log(this);
    })

    // アロー関数 event.currentTarget を用い 従来 this の値を取得する
    const arrowEvent = document.querySelector('.arrowEvent');
    arrowEvent.addEventListener('click', (event) => {
        console.log(event.currentTarget);
    })

</script>

アロー関数を使用すると this が使えない

上記コードを実行した結果が下記になる。

<button class="fnBtn">function</button>
Window {window: Window, self: Window, document: document, name: "", ……
<button class="arrowEvent">() => event.currentTarget</button>

ふたつめ、アロー関数で正直に this を取得しようとした時だけ、うまくクリックした要素を取得でできていないことがわかる。

解決策は event.currentTarget

解決策は３つめevent.currentTarget を使用したアロー関数。

結果を見るとクリックした要素を取得できていることがわかる。

Nuxt.js でクリック時に関数を実行する

Nuxt.js

サンプルコード

<template>
<div id="onclickTest">
  <button v-on:click="alert">クリック要素</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    alert: ()=> {
      alert("hoge");
    }
  }
};
</script>

<style>
</style>

対象の要素でv-on:click="alert" を定義し、クリック時にmethods: 内にある定義済みalert を呼びだしている。

ちなみにv-on:click="alert" は @click="alert" で代替OK。

良く使用する「クラスをトグルする」挙動

<template>
<div id="onclickTest">
  <button @click="toggleClass">クリック要素</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toggleClass: ()=> {
      const button = document.querySelector('button');
      button.classList.toggle('is-active')
    }
  }
};
</script>

<style>
</style>

これでクラスをトグルすることができる。

これでCSS と兼ね合わせてなんでもできる……、はず。

methods: {} については別記事で。