Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 [単行本]
    • Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 [単行本...

    • ¥3,498105ポイント(3%還元)
    • 在庫あり2022年12月8日木曜日までヨドバシエクストリームサービス便(無料)がお届け
100000009003278780

Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 [単行本]

価格:¥3,498(税込)
ポイント:105ポイント(3%還元)(¥105相当)
フォーマット:
専用電子書籍リーダアプリ「Doly」が必要です。無料ダウンロード
お届け日:在庫あり今すぐのご注文で、2022年12月8日木曜日までヨドバシエクストリームサービス便(無料)がお届けします。届け先変更]詳しくはこちら
出版社:マイナビ出版
販売開始日: 2020/05/30
お取り扱い: のお取り扱い商品です。
ご確認事項:返品不可
店舗受け取りが可能です
マルチメディアAkibaマルチメディア梅田マルチメディア博多にて24時間営業時間外でもお受け取りいただけるようになりました

Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 の 商品概要

  • 要旨(「BOOK」データベースより)

    GatsbyJS×GitHub×Netlify×Contentfulによるサイト構築をステップバイステップで解説。「高速化&最適化」「メタデータ対応」「SPAやPWAへの対応」など、これからのWebサイトに求められる要素に対応するために。
  • 目次

    イントロダクション
    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 リッチテキスト内の改行を
    に変換する

    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対応
  • 内容紹介

    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。
  • 著者について

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

Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 の商品スペック

商品仕様
出版社名:マイナビ出版
著者名:エビスコム(著)
発行年月日:2020/06/01
ISBN-10:4839973008
ISBN-13:9784839973001
判型:B5
対象:専門
発行形態:単行本
内容:電子通信
言語:日本語
ページ数:319ページ
縦:24cm
横:19cm
他のマイナビ出版の書籍を探す

    マイナビ出版 Webサイト高速化のための静的サイトジェネレーター活用入門―GatsbyJSで実現する高速&実用的なサイト構築 [単行本] に関するレビューとQ&A

    商品に関するご意見やご感想、購入者への質問をお待ちしています!