乗るしかないこのビッグウェーブに〜Gatsby 移行〜

プログラミングJavaScript, Gatsby2019年3月10日

2019/02 まで WordPress で管理していた chitoku.jp ですがこの度 Gatsby に移行しました！

TL;DR

  1. Gatsby で TypeScript なら gatsby-plugin-ts-loader + tsconfig-paths-webpack-plugin
  2. Algolia で日本語の検索をするときは Keep diacritics on characters に注意
  3. babel-plugin-react-intl-auto に出した PR がマージされた5
  4. gatsby-transformer-remark に出した PR がマージされた7
  5. remark-grid-tables に出した PR がマージされた8
  6. Gatsby の IE サポートは半分嘘なので残り半分は自分でやる

Gatsby とは

Gatsby は React 製の静的サイトジェネレーターです。Markdown や画像、YAML、テキストファイルなどを透過的に扱うサーバーをローカルに建てて、それらを React のコンポーネントから GraphQL クエリーを通じて組み込めるという特徴があります。豊富なプラグインによって動作を拡張できるほか、細かいカスタマイズは自分でローカルにプラグインとして切り出して管理することができます。

コアの基本的に見える機能もプラグインとして切り出されており、ビルド時のフックに比較的柔軟に介入できます。たとえば Markdown をソースとすると、gatsby-source-filesystem がファイルを読み込んで gatsby-transformer-remark に処理を委譲し、さらに下位のプラグインが Markdown パーサーの処理をカスタマイズできます。今回は以下のようなプラグインを入れてみました。

続きを読む »

ブラウザー判定スクリプト「SystemInfo」

プログラミングJavaScript2014年10月16日

SystemInfo について

もはやブラウザーを判定する必要がないので更新されていません。

JavaScript で書かれた Web ブラウザーの判定スクリプトです。 最近ではほとんどの環境がレンダリング結果の差異が小さいモダンブラウザーに置き換わりつつあり、ブラウザーを判定する必要は薄れてきていますが、アクセス解析なんかでは未だ使えると思います。

UserAgent 以外にもブラウザーが持つ固有のオブジェクトも含めて判定しているため、いくつかの UserAgent 偽装を検出することができます。 また、PlayStation Portable の独自拡張にも対応しており、UserAgent に含まれていない情報も追加で取得することができます。

続きを読む »