2018年12月30日

当ブログを GatsbyJS v2 にアップグレードした

このブログをGatsby JS に変えて半年が経ち、さらにAnnouncing Gatsby 2.0.0 🎉🎉🎉から 3 ヶ月、重い腰を上げてこのブログも最新の GatsbyJS v2 系にアップグレードしました。

見た目の変化はほぼないですが、PC で記事ページを開いたときのコンテンツ読み直しっぽい挙動がなくなっていたり、記事を書いている途中の自動リロードの安定感が増したように思えます。

アップグレードの手順

公式のドキュメントとして v1 から v2 へのアップグレード手順 Migrating from v1 to v2 が用意されています、が、サッと眺めて見ると気づく通り、変更点は少なくありません。けっこう大変そうです。ということでアップグレードはすぐに諦めて作り直しました

一般的に Gatsby JS でブログを作る時はgatsbyjs/gatsby-starter-blogというテンプレートから作るようで、このブログもそのようにしています。このテンプレートが v2 に対応しているので、基本的に今までに書いた Markdown の記事が詰まったディレクトリを移動させるだけで、とりあえずは動きます。

あとは同じ Style をあてたり、JSX の構造を書き直したり。このブログはタグ機能を作ったりしていたので、それを v2 の書き方で書き直すだけです。ほかにもデフォルトには入ってないサイトマップ用のプラグインを入れたり、RSS もちょっとカスタマイズをしていたので、その部分入れたり、独自で作っていたコンポーネント内で GraphQL を使うためには StaticQuery を使うようになったので、そのあたりをやります。あとは、Markdown 内の画像をファイルから展開する gatsby-remark-images が今までとは違う挙動をしたりしていたので、その対策をしたりしました。

そうですね、アップグレードだけで 1/3 日くらい使いました、ほんと気軽には人におすすめできないブログエンジンだと思います。コストかけてでも超速いウェブサイトを構築したい時人はどうぞ。

gatsby-remark-images で手を加えた部分ですが、これは何が問題だったかというと、Markdown で書かれた記事の中に HTML で a タグが埋め込まれていると、画像関係の HTML 構造が変わってしまうという問題でした。

たとえば、

華麗なるギャツビー [Blu-ray]

『ロミオ+ジュリエット』『ムーラン・ルージュ』のバズ・ラーマン監督作品 彼の名はギャツビー 男の憧れ、女の理想 その人生は――【嘘「ミステリー」】

このような要素は Markdown で表現できないので HTML で書いています。すると、このような HTML が入っていると ![ALT](filename) で表されるような画像がオリジナルファイルへのリンクにならなくなったりしました。これがなぜかというと、<a という存在が記事内に含まれていると、Markdown でなく HTML モードでパースされるからのようです。

const findParentLinks = ({ children }) =>
  children.some(
    node =>
      (node.type === `html` && !!node.value.match(/<a /)) ||
      node.type === `link`
  )

コード的にはこんな感じになっていました。そして、対策としては、なんと記事内の a タグを大文字にして <A ...></A> とすることによってやっつけています。よく見ると正規表現での a タグ検知で大文字小文字判断していませんね。ちゃんと直して PR 送れればいいのですが、それはまた体力が残ってる時に、箇所的にはこのへんgatsby-remark-images/src/index.js#L40なので、誰か上手い感じにやっといていただけると助かります。つかれた

追記

<A></A> を入れないといけない問題に関しては、そういったリンクを React の Custom Component に押し込むという方法で解決しました。 https://using-remark.gatsbyjs.org/custom-components/ Markdown に無いパーツはコンポーネントとして切り出すのが正しそう。


2019年01月13日

買ってよかったもの 2019

今年もすでに 2 週間が経過しようとしているところ、2019 年いきなり速を出しすぎたようで、すでに買って良かったものをまとめたくなったので、はじめます。 (2018 年に注文しててやっと開封したやつとかも含んでます) 去年の記事はこちら https://blog.kksg…

2019年01月08日

例えば、Service Worker をやめる

当ブログから Service Worker を削除しました。(削除してないけど) 最速ブログシステムであるところの gatsby-starter-blog からブログを作ると、 gatsby-plugin-offline…

2018年12月31日

買ってよかったもの 2018

毎年やりたいと思いつつもやったことがなかったこのシリーズ。2018 年に買って良かった物をまとめてみます。 ワークス SD…

2018年12月27日

洗濯乾燥機の検討

縦型洗濯乾燥機(201…

2018年11月16日

エディ太郎のアイコンを変えた

前回の記事 でアイコンを変えたい、なぜなら元のアイコンは改名前のアプリ名「dddraft」を模したものだから。 という話を書きました通り、さっそくアイコンを差し替えた「エディ太郎 1.3.…