【特典付き】Webサイト高速化のための 静的サイトジェネレーター活用入門

  • 著作者名:エビスコム
    • 書籍:3,498円
    • 電子版:3,498円
  • B5変:320ページ
  • ISBN:978-4-8399-7300-1
  • 発売日:2020年06月01日
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

GatsbyJSで実現する、高速&実用的なサイト構築

「高速化&最適化」「メタデータ対応」「SPAやPWAへの対応」など、これからのWebサイトに求められる要素に対応するための、静的サイトジェネレーターの活用書。
本書は「GatsbyJS(Gatsby)」を使って、「ReactやJavaScript(ECMAScript)に自信が無くても、実用レベルのWebサイトを構築できるようになる」ことを目標にしています。サンプルサイトを制作しながら、ステップ・バイ・ステップで解説していきます。
Gatsbyへのアプローチ方法は色々と考えられますが、本書ではHTML&CSSで作成したベースとなるページを元に、サンプルのサイトを作成していきます。
書籍の構成として、大きく2部構成になっています。
「イントロダクション」では、今どきのWebサイトに求められることや、静的サイトジェネレータの解説、Gatsbyについてまで解説しています。
「第1部 基本的なWebサイトの構築」では、トップページとアバウトページを作成し、基本的なWebサイトを構築します。それぞれベースとなるページを元に形にしていき、画像の最適化、高速化、メタデータの設定、PWA化などの設定を行います。
「第2部 ブログの構築」では、ブログを構築して、第1部で作成したサイトに記事ページと記事一覧ページを追加します。各ページはベースとなるページを元に、外部からコンテンツデータを読み込んで形にしていきます。第1部と同様に画像の最適化などの設定も行います。
巻末の「APPENDIX」では、gatsby-imageを簡単に扱えるようにする方法、Googleアナリティクスの設定、gatsby-plugin-sitemapプラグインによるサイトマップ作成、Internet Explorer11への対応など、Gatsbyに関する便利なトピックを紹介しています。

本書に沿って実際に手を動かして作っていくことで、「GatsbyJS」の主要機能と使い方をマスターできることでしょう。
また、GitHub、Netlify、Contentful、GraphQL、React、Node.jsなど、制作に関わるさまざまなツールや技術も適宜使用していきます。
ぜひ本書で、これからのWeb開発を体感してみてください。
なお、本書のサンプル制作で使用する素材、プロジェクトデータ、コンテンツデータはダウンロード可能です。

【特典】
以下の2つの特典PDFをダウンロードできます!
・セットアップPDF:Node.js、GitHub、Netlify、Contentfulなど開発環境の準備などをまとめたPDF。
・microCMS対応ガイド:ブログの記事管理にヘッドレスCMSのmicroCMSを利用する方法をまとめたPDF。

商品を選択する

フォーマット 価格 備考
書籍 3,498
PDF 3,498 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

  

備考

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書:
『CSSグリッドレイアウト デザインブック』マイナビ出版刊
『HTML5&CSS3デザイン 現場の新標準ガイド』同上
『6ステップでマスターする 「最新標準」HTML+CSSデザイン』同上
『これからの「標準」を学ぶ マルチデバイス対応サイト構築』同上
『これからの「標準」を身につける HTML+CSSデザインレシピ』同上
『WordPressレッスンブック 5.x対応版』ソシム刊
『フレキシブルボックスで作る HTML5&CSS3レッスンブック』同上
『CSSグリッドで作る HTML5&CSS3 レッスンブック』同上
『HTML5&CSS3ステップアップブック』同上

目次

イントロダクション
INTRO 1 今どきのWebページ&Webサイトに求められること
INTRO 2 CMSの利用と問題
INTRO 3 静的サイトジェネレータ(SSG)という選択
INTRO 4 Gatsbyという選択
INTRO 5 Gatsbyを学ぶために
INTRO 6 制作するサンプルについて

第1部 基本的なWebサイトの構築
Chapter1 ページの作成
STEP 1-1 下準備
STEP 1-2 トップページを編集してみる
STEP 1-3 JSX
STEP 1-4 トップページを取り込む
STEP 1-5 画像の表示
STEP 1-6 CSSを適用する
STEP 1-7 できあがったサイトを公開してみる

Chapter2 画像の最適化
STEP 2-1 Gatsbyで画像を扱うための準備
STEP 2-2 画像を最適化した設定に置き換える
STEP 2-3 Fragmentに置き換える
STEP 2-4 残りの画像も最適化した設定に置き換える
STEP 2-5 gatsby-imageで画像を切り抜いて表示する
STEP 2-6 SVGをインライン化する
STEP 2-7 背景画像をgatsby-imageで表示する
STEP 2-8 staticの画像を削除する
STEP 2-9 パフォーマンスを確認する

Chapter3 パーツのコンポーネント化
STEP 3-1 ページを増やす準備
STEP 3-2 ヘッダーをコンポーネント化する
STEP 3-3 フッターをコンポーネント化する
STEP 3-4 レイアウトコンポーネントを作成する

Chapter4 ページを増やす
STEP 4-1 アバウトページを作成する
STEP 4-2 Font Awesomeでアイコンを表示する
STEP 4-3 フッターのSNSメニューをアイコンで表示する
STEP 4-4 リンクを設定する
STEP 4-5 404ページを作成する

Chapter5 メタデータの設定
STEP 5-1 基本的なメタデータの追加
STEP 5-2 メタデータの値
STEP 5-3 ページごとにメタデータの値を変える
STEP 5-4 ページのURLを明示する
STEP 5-5 OGPを追加する
STEP 5-6 OGP画像を追加する
STEP 5-7 PWA対応
STEP 5-8 アクセシビリティやSEOのスコアを確認する


第2部 ブログの構築
Chapter6 ブログのコンテンツを用意する
STEP 6-1 コンテンツの管理方法
STEP 6-2 ブログの構造
STEP 6-3 Contentfulの準備
STEP 6-4 GraphQLでContentfulのデータを扱うための準備

Chapter7 ブログの記事ページを作成する
STEP 7-1 記事ページを作成する
STEP 7-2 記事のタイトルを表示する
STEP 7-3 記事の投稿日を表示する
STEP 7-4 記事のカテゴリーを表示する
STEP 7-5 記事のアイキャッチ画像を表示する
STEP 7-6 記事の本文(リッチテキスト)を表示する
STEP 7-7 リッチテキスト内の見出しにアイコンを付ける
STEP 7-8 リッチテキスト内の画像を表示する
STEP 7-9 リッチテキスト内の改行を<br />に変換する

Chapter8 ブログの記事ページを自動生成する
STEP 8-1 記事ページを自動生成する
STEP 8-2 前後の記事へのリンクを設定する
STEP 8-3 記事ページのメタデータを設定する

Chapter9 ブログの記事一覧ページを作成する
STEP 9-1 記事一覧ページを作成する
STEP 9-2 記事のタイトルを表示する
STEP 9-3 記事のアイキャッチ画像を表示する
STEP 9-4 リンクを設定する
STEP 9-5 メタデータを設定する
STEP 9-6 1ページの記事の表示数を変える
STEP 9-7 複数ページに分けた記事一覧ページを生成する
STEP 9-8 ページネーションを追加する
STEP 9-9 ナビゲーションメニューに記事一覧へのリンクを追加する
STEP 9-10 トップページに最新記事を表示する


Chapter10 カテゴリーページの作成
STEP 10-1 カテゴリーページを作成する
STEP 10-2 ページネーションなしでカテゴリーページを生成する
STEP 10-3 カテゴリーページの見出しとメタデータを設定する
STEP 10-4 ページネーションを元に戻す
STEP 10-5 カテゴリーページにアクセスできるようにする
STEP 10-6 パフォーマンスを確認する


APPENDIX
APPENDIX A gatsby-imageを簡単に扱えるようにする
APPENDIX B Googleアナリティクス
APPENDIX C サイトマップ
APPENDIX D RSS
APPENDIX E Google Fonts
APPENDIX F IE11対応
 

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?