Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書
Post on:2020年5月29日
これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。
ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。
![Webサイト高速化のための静的サイトジェネレーター活用入門](http://coliss.com/wp-content/uploads-202002/2020060101.png)
本書は、6/1発売です!
著者はWeb制作系の解説書で分かりやすさで評判のエビスコム様。初心者の人でもサンプルサイトを制作しながら、ステップ・バイ・ステップで静的サイトジェネレーターの構築を学ぶことができます。
Kindle版も6/1に、同時発売です!
しかも特典がPDF2冊で、かなり豪華です!
Node.js、GitHub、Netlify、Contentfulなど開発環境の準備などをまとめたPDFとヘッドレスCMSのmicroCMSを利用する方法をまとめたPDFをサポートサイトからダウンロードできます(本書P-7を参照ください)。
![特典PDFのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060204-02.png)
![特典PDFのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060204-02.png)
特典PDF 1: セットアップ 78ページ
![特典PDFのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060204-01.png)
![特典PDFのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060204-01.png)
特典PDF 2: microCMS対応ガイド 59ページ
そんな紙面をキャプチャで少しだけ紹介します。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-01.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-01.png)
本書は大きく分けて、2部構成となっており、第1部はWebサイトの構築、第2部はブログの構築です。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-02.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-02.png)
第1部では下準備として、開発環境を整えます。本書ではGatsbyのインストールとセットアップが中心で、WindowsやmacOSやLinuxそれぞれの環境での準備手順は、特典のセットアップPDFに詳しく解説されています。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-03.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-03.png)
準備が完了したら、さっそく実際のページを編集します。
本書のサンプル制作で使用する素材、プロジェクトデータ、コンテンツデータはサポートサイトからダウンロード可能です。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-04.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-04.png)
実際のサンプルデータの変換ポイントなどもコードベースで解説されており、記述ルールなども明記されているので、非常に分かりやすいと思います。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-05.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-05.png)
終了したら、サーバーにアップしてテストしてみます。Gatsbyで作成したサイトは、FTPなども利用しなくても、手軽に公開・更新することができます。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-06.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-06.png)
一通り流れを理解したら、本格的なサイト構築の手順です。ページを増やしたり、コンポーネントを作成したり、通常のサイト構築と同じです。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-07.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-07.png)
もちろん、それぞれの項目ごとに詳しくその手順が解説されているので、安心して学べます。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-08.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-08.png)
メタデータ、OGP、PWA対応もコードベースで詳しく解説されています。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-09.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-09.png)
第2部は、ブログの構築。GatsbyではWordPressをはじめ、マークダウン、Googleスプレッドシートなど、さまざまなデータソースを利用できます。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-10.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-10.png)
本書で構築の手順が解説されているのは、トップページ、記事ページ、一覧ページ、カテゴリページなどが揃っています。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-11.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-11.png)
記事ページといってもそこに含まれている要素はたくさんあります。タイトル・記事はもちろん、アイキャッチ画像、投稿日、カテゴリ、アイコン、コンテンツ内の画像など、ひとつ一つ詳しく解説されています。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-12.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-12.png)
記事ページのテンプレートを一つ作成してしまえば、他の記事を自動生成で量産できます。
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-13.png)
![誌面のキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060103-13.png)
ナビゲーションやページネーションなど、ブログでよく使用されるコンポーネントも詳しく解説されています。
静的サイトジェネレーター活用入門の目次
-
- イントロダクション
- 今どきのWebページ&Webサイトに求められること
- CMSの利用と問題
- 静的サイトジェネレータ(SSG)という選択
- Gatsbyという選択
- Gatsbyを学ぶために
- 制作するサンプルについて
-
- 基本的なWebサイトの構築
- ページの作成
- 画像の最適化
- パーツのコンポーネント化
- ページを増やす
- メタデータの設定
-
- ブログの構築
- ブログのコンテンツを用意する
- ブログの記事ページを作成する
- ブログの記事ページを自動生成する
- ブログの記事一覧ページを作成する
- カテゴリーページの作成
-
- 付録
- gatsby-imageを簡単に扱えるようにする
- Googleアナリティクス
- サイトマップ
- RSS
- Google Fonts
- IE11対応
本書では静的サイトジェネレーター「Gatsby」によるサイト構築・ブログ構築だけでなく、GitHub、Netlify、Contentful、GraphQL、React、Node.jsなど、制作に関わるさまざまなツールや技術についても学べます。「これからのWeb開発」について興味がある人に特にお勧めします。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors