雑記用ブログ:初期設計・技術選定
Closedfirst published: 2018/11/27last updated: 2019/01/15
ばーっと、このブログを作ってしまったのだけど、初期制作中に考えたことを絶対忘れてしまうのでメモしておこう。
CONCEPT
イメージはGitHub Issuesを個人的な活動に拡張した感じ。僕はリポジトリに作業のほとんどをIssueとして書いていて(ほとんど独り言だけど...)、これがあとあと役に立っている。
このブログも独り言なので書き方は常体(だ・である調)にする。他人様に見せることを前提としないので、TextlintやPrettierも使わない。ギリギリ振り返られるレベルになってればいい。制作工数も数日で作れる範囲。
BACK END
気軽に投稿するために運用周りをめっちゃ楽にしたい。さすがに、JAMStackを把握していながらブログサービスやWordPressは使いたくないなーというのはあった。
そういえば、新しく買ったiPadで挿絵を描く?そうなると、iOSで投稿を更新できた方がいいか。NotionはAPIがまだだし、esa・Netlify CMS・Contentfulにはアプリがない。
実はWordPressには割と優秀なアプリがあるので、WPcomに非公開サイトを作ってREST APIで引っ張れば一応サーバーレス+アプリ更新ができる。良いheadlessCMSが見つからなかった時の妥協案。
そういえば少し前に知ったAirtableにはiOSアプリがあった。増資も受けていたので、しばらくは使える?触ってみたらWebサービスもアプリもよくできてたので、Airtableに決定ー。
FRONT END
まてまて、Airtableは良いけどフロント連携作れる?最近よく使ってるNuxtはどちらかというとSPA向きっぽいので、完全な静的書き出しができるGatsbyかGridsomeを使いたい。
できればVueで作られているGridsomeがいいけど、Airtableプラグインがまだ開発されていない様子。とりあえず、Gatsby使っとこう。プラグイン出たら乗せ換えればいいや。
React書いたことないけどスターターのコード見たらJSだったし、いけるはず。CSSはコンポーネントに依存すると移し替え面倒そう。SCSS1ファイルで完結させておこう。webpackだからMUSUBii使えて楽。
GraphQLはGridsomeとほぼ一緒。Airtableの公式記事あったけどGatsby v1だから色々違って使えなかった。プラグインの example
を参考にして設計。
DESIGN
本サイトのデザインを踏襲。ポートフォリオ的に使っていたカードデザインをそのまま使った。本当はダークモードに対応させたかったけど、後回しにした。メディアクエリはあるけどJS判定が厳しそう。
日本語の大きいタイトルは間が持たないので、要約として英語データを持って飾り付け。あとはGoogle FontsやYakuHanJPを当てつつ、font-feature-settings
でカーニング。
DEPLOY
データベースを編集するたびにデプロイされるのは嫌だったので、任意のタイミングにした。NetlifyのBuild hooksをiPhoneのショートカットに登録し、Siriに「ブログビルド!」と言えば発動される。
未来的になったけど、Siriに伝えるワードを間違えて失敗しているところを妻に笑われてしまったので、iPhoneのショートカットボタンを押す習慣になっていくと思う...。