React-Markdownで見出しタグを変更する

react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。

具体的には Material UITypography にしたい。

javascript でも問題ないですが Typescript 前提で書いています。

続きを読む React-Markdownで見出しタグを変更する

【GLSL】バーテックスシェーダーに触れる

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

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

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

 

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

続きを読む 【GLSL】バーテックスシェーダーに触れる

短縮URLの作成とAPI利用【Bitly】

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

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

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

続きを読む 短縮URLの作成とAPI利用【Bitly】

Next.js+Vercelでsitemap.xmlを用意する

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

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

続きを読む Next.js+Vercelでsitemap.xmlを用意する

Next.jsでsitemap.xmlを用意する

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

 

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

続きを読む Next.jsでsitemap.xmlを用意する

Next.jsで外部APIを叩く3つのパターン

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

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

続きを読む Next.jsで外部APIを叩く3つのパターン

【React / GLSL】音の波形をGLSLで色々表現する

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

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

続きを読む 【React / GLSL】音の波形をGLSLで色々表現する

【React / GLSL】音の波形を canvas に描画する

canvas の描画を動画にして保存したり、 動画に音を付けたりしました。

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

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

続きを読む 【React / GLSL】音の波形を canvas に描画する

react-dropzoneの紹介と実装サンプル

Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。

シンプルに使える上にできることが多い。

 

フレームワークとして Next.jsMaterial UI を使っています。

サンプルコードを少し変えつつ動かしてみます。

続きを読む react-dropzoneの紹介と実装サンプル

Next.jsをvercelにデプロイする

VercelNext.js プロジェクトをデプロイします。

公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。

実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。

続きを読む Next.jsをvercelにデプロイする