ざきの学習帳(旧 zackey推し )

日々の学びを書きます

microCMS のコンテンツ更新のタイミングで Vercel (ZEIT Now) を再ビルド・デプロイさせる

前回は、Gridsome x microCMSを用いた簡単なブログサイトを構築した。

これで npm run build で生成したファイルをNetlify / Vercel等へホスティングさせると、ブログサイトとして公開できる。

しかし、このままではmicroCMSのコンテンツ更新をするたび、Netlify / Vercelのようなホスティングサービスで再ビルド・デプロイしなくてはならない

本記事では、上記の手間を改善するmicroCMS のコンテンツ更新のタイミングで Vercel(ZEIT Now) を再ビルド・デプロイさせた際の手順を書き残す。

  • Vercel (ZEIT Now)とは?
  • 手順
    • 前提
    • 1. Vercel - Deploy用のURL発行
    • 2. microCMS - カスタム通知の設定
  • 所感
  • 参考リソース
続きを読む

APIベース・日本語UIで使いやすい microCMS を Gridsome で使う

実家サイトにお知らせ欄を追加。自分を介さず、オーナーや店舗スタッフがお知らせ等を更新できるようにしたい。

上記機能を実現するため、microCMSを導入することを検討している。

この記事では、別リポジトリにて、microCMSをGridsomeへ導入する素振りを行なった際の手順をまとめる。

  • microCMSとは?
  • 手順
    • microCMSからコンテンツを登録
    • Gridsome側の実装
      • セットアップ
      • microCMSのAPIからコンテンツ取得
      • コレクション追加・ページ生成処理の実装
      • コンテンツ一覧ページの実装
      • コンテンツ表示ページの実装
    • 動作確認
      • コンテンツ一覧(/posts/)
      • コンテンツ「2020-04-01 - 最初の記事」(/post/20200401/)
  • 所感
続きを読む

CSSフレームワークに依存しない手法を学ぶため / 「 CSS設計完全ガイド 」を読んだ

本書では、

  • CSS設計の知識を吸収し,フロントエンドエンジニアにステップアップしたいひと
  • 向上心が強く,CSS設計について理解を深めたい初級フロントエンドエンジニア
  • 会社としてCSSのルールを策定したいチームリーダー等の責任者

をターゲットととし、

  • CSSにおけるレイアウト、モディファイアといった種類の紹介
  • BEMやPRECSSなどのCSS設計手法の紹介と実践
  • 「カード、ラベル、ボタン」のような定番レイアウトの設計手法

を学べる。

以下から正誤表やサンプルコード、参考記事が参照できる。

本記事では、本書のざっくりとした紹介・学べたことを記載する。

きっかけは「CSSフレームワークに依存しない手法を学ぶため」

今まで携わってきた開発では、BootstrapMaterializeのようなCSSフレームワークを使ってきた。だが、求めているUIにしたい場合、CSSフレームワークに定義されているスタイルをそのまま適用するとはいかず、独自のCSSの定義 or CSSフレームワークのスタイルをラッパーするといった手法が取られてきた。

後者*1の場合、CSSフレームワークがアップデート(クラス名が変更)されたことにより、スタイルが大きく崩れたことも発生したことがある。

このような体験から「フレームワークに依存しないCSS設計」を学習、設計の選択肢を増やすため、本書を手に取った。

本書に触れる

本書を読み始めた目的や参考になったポイントを記載する。

リセットCSSの種類

ブラウザによって独自に定義されているスタイルの誤差をなくすのがリセットCSS。ただ、そのリセットCSSにも以下のような種類があることを理解した。

名称 概要
ハードリセット系 ブラウザ間の差分をなくす HTML5 Reset Stylesheet | HTML5 Doctor
ノーマライズ ブラウザの良い部分を残し、その他差分をなくす Normalize.css: Make browsers render all elements more consistently.

どのような見た目になるかは、w3schools - CSS Layout Flexbox に対し、各代表的なリセットCSSが適用した以下デモを確認してほしい。

適用なし

See the Pen CSS Layout Flexbox - Normal by zucky (@zucky_zakizaki) on CodePen.


ハードリセット系 適用

See the Pen CSS Layout Flexbox - Hard Reset Css by zucky (@zucky_zakizaki) on CodePen.


ノーマライズ系 適用

See the Pen CSS Layout Flexbox - Normalize Css by zucky (@zucky_zakizaki) on CodePen.


PRECSSなどのCSS設計手法の紹介と実践

目から鱗だったのは以下。

  • CSS設計手法(BEM、PRECSS等)が必要となった経緯
  • BEM、PRECSS - Manage your CSS with prefixes.等の紹介
  • BEM、PRECSSを用いた「カード、ラベル、ボタン、etc...」のレシピとその設計指針

PRECSSは、BEMやGoogle HTML/CSS Style GuideをベースしたCSS設計手法。

公式サイトは日本語対応、サンプルコードも記載されている。BEMやPRECSSのような設計手法を学んだこなかった方は、ぜひ以下だけでも一読してほしい。


まとめ

本書から学習したことと、身につけるためのトライを記載する。

学んだこと

  • リセットCSSの存在と活用方法
  • BEM、PRECSSなどのCSS設計手法
  • 「カード、ラベル、ボタン」等の設計指針

実践すること

CSSフレームワークを使用せず、以下のような成果物を作ること。

*1:CSSフレームワークのスタイルをラッパーする

じぶん Release Notes ver 0.30.5

2020/03の取り組みの成果を書く。

先月分はこちら -> じぶん Release Notes ver 0.30.4 - zackey推し

  • 学んだこと
      • 読書中
      • 完了
    • Udemy
  • 勉強会・コミュニティ
  • プライベート
    • 記事(じぶんリリースノートを除く)
    • PV数
  • Challenge Every Month
    • 2020/03の結果
      • DesignIt!を7章まで読破する
      • すぐ分かる音楽理論#5 まで完了する
      • Typescript with modern React (i.e. hooks, context, suspense)を全て修了する
      • 1週間中に2記事書く
    • 2020/04の目標
      • せんべろ日記を書く
      • DesignIt!を読破する
      • CSS設計完全ガイドを用いて、アウトプットをする
      • すぐ分かる音楽理論#5 まで完了する
  • おわりと所感
続きを読む

Chatwork から Slack に移行するため、調査することをざっと洗い出した

日記にも書いたが、現職でChatwork→Slack移行する方針となった。

主な理由としては以下。

  • エンジニア以外にも分報を始める人がで始めた
    • 業務以外の雑談が広がり、相談のハードルが下がる / 一歩踏み込んだ議論が行えるようになってきた
  • 基本パブリックチャンネルとし、誰でも情報を拾えるようにしたい
  • 導入したいツールがSlack連携されているものが多い

開発の仕事と並行して、移行作業の担当となった。

この記事では、移行のために何をやるかのジャンル分け、および何のアプローチが取れるかを調査した文献をまとめる。

本記事のターゲット

  • ChatworkからSlackへ移行しようと思っている方(自分)
  • 本記事のターゲット
  • Chatwork系
    • 必要なチャットルームをヒヤリング
    • 過去ログの出力
  • Slack系
    • 連携ツール周り
    • ハードルを感じている人への施策
    • ガイドライン・ルール作成
  • おわり
続きを読む