サイト集客の新手法！WordPressサイトのモダンWeb対応入門
書籍情報
発売日 : 2021年05月07日
著者／編集 : 末次 章
出版社 : 日経BP
発行形態 : 単行本
書籍説明
内容紹介
本書では、モダンＷｅｂ（最新のＷｅｂ技術）を使った「サイト変換ツール」を独自に作成し、今使っているＷｏｒｄＰｒｅｓｓの画面デザインとサイト制作データをそのまま利用して、以下の機能を追加できるようにしました。通信待ちゼロの高速表示、通信オフ時のサイト利用、通信オフ時の送信を、通信オン時に自動送信。これらの機能を追加するには、「サイト変換ツール」から出力されたファイルをＷｏｒｄＰｒｅｓｓへアップロードするだけです。もちろん、変換したいサイトごとに内容・構成は異なるので、あらゆるサイトを全自動で変換するのは困難です。そこで、「サイト変換ツール」は、必要な個所をカスタマイズして、さまざまなサイトへ柔軟に対応できるように設計してあります。ぜひ挑戦してみてください。
目次
はじめに
本書を読む前に
第1章 基礎知識1～モダンWeb対応WordPressの体験～
1-1 デモサイトの紹介
1-1-1 サイトへのアクセス
1-1-2 サイトの拡張機能
1-1-3 動作環境
1-1-4 デモサイトの構造
1-1-5 各ページの呼び出し
1-2 通信待ちゼロの高速表示
1-2-1 準備（高速モードの開始）
1-2-2 動作確認（写真を含むページ）
1-2-3 集客効果（ぺージ表示の高速化）
1-2-4 前提知識（Googleマップの高速表示）
1-2-5 動作確認（Googleマップの高速表示）
1-2-6 集客効果（インラインフレームの高速表示）
1-3 通信オフの対応
1-3-1 準備（通信のオフ）
1-3-2 動作確認（通信オフ時のページ表示）
1-3-3 集客効果（通信オフ時のぺージ表示）
1-3-4 動作確認（問い合わせの送信）
1-3-5 集客効果（問い合わせの送信）
第2章 2-1 基礎知識2～よくある質問と回答～
2-1 基本原理 19
Q1 表示の高速化の仕組みは？
Q2 高速モードとは？
Q3 通信オフ対応の仕組みは？
2-2 導入
Q4 レンタルサーバーでも利用できる？
Q5 どんなサイトに利用できる？
Q6 サイトをモダンWebに対応させる方法は？
Q7 サイト変換ツールとは？
Q8 運用中のサイトへの影響は？
Q9 プログラムの知識なしで大丈夫？
Q10 運用の手間は？
2-3 類似ツールとの違い
Q12 ページを保存するアプリとの違いは？
2-4 仕組みの詳細
2-4-1 子サーバーの構造
2-4-2 子サーバーの起動から高速モードまでの流れ
2-4-3 一括ダウンロードの高速化
2-4-4 サイト変換ツールの構造
2-4-5 サイト変換ツール STEP1の処理
2-4-6 サイト変換ツール STEP2の処理
2-4-7 サイト変換ツール STEP3の処理
2-4-8 運用上の注意点
第3章 実践1～テスト用サイトを作る～
3-1 準備
3-1-1 システム環境
3-1-2 必要ファイルのダウンロード
3-1-3 操作の流れ
3-2 WordPress実行環境の準備
3-2-1 LOCALのダウンロード
3-2-2 LOCALのインストール
3-3 テスト用サイトの設定
3-3-1 新規サイトの作成
3-3-2 サイトのhttps対応
3-4 WordPressの設定
3-4-1 管理者ログイン
3-4-2 日本語表示設定
3-4-3 プラグインのインストール
3-4-4 サイトデータのインポート
3-5 サイト変換ツールの操作
3-5-1 サイト変換ツールの実行
3-6 サイトの機能拡張
3-6-1 機能拡張ファイルのアップロード
3-6-2 拡張機能の動作確認
第4章 実践2～サイト変換ツールを使いこなす～
4-1 基本カスタマイズ
4-1-1 設定ファイル
4-1-2 設定ファイルの編集
4-1-3 サイトアドレスの設定
4-2 STEPごとの調整
4-2-1 STEP1
4-2-2 STEP2
4-2-3 STEP3
4-3 機能拡張ファイルの更新
4-3-1 更新のタイミング
4-3-2 更新手順
4-4 サイトの動作確認と調整
4-4-1 通信オン状態の動作確認
4-4-2 通信オフ状態の動作確認
4-4-3 リソースファイルの追加作業
4-5 その他のカスタマイズ
4-5-1 問い合わせ対応
4-5-2 キャプチャ間隔
4-5-3 モバイル画面最適化
4-5-4 開始確認ページのスキップ
4-5-5 開始確認ページの外観
4-5-6 高速モード表示の外観
4-6 変換対象サイトの変更
4-6-1 httpsプロトコル対応
4-6-2 パーマリンクURL形式
4-6-3 変換対象外ファイル
第5章 技術詳細1～サイト変換ツールの内部構造～
5-1 概要
5-1-1 フォルダ構造
5-1-2 ソースコードの構成
5-1-3 ログの種類
5-2 STEP1
5-2-1 フォルダ構造
5-2-2 メインモジュール
5-2-3 依存モジュール
5-2-4 jsdomとは
5-2-5 ソースコード
5-2-6 ログ解析
5-3 STEP2
5-3-1 フォルダ構造
5-3-2 メインモジュール
5-3-3 依存モジュール
5-3-4 puppeteerとは
5-3-5 puppeteerの通信インターセプト機能
5-3-6 ソースコード
5-3-7 ログ解析
5-4 STEP3
5-4-1 フォルダ構造
5-4-2 メインモジュール
5-4-3 依存モジュール
5-4-4 ソースコード
5-4-5 ログ解析
第6章 技術詳細2～子サーバーの内部構造～
6-1 子サーバーの概要
6-1-1 サイトのフォルダ構造
6-1-2 子サーバーのフォルダ構造
6-1-3 子サーバーのファイルとぺージの関連
6-1-4 ぺージごとの役割
6-1-5 ソースコードの構成
6-1-6 ログの種類
6-2 子サーバーの起動
6-2-1 子サーバーの状態遷移
6-2-2 状態：未登録
6-2-3 状態：登録
6-2-4 状態：インストール
6-2-5 状態：有効化
6-2-6 状態：コントローラー昇格
6-2-7 状態：休止
6-2-8 ブラウザからの状態検知
6-2-9 子サーバー起動のログ
6-3 子サーバーのキャッシュ
6-3-1 キャッシュ機能の概要
6-3-2 キャッシュ準備の高速化
6-3-3 キャッシュストレージ概要
6-3-4 キャッシュストレージの利用
6-3-5 キャッシュの準備
6-3-6 キャッシュの更新
6-4 子サーバーのリクエスト処理
6-4-1 リクエストの処理切替
6-4-2 リクエストの分岐条件
6-4-3 条件分岐のコード
6-4-4 GETメソッドのリクエスト処理
6-4-5 POSTメソッドのリクエスト処理
6-5 子サーバーの管理
6-5-1 Chrome Devevoper Toolsによる管理
6-5-2 キャッシュ管理ぺージ
索引
本書を読む前に
第1章 基礎知識1～モダンWeb対応WordPressの体験～
1-1 デモサイトの紹介
1-1-1 サイトへのアクセス
1-1-2 サイトの拡張機能
1-1-3 動作環境
1-1-4 デモサイトの構造
1-1-5 各ページの呼び出し
1-2 通信待ちゼロの高速表示
1-2-1 準備（高速モードの開始）
1-2-2 動作確認（写真を含むページ）
1-2-3 集客効果（ぺージ表示の高速化）
1-2-4 前提知識（Googleマップの高速表示）
1-2-5 動作確認（Googleマップの高速表示）
1-2-6 集客効果（インラインフレームの高速表示）
1-3 通信オフの対応
1-3-1 準備（通信のオフ）
1-3-2 動作確認（通信オフ時のページ表示）
1-3-3 集客効果（通信オフ時のぺージ表示）
1-3-4 動作確認（問い合わせの送信）
1-3-5 集客効果（問い合わせの送信）
第2章 2-1 基礎知識2～よくある質問と回答～
2-1 基本原理 19
Q1 表示の高速化の仕組みは？
Q2 高速モードとは？
Q3 通信オフ対応の仕組みは？
2-2 導入
Q4 レンタルサーバーでも利用できる？
Q5 どんなサイトに利用できる？
Q6 サイトをモダンWebに対応させる方法は？
Q7 サイト変換ツールとは？
Q8 運用中のサイトへの影響は？
Q9 プログラムの知識なしで大丈夫？
Q10 運用の手間は？
2-3 類似ツールとの違い
Q12 ページを保存するアプリとの違いは？
2-4 仕組みの詳細
2-4-1 子サーバーの構造
2-4-2 子サーバーの起動から高速モードまでの流れ
2-4-3 一括ダウンロードの高速化
2-4-4 サイト変換ツールの構造
2-4-5 サイト変換ツール STEP1の処理
2-4-6 サイト変換ツール STEP2の処理
2-4-7 サイト変換ツール STEP3の処理
2-4-8 運用上の注意点
第3章 実践1～テスト用サイトを作る～
3-1 準備
3-1-1 システム環境
3-1-2 必要ファイルのダウンロード
3-1-3 操作の流れ
3-2 WordPress実行環境の準備
3-2-1 LOCALのダウンロード
3-2-2 LOCALのインストール
3-3 テスト用サイトの設定
3-3-1 新規サイトの作成
3-3-2 サイトのhttps対応
3-4 WordPressの設定
3-4-1 管理者ログイン
3-4-2 日本語表示設定
3-4-3 プラグインのインストール
3-4-4 サイトデータのインポート
3-5 サイト変換ツールの操作
3-5-1 サイト変換ツールの実行
3-6 サイトの機能拡張
3-6-1 機能拡張ファイルのアップロード
3-6-2 拡張機能の動作確認
第4章 実践2～サイト変換ツールを使いこなす～
4-1 基本カスタマイズ
4-1-1 設定ファイル
4-1-2 設定ファイルの編集
4-1-3 サイトアドレスの設定
4-2 STEPごとの調整
4-2-1 STEP1
4-2-2 STEP2
4-2-3 STEP3
4-3 機能拡張ファイルの更新
4-3-1 更新のタイミング
4-3-2 更新手順
4-4 サイトの動作確認と調整
4-4-1 通信オン状態の動作確認
4-4-2 通信オフ状態の動作確認
4-4-3 リソースファイルの追加作業
4-5 その他のカスタマイズ
4-5-1 問い合わせ対応
4-5-2 キャプチャ間隔
4-5-3 モバイル画面最適化
4-5-4 開始確認ページのスキップ
4-5-5 開始確認ページの外観
4-5-6 高速モード表示の外観
4-6 変換対象サイトの変更
4-6-1 httpsプロトコル対応
4-6-2 パーマリンクURL形式
4-6-3 変換対象外ファイル
第5章 技術詳細1～サイト変換ツールの内部構造～
5-1 概要
5-1-1 フォルダ構造
5-1-2 ソースコードの構成
5-1-3 ログの種類
5-2 STEP1
5-2-1 フォルダ構造
5-2-2 メインモジュール
5-2-3 依存モジュール
5-2-4 jsdomとは
5-2-5 ソースコード
5-2-6 ログ解析
5-3 STEP2
5-3-1 フォルダ構造
5-3-2 メインモジュール
5-3-3 依存モジュール
5-3-4 puppeteerとは
5-3-5 puppeteerの通信インターセプト機能
5-3-6 ソースコード
5-3-7 ログ解析
5-4 STEP3
5-4-1 フォルダ構造
5-4-2 メインモジュール
5-4-3 依存モジュール
5-4-4 ソースコード
5-4-5 ログ解析
第6章 技術詳細2～子サーバーの内部構造～
6-1 子サーバーの概要
6-1-1 サイトのフォルダ構造
6-1-2 子サーバーのフォルダ構造
6-1-3 子サーバーのファイルとぺージの関連
6-1-4 ぺージごとの役割
6-1-5 ソースコードの構成
6-1-6 ログの種類
6-2 子サーバーの起動
6-2-1 子サーバーの状態遷移
6-2-2 状態：未登録
6-2-3 状態：登録
6-2-4 状態：インストール
6-2-5 状態：有効化
6-2-6 状態：コントローラー昇格
6-2-7 状態：休止
6-2-8 ブラウザからの状態検知
6-2-9 子サーバー起動のログ
6-3 子サーバーのキャッシュ
6-3-1 キャッシュ機能の概要
6-3-2 キャッシュ準備の高速化
6-3-3 キャッシュストレージ概要
6-3-4 キャッシュストレージの利用
6-3-5 キャッシュの準備
6-3-6 キャッシュの更新
6-4 子サーバーのリクエスト処理
6-4-1 リクエストの処理切替
6-4-2 リクエストの分岐条件
6-4-3 条件分岐のコード
6-4-4 GETメソッドのリクエスト処理
6-4-5 POSTメソッドのリクエスト処理
6-5 子サーバーの管理
6-5-1 Chrome Devevoper Toolsによる管理
6-5-2 キャッシュ管理ぺージ
索引
著者情報
末次 章
末次, 章
