インターネットでバズっている様子を見かけたのやってみます。バズるならおいしくあれ。

豆腐は水気を切っておきます。ここでムキになってすべての水分を抜こうとするとボロボロの植物性タンパク質が出来上がる。

キッチンペーパーで包んで冷蔵庫で少し寝かしておくぐらいにしました。

豆腐からある程度水気がなくなったらお好きな器に移してスライスチーズを乗せてレンチンしましょう。チーズが溶けるぐらいに加熱したらOKです(500Wで1分半ぐらいいきました)。

この時点で味見をしたんですが豆腐とチーズの味がします。まとまりがなく、お互いの良さを引き出し合うようなドラマもありません。

不安を感じながらもここに残りのはちみつと塩こしょうを投入します。元ツイートには「パラッと」かけましょうとあったのでおそらく少量程度で十分です。

例によって写真はありませんので適当に調べて想像してみてください。

豆腐とチーズとはちみつの味がしました。あたたかい豆腐の上で今にも固まりつつあるチーズがどこかへ飛んでいき、遅れてはちみつの風味が広がります。ダイエットをするために残された手段はもう断食しかないのでしょうか。

はちみつチーズ豆腐

ついに社会に耐えきれず狂ってしまったとか、

を思い出してタオル版をやってみたとかでもないです。

しっかり洗って乾かしたタオルを顔にボフってしたときに、たまにめちゃくちゃ汗臭い人が目の前にいる感覚になるじゃないですか。よくこれで絶望しています。

世間一般ではこの臭いを生乾き臭と呼ぶそうです。しっかり乾かしたのに「生乾き」って言われる意味がわからない。

原因究明をしたくなるのは筆者の性です。手元の検索エンジンに生乾き臭と打ち込んでEnterを押してみると求めてもいないのに生乾き臭の消し方を提案してくれます。いずれ消すことにはなるが、無慈悲に消す前にこいつのことを知りたい。

さまよっていると花王がこの臭いの原因について研究を行っていた様子を見つけました。2011年に日本微生物生態学会が公開しています。

https://dl.ndl.go.jp/info:ndljp/pid/10881756

これによると Moraxella osloensis という菌が作り出す4-メチル-3-ヘキセン酸という物質があの臭いの正体らしいです。

https://jglobal.jst.go.jp/detail?JGLOBAL_ID=201007032657339334

あいにく生物学にはさっぱりなのですが、物質を分解するよりもおそらくこの菌が物質を排出する前に仕留めることが出来ればこの勝負は楽に勝てるでしょう。相手は細菌ということで、増殖を抑制あるいは死滅するような温度が存在するはずなのでこれを調べていきます。

https://www.phar.agu.ac.jp/lab/microbiol/Research.htm#:~:text=洗濯物生乾き臭原因菌Moraxella osloensisの制御に関する研究

愛知学院大学 薬学部 医療薬学科が「洗濯物生乾き臭原因菌Moraxella osloensisの制御に関する研究」として花王と共同で研究を行っていたようです。この記事によると「約60℃の温度に曝すことにより、水に懸濁状態の細菌では100％、布に付着した状態の細菌でも99％以上、殺菌できる」そうです。

役者は揃ったのでやっていきます。用意するものは以下です。

ちなみに60℃の熱湯につけて秒で死滅するか弱い菌ではないので、だいたい12分程度は継続して加熱する必要があるそうです。めんどくせぇ。

60℃の温度を維持するのはかなり厳しいので鍋を火にかけっぱにして、沸騰しない程度に差し水して行います。また予想以上にタオルがボリューミーだったため、5点セットに付いてきた蓋で適当に落し蓋的なことをして個性を出してみました。この試みの最中、親指に軽度なやけどを負いました。

なお筆者がこのとき二日酔いであることや、洗濯物をたたみかつコーヒーを淹れるという多忙な状態であるため、冒頭のツイート以外の写真はありません。

ぼんやりしていると30分経過していました。慌てて取り出して水気を絞ってそのまま洗濯機に放り込みます。

臭いが吹っ飛びました。吹っ飛ばなかったらこの記事を書いていません。

タオルを煮る

とりあえず学部の卒論が書けたので、ゴール前に寝そべりながらこういう文章を書いてる。

ここ半年ぐらい卒論という存在の生活に占める割合が大きすぎて、個人として技術に関して得た知見のアウトプットがあまり出来なかったので卒論で構築したWebアプリをネタにちまちま書く。

ある用途に向けた音声のデータセット構築を行っていた。

データセットの構築は「構築して終わり」じゃなくて、構築したデータセットの性能や特性の評価とかも行うが、この過程に対してそこまで興味が沸かなかったので今回は書かない。手法調べてGoogle Colabでscikit-learn使ってバババッてしたらモデルの学習完了だったので、特に収穫と思しきものがなかったし楽しくもなかった。

全部完了して「よし卒論書くぞ」と始めたところ、結局データセットの仕様やら評価手法やらを中心に書くことになったので、全然データ収集の話を書けなくて萎えていた。論文だから仕方ないがせっかくなのでブログに吐き出して供養する。

はじめにアプリの背景について触れる。

データの収集にはご時世ということもあって人の声を対面で録音することが憚られたので、録音兼ラベル付け用Webアプリをフルスクラッチで実装(フロントエンド・バックエンドを実装)し、クラウドソーシングで募った被験者にURLを渡して行った。合計で700 ~ 800人ぐらいがこのアプリを使った。

構想からリリースまでの期間は大体3ヶ月ぐらい。割と期間に余裕があるように思えるが、もちろん研究以外のこともやってたので、実質1ヶ月ぐらいの工数で進めてたと思う。去年の夏頃に卒論テーマが決まってから全てのデータ収集が完了したのが12月ぐらいなので、メンテ・その他対応(教授からの唐突な要求に答えるための対応や、ちょっとした障害の対応など)も含めると期間として半年はアプリのソースコードをいじってた。

ちなみに見せられないよって感じの部分があったり、アプリのURLからクラウドソーシング上のタスクを推測されて変なことされると困るので、見せられるブツは特に無い。

その代わり技術的な取り組みをなるべく細かく書く。

アプリのフロントエンドにNext.js、バックエンドにPHPを使った。

技術選定の根拠を話すと、研究室で借りているさくらのレンタルサーバーでアプリのホスティングを行うことになったのでこうなった。ホスティング先決定前はNode.jsでバックエンドを実装する気満々だったが、このレンサバ上では動かない(参考: 

https://rs.sakura.ad.jp/function/cgi/#:~:text=独自にプログラミングしたCGI,言語が使用できます。

)ので次に慣れているPHPを使った(ちなみにさくらのレンサバでNode.jsが動いたとしても、daemonを実装すると強制停止させられる可能性があるのでどのみち厳しかった気がする: 

https://help.sakura.ad.jp/206206041/?_ga=2.103246144.1768828013.1642372001-472689077.1617430242

)。フロントエンドはNext.jsのSGで書き出した静的ファイルをレンサバの公開ディレクトリに設置するようにした。PHPのコード中にHTMLを絶対に埋め込みたくないというか、あまりPHPを書くモチベがなかったのでNext.jsで解決出来ることは全部これでやった。

以下リポジトリの構成。monorepo風味のプロジェクトになっている。Yarn Workspaceを使って、

には収まらないような適当なCLIツールも一緒に実装出来るようにした。

.
├── README.md
├── babel.config.js
├── data/
├── jest.config.js
├── package.json
├── scripts
│   ├── add-fake-choice.js
│   ├── check-listen-num.js
│   ├── deploy-client.js
│   ├── deploy-server.js
│   ├── filter-listen-data-120.js
│   ├── format-user-meta-data.js
│   ├── generate-dataset.js
│   ├── generate-text.js
│   ├── group-recorded-data.js
│   ├── json2csv.js
│   ├── modify-text-ruby.js
│   ├── shared/
│   ├── transform-record-result.js
│   └── validate-listen-result.js
├── setupJest.ts
├── tsconfig.base.json
├── workspaces
│   ├── client/
│   ├── server/
│   └── types-bridge/
└── yarn.lock


 で書いたので良ければ見てほしい。

 がてんこ盛りになっているが、アプリ用のデータ準備や収集したデータをデータセットに纏め上げる処理を全てここに集約させた。

の一部で、以下の処理でJNASの新聞記事文のテキストルビのTeXファイルからASTを取り出し、読み上げ文用に加工している。ASTを触る機会が増えていたのでこういう実装をさらっと出来て良かった(再帰関数の中はあまり綺麗ではないが)。

レンサバへのデプロイはFTPを使った。

 というNPMパッケージがあるので、これを使って以下のような簡単なデプロイスクリプト(

)を実装して、Actionsのワークフロー上でフロントエンドのビルド後に実行した。ちなみに dotenv を入れているのは、Actionsが無料枠の天井に到達したときローカルからデプロイするためだったが全然そんなことなかった。サーバーサイドも同様に、書いたPHPのコードをディレクトリごとFTPでレンサバに突っ込んでいる。

const dotenv = require('dotenv');
dotenv.config();
const FTPDeploy = require('ftp-deploy');
const ftpDeploy = new FTPDeploy();
const path = require('path');

const config = {
  user: process.env.FTP_USERNAME,
  password: process.env.FTP_PASSWORD,
  host: process.env.FTP_HOST,
  localRoot: path.resolve(__dirname, '../workspaces/client/out'),
  remoteRoot: process.env.FTP_REMOTE_ROOT,
  include: ['*'],
};

ftpDeploy
  .deploy(config)
  .then((res) => console.log('finished: ', res))
  .catch((err) => console.log(err));


あとは収集したデータをバックエンドで永続化する際、RDBに出し入れするのが面倒だった(レンサバ上で運用するDBのセキュリティ面の知見を持っていなかった)ので基本的にJSONファイル、音声はWAVEファイルにしてレンサバに保存した。

アプリの機能としては大きく分けて2つで「音声の録音」「音声の評価(ラベル付け)」がある。次はそれぞれについて書く。

収集したい音声が以下の形式だった。雑に表現すると"そこそこ質の良い研究に使うにあたって一般的な形式の音声"を収集しようとした。

という、WebRTC関連のWeb APIを利用した。ここで１つ問題になるのが、被験者は各々使いたいブラウザを使用して音声を録音することで、あるある〜って感じだがやはり悩まされた。とりあえずpolyfill入れておくかと 

https://github.com/ai/audio-recorder-polyfill

 を入れたが、後々になって別にIEは注意書きで使わないように言ったので必要なかった気もする。

NotSupportedError: AudioContext.createMediaStreamSource: Connecting AudioNodes from AudioContexts with different sample-rate is currently not supported.

 の通り、サンプリング周波数が44.1kHzから変えられなかったので、仕方なしにアプリの注意書きにFirefoxを使わないように書いた。Firefoxの使用を禁止したのは今までで初めてだった。

なお、このエラー　を調べると

こういうGitHub issue上でのやり取り

が出てくる。Firefox側で対応されたらしいが、自分のmacOS Catalina環境や学内のCentOS 7環境ではバグっていたので直ってない気がする。両方ともOSが古いのも原因としてありえそう。

とりあえずこれらのことは置いておいてpolyfillを使いつつ

フックを実装し、録音を行う実装を含むReactコンポーネント内で利用するようにした。このフックは

/**
 * <https://codesandbox.io/s/81zkxw8qnl>
 * <https://developers.google.com/web/fundamentals/media/recording-audio>
 * NOTE: ↑ No support for wav format.
 */

import { useEffect, useState } from 'react';
import AudioRecorder from 'audio-recorder-polyfill';
import type { TextData } from '../components/RecordPage';

const requestRecorder = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new AudioRecorder(stream, { sampleRate: 48000 });
  return recorder;
};

export const useRecorder = () => {
  const [audioData, setAudioData] = useState<
    {
      id: number;
      text: string;
      ruby: string;
      url: string;
      formData: FormData;
    }[]
  >([]);
  const [isRecording, setIsRecording] = useState(false);
  const [currentId, setCurrentId] = useState(0);
  const [currentText, setCurrentText] = useState('');
  const [currentTextRuby, setCurrentTextRuby] = useState('');
  const [recorder, setRecorder] = useState<typeof AudioRecorder | null>(null);

  const startRecording = async (data: TextData[number]) => {
    setCurrentId(data.id);
    setCurrentText(data.sentence);
    setCurrentTextRuby(data.ruby);
    setIsRecording(true);
  };

  const stopRecording = () => {
    setIsRecording(false);
  };

  const onSuccess = async (stream: typeof AudioRecorder) => {
    setRecorder(stream);
  };

  const onError = (reason: any) => {
    console.error(reason);
    alert('エラーが発生しました。ページを再読み込みしてください。');
    setCurrentId(0);
    setCurrentText('');
    setIsRecording(false);
    setRecorder(null);
  };

  const handleOnDataAvailable = async (event: BlobEvent) => {
    /**
     * NOTE: 以下の WAV データに変換
     */
    if (event.data.size > 0) {
      // プレビュー用の URL 作成
      const url = URL.createObjectURL(event.data);

      // サーバーへ送信用の FormData 作成
      const formData = new FormData();
      formData.append('audio_data', event.data, `${currentId}`);

      setAudioData((prevState) => [
        ...prevState,
        {
          id: currentId,
          text: currentText,
          ruby: currentTextRuby,
          url,
          formData,
        },
      ]);

      setCurrentId(0);
      setCurrentText('');
    }
  };

  const removeAudioData = (id: number) => {
    setAudioData((prevState) => prevState.filter((state) => state.id !== id));
  };

  useEffect(() => {
    if (recorder === null) {
      /**
       * 録音ボタンが押された状態であれば初回 getUserMedia でマイクへのアクセスの許可と AudioRecorder のインスタンス作成
       */
      if (isRecording) {
        requestRecorder().then(onSuccess, onError);
      }
      return;
    }

    if (isRecording) {
      recorder?.start();
    } else {
      recorder?.stop();
    }

    recorder.addEventListener('dataavailable', handleOnDataAvailable);

    return () => {
      recorder.removeEventListener('dataavailable', handleOnDataAvailable);
    };
  }, [recorder, isRecording]);

  return {
    audioData,
    isRecording,
    startRecording,
    stopRecording,
    currentText,
    removeAudioData,
  };
};



ちなみにコードの冒頭にごちゃごちゃ書いているが、

https://developers.google.com/web/fundamentals/media/recording-audio

 の例で示されている方法では WAVE ファイルとして音声を録音出来ない(

にはなるがffmpegとかで確認すると壊れているし、そもそも再生出来ない、wave surferで表示すら出来ない)。直そう直そうと思って全然やる時間が無いので、コントリビュートチャンスに飢えている誰かいればやってほしい。

あとはフックを使っていい感じに録音UIを組めばおわり。Firefoxの件以外はそこまで苦労しなかった。

被験者による主観評価によって音声へのラベル付けを行った。評価のUIは各項目1つだけ選択するアンケート形式で実装したかったので、

実装したReactコンポーネントはこんな感じ。

import { SubmitHandler, useForm, UseFormRegisterReturn } from 'react-hook-form';
import { LISTEN_CONTENTS } from '../../configs';
import { EuterpeButton } from '../EuterpeButton';
import { ColorParette } from '../Instruction';
import styles from './EuterpeRadioForm.module.scss';

export type SelectionsInput = {
  [K in keyof typeof LISTEN_CONTENTS]: keyof typeof LISTEN_CONTENTS[K]['selections'];
};

type CheckboxInputProps = {
  value: keyof typeof LISTEN_CONTENTS[keyof typeof LISTEN_CONTENTS]['selections'];
  formRegister: UseFormRegisterReturn;
};

type FieldProps = {
  contents: typeof LISTEN_CONTENTS[keyof typeof LISTEN_CONTENTS];
  formRegister: UseFormRegisterReturn;
};

type Props = {
  onSubmit: SubmitHandler<SelectionsInput>;
  inputDisabled: boolean;
};

const RadioInput: React.FC<CheckboxInputProps> = ({ value, formRegister }) => {
  return (
    <input
      type="radio"
      value={value}
      {...formRegister}
      className={styles.field_radio}
    />
  );
};

const Field: React.FC<FieldProps> = ({ contents, formRegister }) => {
  return (
    <div className={styles.field_wrapper}>
      <span className={styles.field_question}>{contents.question}</span>
      {Object.keys(contents.selections).map((key) => (
        <label key={key} className={styles.field_container}>
          <RadioInput
            value={key as keyof typeof contents['selections']}
            formRegister={formRegister}
          />
          <span>
            {contents.selections[key as keyof typeof contents['selections']]}
          </span>
        </label>
      ))}
    </div>
  );
};

export const EuterpeRadioForm: React.FC<Props> = ({
  onSubmit,
  inputDisabled,
}) => {
  const { register, handleSubmit } = useForm<SelectionsInput>();
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field
        contents={LISTEN_CONTENTS.consistency}
        formRegister={register('consistency', { required: true })}
      />
      <Field
        contents={LISTEN_CONTENTS.recordingConditions}
        formRegister={register('recordingConditions', { required: true })}
      />
      <Field
        contents={LISTEN_CONTENTS.easeOfListening}
        formRegister={register('easeOfListening', { required: true })}
      />
      <EuterpeButton
        type="submit"
        text="⏩ 次へ"
        bgColor={
          inputDisabled ? ColorParette.DISABLED : ColorParette.ACCENT_GREEN
        }
        disabled={inputDisabled}
      />
    </form>
  );
};



正直あまり書くことがない。本業ではないという言い訳をしながら、歴戦のPHPerが見ると卒倒しそうなコードを書いた。

レンサバ上でcomposer走らせるとかが出来なかったので、とりあえず FormData で送信されてきた音声と評価結果などの各種テキストデータを書き出す処理をそのままのPHPで書いた。

local では composer を使えるので、

の静的解析で型チェックをしたり、

でコードのフォーマットぐらいはやった。

あと意識したのがセキュリティで、Laravelとかのフレームワークに乗っからなかったので全部調べて自分でどうにかした。Qiitaで

さんあたりの記事を見たらマシなPHPが書けた。

例えばPOSTされた評価ラベルデータを書き出すとかだとこういう感じでPHPを書いた。

<?php
  declare(strict_types=1);

  error_reporting(E_ALL);

  include dirname(__FILE__) . "/../shared/mkdir.php";
  include dirname(__FILE__) . "/../shared/http_variables.php";
  include dirname(__FILE__) . "/../shared/console.php";
  include dirname(__FILE__) . "/get_data.php";

  header('Content-Type: application/json; charset=utf-8');
  header('X-Content-Type-Options: nosniff');

  $http_variables = new HttpVariables();

  $mkdir = new Mkdir($http_variables);
  $mkdir->set();

  $get_data = new GetData();

  (function () use ($mkdir, $http_variables, $get_data) {
      $console = new Console();

      $files = $http_variables->files('result_data');
      $target_dirname = $http_variables->get('target_dirname');
      $target_data_path = realpath('../record/data/' . $target_dirname);
      $data_map_json_path = $target_data_path . '/data_map.json';
      $console->log($data_map_json_path);
      $data_map = $get_data->get_target_data_map($data_map_json_path, $target_dirname);
      $data_map['listen_num'] += 1;
      file_put_contents($data_map_json_path, json_encode($data_map, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

      $input = $files['tmp_name'];
      $output = $files['name'] . ".json";

      if (move_uploaded_file($input, "./" . $mkdir->full_data_dir_name . "/" . $output)) {
          echo json_encode(['message' => 'Created listen result data.']);
      } else {
          http_response_code(405);
      }
  })();



JSerは即時関数を使いがち。PHPは慣れていると言いつつも飛び道具程度にしか書いてなかったので、マジでこの部分危ないよ！とかのマサカリ大歓迎です。

歴戦のPHPerの元で PHP だけ書く修行をしたいが、PHPで飯を食うつもりが今の所ないのでこの有様です。

Next.jsをVercel以外でホスティングするのはやはり面倒だった。若干つまづいた所もあったが、適当なCDNに乗せるみたいなイメージでできた。

反省としては、同時接続の件数がかなりあったのに対応出来ていなかったところがある。収集できたデータを確認していると同時にリクエストが飛んできて書き込みに失敗し、破損しているデータがちらほらあった(これらはクラウドソーシングで再発注した)ので、やっぱりDB使おうねという気持ちになった。DBまわりのセキュリティ勉強する。

ついでに卒論執筆環境についてもちょっとだけ工夫したので書く。

卒論はTeXで書いた。周りはCloud LaTeXなどのオンラインのサービスを使っていたが、研究室で色々あってWiFiがダウンしたりしたときに面倒なのでローカルに環境を作った。

ただ、ローカルだとデータが吹っ飛ぶと絶望する羽目になるので、GitHub上にプライベートリポジトリを作って適当な進捗が出る度にpushするようにした。

mac勢なので学部2回生の頃ぐらいにとりあえずTexShopをインストールしてた。ちなみにこれに付属してるエディタは卒論では使ってない。

エディタで論文のプレビューを見れるようにする

エディタには慣れているVSCodeを使っていた。VSCodeにはLaTeXにむけた拡張機能で

というものがある。これを導入すると、VSCode上でTeXのビルド・プレビューを行いながら執筆出来る上にコード補完とかもある全部のせセットなのでかなり捗った。

卒論を書くにあたって指導教員から添削をもらってマシな論文に近づけていくと思うが、その際に何度も繰り返し添削を受けることになると思う。そこで、前回修正した点と今回修正した点が一目見て分かるようにすると教員側に対して優しいのでやった(というかこれをやらないと添削してもらえなかった)。

latexdiffを用いると、訂正前と後の差分をまとめたTeXファイルを吐き出させることが出来る。また、gitを使ってバージョン管理している場合はlatexdiff-vcのgitオプションを使用すると、コミットごとに差分をまとめることが出来る。

これで解決！といきたいところだが、僕の手元のLaTeX環境ではlatexdiff(latexdiff-vc)を利用して吐き出したファイルのfigureが表示されない(多分

 加えたら表示されるが、めちゃくちゃ焦ってて気づいてなかった)とか、文章に謎の改行が入るとか、差分を出すには若干手間だったので断念した。

代わりにhomebrewでインストール出来る

でPDFの差分を見つつ、一つ一つ手作業で変更箇所の色を変えた。TeXで色を変更したい箇所は

\\newcommand{\\red}[1]{\\color{red}#1\\color{black}}

睡眠１番大事。徹夜はやめたほうがいい。20代は無敵！とか思ってたが意外と簡単に身体は壊れる。パソコンは雑に扱っても壊れないが、人は雑に扱うと壊れるって昔大学の先輩が言っていた。

とりあえずなんか不調だなと思ったら寝るようにした。人とコミュニケーション取りたくない(Slackやメールの返信がめちゃくちゃしんどいとか)って思った時はかなり疲弊しているので寝ろ！みたいなのをどっかで見た気がする。これを実践していた。

あとは運動すると眠くなりやすいのでおすすめ。合法的に暴れられるのでストレス発散にもなって心身に良い。余裕のあるときは駅前のエニタイムフィットネスに１日おきぐらいで通ってた。別にステマではないけど24時間開いてるのが助かった。

1人で作業してて煮詰まったら人と他愛もないことを話すと良かった。話すために研究室に行って卒論書いてたり、友達とdiscordで作業したりしてた。

人と飯食いに行くのも気分転換によくやってた。飯の際の酒は程々に。2日酔いになると詰む。

適度ならかなり良い気分転換になった。友達と本気でApexのランクマッチやったり、最近配信するのを勧められて暇なときに

してみたりしてる。やるなら気軽にはじめられて1人でも他の人と一緒でも出来るゲームがおすすめ。

のめり込むとこちらも飲酒と同様に詰む。

こっちも適度にやると気分転換になる。何回かミスってクレカ上限突破グレンラガンした。

最近だと春服とかメンズコスメとか、春から始まる生活で便利そうなものとかを爆買いした。買い物しながら大学卒業後の生活を想像すると楽しい。卒論で煮詰まったら自転車操業にならないように気をつけつつ、好きなものに対しての散財はぜひ。

とにかく卒論の修正と発表会頑張る。

卒論を支えた技術

12月でオフィスが無くなると聞いて挨拶へ行ったとき、バイトしていた頃に先輩と休憩に出てきて、煙草吸いながら色々話し込んでいたところに1人で上がった。

昔そうしていたみたいに、雨風で塗装が剥げかかったベンチに座ってぼーっとふかしてると、そういえばここで写真撮ったことなかったなと思った。

最後の記念に、と適当にシャッターを切るとふつふつと名残惜しさが湧いた。

フロントエンドも全く分からず、エンジニアについても右も左も分からない頃に僕を拾ってくれた。
大学受験に失敗し大学生活もうまく行かず、自暴自棄になってこの際もう大学辞めるか、みたいな気持ちでやってきた僕をあたたかく迎えてくれた。

何も世間を知らないただ尖っていただけの自分に対して、Webエンジニアに限らずエンジニアとしてどう振る舞えば良いのかとか、チームってこういうものなんだよとか、今では当たり前・出来て当然と切り捨ててしまうようなことまで全部教えてくれた。

過去にすがっていられない、すがるものも無いとめちゃくちゃに走っていたが、すがらなくとも頼っていい存在が出来た。

Spotify みたいなポッドキャスト作りたい！って言っていたら社内アドベントカレンダーの内容にしていいよと、こころよくやらせてもらえた。
僕がインスタレーションやりたい！と言ったら、わざわざ担当していた社員が僕を担当に入れてくれて、それの Web 部分を作ったこともあった。
試用期間が終わって内定が出た時、僕はそれを辞退したがそれでもここに残っていいと席を用意してくれた。

いつも顔を出すと調子はどう？と言ってくれる先輩が出来た。
周りに甘えっぱなしで、無茶やわがまましか言わない自分だったが、それでも付いてきてくれる後輩も出来た。

元 Flasher としてインターネット黎明期を支えてきた人、面倒見の良い先輩や OSS 好きなエンジニア、今の僕の理想像の全てがここにあった。

気づくともう大学生でいられるのも数ヶ月になった。
あれほど辞めたがっていた大学も残り少しになると、それどころではなく卒業まで死ぬ気で頑張るぞって気持ちで過ごしている。

それと、僕は理想のエンジニアになれたのか、なれていないのかを自問することが増えた。
でも自分が憧れたのは、好きなことに向かって突っ走るエンジニアだった。突っ走った後、何が楽しかったのかを周りに喜々と話してくれる、そういう存在になれたらいいなと思う。

I think this is the beginning of a beautiful friendship.
''Casablanca''

独り立ちの話

毎日日報を書いているフォロワーがいて、偉いな〜と思った。一生味のしないガム噛み続ける内容しか書けない気がしておれには無理です。

卒論をナメていた結果卒論で順調に生活が狂わされ毎日逃げのApexみたいな生活を送りつつあったのを立て直した。

大きな変化としてはOSSのOutside Memberになった(リポジトリのコラボレーターになった)のと、しばらくやっていなかったエンジニア業を再開した。

他にジムに通い始めたので、眠気が早くきて強制的に生活が正しくなった。誕生日にほしいものリストからフォロワーにものをせびった結果プロテインと筋トレグッズばっかり送られてきてかなり良かった。敵に塩関係無しになんでも送ると良い。

あと1人のときに酒を飲まなくなったので、遊生夢死野郎度が下がって良かった。まともな思考で余計なことかぼんやりとした不安に向き合っている。その分人と飲みに行ったときの粗相をする確率がかなり上がった。大学の同期と行った焼き肉でフランベしたり、サシで飲んだときに最悪の酔い方をして酒をぶっかけて次やったら泣くって言われたりしてる。はやく禁酒したい。禁煙は試みたが3回失敗してる。また値上がりで喫煙者への風当たりが凄いのでそのうち辞める。納税は最高。

Poimandres の他のリポジトリに軽く PR 出したり、

https://github.com/pmndrs/react-three-next

 の機能実装したりしていたが、結局 three-stdlib での JS → TS の貢献が大きかったようで、そのリポジトリを任せてもらえた。

 に入っているモジュールを外部に切り出したスタンドアロンとして使うようなライブラリになっている。Three.js には色々お世話になっていたので、間接的ながら何か貢献出来るのがコミットするモチベになった。

やってることは一般コントリビューターの頃からあまり変わらないが、メンテナーから直接タスクが飛んできたり、PRのマージやissueのクローズが出来るようになったので「これやっちゃっていいっすか？」みたいな英語を書いて動いたりしてる。JS から TS にするのにまだ手が足りてないのでみんなやってほしい、おれがレビューでも良ければですが......

始めて OSS をメンテナンス出来る側になったので付き合い方とかで色々最初はあたふたしてたが、みんな issue で割と気軽に話題振ったり、discord でカジュアルに話してたり、想像よりも良かった感じがする。もうちょっとコミットの頻度を上げて細々ながら続けていけたらいいなと思う。

OSSとはまた別で受託した案件に入っている。去年は若干デザインもやっていたが、今年はエンジニア専門としてデザインから実装への落とし込みをするような振る舞い方になってきた。まだ公開していないので何も話せないが、久々に設計とかちゃんとせんとなってなって色々試行錯誤している。

 を毎年更新するやつやってほしい。もう誰もHoCの話しとらん。こういう見た目/ロジックに分けるパターンがやっぱりReact Component構成の1つの正解(dan先生の記事か 

https://www.wantedly.com/companies/wantedly/post_articles/302873

https://moneyforward.com/engineers_blog/2020/02/18/react-component-rules

 見てください)というのが総意な気がしてきた。ちなみに前述の 

 でも、コマンドでstyled-componentsを選択すると、これ風味のNext.jsプロジェクトが出来上がる。

あとやっぱりどうあがいてもAtomic Designの影から逃げ出せる気がしない。なんとなくやっつけでやりました
構成が1番許しがたいため、理由のある構成を考えた結果やっぱりこれに近づいていく。状態を持つか持たないかだけ考えてAtomsとPagesでどうにか出来るんじゃないかみたいなことを最近は思い始めた(

https://zenn.dev/takepepe/articles/atomic-redesign

ヤバいことを序盤にしなかったので放任された結果自己管理の甘さから後々ヤバいことになったきたタイプ。義務教育の間は神童扱いその後は適切な手の抜き方が分からなくて詰むみたいなのと同じ。

教授の神がかった記憶力によってなんとか最低ラインは維持できている。「そういえばWebで動くものの開発ができたよね？」と研究室の自己紹介でちょろっと話した内容をちゃんと覚えてくれていて、それ関連で研究が進んでいる。研究としては音声から色々推定するやつをやっている。人もすなる機械学習というものをおれもしてみむとてするなりになってきた。進捗に関しては触れないでほしい。

構成をちょっといじった。Cloudflare Pagesが正式にAPI対応してくれたおかげで、ContentfulでDeploy Webhookを組めるようになったので試した。やり方は 

https://dev.classmethod.jp/articles/cloudflare-pages-api/

 にきれいにまとまっていたので参考にしてほしい。feed用のxmlを手動更新する必要がある以外は特に問題なくデプロイ出来てる。

東京喰種読んだ中学生みたいに「この世の不利益はすべて当人の能力不足」って連呼しながら筋トレして毎日過ごしてます。

近況報告 - OSS, 卒論, 他

サーバーサイドで Node.js が動かない環境(某レンタルサーバー)でアプリケーションを実装する必要が生じたため、

 PHP を書いていたんですが、クライアントサイドは React で書きたいという我儘が出てきてしまい、その欲望に従った結果型を共有出来ないゆえの地獄を見たのでその脱出を図りました。

 を扱う際に以下のような型の拡張を書いた

ファイルを使うことがあります。

interface FormData {
  append(
    name: 'foo' | 'piyo' | 'fuga',
    value: string | Blob,
    filename?: string
  ): void;
}


 を文字列リテラルで縛っています。サーバーサイドも TypeScript の場合この型定義を共有することで、クライアントサイドから送信される 

 がどのようなものか簡単にわかるようになっています。また VSCode などでは補完機能により、タイポを防いで無駄な確認の手間を省くという意味合いもあります。

ただサーバーサイドが PHP の場合(TypeScript 以外の言語でもそうですが)、

 ファイルを共有出来ないため、何かしら別の手段を用意する必要があります。

今回は PHP なので、PHPDoc Types と PHPStan の静的解析による型チェックを活用していきます。

クライアントサイドは TypeScript で書かれている前提で、他にサーバーサイドでは以下のものを用意します。

FormDataを拡張した型を取り出してJSONにする

 を拡張した型定義は以下のようになっています。


interface FormData {
  append(
    name: 'audio_data' | 'user_dir_name' | 'data_map' | 'result_data',
    value: string | Blob,
    filename?: 'data_map' | 'listen_result'
  ): void;
}



 の Parameters を取り出して JSON にします。数行程度で実装出来ます。

import * as path from 'path';
import * as ts from 'typescript';
import { readFile, writeFile } from 'fs/promises';

type Properties = { [key: string]: string };

let properties: Properties = {};
const visit = (node: ts.Node | ts.Node[], sourceFile: ts.SourceFile) => {
  if (Array.isArray(node)) {
    node.forEach((n) => {
      visit(n, sourceFile);
    });
  } else {
    if (node.kind === ts.SyntaxKind.Parameter) {
      const texts = node.getText(sourceFile).split(': ');
      const key = texts[0];
      const value = texts[1];
      properties[key] = value;
      return;
    } else {
      visit(node.getChildren(sourceFile), sourceFile);
    }
  }
};

const extract = async (file: string) => {
  const data = await readFile(path.resolve(`../client/src/${file}`));
  const sourceFile = ts.createSourceFile(
    file,
    data.toString(),
    ts.ScriptTarget.ES2015
  );
  visit(sourceFile.getChildren(sourceFile), sourceFile);

  await writeFile(
    process.cwd() + '/json/formdata.json',
    JSON.stringify(properties, null, '  ')
  );

  properties = {};
};

extract(process.argv[2]);


関数によって型定義の TypeScript AST を Traverse し、該当する 

 を取り出してオブジェクトに格納しています。オブジェクトは後に PHP側 の実装と共有するため JSON として書き出しています。別に JSON じゃなくても PHP 側でも読み込めるファイルであればここは何でもいいです。

PHP側でJSONのデータをPHPDoc Typesに変換

 から受け取ります。定義済み変数の型を拡張する方法がわからなかったので以下のようなクラスを定義しました。(こうすれば拡張できていいよ！とかあれば教えて下さい)


<?php

declare (strict_types=1);
error_reporting(E_ALL);

class HttpVariables
{
    // ~~

    public function files($key)
    {
        return $_FILES[$key];
    }
}



この状態で PHPStan を実行すると落ちます。(PHPStan の level は 　max で実行しています)

> ./vendor/bin/phpstan analyze -c phpstan.neon
 9/9 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] 100%

 ------ ------------------------------------------------------------------------------
  Line   shared/http_variables.php
 ------ ------------------------------------------------------------------------------
 # ~~

  18     Method HttpVariables::files() has no return typehint specified.
  18     Method HttpVariables::files() has parameter $key with no typehint specified.
 ------ ------------------------------------------------------------------------------

 [ERROR] Found 6 errors

Script ./vendor/bin/phpstan analyze -c phpstan.neon handling the phpstan event returned with error code 1


この PHPStan による型チェックが通ることをゴールに進めます。

 の型はとりあえず以下のように設定しておきます。

/**
 * @phpstan-type Files array{tmp_name: string, name: string}
 */
class HttpVariables
{
    // ~~

    /**
     * @return Files
     */
    public function files($key)
    {
        return $_FILES[$key];
    }
}


 の方は先程用意した JSON を元に作成します。以下が実際に実装したコードです。

<?php
  declare(strict_types=1);

  error_reporting(E_ALL);

  require(dirname(__FILE__) . "/../vendor/autoload.php");

  use PhpParser\\Comment\\Doc;
  use PhpParser\\Error;
  use PhpParser\\ParserFactory;
  use PhpParser\\Node;
  use PhpParser\\Node\\Stmt\\ClassMethod;
  use PhpParser\\NodeTraverser;
  use PhpParser\\NodeVisitorAbstract;
  use PhpParser\\PrettyPrinter;

  $target_php_file = 'http_variables.php';
  $target_types_file = 'formdata.json';

  $target_php_file_path = __DIR__ . "/../src/shared/" . $target_php_file;
  $target_types_file_path = __DIR__ . "/../../types-bridge/json/" . $target_types_file;

  $php_code = file_get_contents($target_php_file_path);
  $formdata_types_json = json_decode(file_get_contents($target_types_file_path));

  $parser = (new ParserFactory)->create(ParserFactory::PREFER_PHP7);
  try {
      $ast = $parser->parse($php_code);
  } catch (Error $error) {
      echo "Parse error: {$error->getMessage()}\\n";
      return;
  }

  $traverser = new NodeTraverser();

  class NodeVisitor extends NodeVisitorAbstract
  {
      private $formdata_types_json;

      function __construct($formdata_types_json)
      {
          $this->formdata_types_json = $formdata_types_json;
      }

      public function enterNode(Node $node)
      {
          if ($node instanceof ClassMethod && $node->name->name === 'files') {
              $prev_doc_comment = $node->getDocComment()->getText();
              $prev_doc_comment_lines = preg_split('/\\n/', $prev_doc_comment);
              $formatted_comment_lines = array_map(function ($line) {
                  return trim(preg_replace('/\\*/', "", $line));
              }, $prev_doc_comment_lines);
              foreach ($formatted_comment_lines as $line) {
                  if (preg_match('/@param/', $line)) {
                      $words = preg_split('/\\s/', $line);
                      $param_name = $words[array_key_last($words)];
                      $param_types = $this->formdata_types_json->name;
                      $new_doc_comments = "/**
                       * @param $param_types $param_name
                       * @return Files
                       */";
                      $node->setDocComment(new Doc($new_doc_comments));
                  }
              }
          }
      }
  }

  $traverser->addVisitor(new NodeVisitor($formdata_types_json));

  $ast = $traverser->traverse($ast);

  if ($ast) {
      $pretty_printer = new PrettyPrinter\\Standard();
      file_put_contents($target_php_file_path, $pretty_printer->prettyPrintFile($ast));
  } else {
      throw new \\Exception('Cannot get ast.');
  }



 を利用して、対象の PHP ファイルから 

 メソッドの PHPDoc Comment を探し出し、

 で取り出しています。取り出したコメントは整形した後、

 の型に相当する部分を読み込んだ JSON を元に 

 メソッドの戻り値から目当ての値を呼び出してみます。

<?php
  // ~~

  $http_variables = new HttpVariables();

  (function () use ($mkdir, $http_variables) {
      $files = $http_variables->files('result_data');
      $input = $files['tmp_name'];
      $output = $files['name'] . ".json";

      if (move_uploaded_file($input, "./" . $mkdir->full_data_dir_name . "/" . $output)) {
          echo json_encode(['message' => 'Created listen result data.']);
      } else {
          http_response_code(405);
      }
  })();



PHPStan による型チェックは通ります。

$ composer --working-dir=workspaces/server phpstan
> ./vendor/bin/phpstan analyze -c phpstan.neon
 9/9 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] 100%

 [OK] No errors

✨  Done in 0.69s.


ちなみに呼び出す際の key を先程生成した PHPDoc Types に存在しないものにするとちゃんとチェックは落ちます。

<?php
  // ~~

  $http_variables = new HttpVariables();

  $mkdir = new Mkdir($http_variables);
  $mkdir->set();

  (function () use ($mkdir, $http_variables) {
      $files = $http_variables->files('something');
      $input = $files['tmp_name'];
      $output = $files['name'] . ".json";

      if (move_uploaded_file($input, "./" . $mkdir->full_data_dir_name . "/" . $output)) {
          echo json_encode(['message' => 'Created listen result data.']);
      } else {
          http_response_code(405);
      }
  })();



$ composer --working-dir=workspaces/server phpstan
> ./vendor/bin/phpstan analyze -c phpstan.neon
 9/9 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] 100%

 ------ --------------------------------------------------------------------------------------------------------------------------------------
  Line   listen/set_result_data.php
 ------ --------------------------------------------------------------------------------------------------------------------------------------
  18     Parameter #1 $key of method HttpVariables::files() expects 'audio_data'|'data_map'|'result_data'|'user_dir_name', 'something' given.
 ------ --------------------------------------------------------------------------------------------------------------------------------------

 [ERROR] Found 1 error

Script ./vendor/bin/phpstan analyze -c phpstan.neon handling the phpstan event returned with error code 1



サーバーサイドが TypeScript でない状況でもどうにか　AST の力を借りて型を共有してみました。

 でも同様に拡張した型定義があれば 

 以外でも PHP 側に型を流すことが出来ると思います。

実際に実装したリポジトリなどは公開していないのでお見せ出来ないんですが、何か質問やまさかりなどあれば 

TSとPHPでFormDataの型を共有する

所属している情報系のサークルで「OSSのすすめ」というタイトルの LT を行いました。

https://slides.com/did0es/recommendation-of-oss/embed