[ Vue ] vee-validateで入力内容が電話番号かどうかのバリデーションを自作する

vee-validate で入力した内容が電話番号かどうかのバリデーションを行ったのでメモしておきます。

let telephone = {
    getMessage(field,args) {
      return '電話番号は ✗✗✗-✗✗✗✗-✗✗✗✗,または10桁か11桁の数字で半角入力してください';
    },
    validate(value){
      let pattern;
      if (value.indexOf('-') ===  -1){
        // ハイフン無し
        pattern = /^\d{10}$|^\d{11}$/
      }else{
        // ハイフンあり
        pattern = /^\d{2,5}-\d{1,4}-\d{4}$/;
      }
      return pattern.test(value);
    }
  };

Validator.extend('telephone',telephone);

あとは

<input type="text" name="tel" v-validate="'telephone'" placeholder="電話番号を入力"> <div v-if="errors.has('tel:telephone')">{{errors.first('tel:telephone')}}</div>

で入力内容が電話番号かどうかのバリデーションが行えます。

[ Javascript ] 郵便番号から住所を取得する

郵便番号-住所検索APIを使うと簡単に郵便番号から住所を取得できるのでメモしておきます。

まず

  • jQuery 【https://code.jquery.com/jquery-3.1.1.min.js】
  • zipaddr.min.js 【http://api.zipaddress.net/sdk/zipaddr.min.js】
を読み込んでください。

後は以下の関数に郵便番号を引数で渡すと住所の値がdict形式で返ってきます。

  async getAddressFromPostalCode(postcode) {
      const url = 'http://api.zipaddress.net?callback=?';
      let query = {'zipcode': postcode};
      return new Promise((resolve, reject) => {
        $.getJSON(url, query, (json) => {
          if (json['code'] && json['code'] === 404){
            return reject({name: 'NotFoundPostalCode',code: 404, msg: 'does not find'});
          }
          if (json['code'] && json['code'] !== 200) {
            return reject({name: 'InvalidPostalCode',code: 500, msg: 'error'});
          } else {
            return resolve(json);
          }
        });
      });
    }

返り値,jsonの内容は以下になります。

prefaddresscitytownfullAddress
都道府県市 + 町都道府県 + 市 + 町

[ Flask ] リクエスト処理をマルチスレッドで対応する

デフォルトの app.run() ではシングルスレッドでリクエスト処理を行うため、同時に複数リクエストを投げると処理に時間がかかります。その場合は
app.run(threaded=True)

でマルチスレッドで起動させるとマルチスレッドでリクエスト処理が行われます。

[ Cognito ] 認証メールの内容をカスタマイズする

Cognito でユーザー登録やパスワードリセット等の認証が必要になるAPIを呼び出した場合、認証メールが送信されるのですが AWS のコンソールからだとメッセージ内容を柔軟にカスタマイズすることができません。 Lambda 関数を使用すると,柔軟にカスタマイズすることができます。

AWSのサービス一覧 ▶ Lambda ▶ Create Function を選択して Node.js 6.10 のメール内容をカスタマイズする Lambda 関数を作成します。

exports.handler = (event, context, callback) => {
  if (event.userPoolId) {
    if (event.triggerSource) {
      let func = getEmailMessageByEvent(event);
      event = func(event);
    }
  }
  context.done(null, event);
};

let getEmailMessageByEvent = (event) => {
  let func;
  switch (event.triggerSource) {
    case 'CustomMessage_SignUp':
      func = getSignupMessage;
      break;
    case 'CustomMessage_ForgotPassword':
      func = getForgotPasswordMessage;
      break;
    case 'CustomMessage_UpdateUserAttribute':
      func = getCustomUpdateMessage;
      break;
    case 'CustomMessage_ResendCode':
      func = getResendCodeMessage;
      break;
    default:
      func = getDefaultMessage;
      break;
  }
  return func;
};


let getCustomUpdateMessage = (event) => {
  event.response.emailSubject = '【ユーザー情報の変更】認証コード';
  const msg = `認証コードは ${event.request.codeParameter} です`;
  event.response.emailMessage = msg;
  return event;
};

let getResendCodeMessage = (event) => {
  event.response.emailSubject = '【再送】認証コード';
  const msg = `認証コードは ${event.request.codeParameter} です`;
  event.response.emailMessage = msg;
  return event;
};

let getDefaultMessage = (event) => {
  return event;
};

let getSignupMessage = (event) => {
  event.response.emailSubject = '【新規登録】認証コード';
  const msg = `認証コードは ${event.request.codeParameter} です`;
  event.response.emailMessage = msg;
  return event;
};


let getForgotPasswordMessage = (event) => {
  event.response.emailSubject = '【パスワードリセット】認証コード';
  const msg = `認証コードは ${event.request.codeParameter} です`;
  event.response.emailMessage = msg;
  return event;
};

event.triggerSource で CustomMessage の種類が取得できるのでそれに応じて メールの内容を変更しています。event.response.emailSubject がメールの件名、event.reponse.emailResponse がメールの内容です。

最後に、AWSのサービス一覧 ▶ Cognito ▶ User Pools ▶ General settings ▶Triggers ▶ Custom Message に先程作成した Lambda関数 , sendVerificationCode を選択します。
これでメール内容のカスタマイズは完了です!

[ Vue ] Vue インスタンス内であればどこでも呼べるメソッドを実装

下記は任意の Vue インスタンス, vm に対して vm.$spinner で Spinner プロパティにアクセスできる例です。

const Spinner = {
  show(){
    // show spinner
  }
  hide(){
    // hide spinner
  }
}

class CustomPlugin {
  static instantiateProperties(opts){
    return {
      $spinner: {
        get(){
          return Spinner;
        }
      }
    };
  }

  static register(){
    Object.defineProperties(Vue.prototype,this.instantiateProperties({}))
  }
}

export default CustomPlugin;