技術 | Narumium Blog

Typescriptの型指定を無視する

gl-react でお絵描き的なことをしようとしてて、Typescript の型チェックが通らない値を設定する必要が出来た。

型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。

考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。

Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。

import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。

next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。

これまで GLSL（とほんの少しのHLSL）を書いてましたが、フラグメントシェーダーしか書いていないことに気づいた。

もう一つの頂点シェーダー（バーテックスシェーダー）にも触れてみたい。

サンプルは全然見つからないし情報自体が少ないので　gl-react のソースを見ながらバーテックスシェーダーの動作を確認します。

今回は基本的な確認までです。

URLは 2000 字程度まで使えるのでパラメータで色々渡すことが出来ます。

ただ共有に不便にはですし、ツイッターなどの文字制限があれば載せることが出来ません。よく見かける bitly を使ってみます。

アカウント作成から API で短縮 URL を作るまで。

前回 sitemap.xml を作成しましたが、Vercel（旧 Zeit / now）でうまく動かなかったので原因と解決方法を追記しておきます。

自サーバーで動かす分には問題ないです。

Next.js でサイトマップを作る方法を探してみたけど、情報が全然出てこなかったので見つけた情報をつなぎ合わせてサイトマップを自動作成します。

sitemap.xml（サイトマップ）は検索エンジンにサイト内のクロールするWebページを教えるためのファイルです。なくても検索結果に出ないわけではないですが、現在だとあるに越したことはないくらいの印象。

Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。

マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。

WEBページを作る際に外部 API を使いたいことがあります。

Next.js で外部API を叩く際にどうするか整理したので覚書き。

前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。

今回は基本的に GLSL のコードサンプルになります。

応用すると音と画像から新しい動画を作れるようになる。

まずは、音を元に canvas を書き換えてみます。