雑記ブログ：技術選定2「スレッド形式にしたい」
Closedfirst published: 2018/12/13last updated: 2019/01/15
雑記ブログを2週間書き続けて、割とちゃんとしたブログに向かっているけど...。ブログ書きたいってよりは「GitHub Issues的なものが書きたかったので、理想と少し違う。
GitHub Issuesは1つの投稿の中にコメント（自分の場合は思いつきの独り言や試行錯誤）を積み重ねていく感じ。ブログだと全体編集・追記を個別に書くことになる。
独り言らしさを出すにはどうすればいいだろう。他の例だとToggeterとかTwistとか。要は、独りで発言を積み重ねられるスレッド形式で作れればいいんじゃないか？
GitHub Issuesブログ
ぱっと思いついたのは、miyaokaさんが作っていたGitHub Issuesブログ。あれはNuxt + Apolloだったけど、GraphQL使うならGatsbyやGridsomeでも作れる？
GitHubだから生存率高そうで良い。ただ、metaの設定が辛いか。やはり、専用のフィールドがある方が運用は楽だろう。
理想はWP ACFの繰り返しフィールド
ショートコードや独自Markdownは使いたくない。それ以外で任意の回数繰り返し使いまわせるフィールドと言えば、WordPressプラグインの「ACF Pro」が思い当たる。あれは素晴らしい。
ということは、WP orgを使う？いやいや、今さらサーバー借りたくないし、そこはheadlessCMSでチャレンジしたい。
headlessCMSだとDatoCMSが適してる？
リピーターフィールドは高機能だから新し目のheadlessCMSにしか付いていない気がした。そこで、Gridsome経由で見つけたDatoCMSを覗いたら、いきなり発見！！
しかも設定が簡単そう。もしかして、headlessCMSでは楽勝な機能なのだろうか。いや、Airtable・Strapiには見当たらなかった。Storyblokはドキュメントが難しくてよくわからず...。
NetlifyCMSは設定次第でいけるかもしれないけど、すごい工数かかりそうだったし、なるべくソースを分離したいので除外。
Contentfulにあればいいなーと考えていたものの、リピーターフィールド実装の優先順位は低いと書かれていてガッカリ。
Repeater / flexible content field? - Authors & Editors - Contentful Community
とりあえず、DatoCMSを使ってみよう。海外での人気ぶりは少し耳にした程度だけど、ドキュメントや使い心地を見れば優秀なのは明らか。万が一終了しても、JSONいじれば引越し可能だろう。
DatoCMSはGridsomeでも使える？
そもそも、DatoCMSはGridsomeプラグインにあったから見つけたわけで、Gridsomeを使って作れるなら助かる（Vueだから）。
試したら、Gridsome v0.3.5でもDatoCMSのデータは引っ張れた。v-if v-for でリピーターフィールドも展開可能。
ただ、出力したMarkdownにRemarkを当てる方法がわからない。routeの調整方法がよくわからず、Imgixの使い方も...（DatoCMSプラグインはまだv0.0.2）。
GraphQLで引っ張れていない値（_updatedAtなど）もあり、もうしばらくは厳しいかなーと感じ、Gatsbyへもどることにした。
DatoCMS × Gatsbyでリデザイン
Before
After
- 基本構造はAirtable版で作っていたテンプレを流用
- Issues・スレッド形式らしい装いにリデザイン
- サムネの代わりにFontAwesomeを一覧に表示
- OGPはサムネが設定されてるか否かで条件分岐
- 画像置き場はGyazoに統一
- デプロイは相変わらずSiriに「ブログビルド！」で発動
画像メインではないので控えめに調整。また、GitHub Issueっぽいスレッド形式にすることで、全体のバランスを気にせず投稿・更新しやすくした。サムネはあってもなくてもOK。
Airtableみたいなアプリはないけど、この2週間では微修正くらいにしか使わなかったし大丈夫だろう。Airtableはスプレッドシートの代替としても便利なので、他で活用。
_publishedAt や _createdAt をGatsby側で取得できないとか、フィールド増やした時に本文引用データがバグるとかもろもろあるので、今後もアプデ気にしておこう。
やっと、GatsbyやReactの作法に慣れてきた感じ。