Next.jsのexport機能でSSG（Static Site Generation）して、Firebaseでホスティングします。
思い付きをサクッと見れる状態に持っていけるので便利です。
用途的にはGatsbyの方が向いていますが、慣れの問題からNext.jsを使います。
また静的ファイルの配信を目的にしているのでFirebaseを使いますが、Next.jsだと普通は Vercel を使うのが楽でいいと思います。
ChromebookでBlender3.0を使う
最近またBlenderを使い始めましたが、持ち運び用のChromebookで最新バージョンを使いたい。
ちょっと面倒だったので覚え書きしておきます。
Chromebook開発の初期設定【VS Code-github】
最近購入した Chromebook を放置していたので VS Code 入れて開発できる状態まで設定します。
内容は、Linux有効化、apt更新、VSCインストール、git更新、github設定です。
【3D】DAZ STUDIOで遊んでみる
【HLSL】VRoid Studioのモデルをアニメ塗りにする
UnityのHLSLを勉強する目的でアニメ塗りを試してみます。
やることは光源と法線を無視してベタ塗りして、輪郭線を付けるだけです。
以前に使ったVRoidのデフォルトキャラクターの１人を取り込んで使います。
後々わかったのですが透過部分が多くてテクスチャ自体に陰影があるので、今回の目的とモデルはちょっと合ってないです。
Gatsby+microCMSでブログ作成
日本製ヘッドレスCMSであるmicroCMSと静的サイトジェネレータ―のGatsbyを使ってブログのサンプルを作った感想とか。
以前にもヘッドレスCMS（Netlify cms, Contentful）を触ってみたんですが、わかりにくかったり、使いにくかったり、データ形式が気に入らなかったりなど細かい所が引っかかって放置してました。
最近よくmicroCMSの記事を見るのでとりあえず使ってみます。
MicroCMSの準備をする
マニュアルや公式の導入ブログがわかりやすく簡単に始められます。
アカウントに必要なのはメールアドレスとパスワードだけです。
登録後、認証コードがメールで来るので入力したら完了。
初期設定でプランの選択があります。
なお、途中から有料プランへの変更はできません。
とのことなので、APIの数が足りなくなったら作り直したりするんだろうか。
スキーマのインポート/エクスポートとコンテンツのcsvインポートは見つかりましたが、コンテンツのエクスポートが見つからなかった。
ここはちょっと面倒そう。
Gatsbyの準備をする
Gatsby + microCMS の作成も公式ブログがあります。
ブログに沿って pmx を使った時にエラーが出たので諸々アップデート。
|
1 2 3 4 5 6 7 |
npm install -g npm npm install -g yarn npm install -g gatsby-cli gatsby new gatsby-microcms-media cd gatsby-microcms-media yarn run develop |
APIキーの場所は書いてないですが microCMS の管理画面、左上歯車を押した後「API-KEY」タブから確認できます。
GraphQLの勉強にもなって良いサンプルでした。
サイト構築後のNetlifyへのホスティングや、microCMSコンテンツ更新時のWebhookでリビルドさせたりも先ほどの公式ブログをなぞるだけで簡単にできました。
気になることがあるときには公式ブログを探せば色々あります。
所感
分かりやすく使いやすい。
けどプラン変更やエクスポートなど大丈夫かな？と思う部分もあって少しハードルもある。どんどん改良されて長く続くサービスになればいいな。
一番いいと思ったのは日本製のサービスというところです。
日本語の情報が見つかりやすいし、公式ブログだけでもわかりやすい。
あとはコンテンツ構造をしっかり考えて、表示させる部分を整えたらすぐにブログが始められそうな感じです。新規で軽く作ってみよう。
【XMind】今更ながらマインドマップを使う
こういうことやりたいな～と思ってずっと放置してることが増えてきました。
やる気と時間が十分にあれば気合で作り上げることもできるのですが、ちょっと忙しいと全然進まなくなります。
マインドマップを使ってやりたいことを整理しつつ細分化して、タスクにまで落とし込んでいきます。タスクにさえしておけば未来の自分が隙間時間にやってくれると信じて。
ソフトを探す
ブラウザで書けると楽なんですがよさそうなものが見つからなかったので、評価の高かった XMind というソフトウェアをインストールします。
無料できれいなマインドマップを描けるオープンソースプロジェクトです。
Windows, Linux, OS X 版のインストーラが用意されています。
またポータブル版が用意されていたので、別環境に持っていけるようにこちらを使うことにしました。
ポータブル版は簡単に使えますが、.xmind ファイルを直接開くとその場所にファイル群を作成するので、アプリを起動後にファイルを開く方法でないと不便かもしれません。
使い方
起動して「空白のマップを新規作成」します。
中央トピックという箱が出てくるのでクリックで選択したら文字を変更できます。
また選択状態で「Enter」で後方トピック（兄弟）、「Tabキー」を押すとサブトピック（親子）を作成できます。
空いてるところでダブルクリックするとフローティングトピック（他とつながりのない箱）ができるので、それを他のトピックに近づけると親子関係にできます。
右側のメニューは細かい設定や、テーマ、アイコンの追加などできます。
適当に頭の中にあるものを整理してみます。
ここでの主トピックが本来は中心トピックにするべきなんでしょうね。
右中央のメニューからテーマを好きなものに変えてみます。
かなり種類がありましたが緑茶とクラシックⅡがお気に入りです。
 |
 |
描いたマインドマップは色んな形式でエクスポート可能です。
画像をエクスポートするだけでも形式やアイコンの表示有無を設定できて便利。
とはいえ適当に他のアプリ（Notion や Discord や Slack など）に貼り付けるときは「切り取り＆スケッチ(Snipping Tool)」などでコピペする方が早いです。
.xmindは１ファイルで複数を管理できるので上部メニューから「挿入→新しいシート」か下のタブ部分を右クリックして「新しい空のシート」でシートを追加して、主トピックを１つづつちゃんとマッピングしよう思います。
XMindにはタスク管理もありますが Pro 機能なので、これは前に使い始めた Notion に任せます。
やりたいことの整理は「アレ？今何をやりたいんだっけ？」という状態から記憶をたどってモチベーションを上げるまでの時間を大幅短縮できるはず。
【GLSL】階段状に動く
久々にGLSL触るのでこれまでと違う動きを試してみる。
以下の #つぶやきGLSL の作成ログでもあります（ #20 ）。
vec2 p=FC.xy/r;
float t=mod(t,10.),k=.1,y=mod(t*.2,k*2.),z=floor(t*.2/k/2.)*k;
float n=y<k?y:k,m=y<k?0.:y-k;
for(float i=-1.;i<=1.;i+=.2)
for(float j=-1.;j<=1.;j+=.2)
if(length(vec2(n+z,m+z)-(p-vec2(j,i)))<.05)
o=vec4(p.xy,i*j,1)+texture(b,p); pic.twitter.com/BrPDzXOGIF— Narumium (@Nr_Narumium) January 11, 2021
まずは点を階段状に動かしてみる。
十字パターンのときのようにstep関数を使ってもいいんですが、単純に移動時間の半分ずつを横移動・縦移動に割り当てます。
|
1 2 3 4 5 6 7 8 9 10 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=gl_FragCoord.xy/r.y; float y=mod(time,1.),z=floor(time/1.)*.5; float n=y<.5?y:.5, m=y<.5?0.:y-.5; if(length(vec2(n+z,m+z)-p)<.05) gl_FragColor=vec4(1); } |
動きの大きさ、点の大きさ、点の数を変えてみます。
|
1 2 3 4 5 6 7 8 9 10 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=gl_FragCoord.xy/r.y; float y=mod(time,1.),z=floor(time/1.)*.5; float n=y<.5?y:.5, m=y<.5?0.:y-.5; if(length(vec2(n+z,m+z)-p)<.05) gl_FragColor=vec4(1); } |
動きを遅くして、横方向にも敷き詰めます。
|
1 2 3 4 5 6 7 8 9 |
void main(){ vec2 r=resolution,p=gl_FragCoord.xy/r.y; float t=mod(time,10.),k=.1,y=mod(t*.2,k*2.),z=floor(t*.2/k/2.)*k; float n=y<k?y:k, m=y<k?0.:y-k; for(float i=-1.;i<1.;i+=.2) for(float j=-1.;j<1.;j+=.2) if(length(vec2(n+z,m+z)-(p-vec2(j,i)))<.01) gl_FragColor=vec4(1); } |
点の大きさを調整し、適当に色を付けます。
動いてる感を出すためにバックバッファを使ってみます。
|
1 2 3 4 5 6 7 8 9 10 |
uniform sampler2D bb; void main(){ vec2 r=resolution,p=gl_FragCoord.xy/r.y; float t=mod(time,10.),k=.1,y=mod(t*.2,k*2.),z=floor(t*.2/k/2.)*k; float n=y<k?y:k, m=y<k?0.:y-k; for(float i=-1.;i<=1.;i+=.2) for(float j=-1.;j<=1.;j+=.2) if(length(vec2(n+z,m+z)-(p-vec2(j,i)))<.05) gl_FragColor=vec4(p.xy,i*j,1)+texture2D(bb,p); } |
雑に文字数を減らすため、geekestに切り替えて作成完了。
texture2D がなくて texture にしないといけないところで少しハマった。
|
1 2 3 4 5 6 7 |
vec2 p=FC.xy/r; float t=mod(t,10.),k=.1,y=mod(t*.2,k*2.),z=floor(t*.2/k/2.)*k; float n=y<k?y:k,m=y<k?0.:y-k; for(float i=-1.;i<=1.;i+=.2) for(float j=-1.;j<=1.;j+=.2) if(length(vec2(n+z,m+z)-(p-vec2(j,i)))<.05) o=vec4(p.xy,i*j,1)+texture(b,p); |
久々だったので最初に戸惑いましたが書き始めたらのってきた。
記事が大分偏ってきてるし、つぶやきGLSL以外でもなんかしたいなぁ。
【GLSL】黄金の回転【対数螺旋】
黄金螺旋のような渦で何か書きたい。
基本的な対数螺旋から確認していきます。
以下の #つぶやきGLSL の作成ログでもあります（ #19 ）。
#つぶやきGLSL#define C(a,b)if(length(s*vec2(a,b)-p)<s*.5)
mat3 m=mat3(1);vec3 u;vec2 p=(FC.xy*2.-r)/r;
for(float i=0.;i<20.;i++){float h=atan(p.x,p.y),TAU=2.*acos(-1.),y=mod(t+i,20.),j=mod(i,3.),a=sin(y),b=cos(y),s=.01*exp(.3*y);C(a,b)u+=m[int(j)];C(b,a)u+=m[2-int(j)];}
o.rgb=u; pic.twitter.com/Q4f38id9zO— Narumium (@Nr_Narumium) December 9, 2020
VRoid Studioでモデルを作ってUnityに入れる
これまで気が向いたときに３Dモデルについて触っていましたが、VRoid を使ったことがなかったので、モデルを作って Unity に入れるまでやってみます。
かなり前に使った「MakeHuman」っぽいイメージです。