react-twgl-boilerplate

movie-fx

nightscape-from-office

two-movie-layers

lfo-crossfade

boiling-towel

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

用意するものは以下です。

- 豆腐
- スライスチーズ
- はちみつ
- 塩こしょう

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

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

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

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

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

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

## 感想

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

[ミネソタ飢餓実験 | Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%9F%E3%83%8D%E3%82%BD%E3%82%BF%E9%A3%A2%E9%A4%93%E5%AE%9F%E9%A8%93)

ありがとうございました。

はちみつチーズ豆腐

タオルを煮ました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">タオル煮てるのみてる <a href="https://t.co/Nl7JxEsXUB">pic.twitter.com/Nl7JxEsXUB</a></p>&mdash; 白金台 (@did0es) <a href="https://twitter.com/did0es/status/1563380617089531904?ref_src=twsrc%5Etfw">August 27, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ついに社会に耐えきれず狂ってしまったとか、[鼻セレブを食べる話](https://www.j-cast.com/2015/02/12227690.html?p=all)を思い出してタオル版をやってみたとかでもないです。

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

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

原因究明をしたくなるのは筆者の性です。手元の検索エンジンに生乾き臭と打ち込んで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=%E6%B4%97%E6%BF%AF%E7%89%A9%E7%94%9F%E4%B9%BE%E3%81%8D%E8%87%AD%E5%8E%9F%E5%9B%A0%E8%8F%8CMoraxella%20osloensis%E3%81%AE%E5%88%B6%E5%BE%A1%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E7%A0%94%E7%A9%B6>

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

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

- サーモス5点セットに含まれる１番でかい鍋
- 残念な臭いのするタオル(x3)
- 熱湯

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

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

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

![boiling-towel](//images.ctfassets.net/fwqvgdqoxfc7/PaRLZ7fm7CuOsWYG1SCfj/5bb000ac91d889156ba9f1fc8fa2e34b/IMG_3990.jpg)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ネオ京都人は帰れの合図として60℃以上の湯で20分煮込んだタオルを出す</p>&mdash; 白金台 (@did0es) <a href="https://twitter.com/did0es/status/1563383722103414786?ref_src=twsrc%5Etfw">August 27, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

***

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

## 結果

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

かがくのちからってすげー！

タオルを煮る

卒論を支えた技術

## 独り立ちの話

![nightscape-from-office](//images.ctfassets.net/fwqvgdqoxfc7/6E5sSMqMuUJ3VYxuJLLUWr/c97c64b0d6fe85df61869648042ef977/IMG_2388.JPG)

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

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

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

---

[株式会社タンバリン](https://www.tam-bourine.co.jp/)を12月末で退職する。

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

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

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

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

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

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

---

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

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

3年間お世話になりました。

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


独り立ちの話

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

## 近況っぽい話

比較的元気です。

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

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

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

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

## OSS

<https://github.com/pmndrs/three-stdlib> のコラボレーターになった。

Poimandres の他のリポジトリに軽く PR 出したり、<https://github.com/pmndrs/react-three-next> の機能実装したりしていたが、結局 three-stdlib での JS → TS の貢献が大きかったようで、そのリポジトリを任せてもらえた。

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

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

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

## エンジニア業

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

誰かdan先生の [この記事](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) を毎年更新するやつやってほしい。もう誰も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> 見てください)というのが総意な気がしてきた。ちなみに前述の <https://github.com/pmndrs/react-three-next> でも、コマンドで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, 卒論, 他

## 背景

PHP を書いていてこういうことがあったのでやりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TSとPHP間のFormDataの型めっちゃつらいやつ毎回なってる</p>&mdash; Shuta (@did0es) <a href="https://twitter.com/did0es/status/1401471990259613697?ref_src=twsrc%5Etfw">June 6, 2021</a></blockquote>

サーバーサイドで Node.js が動かない環境(某レンタルサーバー)でアプリケーションを実装する必要が生じたため、~~渋々~~ PHP を書いていたんですが、クライアントサイドは React で書きたいという我儘が出てきてしまい、その欲望に従った結果型を共有出来ないゆえの地獄を見たのでその脱出を図りました。

## 概観

筆者は `FormData` を扱う際に以下のような型の拡張を書いた`d.ts`ファイルを使うことがあります。

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

`append` の `name` を文字列リテラルで縛っています。サーバーサイドも TypeScript の場合この型定義を共有することで、クライアントサイドから送信される `FormData` の `name` がどのようなものか簡単にわかるようになっています。また VSCode などでは補完機能により、タイポを防いで無駄な確認の手間を省くという意味合いもあります。

ただサーバーサイドが PHP の場合(TypeScript 以外の言語でもそうですが)、`d.ts` ファイルを共有出来ないため、何かしら別の手段を用意する必要があります。

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

## 用意するもの

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

- [PHPStan](https://github.com/phpstan/phpstan)
- [PHP-Parser](https://github.com/nikic/PHP-Parser)

どちらも `composer` でインストール出来ます。

## 実装

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

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

`formdata.d.ts`

```typescript

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

```

上のコードから `name` の Parameters を取り出して JSON にします。数行程度で実装出来ます。

`types-bridge/src/core.ts`

```typescript
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]);
```

`visit`関数によって型定義の TypeScript AST を Traverse し、該当する `SyntaxKind` を取り出してオブジェクトに格納しています。オブジェクトは後に PHP側 の実装と共有するため JSON として書き出しています。別に JSON じゃなくても PHP 側でも読み込めるファイルであればここは何でもいいです。

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

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

`server/src/shared/http_variables.php`

```php

<?php

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

class HttpVariables
{
    // ~~

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

```

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

```shell
> ./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 による型チェックが通ることをゴールに進めます。

`files` メソッドの `@return` の型はとりあえず以下のように設定しておきます。

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

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

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

`server/scripts/types-bridge-client.php`

```php
<?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-Parser` の `PhpParser\NodeTraverser` を利用して、対象の PHP ファイルから `files` メソッドの PHPDoc Comment を探し出し、`getDocComment` で取り出しています。取り出したコメントは整形した後、`@param` の型に相当する部分を読み込んだ JSON を元に `setDocComment` で置き換えています。

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

```php
<?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 による型チェックは通ります。

```shell
$ 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
<?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);
      }
  })();

```

```shell
$ 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 の `$_FILES` 以外に `$_GET`や `$_POST` でも同様に拡張した型定義があれば `FormData` 以外でも PHP 側に型を流すことが出来ると思います。

実際に実装したリポジトリなどは公開していないのでお見せ出来ないんですが、何か質問やまさかりなどあれば [shuta](https://twitter.com/did0es) までお願いします。


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

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

<iframe src="https://slides.com/did0es/recommendation-of-oss/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

## 意図

僕自身 OSS に関してそこまで大きな成果を残しているわけではないんですが、今後 OSS に関わりたいという人に向けての一助としてこの LT を行いました。

また、抱いていた問題感として OSS を使うだけ使ってそれの良くない点を述べるような記事や発言を目にする機会がまあまああったので、それに対して投げつけるまさかりとしての意図もあります。

想定している視聴者は　OSS に関心があるが何をすればいいのかわからない方です。日常的に OSS に関わっている方からすると浅いと思われる内容も含まれていると思うので、どうぞそのように思った際には [shuta](https://twitter.com/did0es) までご報告ください。

## 概要

冒頭のスライドの補足を行っていきます。

まずこのスライド全体で伝えたいことは以下の2点です。

- 気軽に OSS に関わってほしい
- ただの批評家になるな

### 気軽にOSSに関わってほしい

何か OSS に関わりたいが、どうすればいいかわからないという人向けに作成した LT ということもあり、OSS に関わるプロセスを僕が行った例を提示して述べています。

特に良くない例と良い例を示すことで、具体的にどうやって OSS に関わっていくのかを想像しやすくしています。

### ただの批評家になるな

以下の3枚がこのスライドのまさかりにあたります。

![broad-axe-1](//images.ctfassets.net/fwqvgdqoxfc7/2KWGI7cC0JIiGPuSK0DRE6/186221467692cefc8f17eb649958abef/____________________________2021-06-11_0.17.47.png)

![broad-axe-2](//images.ctfassets.net/fwqvgdqoxfc7/48ebxX25oeZ1X2bcyuZkcr/167039beeedd67f61b9249fa3134365a/____________________________2021-06-11_0.17.55.png)

![broad-axe-3](//images.ctfassets.net/fwqvgdqoxfc7/4pwSnjU7l0IwWNyWFXDsFv/3c926680950e26af0bbd08b3335cbbf6/____________________________2021-06-11_0.18.04.png)

一番伝えたかったのが3枚目で、何かしらの OSS の問題点を見つけたならそれを解決する方向に動いて欲しいということです。何かを批評するのは簡単ですが、それを行動にまで起こせるとさらに学びがあったり、回り回って誰かのためになることもあるので積極的にやってくれ！ということをスライドを通して伝えようとしました。伝わったかはわからないです。

## おわりに

一般エンジニアから見た「OSSのすすめ」ということで LT を行いました。OSS を批評することは別になんでもいいんですが、ぜひ問題感を抱いたなら解決する方向に動いて欲しいです。また「何かしら OSS に貢献したい！」という人がこれを見て「よしやるぞ！」となってくれたのであれば嬉しい限りです。これからも先駆者や創造者に感謝しつつ OSS やっていきましょう。

「OSSのすすめ」というLTを行った

今まで Netlify でホスティングしていたブログを Cloudflare Pages に移しました。以下所感などです。

## 良かった点

### CloudflareのWeb Analyticsが使えるようになった

<https://developers.cloudflare.com/analytics/web-analytics>

こういったアナリティクスを Cloudflare 側から公開した Pages のサイトに導入することが出来ます。

![cloudflare-analytics](//images.ctfassets.net/fwqvgdqoxfc7/6zyuvpXGl4KRfsncR7A93Y/28ea50ef6b954c9ee45798eeebab871a/____________________________2021-05-16_13.18.40.png)

Web Vitals も確認出来ます。

![cloudflare-analytics-web-vitals](//images.ctfassets.net/fwqvgdqoxfc7/4NkhynRRIFFXTOyShsEjW5/77278b0bf67760b651f4223c47f25b2a/____________________________2021-05-16_13.19.54.png)

アナリティクスとデプロイが一体化しているのでさっと確認出来るのが良いです。また今まで Netlify では Google Analytics を使っていたので、外部からアナリティクスのトラッキング用タグをつけるためのスクリプトを読み込んでいたんですがその必要がなくなったのも良かったです。

### QUIC Protocol, HTTP/3に対応した

ご存知の方も多そうですが QUIC は Google による実験的なプロトコルの１つです。HTTP/3 の文脈でよく出てきますね。結構色々なブラウザや CURL が実験的に対応を進めているようなので、そろそろ正式にサポート来るんじゃないかと思って急ぎ目の移行に踏み切りました。

<https://developers.cloudflare.com/http3/#supported-clients>

Cloudflare だと header の `alt-svc` に以下のように `h3-29` が付与されるので対応が出来ます。

![header-alt-svc](//images.ctfassets.net/fwqvgdqoxfc7/2JX2WZsF8kzloGZ3jvqs3I/a52412cfec59a49fb6f39cf22b4bf73f/____________________________2021-05-16_14.16.05.png)

これで Chrome の Experimental QUIC Protocol を有効にすると更に早くブログが表示されるはず...ブラウザの HTTP/3 対応が進んでも慌てなくて済みました。

### 無料枠がNetlifyよりも広め 

1ユーザーの感想という感じですがやっぱり広いと嬉しいです。以下比較です。

Netlify <https://www.netlify.com/pricing>

 ![netlify-pricing](//images.ctfassets.net/fwqvgdqoxfc7/1ayn398Q9ypAXttFaOifQ4/2b152bdd376d29a199be547b110d5777/____________________________2021-05-16_12.57.48.png)

Cloudflare Pages <https://pages.cloudflare.com/#pricing>

![cloudflare-pages-pricing](//images.ctfassets.net/fwqvgdqoxfc7/17nq3YJDqOhn9QNOFv7BXl/059c2c3f74278f00b9dfc9b59033e227/____________________________2021-05-16_12.58.08.png)

Cloudflare Pages はまだ機能が少ない分項目も少ないんですが、~~Build minutes が Netlify の 1.5倍ぐらい余裕があります~~ Cloudflare の方は 500回/月 という書き方でしたね。今の所このブログのデプロイにかかる時間は、 Cloudflare Pagesが1分40秒、Netlify が2分６秒で Cloudflare Pages の方が速いです。なので単純計算 Netlify が150回ビルド/月という感じになっています。使用するフロントエンドのライブラリによってビルド時間は変わるかもしれないので、一概にこっちがいい！みたいなのは言えないですが、割と余裕を持ってWebサイトのホスティングが出来そうです。

## 良くなかった点

### ContentfulのWebhookでビルド出来ない

Cloudflare Pages は CI/CD 向けの API を今の所提供していないので Contentful で記事更新するとビルドする、が出来ないです。以下の Cloudflare Pages についての紹介を見ていると、CI を組まなくてもいいようにしたいよね！みたいなことが押し出されているので、おそらく今後も API 公開はないのかなと思いました

<https://blog.cloudflare.com/cloudflare-pages/>

> Most CI tooling, however, is quite cumbersome, and for good reason — to allow organizations to customize their automation, regardless of their stack and setup. But for the purpose of developing a website, it can still feel like an unnecessary and frustrating diversion on the road to delivering your web project. Configuring a .yaml file, adding and removing commands, waiting minutes for each build to run, and praying to the CI gods at each one that these are the right commands. Hopelessly rerunning the same build over and over, and expecting a different result.  

(現場にはよく CI の神様がいるようです🤔)

が、一応 Cloudflare のコミュニティフォーラムで API 提供する予定はあると言及されていたので動向は追うつもりです。

<https://community.cloudflare.com/t/build-hooks-for-cloudflare-pages/262474>

## その他

### パフォーマンス

移行後、改めて Netlify と Cloudflare Pages でホスティングしたもの両方で Lighthouse を何回か回してみたんですが大差なかったです。Netlify の無料プランでは東京リージョンの CDN が使えないと聞いていたので、初回応答速度とかで結構差がつくかなと思っていたんですがこの規模だとそこまでありませんでした。

どちらを使うかはほぼ好みの領域だな〜という感じですが、ブログぐらいならパフォーマンスはほぼ変わらないので今の所 Netlify の方が deploy hook 組めたりする分いいのかな...ついこの間まで Cloudflare Pages はベータだったので、これから色々充実してくるものだとは思います。

### Next.jsのISRやめた

Netlify でホスティングしていた際ブログのエントリーにアクセスしたとき、今までは ISR でブロクの更新内容が fetch されるような設定を行っていました。これによって Contentful で更新をかけると、ユーザーからのアクセスに紐付いてビルド無しでブログ本体の方も更新されていたんですが、ページ遷移した際のロードが遅くなる原因になっていたのでやめました(`Link` に `prefetch=false` つけてごまかしてたんですが、もっさり具合をどうにかしたい欲が出ました)。結局普通の SSG したものを Cloudflare から配信しています。

また SSG して運用するのと合わせて Next.js の最適化のため `unstable_runtimeJS` オプションも試してみました。 詳しい情報はこちらの PR を見てください。

<https://github.com/vercel/next.js/pull/11949#issuecomment-615140664>

これでトップページは Lighthouse のスコアが満点になりました(Performance が 94 → 100 に上がりました)。

![toppage-lighthouse-score](//images.ctfassets.net/fwqvgdqoxfc7/1FHXTxvju4m7eGaPHX9Lfi/bccb3b4728095241fa5fd21fd08b4b2c/____________________________2021-05-16_12.21.52.png)

## おわりに

とりあえず個人ドメインも全部 Cloudflare に移行完了したので、色々と変更が入るのを待ちながら静的サイトづくりをやっていきます。

ブログをNetlifyからCloudflare Pagesに移行した

今更ながら VJ に入門しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ﾌﾞｨｼﾞｪｰ多分わかってきた <a href="https://t.co/tndDjZSfJw">pic.twitter.com/tndDjZSfJw</a></p>&mdash; Shuta (@did0es) <a href="https://twitter.com/did0es/status/1389143569672273925?ref_src=twsrc%5Etfw">May 3, 2021</a></blockquote>

## 動機

前々から気にはなっていた VJ ですが、敷居が高いというかやるなら時間をかけてじっくりやりたいと思っていたので、ちょうどいい感じにまとまった時間が取れる GW 中にはじめました(とは言ってももう GW 終わりそうですが)。

他の動機として、ちょっと作ってみたい Figma 向けの VJ プラグインを思いついたので、その調査と要件定義も兼ねて VJ ソフトを触ってみたいと思ったのもあります。VJ 入門は VJ ソフトを作るのが一般的(???)みたいなのでやっていきます。これはまた完成したときに別記事で詳しく書くはず

## 使っているもの

- VDMX5
- 適当にインターネットサーフィンで得た動画素材
  - Beeple など
- mac のデフォルトマイク
  - 外部音声出力した音声を取り込んでいる

VDMX 自体はド定番だと思います、みんなが通る道なので歩きやすい。

[VDMX5](https://vidvox.net/)

基本的な使い方とかは YouTube で解説している人(たいてい海外の人なので情報量たっぷりマシンガントークの英語)の動画を見様見真似でやってます。若干 UI とかは変わってても、やってること理解するように心がけるとサクッと出来ました。過去に DTM もちょっと真面目にやってたので、LFO あたりの音声を扱う部分は結構勘でもどうにかなりました。

VJ 入門で1番敷居になったというか困ったのが動画素材でした。色々と調べまわった結果、入門には [Beeple](https://www.beeple-crap.com/vjloops) の動画を使う感じになりました。CC ライセンスなので、割と使い勝手が良さそうです。ちなみに Beeple の音源 zip ファイルを解凍するとき、macOS Catalina 10.15.7 だと Finder では何故か失敗して unzip だとうまく出来ました。なにかの参考にどうぞ。

## やったこと

冒頭のツイートにある 20 秒程度の動画では以下のことを試しました。

- レイヤーの加算
- crossfade
  - crossfade で切り替わるときの FX 適用
- その他動画への FX 適用

### レイヤーの加算

はじめは 3 つレイヤーを作って加算していましたが、途中で crossfade やりたいな〜と思ったので 2 つに減らしました。

以下のようにレイヤーごとにプレビューや FX 適用のパネルを作っています。

![two-movie-layers](//images.ctfassets.net/fwqvgdqoxfc7/77Otqr6C3wKelKIk6RyZAY/fd009b69db09bbf5ab5c7f7a67ebe900/____________________________2021-05-03_18.56.59.png)

ここらへんの動画を参考にしました。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_REPObNVc_0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

opacity を入力音声に紐付けると 0 ~ 1 の範囲で加算される感じです。

### crossfade・切り替わるときに FX 適用

opacity を変える方針だと、画面がかなり眩しいのと動画がごちゃごちゃしてあまり良くなかったので crossfade に切り替えました。

この記事を参考に crossfade と切り替え FX を作成しました。

[最近よく使うVDMXの切り替えエフェクトを共有](https://osirasekita.wordpress.com/2018/01/18/%E6%9C%80%E8%BF%91%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86vdmx%E3%81%AE%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E5%85%B1%E6%9C%89/)

以下のように LFO の波形をいじって、切り替わる瞬間に画面が揺れるようなエフェクトを作っています。

![lfo-crossfade](//images.ctfassets.net/fwqvgdqoxfc7/78QuzLpVlJnlGktxwvoeQw/4206b09bf7ed7fd54d2e0a8d70e361fb/____________________________2021-05-03_18.09.00.png)

細かい部分ですが、入れるだけでかなりダイナミックな感じになって良いです。

他に入力音声の周波数の低音成分の変化をトリガーに、動画を10秒ずつ前後させる automation も付与させてドロップでの動きを増やしつつ、何度も同じ画面が映らないようにしています。

### 動画への FX 適用

Beeple の素材そのままで使うのも面白くないので、色々と FX を試してみて良さそうなものを使いました。

![movie-fx](//images.ctfassets.net/fwqvgdqoxfc7/3YvfAW31nuebs04EecRCd5/4c46b6180daa5d9428bc656765bdd6dd/____________________________2021-05-03_19.09.20.png)

VDMX では個人的に Mirror が気に入っています。中央を縦向きに分割して鏡写しにするような FX です。また Blur 系は始めの方よく使っていたんですが、 輝度を変えるとかなりぼやけてしまって良くなかったので opacity で調整するようにしています。他に Hue や RGB 値をいじって 動画の色味を近づけてみたりもしました。

## 今後

VDMX は今の所 VJ 入門用として無償版を使っているんですが、有償版にアップグレードしてしまってもいいかなと感じました。やっぱり保存出来ないのつらいです...。こういうソフトでちまちま GUI いじるのが好きなのでより深めていきたいです。有償版に上げたら MIDI 入力デバイスで動画を変化させてみたり、自作のシェーダーを FX に適用したりあれこれやってみようと思っています。

また動機で少し触れたように Figma 向けの VJ プラグインの方も実装着手していきたいと思います。まだ着地点が見えないのでどうなるか自分でもわかりませんが、実用的なプラグインになるように VJ の知見を集めつつ進めていきます。


VJに入門した

## 背景

最近意図的に映画を見る時間を取っている。

映画を無性に見たくなったからというわけではなく、人の話についていきたいから倍速で見ることもなく、映画を見ている間は別のことをやらない時間にして強制的に休息を取るために始めた。本を読んだりゲームで発散したり、趣味でなにか作るとかでも良かったが、あまり集中しなくても出来ることを選んだ。

というのも去年の冬ぐらいに受けていた仕事でオーバーワーク気味になり、精神的に参っていた時期があったためそれの解消を図った。毎日休日込みで長時間作業していると他のことが手につかないのもあるが、好きでやっていたコードを書くことが嫌いになりかけたのが1番つらかった。時間がない・タスク山積み・非同期的なコミュニケーションで毎日問題が発生(これが1番デカい)の三重苦で、常に緊張した感じが続いており、コードを書くことを楽しむみたいな気持ちがどこかへいってしまった。

楽しさを求めてやっていると言うと「仕事をなめるな！」って言われそうだが、自身の行動の原動力がそれなので失うと非常に困った。技術を追う気力もそこから出てくるので、しばらくインターネットすら開きたくない、みたいな状態になっていて(Slack と Gitlab 以外本当に開いていなかった)結構まずかった。紆余曲折あり今年になってようやく落ち着いて他のことを考えられるようになったので、時間を捻出してでも余裕を持って動こうという感じになった。

結果まとまった時間を別のことに使う前提で予定を組むと、精神的に余裕が出たのでかなり良かった。追い込まれながら作業するのもハードトレーニングみたく、成長を促すのには必要なときもあるが、やりすぎると心身に悪い影響が出るので適度に抑えた方が良いと思う。

なにより楽しむ気持ちが戻ってきたのが1番安心した。あと日頃映画を見に行く習慣がほぼなかったので、異文化交流みたいな感じで色んなものに触れられたのも新鮮で良かった。

以下見た映画に対して感じたことや思ったことをまとめておく。

## 最近見た映画

Netflix か Prime Video に上がっている洋画を字幕付きで見ていた。ついでに英語力上げるぞ〜とか思って最初は字幕付けてなかったが、疲れてすぐに付いているのに変えた。

### インセプション

前情報なしで見ていたがレオナルド・ディカプリオとか渡辺謙、あとダークナイトのロビンの人(名前忘れた)が出てて、もしかしてかなり有名なやつ？ってなった、有名っぽい。前半折り返すぐらいまでずっと渡辺謙が悪役だと思っていた。あとヒロインが友達に似ててそればっかり気になった。

冒頭で迫真の日本語が聞こえてくるので一瞬間違って吹替版を見ているのかと思った。お使いの設定は正常です。見始めると渡辺謙の英語がかなり流暢で羨ましくなった。

映画としてはアクションシーン多めSF。基本夢の中の話なのですごい形になった建物とかが出てきて、耐震基準考慮なしで設計するの楽しいだろうなと思った。夢の中でやりたい放題するみたいなのはよくあるけど、現実と区別がつかなくなってくるみたいな描写がよかった。はじめはやらかしたらおしまいみたいな緊迫したシチュエーションだが、結局色々やらかして後半面白くなっていく。自分も夢でやりたい放題するときはトーテム用意しようと思う。

### インターステラー

SFもの。アルマゲドンみたいな感じかと思っていたが、まさかのサスペンス要素がある。ただのSFだとウケないのでSFも色々進化してきたっぽい。SFと同時に家族の愛情を描いた(かなり主人公が不憫な)作品でもあるので、将来また見返したら面白いのかもなとも思う。

人間が知らない想像を超えた部分がテーマなので、結構ダイナミックな描写が多い。1個目の惑星のデカい津波のシーンとか、自分がその場にいたら相当パニックになって固まりそう。まあどの星にいってもそれなりにパニックになるとは思う。惑星での1時間が地球上では何10年に相当するし。

途中主人公がブラックホールに突っ込んでからは抽象的な話が続くが、前半の謎の描写の答え合わせになっている。5次元なので何でもアリらしい。どう終わるかなと思っていたけど、割ときれいに幕引きされたのであと残りなくてよかった。多分あの準ヒロインみたいな博士は助かる。

気になったところとして人が住めるほどのコロニーを作るのって、人間が滅びかけの状況だとほぼ不可能に近くないかと思う、単純に人手が足りなそう。無人機にやらせるのかな、建築別に詳しくないのでただの憶測だけど。あと地球から離れることになるので、相応の発電設備とか水とかを確保する仕組みが無いと、コロニーが作り上がったとしても永住は出来なさそう。作品の中では特に触れられていないので、まあ当然のごとく出来る仕組みはあるっぽい。原子力か反物質使った何かかな。

他に宇宙飛行士とそのサポートをするロボットの会話が面白かった。僕も最後の最後まで軽口を叩いて終わっていきたい。

### オーシャンズ シリーズ

シリーズが 11 から始まるのを知らなくて、8 から先に見ようとして危なかった。とりあえず11 → 12 → 13 → 8で見た。

強盗しながらほぼ常に何か口の中にいれてもぐもぐしているブラッド・ピットを見る映画。もの食ってるだけでかっこいいブラッド・ピットずるすぎる。他にジョージ・クルーニーなど、ろくに洋画見ていない自分でも知っている人が出てきた。

強盗といっても銃撃戦みたいなのはほぼなく、ルパンの次元五右衛門抜きみたいな感じ。とにかく考えてものを盗む。盗む目的も金を荒稼ぎ！みたいな動機だけではなく、盗む計画を立てることを楽しんでいる感じがする。どの回見てもおもしれーってなるけど自分は 11 が好き。なおオーシャンズ8はほとんど違う作品になっているので注意、もぐもぐするブラピは見れなかったのでちょっと残念。でもアン・ハサウェイがめちゃくちゃ目の保養になったのでなんでもいいです。

### シャーロック・ホームズ

昔小説で読んだような気がしていたが忘れたのでほぼ初見だった。1作目はワトソンとシャーロックの連携の取れた謎解きが見れるが、2作目からはシャーロックが廃人になる(ワトソンとグダグダ連携謎解きはやっている)ので純粋にワトソンが大変そう。後半で復活する。

探偵もので謎解きがメインの印象があったが、映像化すると結構派手でアクションとしても映えるんだなと思った。分類するとコメディのジャンルにも属する気がする。機関銃にシャーロックがパクってきた口紅入れたりするし。

1作目か2作目か忘れたけど、どちらかで出てきた「闇の力〜」とか言ってた独裁者崩れみたいなのが痛くてよかった。ちょっと時代設定が古いから魔法(科学)使いみたいな立ち位置なのかな。

まだドラマシリーズ見ていないので完結してそうだったら見る。

### ジョン・ウィック

圧倒的な弾数でどうにかするタイプのキアヌ・リーブス。ジャンルとしてはアクションがメイン？ヤクザ映画みたいなのとはちょっと違うと思う。

マトリックスみたいに弾は避けない(そもそもほぼ当たらない)、当たる時はだいたい脇腹に食らう、痛そう。モブの弾が本当に当たらないので、多分主要人物以外銃のバレルが曲がっているんだと思う。とにかくキアヌ・リーブスの銃撃戦が見たい！って人におすすめ。

復讐の復讐みたいな感じで次の作品に続いていくので雪だるま式に敵が増えていく。3作目(パラベラム)の掟に歯向かった後に出てくる寿司屋がめちゃくちゃ強い、でも増えた敵は全部倒す。なんだかんだ今年新作が出るらしいのでちょっと楽しみにしている。

### 天使と悪魔

1作目がダ・ヴィンチ・コードらしい、これ見た後に知った。ダ・ヴィンチ・コードは多分みたことあるけど覚えてなかった、けど普通に楽しめた。

ミステリーにSF(科学)・宗教を突っ込んだ何でもアリ作品。本当にバチカン市国で撮影していたっぽくて、あの面積淡路島の国にめちゃくちゃ教会が存在するんだなと思った。バチカンの風景キレイだなーと思っていると、急に残忍なシーンが出てくるので油断できない。

SF要素として何故か反物質が出てくる。後々教会との関わりで、科学側の教会(宗教)への報復としてとりあえず爆発させようとしてくる。ラストは正義マンです！みたいなやつがダークナイトよろしく空に反物質爆弾持っていって爆発、なぜか助かるところまでダークナイトと同じで面白かった。

インフェルノが続編なので近々見ようと思っている。

### パラサイト

最近見た中で1番面白かった。場面がサクサク切り替わって進んで行くにつれて、渦中の家族が狂っていくのがよかった。家庭教師の長男と生徒の恋愛があんなにサクサク進むものかなとは思ったけど、あれぐらいテンポよく進むと見やすい。計画を立ててうまくいって、調子に乗ってやらかす展開がきれいに起承転結って感じなのもよかった。ラスト手前の地下から無敵の人が出てきて、全ておしまいです！という感じが潔い。

韓国の作品は触れるとしても最近の音楽ぐらいしかなかったが、映画もかなり押していて勢いがあるなと感じた。映画内の演出だと富豪と貧民の対比が地上と半地下以外にも、カメラワークとか家族の位置関係で表現されている場面があって、細かいところまで手が込んでいるなと思った。映画ポスターのデザインも大胆で日本っぽくなかった(日本版のポスターでは日本の映画ポスターです、になってしまったけど)のもよかった。

あとはスイスの民家に核シェルターが搭載されている話は有名だが、韓国でも似たようなものを持っている層もいるんだと思った。そして大体ワインセラーとか知らない人の住処(?)とかになっている、平和は良いですね。

### マトリックス

主演の好青年がキアヌ・リーブス。本当に？ってなるぐらい好青年。背中床すれすれで弾を避ける例の作品。

キアヌ・リーブスは銃撃ちまくっている印象が強かったが、マトリックスでは割と武道にも打ち込んでいる印象だった。ラスト付近は異世界転生みたいになるので、何でもアリなキアヌ・リーブスが無双する(ので、1作目以外は見ていない...展開の予想がつくので気が向けば見る)。

大学の教授がなにかと授業のネタに使うので、ほぼネタバレされた状態で見ることになったがそれでも面白かった。だいたい自分が生まれたぐらいの時代に作られた映画なので、ガラケーがバリバリ現役でやっていて感動した。他に未来の発明みたいな感じで、侵襲性のある BCI みたいなデバイスが出てくるが、脳に挿して抜いて繰り返すので衛生面大丈夫か心配だった。

また作中で EMP が出てくるが、手に持って投げる爆弾ではなく思いっきり船から放出みたいな形だったので豪快だった。

## おわりに

週1 ~ 2ぐらいの頻度で映画見て休息を取るのおすすめです、目が疲れるけど。

見たものを言語化しておきたいためにこの記事を書いたのでまた更新するかもしれない。


毎週映画を見る時間を取るようになった

React+WebGL で SPA の何かしらを作る際のテンプレートを作りました。あらゆるものから逃げます。

![react-twgl-boilerplate](//images.ctfassets.net/fwqvgdqoxfc7/2IDcY3KwIb3AoRWy5byEgE/512ffd86f07ef7c4068e5fce229265a4/react-twgl.png)

リポジトリは [こちら](https://github.com/shuta13/react-twgl-boilerplate)

Netlify にプレビュー的なの放り投げたので見たい方はこちらもどうぞ。

<https://did0es-react-twgl-boilerplate.netlify.app>

## 構成

React を使いつつ、CRA を使わず webpack のコンフィグを書いています(どうせ eject するので webpack から書いた)。

- React (17.x)
- Webpack (5.x)
- Babel (17.x)
- TypeScript (4.x)
- [Linaria](https://github.com/callstack/linaria#readme) (2.x)
- [Universal Router](https://github.com/kriasoft/universal-router#readme) (9.x)
- [TWGL.js](https://github.com/greggman/twgl.js#readme) (4.x)

## 何から逃げたのか

まず前提として純粋なSPAを作りたいと思ったので、 Next.js は使わない方針でいきました。  Next.js は SSG/SSR するときの踏み台にしたい気持ちがあります。

以下のものから逃げました。

- react-router
  - 代用: universal-router
- three.js
  - 代用: TWGL.js
- CSS Modules, styled-component
  -  代用: linaria

## 逃げた理由

### react-router

react-rouer は使う時に手の届かないところがあるとか、破壊的変更を繰り返しているのでついて行くのに疲れたからといった感じです。あとは universal-router を試してみたかった気持ちもあります。SPA でページ遷移を表現するには history とか location 周辺を自分で書く必要があるので、そういった部分の学びになりました。

完成したものが以下のリンクから見れます。isomorphic さはそこまで求めていなかったのですが、path-to-regexp でかなりシンプルな Router ということで使い勝手が良さそうというのが所感です。

[react-twgl-boilerplate/src/routes](https://github.com/shuta13/react-twgl-boilerplate/tree/main/src/routes)

### three.js

以下のように非常に苦しみました。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr">... <a href="https://t.co/0q4W6PPK3K">pic.twitter.com/0q4W6PPK3K</a></p>&mdash; Shuta (@did0es) <a href="https://twitter.com/did0es/status/1355506728507371520?ref_src=twsrc%5Etfw">January 30, 2021</a></blockquote>

~~バンドルサイズを減らそうと思ったのですが tree shaking がまともに出来ない~~ webpack の plugin で tree shaking は出来るみたいなんですが、平面に GLSL 描画するだけにしか three の用途がなかったので、もう少し軽量な TWGL に逃げることにしました。

以下は React で TWGL.js を使う際のコードです。

```tsx
// sourced from http://twgljs.org/examples/tiny.html

import {
  createBufferInfoFromArrays,
  createProgramInfo,
  drawBufferInfo,
  resizeCanvasToDisplaySize,
  setBuffersAndAttributes,
  setUniforms,
} from 'twgl.js';
import { css } from '@linaria/core';

export const Canvas: React.FC = () => {
  const onCanvasLoaded = (element: HTMLCanvasElement) => {
    if (!element) return;

    const gl = element.getContext('webgl');

    if (gl == null) return;

    const programInfo = createProgramInfo(gl, [
      require('./shaders/vertex.glsl').default,
      require('./shaders/fragment.glsl').default,
    ]);

    const arrays = {
      position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
    };
    const bufferInfo = createBufferInfoFromArrays(gl, arrays);

    function render(time: number) {
      if (!gl?.canvas) return;

      resizeCanvasToDisplaySize(gl.canvas as HTMLCanvasElement);
      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

      const uniforms = {
        time: time * 0.001,
        resolution: [gl.canvas.width, gl.canvas.height],
      };

      gl.useProgram(programInfo.program);
      setBuffersAndAttributes(gl, programInfo, bufferInfo);
      setUniforms(programInfo, uniforms);
      drawBufferInfo(gl, bufferInfo);

      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
  };
  return <canvas className={wrap} ref={onCanvasLoaded} />;
};

const wrap = css`
  width: 100%;
`;

```

WebGL API を叩いたときほど書く量は減ったのではないでしょうか。 three ほどライブラリの容量もないので快適です。

**three の軽量化について**

試してはいないんですが調べるだけ調べました。

[Three.js の issue の discussion](https://github.com/mrdoob/three.js/issues/16059) とか、 [この記事](https://note.com/unshift/n/n933f0f4a2cbe) (日本語です) を見てもらうとわかるんですが、`import { Foo } from 'three'` をしても three.js 全体を読み込んでしまうので、デフォルトで tree shaking は機能しません。

こういった状況を打開するため、 webpack / rollup 向けの [three-minifier](https://github.com/yushijinhun/three-minifier) という plugin があるようなので、どうしても three で tree shaking をしたいなら試してみるといいかもしれません(`THREE.WebGLRenderer` 単体のサイズが大きいので、 tree shaking した恩恵をあまり受けられないような気もしています)。

**他に three を使わなくなった理由など**

three 本体の動きとして、[型定義を削除したPRがマージされた](https://github.com/mrdoob/three.js/pull/21174) ことがあり、若干の不信感が募っていました。

> The side effect of that decision was a considerable increase on maintenance burden and made things harder for new contributors too. For the sake of continuity of the project I think it's best to move them back to DefinitelyTyped (or any other repo interested in maintaining them).

[Mr.doob](https://twitter.com/mrdoob) 氏曰く、とにかくメンテが辛かったので負荷を減らしたかったらしいですね。お疲れさまでした。

three の型はもういいとして、平面に GLSL を描画する以外のことがしたくなったらまた戻ってくるかもしれないですが、しばらくは TWGL 使うつもりです。

### CSS

CSS が JS のランタイムに組み込まれるのは嫌なんですが、 CSSinJS はやりたかったので linaria を使いました（CSSはファイルとして読み込んでほしい）。

## おわりに

Next.js に頼らないかつ最小の構成で React + WebGL を組みました。その他の疑問点や展望については以下のとおりです。

- 画像最適化
- 適切なチャンク分割
  - かなり雑にやった
- GLSL ファイルを読み込むための raw-loader
  - 他に良さそうな loader があるならそちらに移行
- 動的な routing 対応

まだ劣化 Next.js に WebGL の環境のせましたという感じなのでここらへんやっていきます。


あらゆるものから逃げるReact+WebGLテンプレートを作った

Contentful からの デプロイ を無くし Netlify のビルドリソースを節約することで、無料枠を使い切る心配を減らすといった、ブログ記事執筆のモチベを損なわない方法です。

## 前置き

ブログのように記事を API として Contentful から受け取り Netlify で SSG としてビルドする際に、 *Contentful の Netlify 用 Webhook を作成 -> publish するとデプロイ* といった運用を行うことがあります。

このような運用において

- 記事を新たに作成
- 誤字脱字の修正
- 内容の更新

などの編集を繰り返すと Webhook による デプロイのため、Netlify のビルドリソースを使い切りそうになるような状況が起こり得ます。特にブログ自体を作成している途中であれば、コード自体の push 量もそこそこにあるため、 Netlify のビルド上限には注意する必要があります。

この状況を Next.js の ISR によって対策することを試みたので、その結果と得た Netlify での ISR についての知見をまとめました。

## 対策の結果

- Contentful の Deploy Webhook は必要なくなり、 Netlify のビルドリソースの節約は達成
- しかし、問題として **Netlify では ISR が行われない** ことがわかった
  - 前回のアクセスから `revalidate` で指定した時間後再度アクセスがあると、取得されたデータを元に**ページ全体**の再レンダリングが行われる
  - Netlify では ISR が SSR と似た挙動になる
  - ISR による UX 改善という名目ではほとんど効果がない

以上のように見た目はエラーなく動作はしていますが、思った ISR の挙動と違ったためそのことについても触れていきたいと思います。

## 実装

Netlify での ISR の挙動に触れる前に、このブログにおける実装についてです。 

[Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) のとおり、 `getStaticProps` 内で`revalidate` を指定します。僕は `revalidate: 60` で設定しています、あまり短すぎるとサーバーへの過負荷の原因となる場合があるので適宜長さは調節してください。

ブログのトップページのコンポーネントです。

[src/pages/index.tsx](https://github.com/shuta13/appearance-none/blob/main/src/pages/index.tsx)

```tsx
export const getStaticProps = async () => {
  // Contentful から記事のデータを取得
  const entries = await client.getEntries<Slug>();

  if (entries != null) {
    // revalidate を設定
    return { props: { entries }, revalidate: 1 };
  } else throw new Error();
};
```

続いてブログ記事のページとなるコンポーネントです。こちらでも同様に `revalidate` を指定しつつ、`getStaticPaths` の `fallback` を `'blocking'` にします。

[src/pages/entry/[slug].tsx](https://github.com/shuta13/appearance-none/blob/main/src/pages/entry/%5Bslug%5D.tsx)

```tsx
// -- 省略 --

export const getStaticProps = async () => {
  const entries = await client.getEntries<Slug>();

  if (entries != null) {
    return { props: { entries }, revalidate: 1 };
  }
};

export const getStaticPaths = async () => {
  const entries = await client.getEntries<Slug>();

  if (entries != null) {
    const paths = entries.items.map((item) => ({
      params: {
        slug: item.fields.slug,
      },
    }));
    // fallback は blocking に
    return { paths, fallback: 'blocking' };
  } else throw new Error();
};
```

`fallback: 'blocking'` を指定するとエラーページを返さなくなるので、同時に関数コンポーネント内にエラーページを返す処理を記述します

[src/pages/entry/[slug].tsx](https://github.com/shuta13/appearance-none/blob/main/src/pages/entry/%5Bslug%5D.tsx)

```tsx
const BlogPost: React.FC<Props> = (props) => {
  const { entries } = props;
  const router = useRouter();
  const { slug } = router.query;

  const article = entries?.items.reduce((prev, cur) => {
    if (cur.fields.slug === slug) return cur;
    return prev;
  });

  if (!article || !article?.sys.id)
    return <ErrorPage statusCode={404} message="not found" />;

  return (
    <>
      <Head>
        <script
          async
          src="https://platform.twitter.com/widgets.js"
          charSet="utf-8"
        />
      </Head>
      <Template
        {...article}
        metadata={((article as unknown) as { metadata: Metadata }).metadata}
      />
    </>
  );
};
```

[コード全体](https://github.com/shuta13/appearance-none)

### その他設定など

Netlify 側の準備は特に必要はありません。 Next.js のデプロイの際、今までは next-on-netlify をインストールする必要があったのですが、Essentials Next.js として自動でインストールされるようになりました。

[Try the new Essential Next.js plugin, now with auto-install!](https://www.netlify.com/blog/2021/03/16/try-the-new-essential-next.js-plugin-now-with-auto-install/)

ビルドコマンドもそのまま `next build` で、公開ディレクトリも `out` のままで大丈夫です。

裏では Serverless として Lambda ベースの Netlify Functions に保存され、ISR という名の SSR のような処理が行われ始めます。Contentful の Deploy Webhook は必要なくなるので削除しましょう。

これで Contentful から publish を行っても Netlify でビルドは走らず、前回のアクセスから1秒以上あとにブログへアクセスすると内容が更新されます。画面全体ごと...

## 余談

### なぜ Netlify で ISR が出来ないのか

Netlify における Next.js の ISR が完全に行われないことについてです。

少し過去の記事にはなりますが Netlify のブログにおいて 、ISR は SSR と同じ処理が行われると明言されていました。

> For Incremental Static Regeneration, we currently server-side render those routes. We have some development in the works for caching those pages and including fallback pages, as well. When the additional functionality is added, you won’t have to make any code changes to see the benefits.

[Announcing one-click install Next.js Build Plugin on Netlify](https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/)

またこの仕様の明言と合わせて、ISR でページ全体を更新する理由について Netlify は2021年3月に公開された記事内で以下のように言及しています。

> Currently, ISR is built in to Next.js, and we serve those unbuilt pages via Netlify Functions, rendering them new every time, to avoid that caching problem. This isn’t the spirit of ISR, yes, but we are strongly in favor of atomic and immutable deploys. There are better ways to approach your sites than with this type of caching.
> 
> We have solutions coming in the future to serve these kinds of unbuilt pages in a better way, keep an eye on this space!

[Incremental Static Regeneration: Its Benefits and Its Flaws](https://www.netlify.com/blog/2021/03/08/incremental-static-regeneration-its-benefits-and-its-flaws/)

Netlify は ISR やそれのベースの手法である `stale-while-revalidate` のメリット・デメリットを挙げ、その上で Next.js で ISR を有効にしてもページ全体をレンダリングし直す対応を選んでいます。

Netlify には Netlify の考えがあるように、結局 Vercel 以外で Next.js の ISR を行うのは現状難しそうだな...という感じがしています。Vercel 以外で ISR は行えるのかについて議論されている zenn の記事を見つけたので、気になる方は目を通してみてください。

[Vercel以外でNext.jsのISRをできるのか問題](https://zenn.dev/catnose99/scraps/f1c9a98c5651f1)

また Netlify について、後者(最新の方)の Netlify のブログにあるように、今後 ISR 周りでの対応(もしかすると ISR とは関係のない方法かもしれません)を新たに行うようなので動向に注目といったところです。

## おわりに

Contentful の Deploy Webhook を使わないことで、ビルド待ち時間の削減やリソースの節約に繋がり開発する側にとってはプラスになります。その一方で Next.js の機能はやはり Vercel でのホスティングを前提とするため、他のサービスでは期待したように動かないかもしれないということを考慮する必要がありました。

僕はしばらく Netlify でこのブログをホスティングするつもりなので、もし Next.js + Netlify でページのレンダリングを動的に、1秒でも速くする方法知ってるよ！って方は教えていただけると嬉しいです。


Next.js の ISR/SSR で Contentful から直接 Netlify にデプロイしないブログ運用

ブログを始めました。

## きっかけ

今までは [scrapbox](https://scrapbox.io/did0es/) に

- 備忘録
- 月報
- 誰かに影響された記事としてだったり(スキルマップとか)
- その他雑念

を思い立ったときに書いていました。

最初は技術とかマメにタグ付けで分けていたんですが、段々と誰も見ないだろ〜って思いになってきて雑に書き捨てる、みたいないわゆる「チラシの裏」として使い始めたことを「あれ、これまずいんじゃないか...」と思い始めたのが主なきっかけです。

誰にも見られてないと思って適当に文章を書く癖がつくと、日常会話での発言も適当になっていつか墓穴を掘りそう。という一種の恐怖が最近になって出てきました。なのでこうしてブログを作って周りに見え(やすくな)るようにしようと対策に打って出ています。改善後に期待ですね。

後付けにはなるんですが他にブログを作る動機として、書くことは技術だけに限りたくないのでナレッジ共有サービスは使わない、あとはツイッターに長文を流したくない、で行き着いた先がブログ形式だったみたいなのもあります。あと数年前にも一度ブログを作ったんですが、その頃はかなりお粗末な静的サイトになってしまい更新する意欲が失せたのでそのリベンジ。

did0es とかいう自分ですらどう読むのかもわからないハンドルネームの人間が、何を考えているのかをインターネットに残したい。そんな思いが `{ appearance: none }` には込められています。

## 技術など
これだけでもいろいろ書けそうなので、得た知見で使えそうなものは別記事に回したいと思います。

以下ざっくり概観です。

### 使ったもの

- Next.js
- Contentful
  - Notion API のベータテスト参加できればそっちにいくかもしれない
- Netlify
  - Cloudflare Pages も試してみたい

SSG が出来てブログ記事を CMS で管理できる、 **Wordpress が付いてこない**ものであれば何でもいいな〜と思いながら自分の好きなものを選んだ感じです。

ホスティングが Netlify なのはドメインの移行が面倒だったから、というだけなのでそのうち Cloudflare Pages に移行するかもしれないです。てっきり S3 とかに上げるみたいに CI 上からデプロイをやるのかと思っていたら、ちゃんと管理画面らしきものがついていたのでこれは期待。 

Next.js を選んだ理由については僕の好みです。はじめは Gatsby 久々に使って組むかーと思っていたんですが、 かれこれ1年ぐらい触っていない(最後に触ったのが業務でブログ組む時で、納期がやばくてあまり知識を深められなかった...)という言い訳で、同じ React で SSG が出来る Next.js にやってきたという感じです。 Next.js 自体は TypeScript サポートが来たぐらいから触っていました。どんどん進化するので楽しみです、Vercel 一体何者なんだ

あとは [Next.js の ISR](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) も一部で試しました。

ISR 自体の軽い説明なんですが、ユーザーからアクセスがあった場合あらかじめ生成したページを返し、指定した時間経過後はユーザーからアクセスがあった時に、キャッシュしていたページを返しつつデータ(このブログの場合だと記事)を取得。取得したデータだけ次回以降のアクセスでビルド&再レンダリングして返すといったようなものです。取得したデータだけをビルド&レンダリングするのがミソだと思います。

詳しくは Next.js の docs や [こちらの Qiita の記事](https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed#%E6%99%82%E9%96%93%E3%81%AE%E7%B5%8C%E9%81%8E%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%81%B8%E3%81%AE%E5%AF%BE%E5%BF%9C) にわかりやすくまとまっていたのでご参考にどうぞ。

~~これによってブログの記事を更新して publish したときに webhook でビルドする必要がなくなったので、 Netlify の上限を気にしてヒヤヒヤすることもなくなりました。やったね~~ 結局 Netlify では ISR が想定どおりの挙動にならず、あまりやったねとはならないことがわかりました、[こちらの記事にまとめています](https://blog.did0es.me/entry/nextjs-netlify-contentful-without-deploy)

ただ、新しく記事を作った際に `rss.xml` が更新出来ない(デプロイ前にスクリプトで生成するため)課題が残っています。もういっそこのファイルだけ別のところに置いてしまおうかな...何か良い方法があれば教えて下さい。

Contentful は初めて触りました。ブログ記事を溜め込むだけなので特に変わったことはしていません。ただのボヤキになるんですが、ブログ本文を Rich Text にしたら

- strike-though や code block のパースはデフォルトでサポートされていない
  - Contentful 製の [rich-text-react-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer) の話です
- Contentful のエディタが code block -> plane text の切り替えで日本語入力バグる

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ウオオcontentfulのエディタcode block -&gt; plane text切り替えるとバグる<a href="https://t.co/YVUTcxnBqA">https://t.co/YVUTcxnBqA</a></p>&mdash; Shuta (@did0es) <a href="https://twitter.com/did0es/status/1375250540339159041?ref_src=twsrc%5Etfw">March 26, 2021</a></blockquote>

ということで Long Text にしました。Long Text だと普通のマークダウンで書けるのでそこまで不自由はない、というよりも慣れたブログの執筆画面になったので良かったです。

## 構成
Contentful で記事を書いたら Netlify から配信するだけです。 前述したとおり ISR で記事の更新が反映されていくので、特に記事の内容周りの操作に関してはビルドの必要はありません。

Markdown の React Component 化は react-markdown でやりました。ソースコードのハイライトは react-syntax-highlighter の Prism を使っています。一般的な Next.js でブログ組んだ！みたいな構成になんだかんだ落ち着いた印象です。長いものに巻かれていきます。

その他について気になる方は [こちら](https://github.com/shuta13/blog) からご覧ください。

## おわりに

結局書くことは技術の話題に偏りそうですが、以上よろしくお願いします。

はちみつチーズ豆腐

目次

感想