【CMS】Contentfulでコンテンツ管理

GatsbyJSとNetlify CMSでブログを作る」で静的ファイルとHeadless CMSで情報管理できないかと考えましたが、さらにホスティングとコンテンツを分離を考える。

Contentfulでコンテンツ管理をしてみます。

続きを読む 【CMS】Contentfulでコンテンツ管理

GatsbyJSとNetlify CMSでブログを作る

GatsbyReact用の非常に人気の高い静的サイトジェネレータです。

 

Next.js(SSR寄り)を使っているとどうしてもGatsbyも試してみたくなります。

スター数ではNext.jsの方が多いですがUsed byで見るとGatsbyの方が倍以上使われてるんですよね。

 

WordPressの代替を探していることもあり、GatsbyNetlify CMSで管理するブログを試してみます。

用語・略語:CMS:コンテンツマネジメントシステムSSG:静的サイトジェネレータ

続きを読む GatsbyJSとNetlify CMSでブログを作る

GLSLファイルをimportする

Next.jsgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.frag.vertなどのGLSLファイルに分けて管理しようと思います。

 

具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。

他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います(主観)。

続きを読む GLSLファイルをimportする

【React】Nextでace.jsを使ってエディタ表示する

gl-reactを使ってGLSLでリアルタイムな画像処理がしたい。

ace.jsという有名なコードエディタがあるので使いたいですが、Reactでそのまま使うとなると難しそう。

バージョンは最新ではないもののReactコンポーネント化したreact-aceというものがあったので、その使い方とnext.jsで使う時の注意を覚書き。

続きを読む 【React】Nextでace.jsを使ってエディタ表示する

ReactでGoogle Mapを埋め込む

前回のTwitter埋め込みのようにGoogle MapReactで埋め込む方法を考えます。

同じようにhttps://maps.googleapis.com/maps/api/js?key=XXXXXを読み込むことでAPI(google.maps.XXXなど)が使えるようになります。

ただし今回はかなりDOMをいじる必要があるので1から作るのはかなり面倒です。

続きを読む ReactでGoogle Mapを埋め込む

ReactでTwitterのタイムラインなどを埋め込む

React(Next.js)でTwitterの埋め込みを行いたい。

主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。

ライブラリを使ったり使わなかったり。

続きを読む ReactでTwitterのタイムラインなどを埋め込む

GLSLでお絵描き【極座標系と周期関数】

gl-reactを使ってGLSLでお絵描きをしてみます。

以下と同じようなGLSLの練習メモです。

続きを読む GLSLでお絵描き【極座標系と周期関数】

React Nativeの複数スタイル指定

状態に合わせてスタイルの上書き(オーバーライド)をしたいことはよくある。

スタイル自体はStyleSheet.createで定義してると思ってください。

通常[](配列)を使えばいいのですがちょっとハマったことがあったので、3つの方法と注意する点を書いておきます。

続きを読む React Nativeの複数スタイル指定

React.FCでもforceUpdateしたい

React管理下にない値の変更時に描画を更新したい。

あまり使いたいものでもないですが、React.Componentでは適切なタイミングでthis.forceUpdate()を使うことになります。

今回は関数コンポーネントで作成中にforceUpdateに当たる処理が必要になったのでどうにかしようという内容です。

続きを読む React.FCでもforceUpdateしたい

Next.js with Material-UIでスタイルが崩れる

Next.jsMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。

現象としてはnext.jsのPHASE_PRODUCTION_BUILDgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。

ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。

結構複雑な問題だったので要点をまとめながら解決を図ります。

環境:next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1

続きを読む Next.js with Material-UIでスタイルが崩れる