履いた靴の進捗状況を表示するようにした

靴をできるだけ均一に履くようにしていると、どれが今月履いたのかわからなくなるので、ダッシュボードに進捗を表示するように変えてみた。

進捗状況

ダッシュボードには履いてない靴を4件リストに出していたけど、後どのくらい残っているのかはわからなかったので結構不便だった。

なのでリファクタリングのついでに新機能として追加してみだけど、結構便利。

大体毎月2回はループするので、今何周目とかも追加したい。
もしは進捗バーの色変えるとか。

loadable-componentsのheroku対応

loadable-componentsを使用していて、Server side renderingをheroku環境で行う場合ビルドされるloadable-stats.jsonのパスが実行環境と違うため、chunkファイルが読み込めないという問題があります。

これはビルド時は​​­/tmp/build_[id]/​のようなテンポラリディレクトリに成果物が出力されるが、実際のファイルは/appの下に配置されるため、パスが参照できなくなる為です。

この為ローカルでは正常に動いても、heroku環境ではファイルの読み込みエラーが発生します。

import * as path from 'path';
import { ChunkExtractor } from '@loadable/server';

export const statsFile = path.resolve('./dist/loadable-stats.json');

export const nodeExtractor = new ChunkExtractor({
  statsFile
});

これを回避するには、ChunkExtractorのオプションにpublicPath、outputPathを明示的に指定します。
通常この設定はloadable-stats.jsonの指定を参照するのですが、オプションを指定してあげるとそちらを使用します。

import * as path from 'path';
import { ChunkExtractor } from '@loadable/server';

export const statsFile = path.resolve('./dist/loadable-stats.json');

export const nodeExtractor = new ChunkExtractor({
  statsFile,
  publicPath: path.resolve('./dist/'), // statsファイルのpublicPathの代わり
  outputPath: path.resolve('./dist/'), // statsファイルのoutputPathの代わり
});

こうすることで、サーバー側でchunkファイルを読み込めるようになるので、正常にレスポンスを返せるようになります。

アンクルバンド買ってみた

アンクルバンド

春夏に向けてワイドパンツを買ってみたのだけど、裾が踵の方が長くなるようなデザインでした。
パンツを履くと引き摺りそうになるので、対策としてアンクルバンドを買って見ることにしました。

アンクルバンドは自転車とかに乗るときに裾が邪魔にならないようにするバンドです。

買ったのはHUKUROのアンクルバンド、色は茶色にしてみました。
ゴムで伸縮するのでフィット間は良いです。

試しに6inchブーツで歩いてみましたが特に違和感なく歩けました。

他の色のものも買ってもいいかもしれない。

自分で運用しているアプリケーションのログイン後のダッシュボードを改善した

自分で履いた靴の記録するアプリケーションを運用していて、ずっとダッシュボードに写真の投稿ボタンしか置いていませんでした。

理由は特に表示させたい情報がなかったためです。
ログインせずとも公開している情報があるので今までは特に困ってなかったのです。

ダッシュボード

しかし、特に偏りがでない様に均等に靴を履くというライフスタイルをとっていて、どれがあまり履けていない 靴なのかを把握するのが大変という問題がありました。

回数は公開しているので見ていけばわかるんですが、靴が30足以上あるのでページを跨がないとわからなかったりして結構不便だったのです。

なのでダッシュボードに表示する様にして、レコメンドのような形が取れないか試してみました。
表示する内容は一月単位で履いている回数が低いものを4件だけ表示する様にしました。

優先順位は今月全く履いていない靴、現状履いている回数が少ない靴の順番で表示しています。

1月から１ヶ月位運用していて全く履かない靴はなくなり、最低一月に一回は履くようになりました。
また、ただ表示しているだけなので強制力もなく6割位表示されている4件以外の靴を履いても達成できました。

「今日はこれを履きたい」と「明日は表示されている4件のうちどれか履いてもいいかな」という気持ちのバランスが丁度いいのかもしれません。

Victoryのアップグレード

Victory

個人で運用しているアプリケーションでグラフライブラリのVictoryを使っていてバージョンが古くなっていたので32.3.x から35.4.xにあげてみました。
大きく仕様に変化はなかったようで、型エラーを直していくだけで対応が完了しました。

VictoryLine

線のスタイルやラベルのコールバックの仕様が変わっている様です。

• strokeDasharray が配列ではなくなっていて、型としては StringOrNumberOrCallback に変更されている。
• labels のコールバックの値がデータではなく、lineのオブジェクトになってる。

import { VictoryLine } from "victory";

const dottedLine = {
  data: {
    strokeDasharray: 1, // StringOrNumberOrCallbackになったので[1, 1] みたいなしてはできない
  }
};
const barData = [{ x: 1, y: 1 }];

// 前の様にしたければdatumに置き換える
const lineLabel = (value: { datum: { x: number; y: number; } }): number | null => {
  return (value.datum.y > 0 ? value.datum.y : null);
};

<VictoryLine style={dottedLine} data={barData} labels={lineLabel} />

VictoryChart

domainPaddingの型指定が変わった様です。

export type PaddingType = number | [number, number];
export type DomainPaddingPropType =
  | PaddingType
  | {
      x?: PaddingType;
      y?: PaddingType;
    };

値をリテラルで指定していたので、[0, 15] みたいな指定が number[] で解釈されていました。

import { VictoryChart, VictoryBar } from "victory";

const domainPadding = {
  x: [15, 15] as [number, number], // 型指定はDomainPaddingPropTypeなので
  y: [0, 15] as [number, number],
};
const barData = [{ x: 1, y; 1 }];

<VictoryChart domainPadding={domainPadding}>
  <VictoryBar data={barData} />
</VictoryChart>

VictoryAxis

grid.strokeのコールバック関数の引数が変わった様です。
strokeのコールバックはtickの値が引数になっていたので、args: CallbackArgsに置き換えました。

import { CallbackArgs } from "victory-core";
import { VictoryAxis } from "victory";

const valueTicks = [0, 5, 10, 15, 20];

const valueAxisStyle = {
  grid: {
    stroke: (args: CallbackArgs) => (args.tick === 0 ? colorTransparent : axisAndTickColor),  // 前はtick: numberだった
  },
};

<VictoryAxis dependentAxis tickValues={valueTicks} style={valueAxisStyle} />

GitHub ActionsでMongoDBのレプリカセット設定を行う

GitHub ActionsでMongoDBのレプリカセットを使用してテストを実行する方法を調べました。
docker-composeを使ってもよかったのですが、mongodb-github-actionがあったので試しに使用してみました。

パラメータとしては下記の2つのものが指定できるようです。

• MongoDBのバージョン
• レプリカセットの名前

バージョンとレプリカセットの名前しか指定できないので、接続URLにユーザー名などが指定されている場合接続できないので注意が必要です。

試したURLを載せておきます。

MONGO_URL=mongodb://localhost:27017/test?replicaSet=replset

docker-composeなどでローカルでコンテナを起動している場合はMONGO_INITDB_ROOT_USERNAME、MONGO_INITDB_ROOT_PASSWORD、MONGO_INITDB_DATABASEなどを設定ファイルで指定することが多いので、これはこれでサクッと試せるのでこれはいいかなと思いました。

ただし、レプリカセットのメンバーは1つだけなので、複数ある場合のテストがある場合は今のところ使えなさそうではあります。

最後に.github/workflows/node.js.ymlの設定を載せておきます。

name: Node.js CI

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]

jobs:
  build:

    runs-on: ubuntu-20.04

    strategy:
      matrix:
        node-version: [14.8]
        mongodb-version: [4.2]

    steps:
    - name: Git checkout
      uses: actions/checkout@v2

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Start MongoDB
      uses: supercharge/mongodb-github-action@1.3.0
      with:
        mongodb-version: ${{ matrix.mongodb-version }}
        mongodb-replica-set: replset

    - run: yarn --frozen-lockfile
    - run: yarn build
    - run: yarn test

2020年の靴の着用回数を集計した

2019年から引き続き履いているもの、買い足したもの、手放したものを集計対象にしています。

2020年は900件を投稿していたようです。
一つの靴について、だいたい年間で20回ぐらいの着用、サンダルのみ使用頻度が高いので、倍ぐらいの着用回数になっています。

靴は1年間で16足増えて、9足手放し、合計で36足になりました。

2020年に関しては、スニーカーが増えています。
BROTHER BRIDGEのBERLINを買ってから、スニーカーもいいなと思ったので、日本のメーカーのものをいくつか買ってみました。

また、2020年はコロナ禍の影響もあり自宅で仕事することが増え他ことにより運動することが減ったので散歩をすることが増えました。
大体毎日6〜7km位歩いているようです。

そのおかげが全体的な靴の着用回数が増えたようです。
2021年は30足位に抑えようと思います。

No.	ブランド	モデル	2020年までの着用回数	2020年の着用回数
1	Tokyo Sandals	DOBULE MONK SANDAL	182	92
2	Tokyo Sandals	Enginier Slip on	124	88
3	BROTHER BRIDGE	JAMES	57	28
4	Rolling dub trio	ROOTS	60	27
5	BROTHER BRIDGE	BERLIN	27	27
6	RAMSEY	442 MILITARY CAP TOE OXFORD	57	26
7	Redwing	Irish Setter	56	26
8	Crockett&Jones	CONISTON	29	24
9	BROTHER BRIDGE	McCLOUD	53	24
10	BROTHER BRIDGE	Morgan	28	23
11	Redwing	1930s Sport Boot	30	23
12	Sanders	Military Apron Derby Boots	33	22
13	SLOW WEAR LION	OB-8593GT 栃木レザープレーンミッドブーツ	50	22
14	SLOW WEAR LION	OB-8593G オイルドレザープレーンMIDブーツ	48	22
15	Redwing	Irish Setter	51	22
16	Nicks	6inch HotShot	50	21
17	JOHN LOFGREN	M-43 SERVICE SHOES	21	21
18	Wesco	Custom Jobmaster 38LTT	28	20
19	Pistorelo	Norwogian Split	43	20
20	Chippewa	6inch Service Boots	49	20
21	Dry Bones	CYPRESS	20	20
22	NPS shoes	CAMERON ESSENTIAL	20	20
23	Scotch Grain	Spider	28	19
24	BROTHER BRIDGE	Harry	19	19
25	Berwick	Chukka boots	20	18
26	Berwick	Wing tip	34	18
27	SLOW WEAR LION	OB-8208G オイルドレザーサイドゴアブーツ	47	18
28	MoonStar	HI BASKET W	17	17
29	Chippewa	Suburban	35	16
30	Chippewa	Bridgemen	40	15
31	ASAHI	M022	14	14
32	Chippewa	6inch Boots Reverse Black Odessa	14	14
33	KATSUYA TOKUNAGA	BOYS	14	14
34	Timberland	GARRISON TRAIL GORE-TEX HIKING SHOES	14	14
35	Ballband	Jackie	12	12
36	Onitsuka Tiger	MEXICO 66	12	12
37	New Balance	Postal 706V2	11	11
38	NPS shoes	LAW	7	7
39	ASAHI	M020	6	6
40	SOLOVAIR	Black Grain 6 Eye Derby Boot	5	5
41	Chippewa	6inch Service Boots	33	5
42	Rolling dub trio	HunterⅡ	4	4
43	Berwick	Chukka boots	30	3
44	Chippewa	Bridgemen	27	1
45	Hunter	Chelsea Boots	30	0