えぐろぐ

https://twitter.com/eggpogg

Nuxt x TypeScript でVuetifyのComponentのメソッドの呼び出し方

VuetifyがまだTypeScriptに対応していない状態なので、
自分でVFormのinterfaceを作成をして、$refsの値をキャストすることで使用できる。

<template>
  <div>
    <v-form ref="form"></v-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

interface VForm extends Vue {
  reset(): void
  resetValidation(): void
  validate(): boolean
}

export default Vue.extend({
  mounted() {
    const form = this.$refs.form as VForm
    form.reset()
  },
})
</script>

使用できる関数は公式サイトを見るか vuetifyjs.com

実際にコードを見るか github.com

参考 github.com

Nuxt x TypeScript の $refs で Vueコンポーネントの関数の呼び方

// components/Hoge.vue

<template>
  <div></div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'Hoge',
  methods: {
    moge(): string {
      return 'moge'
    },
  },
})
</script>
// page/index.vue

<template>
  <div>
    <Hoge ref="hoge" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Hoge from '~/components/Hoge.vue'

export default Vue.extend({
  mounted() {
    const hoge = this.$refs.hoge as InstanceType<typeof Hoge>
    console.log(hoge.moge())
  },
})
</script>

$refsの実装は以下のようになっていた

VueEelementが返ってくる。 HogeコンポーネントはVueクラスの拡張クラスなので、返り値の抽象化されたVueから辿れるようになっている 👀

readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] }

InstanceTypeの実装は以下になっている

名前と説明の通りで、Constructor関数で作成されるインスタンスの型のTypeを取得する 🚀

/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

www.typescriptlang.org

Typescriptの index signature の key には 他の type は使えないよって話

type UserId = string
type Users = {
  [key: UserId]: User
}

// error: An index signature parameter type cannot be a type alias. Consider writing '[key: string]: string' instead.

index signature の key には string or number しか使えないので、 上記のようなエラーが出ます。

同じようなことで、issueもいくつかあり討論されています。 github.com

僕が index signaturemap を混在していたのが行けないのですが、
UserIdをKeyにして、Userを取得するMapを作成したいだけなら
以下のように書けるのでこっちで使おうと思います。(てか、これがふつう...)

type UserId = string
type Users = Map<UserId, User>

言語仕様も知らないで適当に使っているのは本当に行けないんだなと反省しました...

typescript-jp.gitbook.io

LINEの料金プランを調べた思ったこと

仕事でLINEのボットを作るかもということで、料金体系を調べた。

ベース料金 + メッセージの従量課金 で利用料金がかかるだけだった。
LINEログインや友達登録は課金対象ではない LINE さん すごい! とおもったのですが、

f:id:eggpogg:20210122234949p:plain www.linebiz.com

100万人のユーザを抱えているサービスのボットが、
平均月1回ユーザにメッセージを送ると、200万ほどかかるみたいだった... 😓

f:id:eggpogg:20210122235252p:plain

だから何?って感じでもあるんだけど、クロネコヤマトさんのボットとかで
再配達の連絡したあとに、 にゃんにゃん ってだけのメッセージを送って遊んでたんだけど、
それもヤマトさんの負担になっていたと思うと気がきでならない....(ごめんよぉ。)

IntelliJの Scratch で TypeScript の実行方法

結論から書くとこのプラグインを入れるだけ plugins.jetbrains.com

すると、scratch.ts で自動でファイルの拡張子から
実行するConfigurationを組み立ててくれる 🚀 f:id:eggpogg:20210122002225p:plain


intellij typescript scratch run とかでググってみると
以下のようなフォーラムとか出てきて、
nodeConfigurationparameter--require ts-node/register
設定とか出てくるけど、お便利プラグインがあったよって話

intellij-support.jetbrains.com

macOSでfinderからビデオサイズを小さくする方法

githubで動画投稿ができるようになったけど、10mb未満しか対応していないので
動画をエンコードしてサイズを小さくする方法を調べたのでメモしておく。

外部アプリを入れるくことなく、finderから該当のファイルで右クリックをして
サービス -> 選択したビデオファイルのエンコード でできる。 f:id:eggpogg:20210120235948p:plain

動画のサイズを変更できるので、お好みに変更をする。 f:id:eggpogg:20210121000145p:plain f:id:eggpogg:20210121000159p:plain

今回は H.264 480p を選択した
もともと大きいファイルじゃないので 1mb ほどしか小さくならなかった。 f:id:eggpogg:20210121000350p:plain

アプリを入れずにサクッとできるので、とりあえず使ってみる。
理想は 10mb以下に確実にしてほしい...

Heroku x Route53 でルートドメインで遷移できるようにする

Heroku x Route53 でルートドメインに接続するときにハマったのでメモ

公式では以下のように説明されている devcenter.heroku.com

  1. ドメイン名と同じS3のバケットを作る
  2. S3を静的ホスティングの設定をして、遷移先のドメイン www.example.com にする
  3. Route53でルートドメイン example.com のAレコードをS3のエイリアスで設定をする

だけど、こちらの方法だとhttps のリクエストが出来なかったので、 Route53 と S3 の間に CloudFront を挟む必要がある。

1. ドメイン名と同じS3のバケットを作る
2. S3を静的ホスティングの設定をする
3. 遷移先をドメイン www.example.com にする
4. プロトコルを https にする

f:id:eggpogg:20210120000524p:plain

5. 設定を保存した時に吐き出される、バケットウェブサイトエンドポイントのURLを保存する

f:id:eggpogg:20210120000528p:plain

6.バージニア北部のリージョンで example.com のACMを作成をする

f:id:eggpogg:20210120000532p:plain

7. CloudFrontを作成する
  • Origin Domain Name に S3 の バケットウェブサイトエンドポイントのURL を入力をする
  • Origin ID は自動で入力される f:id:eggpogg:20210120000537p:plain

  • Alternate Domain Names に example.com を入力する

  • Custom SSL Certificate で 作成した ACM を選択する f:id:eggpogg:20210120000541p:plain

あとはデフォルトでも問題ない

8. CloudFront作成後に吐き出せれるエンドポイントのURLを保存する
9. Route53 にexample.com のA レコードで  CloudFrontのエンドポイントにエイリアスを設定する

10分程すると http://example.com , https://example.com がそれぞれ www.example.com にリダイレクトされるようになる。