1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

Buefyで3列のグリッドレイアウトを作る

 

tonyo.design

こちら勉強になった。こんな感じにするだけで3列のグリッドレイアウトになって、 溢れた分は折り返してくれる。  

ul.columns.is-multiline
  li(v-for="(todo, index) in todos" :key="index" class="column is-4")

Vue.jsのルートインスタンスとコンポーネントの違いを理解する

ルートインスタンスコンポーネントの違い

グローバルコンポーネントとローカルコンポーネントの違い

Firebase Authで匿名ログインを実装して作成したuserデータを取得する

Userドキュメント用のTypeを用意する

import firebase from "firebase"

export type User = {
  id?: string
  name: string
  createdAt: firebase.firestore.Timestamp
  updatedAt: firebase.firestore.Timestamp
}

export const initialUser: User = {
  name: "",
  createdAt: firebase.firestore.Timestamp.now(),
  updatedAt: firebase.firestore.Timestamp.now(),
}

匿名認証の機能を実装する

import 'firebase/auth'

export const signin = async () => {
  const userCredential = await firebase.auth().signInAnonymously()
  const { uid } = userCredential.user
  const userDoc = await firebase.firestore().collection("users").doc(uid).get()
  //ユーザー情報が作られていない場合は初期化
  if (!userDoc.exists) {
    await firebase.firestore().collection("users").doc(uid).set(initialUser)
    return {
      ...initialUser,
      id: uid
    } as User
  } else {
    return {
      //firestoreのドキュメントのdataはIDを返さないので展開して返している
      id: uid,
      ...userDoc.data()
    } as User
  }
}

認証画面を作成する

メインのナビゲーターの前にログインしていなかったら、 弾くための認証画面を作る。

screens/AuthScreen.tsx

import React, { useEffect } from "react"
import {
  StyleSheet,
  ActivityIndicator,
  Text,
  View
} from 'react-native'
import { signin } from "../utils/Fire"

export const AuthScreen = () => {
  useEffect(() => {
    const fetchUser = async () => {
      const user = await signin()
    }
    fetchUser()
  }, [])

  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" />
      <Text style={styles.text}>ログイン中...</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    marginTop: 16,
    fontSize: 12,
    color: "#888",
  },
})

今日の学び

  • App.tsxでログイン状態をみて制御を行う
  • 匿名認証はセッション毎にIDが発行されてusersコレクションに作成される。途中からメール認証に統合も可能、ログインしないでいいねとか出来る
  • Firebaseのドキュメント毎にtypeを定義しておくがお作法

PaypalのAPIでRailsのアプリケーションと決済を照会できるようにする

Paypalの管理画面で表示される取引IDを取得するのは以下の通り。 このIDをRailsの管理画面で見れるようにしておけば決済の成功有無を参照できるようになる。

実際に運用し始めてから照会する方法が無いと困り、見つけた方法。

カード払い用のAPIの場合

developer.paypal.comhttps://developer.paypal.com/docs/api/orders/v2/#orders_capture

https://developer.paypal.com/docs/api/orders/v2/#definition-capture

response[:purchase_units][0][:payments][:captures][0][:id]のIDを取得する

Paypal払い用のAPIの場合 (定期払いのみ)

https://developer.paypal.com/docs/api/payments/v1/#definition-sale

response[:transactions][0][:related_resources][0][:sale][:id]のIDを取得する

ベイビーステップから学ぶメンタルコントロール (自覚編)

自分はベイビーステップというテニス漫画が大好きです。

少年マガジンで2007年〜2017年まで連載されていたので、 初連載時は今から13年前なのですが、未だによく読みます。

主人公のエーちゃんがノートでひたすらデータを貯めて改善して、 一歩ずつ成長していって強敵に立ち向かっていく姿がめちゃくちゃかっこいいんですよね。

面白いだけでなく、 人生レベルで役に立つエッセンスが色々詰まってるマンガだと思ってます。

特に自分みたいに不器用なタイプには、 ピッタリのロールモデルなので参考にしてます。

今回取り上げるのはメンタルコントロールです。 ベイビーステップの18巻でメンタルの状態には4つあるという話があります。

それが「無気力」・「怒り」・「重圧」・「挑戦」の4つです。

いい順番に並べ替えると、

「挑戦」←「重圧」←「怒り」←「無気力」

になります。

怒りは無気力よりはマシですが、勝利には直接結びつきません。 重圧は勝ちたいと思う心からくるものなので良いこと。

これを上手くコントロールして挑戦のメンタルに持っていくことが、 良いパフォーマンスを出す上でとても重要。

という話をしています。

このコントロールするのはまたスキルが必要になりますが、

まずは自分の今の状態を自覚して、 どの方向に向かっていくべきかを意識できるようになるだけでも、違います。

次回以降にはそれぞれのメンタル状態からいかにシフトさせていくか、について書いていきたいと思います。

Railsのコールバックをifで絞りつつ引数を指定する方法

before_xxx, after_xxxといったActiveRecordのコールバックを特定の条件で絞り込みしたい時は、 ifオプションを使うのが楽。

after_update :update_fuga, if: -> { saved_change_to_hoge_column? }

ただこれだとコールバックに引数を指定したい時に上手くいかない。 そういった場合は以下のようにラムダ式の中で自分でrubyのコードを書いてしまえばいい。

after_update -> { update_fuga("fuga") if saved_change_to_hoge_column? }

便利。

Railsで特定のカラムが更新された時だけバリデーションを実行する

Rails5.1からは特定のカラムが更新されたかどうかは、以下のメソッドで判定するようになった。

Save前

{カラム名}_changed?の代わりにwill_save_change_to_{カラム名}?
{カラム名}_was の代わりに {カラム名}_in_database

Save後

{カラム名}_changed?の代わりにsaved_change_to_{カラム名}?
{カラム名}_was の代わりに {カラム名} _before_last_save

今回はバリデーションなので、Save前のメソッドを使う。

validate :validate_update_hoge, if: :will_save_change_to_hoge?

def validate_update_hoge
  # hoge_in_databaseを使ってバリデーション書く
end

これでカラムが更新された場合のみ、変更前と後の値を使ってバリデーションを書ける。