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ファイルを読み込めるようになるので、正常にレスポンスを返せるようになります。

2021-03-15

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

服

f:id:holyshared:20210315145114j:plain:w600 — アンクルバンド

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

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

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

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

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

2021-02-08

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

自作アプリ

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

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

f:id:holyshared:20210208184008p:plain:w500 — ダッシュボード

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

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

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

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

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

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

2021-01-23

Victoryのアップグレード

自作アプリ

f:id:holyshared:20210123195641p:plain — 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} />

type holyshared = Engineer<mixed>

技術的なことなど色々

Oura Ringのバッテリーの問題

画像を投稿した後にレポートを出す

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

loadable-componentsのheroku対応