WordPress サーバー編

インターネットの仕組みを正しく理解して自由自在

講座資料（PDF）

ダウンロードして、参加者の人数分印刷して使用してください。

• 講座資料：WorsPress講座 サーバー編
• 講座資料：インターネットの仕組み資料

ワークショップ動画

講座の意図、狙いを理解しながら動画を見ましょう。

イントロダクション

わからないことリスト作り

仮説を作る

人間模型でシミュレーション

まとめ

Q&A

以降のビデオは準備中です。

特典マニュアル

サーバー契約

サーバーを契約しましょう。

全体像を知ろう

なぜ、サーバーがいるのか？サーバーとはなんなのか？を動画を見て、理解しましょう。

オススメのサーバー

私たちも使っている、オススメのサーバーを紹介します。

>  Xserver を借りる

サーバーに契約する方法

それでは、実際にサーバーに登録しましょう。
動画を見る上でのポイントは、「どうやってその場で学んでいるか？を見る」ことです。動画の中に出てくるボタンの位置や操作の順番を覚えようとしないでください。
理由は、ボタンの位置やサイトの見た目は変わるからです。もし今回の動画の中で出てくる操作のステップだけを覚えてしまうと、ある日突然ページが変わると、対応できなくなります。
そこで、動画の中で操作をしている人が「どのような意識で」「どのようなものの見方で」操作をしているのか？という観点でみてみましょう。

独自ドメインの設定について

独自ドメインの仕組みと、具体的な設定の方法を紹介しています。

ドメインの全体像を知ろう

まずは、ドメインの仕組みや役割をなんとなく理解しましょう。

画像解説

(1)ドメイン取得会社がやる仕事は2つ。1つはドメインの予約。2つめは「どのDNSに登録しているのか？を国際期間にお知らせする」です。

操作を知ろう

実際にドメインを取得する様子を見て、「ドメインの取り方」を学びましょう。

独自ドメインは必要なのか？

よく、「独自ドメインは必要ですか？」と聞かれるのですが、独自ドメインは必要です。なぜ、必要なのかを理解しましょう。

FTPソフトについて

FTPソフトを使えば、あなたのお使いのサーバーのファイルにアクセスすることができます。ファイル一覧を見たり、特定のファイルを追加したり、ファイルの中身を書き換える時にすごく便利です。
(1) FTPソフトをダウンロードする

無料であればFileZilla、有料であればTransmitをおすすめします

(2) FTPソフトを使って、御使いのサーバーにアクセスする


(3) 完了

お使いのサーバーでの接続の仕方がわからない場合

もし、お使いのFTPソフトとサーバーの接続の方法がわからない場合は、Webで検索してみましょう。サーバーのマニュアルに「FTP接続情報」は必ずありますので、そちらを参考にしてみてください。
例 ) Xserver の場合
(1) ブラウザで、「Xserver FTP アカウント設定」と検索する

(2) Xserver が書いている記事を見つける

(3) 記事を読む

Q. FTP、SFTPソフトは、どのアプリを使えばいいですか？

A. 以下にお勧めのアプリ（Windows, Mac に分けて）を載せています。ご覧ください。
更に、「FTP、SFTPとは何？」という方のために、仕組みについても解説しています。

仕組み

サーバーにファイルや画像などのデータをアップするには、

• FTP
• SFTP
• WebDAV

など、様々な方法があります。
基本的には、この3つの中から選び、サーバーにデータをアップします。
（FTP,SFTP のどちらにも対応しているアプリもあります）
この3つには、それぞれ特徴があります。
以下をご覧ください。

FTP（2番目にお勧め）

FTPは、昔からありますが、セキュリティーに問題があります。
FTPを使って、サーバーにデータをあげるとデータを取られてしまう可能性があります。

SFTP（1番お勧め）

現在は、 SFTPが主流です。私たちが推奨するのは、このSFTPです。
FTPは、セキュリティーに問題がありましたが、SFTPは暗号化通信が行われ、セキュリティーも万全です。
しかし、 XServer はこのSFTPに対応していないので、注意が必要です。

WebDAV（お勧めしない）

現在ほとんど使われていませんが、ファイル構造がパソコンのようにフォルダのように管理できます。

このような特徴をそれぞれ持っているのですが、サーバーによっては「SFTPは対応していない」など、対応はサーバーによりけりなので、その点は注意しましょう。
代表的な例をあげると、

• XServer は、 SFTPに対応しておらず、 FTPのみ対応です
• VPS などを使うと、SFTP が主流です

解決策

現在は、SFTPが主流なので、SFTPを使いましょう。
FTPを使うと、ローカル（PC)でサイトを作っていて、サーバーにアップした時にデータを取られる可能性があるためです。
しかし、WordPress ユーザーの方の多くは、XServer をお使いだと思います。
前述しましたが、XServer はSFTPに対応していないため、XServer をお使いの方は、「XServerを使っていたら、データを取られてしまうのか。どうしよう・・・」と思われていることでしょう。
ご安心ください。XServer をお使いの方のための解決策をご用意しました。
以下をご覧ください。

解決策1

• 気にせず、FTPを使う
• なぜなら、そんなに頻繁にデータを取られることはないので、気にせずFTPを使う

解決策2（お勧め）

• 基本は、FTPを使用して、パスワードなどが入った重要なファイルのみ、XServerのファイルマネジャー（暗号化している）でアップする
• 例えば、WordPress だとwp-config.php というファイルは、データベースのパスワードなどが入っているため、取られてしまうと危険です
• ですので、このwp-config.php というファイルのみ安全なXServerのファイルマネジャーからアップしましょう

お勧めFTP、SFTPアプリ

Windows

• FFFTP : FTPのみ対応（無料）
• WinSCP : FTP,SFTP のどちらにも対応（無料）
• Cyberduck : FTP,SFTP のどちらにも対応。これがお勧め。（無料）

Mac

• Transmit : FTP,SFTP のどちらにも対応。同期機能、高速化など高機能なアプリです。（有料）
• Coda 2 : FTP,SFTP のどちらにも対応。FTP、SFTP機能付きのエディターです。これ一つあれば、何でもできるので、一番お勧めです。（有料）
• Cyberduck : FTP,SFTP のどちらにも対応。無料ならこれがお勧め。（無料）

DNS設定について

DNS(ドメインネームサーバー)について理解しましょう。今回は、私たちが利用しているDNS、Cloudflareを例に紹介しています。

DNSの仕組み

具体的な設定の方法

具体的な設定の方法を見て設定して見ましょう(動画後半でDNSの設定をしています)。

しっかり理解しよう

「インターネットの仕組み」を理解して、CloudFlareを操作してください。やり方だけをみて、ボタンを押すとミスがあっても原因を推測できなくなります。
インターネットの仕組みについては、こちらをご覧ください。

図解説明

この作業は、CloudFlareのDNSで、あなたのドメインを設定できるように登録する作業です。やることは、以下の３つです。

1. CloudFlare でドメインを使えるように登録する
2. ドメイン取得会社で、CloudFlareをDNSとして使うように申請する
3. 待つ、設定されたことを確認する

です。
まず、以下のような画面で「ドメインの登録作業」を行います。

登録作業を最後まで進めてください。もし、すでにWebサイトを公開している場合は、既存のDNSの情報を取り込んでくれます。
ただし、これだけで、CloudFlare を使うようにはなりません（その理由は、インターネットの仕組みから推測することができるでしょうか？）。
DNSとして、CloudFlare を使うようにドメイン取得会社で申請を行う必要があります。
「ムームードメイン」や「お名前.com」「Xドメイン」など、ドメインを取得した業者のWebサイトにて「CloudFlareを使う」設定を行ってください。

DNSレコードの入力方法

登録形式を選んで、必要な項目を入力して、Add Recordを押すだけです。押されたら、すぐに反映されます。

ルートドメインでアクセスできるように設定する

ルートドメインとは「 toiee.jp 」のように「取得した時のもの」を指します。toiee.jp では、www.toiee.jp は使わず、toiee.jp に統一しています。www.toiee.jp にアクセスしても、自動的に toiee.jp に転送する設定を行なっています。
このような設定を行う方法を以下に説明します。
(1) @ を使ってDNSレコードを追加する
CloudFlareでは、ルートドメインの登録は、 @ マークで行います。XServerを使っている場合は、以下のように自分にサーバー名を入れると良いでしょう。あるいは、AレコードでIPアドレスを入力します。

(2) CNAME で、www を「ルートドメイン宛て」として登録します

(3) Page Ruleをクリックする

(4) Forwarding設定を行う

www.あなたのドメイン/* を入力します。次に、Add a Setting をクリックして、For と検索すると Forwarding URL が出てくるので選択します。さらに、Select Status Code で、 301 Permanent を選択します。
最後に、転送先として、 あなたのドメイン/$1と入力し、Save and Deploy をクリックして完了です。

ドメインの削除方法

この作業を行っても、何かが元に戻るわけではありません。ただ設定が消えるだけです。正しくWebサイトが表示される状態にするには、

• どのDNSを使うか、ドメイン取得業者で指定
• 指定したDNSに、どのWebサーバーを使うかなどを記載（DNSレコードを設定）
• Webサーバーで、どのドメインで動作するか設定

が必要です。
なお、ドメインの削除は、以下の通りです。

1. 削除したいドメインを選ぶ
2. Overview の Advanced をクリックする
3. Delete Website をクリックする
4. Delete を選ぶ

よくある間違い

DNSの指定を行なっていない

CloudFlareを使うには「ドメイン取得業者」で、CloudFlareをDNSに指定する必要があります。設定を行なっていないと、CloudFlareの設定画面で「エラーメッセージ」が出ているはずです。
設定画面のメッセージを見て、正しくCloudFlareのDNSの指定を行なってください。

設定例

Webサーバーが設定されていない

Webサーバーは、ブラウザから「OOO.com のデータをください」と言われた時、OOO.com のデータを探しにいきます。この時、OOO.com の問い合わせに対応できるように設定されている必要があります。
具体的には、レンタルサーバーでは「独自ドメイン設定」が必要です。

DNSレコードを追加していない

Webサーバーの設定を行うだけでは動作しません。DNSレコードを設定しないと、ブラウザに「サーバーのIP」が渡りません。
例えば、XServer でサブドメインを追加したとします。これだけでは、動作しません。

• Webサーバーのサブドメインの設定を行う
• CloudFlare でサブドメインのためのDNSレコードを入力する

このような作業が必要です。

別のDNSサーバーに、DNSレコードを登録している

DNSレコードを設定する先は、CloudFlareです。DNS取得業者の設定で設定した「DNS」に追加する必要があります。

URLとディレクトリ

「WordPressのイントール」の中では、サーバーの管理画面から直接WordPressをインストールする方法を紹介しました。
この方法は、サーバーが自動でやってくれるので、手軽な方法の反面、「実際に何が起きているか」を理解するのが難しいという点もあります。
この動画では、URLとディレクトリの関係について説明しています。
URLとディレクトリの関係を理解していなければ、
どこにWordPressを設置したのかわからなくなって、
どのURLでWordPressにアクセスすればいいのかわからなくなります。
URLとディレクトリの関係を理解し、
URLとディレクトリが対応していることをしっかり確認するようにしましょう。
是非「自動インストール」ではなく「FTPソフトを使って、手動でアップ」してみてください

URLとディレクトリの関係

ディレクトリいうと難しく感じると思いますが、
ここでは理解しやすいために「フォルダ」と言ってしまっても差し支えありません。
URLを見た時に、http://wpa.toiee.jp/のようになっているのをよく見かけるとおもいます。
これは、「http://wpa.toiee.jp/にある情報をください」と言っています。
どこのフォルダにあるファイルを表示するかというルールを書いています。
これがXserverの場合、public_htmlの下にファイルを置くというルールがあります。
(これはサーバーによって異なります)
URLを指定してアクセスすることで、ディレクトリ (フォルダ)を指定していることになります。
どういうことか、実験を通して、もう少し見ていきましょう。

実験1：フォルダの中にあるhtmlファイルの名前を変えてアクセスするとどうなるか？

これから2つの実験を通して、URLとディレクトリの関係を一緒に理解していきましょう。
まず、FTPソフトを開いて、サーバーにアクセスしましょう。
できればSFTPでアクセスすると、安全ですので、SFTP推奨です。

HTMLファイルの名前を変えてみると…

すると…

このような画面が出ます。理由は、ファイル名が変わっていて、
変更前のURLでは、フォルダを参照できなかったからです。
ファイル名を変えた後に、同じところにアクセスしても、表示されません。

実験2：フォルダを作って、その中にHTMLファイルを入れたらどうなるか？

今度は、新規フォルダを作ってその中にHTMLファイルを入れてみましょう。
今回はabcという名前のフォルダを作ってその中にHTMLファイルを作りました。

先ほどと同じように、wpa-dev.com/index2.htmlと入力するとどうなるでしょうか？
そうすると、アクセスできないことがわかります。
そこで、以下のように入力して、アクセスします。

結果、アクセスができました。
ここで大切なことは、「フォルダとURLが対応していることをしっかり確認すること」です。
ちゃんと確認しなければ、混乱してしまいます。

WordPressを入れる場所をしっかり確認する

WordPressを入れる時も、URLとディレクトリの関係を見ることが大切です。
仮にメンバー用のサイトを作る時のことを考えてみましょう。
今回はわかりやすくするために、memberというフォルダを作ります。
そして、この中にWordPressを入れます。

その場合、どんなURLになるでしょうか？
以下のURLになります。

自分で、実験して納得することが大切なので、この動画を見て、
実際にファイルの名前を変えてアクセスしてみたり、
フォルダを作って、その中にhtmlファイルを作ってアクセスしてみましょう。

XServer の設定

XServer を例に説明します。全体の流れは、以下の通りです。
※ 「XServerのDNSを使う設定」にしている場合に限ります。もし、設定方法がわからない場合は、ページ末尾をご覧ください。

1. XServerのサーバーパネルにログインする（サーバーを管理するための場所）
   
2. ドメイン設定をクリックする
   
3. 無料SSLを使う状態にして、ドメインを入力し、確認して設定する
   
4. しばらく待つ（ 設定したドメインで接続できるようになるまで待つ ）

ドメインの設定が、XServer自体とインターネット上に反映されるまで待つ必要があります。

XServer の DNSを使うようにする設定

XServer の DNS は、以下の通りです。
https://www.xserver.ne.jp/manual/man_domain_namesever_setting.php
ネームサーバー2
ネームサーバー3
ネームサーバー4
ネームサーバー5

これを、ムームードメインの「ドメインネームサーバー設定」で設定すれば良いです。

1. ムームードメインにログイン
2. 設定したいドメインをドメイン一覧からクリック
3. ネームサーバー設定変更
   
4. GMOパペポ以外 のネームサーバーを利用を選ぶ
   
5. 上記のXServerのDNSを設定する

CloudFlare と XServer

CloudFlare を使って、XServer で運営する方法を説明します。ここでは、

• ムームーでドメイン取得
• CloudFlare でネームサーバー運営
• XServerでWebサイトを公開

という状況で説明します。

準備

ムームードメインでドメインを取得したら、CloudFlareをネームサーバーとして指定するように設定します。

ネームサーバーの指定

1. ムームードメインにログイン
2. 設定したいドメインをドメイン一覧からクリック
3. ネームサーバー設定変更
   
4. GMOパペポ以外 のネームサーバーを利用を選ぶ
   
5. CloudFlareで指定された「ネームサーバー」を設定する（上記で良い）

CloudFlareにドメインを登録

次に、CloudFlare で「ドメインを登録」します。初めて登録する場合は、

1. CloudFlare にアクセス
   
2. ログインする（アカウントがなければ作成する）
   
3. ドメインを入力して、Begin scan する
   
4. スキャンが終わるまで待つ
   
5. Continu Setup をクリックする
   
6. 設定を確認する。もし、既にドメインを運用しているなら、現在の設定情報を使って設定が行われる。足りないものがあれば、追記する（例えば、GoogleのWebマスターツールのための設定など）
   
7. Free Website （無料プラン）を選ぶ
   
8. 表示された内容に従って、ネームサーバーを設定する（上記の「ネームサーバーの指定」を参照）。下の意味は、XServerのネームサーバーが設定されているので、それらを変更および削除するという意味です。
   
9. 8が設定し終わってからContinueを押す。エラーが出た場合は、暫く待ってから設定します。

SSLを強制にする

以下の設定では、サブドメインもすべて「SSL強制」となります。

1. CloudFlareにログインする
2. 設定したいドメインをクリックする
   
3. Page Rules をクリックする
   
4. Create Rule をクリックする
   
5. 以下のようなルールを作成する（ toiee.jp は、あなたのドメインに読み替えてください）
   
6. Save and Deploy をクリックする

ドメイン（サブドメイン）を設定する手順

1. CloudFlareにログインする
2. 設定したいドメインをクリックする
   
3. サブドメイン名を入力し、IPアドレスを入れて、雲アイコンを「グレー」に設定（クリックする）し、Add Record する。（Aレコード、Cレコード、Txtなどは、その時々に合わせて設定してください）
   
4. XServerのサーバーパネルにログインする（サーバーを管理するための場所）
   
5. ドメイン設定をクリックする
   
6. 無料SSLを使う状態にして、ドメインを入力し、確認して設定する
   
7. しばらく待つ（ 設定したドメインで接続できるようになるまで待つ ）ドメインの設定が、XServer自体とインターネット上に反映されるまで待つ必要があります。
8. https://ドメイン で接続できるようになったら、CloudFlareにログイン
9. 灰色アイコンをオレンジに変更する

サブドメインの場合は、以下のようになります。
1. CloudFlareにログインする
2. 設定したいドメインをクリックする
3. サブドメイン名を入力し、IPアドレスを入れて、雲アイコンを「グレー」に設定（クリックする）し、Add Record する。（Aレコード、Cレコード、Txtなどは、その時々に合わせて設定してください）
4. XServerのサーバーパネルにログインする（サーバーを管理するための場所）
5. サブドメイン設定をクリックする
6. 設定する
7. 独自SSL設定（無料）をクリックする
8. 設定したサブドメインを選択する
9. 設定を行う
10. 暫く待つ（https で通信できるまで）
11. CloudFlare にログイン
12. オレンジ色アイコンに変更する

引越しの仕組みを理解しよう

実際に引っ越しする時はDuplicatorというプラグインを使いましょう。
こちらのリンクをクリックして、ダウンロードしましょう。

Duplicator で簡単に引越ししよう

Duplicatorがしてくれること

Duplicatorを使って引っ越す方法

自由自在に引越しをできるようになろう

自由自在に引越しできるようになろう

> インターネット、引越しの仕組みを学ぶ

練習環境から、本番環境への引越しシミュレーション

同じサーバー内の引越しシミュレーション

ドメインそのまま、サーバーのみ引越しシミュレーション

自由自在に引越しできるようになろう まとめ

引越しのエラー

Files Total Size

解決策

不必要なファイルを手動で消す方法

1. 必要のないファイルを削除してデータ量を減らす
2. 必要なファイルでもデータファイルが大きい場合はダウンロードして、移行先にで再度アップロードする
3. バックアップファイルを最新のもの以外を削除する

これらを試してください。

PHPの制限を解除する方法

database_totalsize

解決策

データベースのトータルサイズが大きいときの解決策は

• データベースのファイルサイズを減らす
• PHPの制限を解除する

このいずれかが考えられます。

データベースのファイルを減らす方法

データベースのサイズを減らすために「Better Delete Revision」を使う方法があります。

PHPの制限を解除する方法

インターネットの仕組み

インターネットの仕組み

インターネットの仕組み

スマホやパソコンで、「ショッピングサイト」や「Youtube」などのサイトへアクセスした時には、以下のような仕組みを通って、サイトがあなたのスマホやPCに表示されます。

上記の仕組みを、ざっくり説明すると、

1. インターネットを使ってサイトを見る時には、まず「ブラウザ（Google Chrome、Safariなど）」にアクセスしますね

2. アクセスしたいサイトの情報を、インターネット上のあらゆる経路を通って、サーバーに取りに行きます

3. そして、サイトが表示されます

ここまでが、ざっくりした仕組みの説明です。
このざっくりした仕組みをもう少し細かく説明すると、
・DNS（ドメインネームサーバー）
・IPアドレス
・hostsファイル
などが関係しています。

詳しくは、上記の動画で説明しています。
ご覧下さい。

ドメインの仕組み

• 理解のステップ
  • 徐々に細かく、難しくなっていく
  • 繰り返し、細かく見ていこう
  • ズームインしていく感じ、全体から部分へ
  • わからくてもOK
• どうやってWebサイトが、表示されるのか？（簡単バージョン）
• どうやってWebサイトが、表示されるのか？（DNSを含める）
• どうやってWebサイトが、表示されるのか？　（CDNを含める）

仕組みがわかれば、引越しができる

• ドメインとは何か？
• ドメイン取得とは？
• ドメイン・ネーム・サーバーとは？
• レンタルサーバーの作業と比較してみよう
• レンタルサーバーを引っ越しする場合、どうしたらいいか？
• ブログはMedium、ショッピングカートは、メールはGoogleは、どうやって実現するのか？

ティーチャー

ワークショップ進行レジュメ

以下のリンクを「副クリック」し、保存してください

• 進行レジュメ