Narumium BLOG

Gatsby+microCMSでブログ作成

日本製ヘッドレスCMSであるmicroCMSと静的サイトジェネレータ―のGatsbyを使ってブログのサンプルを作った感想とか。

以前にもヘッドレスCMS（Netlify cms, Contentful）を触ってみたんですが、わかりにくかったり、使いにくかったり、データ形式が気に入らなかったりなど細かい所が引っかかって放置してました。

最近よくmicroCMSの記事を見るのでとりあえず使ってみます。

MicroCMSの準備をする

https://microcms.io/

マニュアルや公式の導入ブログがわかりやすく簡単に始められます。

microCMSドキュメント

はじめに

microCMSの公式ドキュメントです。管理画面や各種APIの使い方をご確認いただけます。

microCMSブログ

microCMSのはじめ方

この記事ではmicroCMSのはじめ方をご説明します。microCMSはクラウド型のヘッドレスCMSです。コンテンツ管理のためのサーバ管理は一切不要で、サインアップするだけです...

アカウントに必要なのはメールアドレスとパスワードだけです。

登録後、認証コードがメールで来るので入力したら完了。

初期設定でプランの選択があります。

https://microcms.io/pricing/

なお、途中から有料プランへの変更はできません。

とのことなので、APIの数が足りなくなったら作り直したりするんだろうか。

スキーマのインポート/エクスポートとコンテンツのcsvインポートは見つかりましたが、コンテンツのエクスポートが見つからなかった。

ここはちょっと面倒そう。

Gatsbyの準備をする

Gatsby + microCMS の作成も公式ブログがあります。

microCMSブログ

GatsbyJS + microCMSでJamstackなオウンドメディアを作ろう

このチュートリアルではGatsbyJS + microCMSの構成でオウンドメディアを作成していきます。

ブログに沿って pmx を使った時にエラーが出たので諸々アップデート。

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

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 というソフトウェアをインストールします。

無料できれいなマインドマップを描けるオープンソースプロジェクトです。

XMind

https://jp.xmind.net/

https://github.com/xmindltd/xmind

Windows, Linux, OS X 版のインストーラが用意されています。

またポータブル版が用意されていたので、別環境に持っていけるようにこちらを使うことにしました。

ポータブル版は簡単に使えますが、.xmind ファイルを直接開くとその場所にファイル群を作成するので、アプリを起動後にファイルを開く方法でないと不便かもしれません。

使い方

起動して「空白のマップを新規作成」します。

中央トピックという箱が出てくるのでクリックで選択したら文字を変更できます。

また選択状態で「Enter」で後方トピック（兄弟）、「Tabキー」を押すとサブトピック（親子）を作成できます。

空いてるところでダブルクリックするとフローティングトピック（他とつながりのない箱）ができるので、それを他のトピックに近づけると親子関係にできます。

右側のメニューは細かい設定や、テーマ、アイコンの追加などできます。

適当に頭の中にあるものを整理してみます。

ここでの主トピックが本来は中心トピックにするべきなんでしょうね。

右中央のメニューからテーマを好きなものに変えてみます。

かなり種類がありましたが緑茶とクラシックⅡがお気に入りです。

描いたマインドマップは色んな形式でエクスポート可能です。

画像をエクスポートするだけでも形式やアイコンの表示有無を設定できて便利。

とはいえ適当に他のアプリ（Notion や Discord や Slack など）に貼り付けるときは「切り取り＆スケッチ(Snipping Tool)」などでコピペする方が早いです。

.xmindは１ファイルで複数を管理できるので上部メニューから「挿入→新しいシート」か下のタブ部分を右クリックして「新しい空のシート」でシートを追加して、主トピックを１つづつちゃんとマッピングしよう思います。

XMindにはタスク管理もありますが Pro 機能なので、これは前に使い始めた Notion に任せます。

やりたいことの整理は「アレ？今何をやりたいんだっけ？」という状態から記憶をたどってモチベーションを上げるまでの時間を大幅短縮できるはず。

【GLSL】階段状に動く

久々にGLSL触るのでこれまでと違う動きを試してみる。

以下の #つぶやきGLSL の作成ログでもあります（ #20 ）。

久々に #GLSL 触る。#つぶやきGLSL

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関数を使ってもいいんですが、単純に移動時間の半分ずつを横移動・縦移動に割り当てます。

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);
}

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);

}

動きの大きさ、点の大きさ、点の数を変えてみます。

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);
}

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);

}

動きを遅くして、横方向にも敷き詰めます。

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);
}

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);

}

点の大きさを調整し、適当に色を付けます。

動いてる感を出すためにバックバッファを使ってみます。

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);
}

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 にしないといけないところで少しハマった。

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);

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

続きを読む【GLSL】黄金の回転【対数螺旋】

VRoid Studioでモデルを作ってUnityに入れる

これまで気が向いたときに３Dモデルについて触っていましたが、VRoid を使ったことがなかったので、モデルを作って Unity に入れるまでやってみます。

かなり前に使った「MakeHuman」っぽいイメージです。

続きを読む VRoid Studioでモデルを作ってUnityに入れる

【GLSL】十字パターンを考える２

前回「【GLSL】十字パターンを考える」の続きです。

以下の #つぶやきGLSL の作成ログでもあります（ #18 ）。

#つぶやきGLSL #CROSS #define C(a) q.y a floor(q.x*5.)*.1
vec2 p=FC.xy/r;
float n=1./3.,s=abs(sin(t)),c=abs(cos(t));
for(float i=.0;i<1.8;i+=.3){
vec2 q=p-vec2(n*i,i-.1);
if(C(+)>.0)o.b+=.1*s;
if(C(+)<.0)o.r+=.1*c+.1; q=q.yx;
if(C(-)>.9)o.g+=.15*s;
if(C(-)<.9)o.b+=.15*c+.1;
} pic.twitter.com/35RkAZtUAV

— Narumium (@Nr_Narumium) November 30, 2020

続きを読む【GLSL】十字パターンを考える２

【GLSL】十字パターンを考える

クロス♰を敷き詰める模様を書いてみます。

以下の #つぶやきGLSL の作成ログでもあります（ #17 ）。

#つぶやきGLSL #define C(c,k)q=abs((p-vec2(i,j)*.2-.1-a*k)*m);q=(q.y>q.x)?q.yx:q.xy;if(q.x<.06&&q.y<.02)o.c+=.8;
vec2 p=FC.xy/r,a=vec2(.08,.04),q;
mat2 m=mat2(cos(t),sin(t),-sin(t),cos(t));
for(float i=-2.;i<5.;i++)for(float j=-1.;j<5.;j++){
C(rg,0.)C(r,1.)C(g,2.)C(b,3.)C(rgb,4.)} pic.twitter.com/04GQ5tj7zd

— Narumium (@Nr_Narumium) November 29, 2020

続きを読む【GLSL】十字パターンを考える

【GLSL】簡単な境界による色分け

つぶやきGLSLの合間に、こうすればこう動くなーという確認。

単純な式をボーダーにして色を塗っていきます。

続きを読む【GLSL】簡単な境界による色分け

【GLSL】つぶやきGLSL作成ログ#16

ツイッターで書いた以下の #つぶやきGLSL の作成ログ。

『円で円を作る』をもう一段追加してみる。

今回はテーマなく勢いで始めたので短めです。

#つぶやきGLSL #define L(a)length(a)#define M(t)mat2(cos(t),sin(t),-sin(t),cos(t))
void main(){
vec2 p=5.*(gl_FragCoord.xy*2.-r)/r*M(t),f=floor(p)/5.+.1,g=fract(p)-.5,h=fract(g*5.)-.5;g=g*M(-t*2.)+L(f)*.5;
if(L(f)<1.&&L(g)<.5&&L(h)<.4)gl_FragColor=vec4(L(f),L(f.xx),L(g.xx),1);
} pic.twitter.com/NBF4EimNr6

— Narumium (@Nr_Narumium) November 26, 2020

続きを読む【GLSL】つぶやきGLSL作成ログ#16

【GLSL】つぶやきGLSL作成ログ#15

ツイッターで書いた以下の #つぶやきGLSL の作成ログ。

凄くゆるい花のマークを作りたいと思います。

#つぶやきGLSL #geeker
void main(void){
float N=2.*acos(-1.)/5.,j=N/4.+t,c,y=.4+sin(t)*.1;
vec2 p=(gl_FragCoord.xy*2.-r)/r,m=vec2(.0,.9);
for(int i=0;i<5;i++){
c+=step(length(p-vec2(cos(j),sin(j))*.5),y),j+=N;
}
gl_FragColor.rgb=length(p)<y+.1?m.yyx:m.yxx*c;
} pic.twitter.com/HsOUAFqRwV

— Narumium (@Nr_Narumium) November 25, 2020

続きを読む【GLSL】つぶやきGLSL作成ログ#15