ホームページビルダー18 XAMPPでWordPress

本記事は、2012年10月9日 に記述した「ホームページビルダー17とXAMPPでWordPress」に追記したものです。既にXAMPPを構築している方は、hpb17と違いは、ほとんどないため、複数サイトの構築方法のみ参照ください。

変更点

  • hpb17⇒hpb18
  • Windows 7⇒Windows 8.1(RTM版)
  • ディレクトリを分けて複数のWordPressをインストールする方法
  • XAMPP 1.8.1⇒1.8.2
  • よくあるミスと対処方法

レンタルサーバーを使わずにWordPress環境を構築

ホームページビルダー17からWordPress対応になりました。

通常、WordPressを使うには、有料でブロバイダーに申し込む必要がありますが、テストするだけのために月々お金を支払うことも避けたいところです。

そこで自分のパソコン上にXAMPPをインストールすることで、レンタルサーバーを借りなくてもWordPressを動作させることができます

XAMPPのメリット

「無料」、「動作確認も当然、無料」、「イントラネットではセキュア」の3つです。どれも魅力的ですね。

テスト環境を無料で準備することができる

ビルダーのWordPressを使うには、通常、サーバーレンタル料かかりますが無料です。

インターネット環境に公開する前に、テストをすることができる

通常、公開してしまうと、世界中の人に見られてしまいます。人気サイトであれば、不完全なサイトを見せることは、避けたいところです。そこで、XAMPPを使って十分に検証し、問題がなければインターネット環境上に公開する方法もあります。

セキュアな環境を構築できる

自分のパソコン上は、インターネットに公開されません。参照できるのは、WAN内だけです。組織外からアクセスできないため、安全です。イントラネットとして使うには、お勧めです。私も、職場の掲示板としてXAMPPを利用しています。例えば、非公開な情報を職場内で告知するなら、パスワード付でインターネットに公開するよりも、XAMPPでWANに配置した方が安全です。

XAMPPは、インターネットサーバーには、向かない

「セキュリティ」、「費用面」、「メンテナンス面」でお勧めできません。

セキュリティ面

技術的には、十分可能ですが、セキュリティ的には、不十分です。初期設定では、とても危険な状態なため、様々な安全対策が必要です。通常は、レンタルサーバーに任せた方が賢明です。

費用面

ここで言う費用とは、電気代のことです。通常のパソコンの場合は、24時間運用だと、デスクトップで1000円/月ほど。ノートパソコンでも400円/月程度かかります。よって費用面を考えるとレンタルサーバーがお得です。
※ノートパソコン25W。ディストップパソコンは、60Wとして計算。デスクトップのワット数根拠は、PC Watchから、ノートパソコンは、適当。電気代は、電気代計算君から算出

メンテナンス面

パソコンは、壊れる可能性があります。私も業務で24時間運用のサーバーを3台ほど扱っていますが、3年に1度ぐらいは壊れます。万が一壊れた時の対応(修理代・手間)を考えるとレンタルサーバーがお得です。

XAMPPとは

Windows上で、Apache・MySQL・PHP・Perlを動かしてくれるソフトです。WordPressを動かすには、Apache・MySQL・PHPが必要です。

Apacheは、Webサーバーを提供するソフト

MySQLは、大規模も対応可能なデータベースを提供するソフト

PHPは、Webサーバー専用のプログラム言語です。

このXAMPPがあれば、会社や学校などのネットワーク上に、一部の人だけが閲覧可能なサイトを構築することも可能です。

XAMPPのインストール

レンタルサーバーを借りずに自分のパソコンだけで、動作させるためにXAMPPをインストールします。

私の使っているパソコンは、Windows 8.1です。最新のOSでもXAMPP動かすことができます。

XAMPPのホームページhttp://www.apachefriends.org/jp/xampp-windows.html)にアクセスし、ダウンロードのすぐ下の「XAMPP」をクリック
20131005r25

「インストーラ」をクリック

20131005r27

ダウンロード画面が表示されるまで5秒ほど待ち、ブラウザしたの「実行」をクリック
20131005r29

ウイルス対策ソフトが入っていると、警告が表示されます。「Yes」でそのまま進めます。

20131005r30

「OK」をクリック

UACの警告。「C:Program Files (x86)」以外にインストールするため、問題なし。UAC(ユーザーアカウント制御)は、システムを変更するときに、ユーザーに通知する機能です。

20131005r31

インストール画面では、「NEXT >」をクリック
20131005r32

不要なものもありますが、そのまま「Next」をクリック

20131005r33

そのまま「Next」

20131005r34

チェックはずして、「次へ」。

BitNamiは、簡単にWordpressを実現してくれる機能です。BitNamiをいれると、Wordpressのサイトを超簡単に作ることはできますが、今回は、hpbにWordpressサイトを作らせたいのです。「BitNami」を使うとhpbが、サイトを作れなくなるので要注意。

20131005r36

「Next」をクリック

20131005r37

チェックをつけたまま「Finish」をクリック。

20131005r38

次にサービスを設定します。

Windows 8.1だと、XAMPP Control Panelが起動しません。以下の方法で起動してください。

スタート画面でいきなり、半角で[xa]と入力する。

すると自動的にXAMPP Control Panelが検索されます。

20131005r40

XAMPP Control Panelを右クリックし、管理者として実行をクリックします。

20131005r41

サービスとは、OSを起動すると自動的に起動するソフトウェアのことです。今回は、サービスとして「Apache」「MySQL」「FileZilla」を設定します。「FileZilla」は、FTPサーバーのことです。
20131005r44

チェックをつけることに様々なメッセージが表示されます。

「Click Yes to install Apache service」は、Yesをクリック

20131005r45

「アクセスを許可する」をクリック
20131005r46

「Yes」をクリック

20131005r49

「アクセスを許可する」をクリック

20131005r47

「Yes」をクリック

20131005r50

「アクセスを許可する」をクリック

20131005r48

サービスを有効にしても、OSを再起動しないとアプリケーションは、起動しません。そこで、今回は、手作業で3つのアプリケーションを起動させました。

上手くインストールされているか確認しましょう。

ブラウザを起動してアドレスバーにhttp://localhost/と入力し、「Enter」キーを押します。「localhost」は、自分自身を示す特別なアドレスです。

20131005r51

※IE11では、「127.0.0.1」が使えないようです

以下の画面が表示されれば成功です。「日本語」をクリックします。
20131005r52

以下のように表示されます。

20131005r523

最後に、FTPサーバーのユーザー追加とMySQLのユーザーとパスワードを設定します。

FTPサーバー(FileZilla)にパスワードを設定

管理コンソールにログイン

「C:\xampp\FileZillaFTP」の中の「FileZilla Server Interface.exe」をダブルクリックします。

20131005r54

Server Addressは、「localhost」または「127.0.0.1」(b)として、「OK」をクリック
20131005r524

メニューバーの「Edit」から「Users」をクリック
20131005r57

「General」の中から「Add」をクリック
20131005r58

「admin」(b)と入力し「OK」をクリック
20131005r59

Passwordにチェックを入れ、「123456」(d)と入力
左下の「OK」ボタンをクリック
20131005r60

「You need to share at least one directory and set it as home directory.」
と表示されますので「OK」ボタン
20131005r61

「Add」をクリックするとディレクトリの指定ウィンドウが表示されます。
「C:\xampp\htdocs」を指定します。
アクセス権の設定をして、
左下の「OK」ボタンをクリック。
20131005r62

以上で、FTPサーバーの設定は、終了です。

参考URL:FileZilla Serverの設定方法

MySQLサーバーにパスワードを設定

続いてMySQLサーバーのパスワードを設定します。

ブラウザを立ち上げ、アドレスバーに「localhost」と入力します。
次に、「セキュリティ」をクリック
20131005r63

http://localhost/security/xamppsecurity.php をクリック
20131005r64

新しいパスワードと新しいパスワード(確認)にパスワード「123456」(j)を入力
「パスワードを変更しました。」ボタンをクリック

この設定は、MySQLサーバーを再起動後に有効になります。

MySQLサーバーの再起動

タスクバーからアイコンを右クリックし、[MySQL]⇒[Stop]
20131005r65

同様にもう一度、右クリック⇒[MySQL]⇒[Start]

20131005r66

DBの作成

今回データベースを作成します。データベースは、データを保存するファイル名みたいなものです。
http://localhost/phpmyadmin/にアクセスし、ユーザ名「root」(i)、パスワード「123456」(j)と入力します。
20131005r67

「データベース」をクリック
データベースを作成するに「hpb」(g)と入力
「作成」をクリック
20131005r68

以上で、MySQLサーバーの設定は、終了です。

複数サイト構築方法について

ホームページビルダー17のお問い合わせが多かった、サイトの構成について明記します。複数のWordPressサイトを作りたい場合は、以下のところを繰り返し実施してください。

サイト作成例1

トップページのルートにWordPressサイトを置く

http://localhost/

サイト作成例2

サブデレクトリにWordPressサイトを置く

http://localhost/sample1/

組み合わせ例

「サイト作成例1」、「サイト作成例2」を組み合わせていくつでもサイトを作ることができます。

http://localhost/
http://localhost/sample1/
http://localhost/sample2/
http://localhost/sample3/
・・・・・・・

また、localhostの部分をIPアドレスにすることで、同じLAN内の別のパソコンから参照することも可能です。今回の例だと、自分のパソコンのIPアドレスが「192.168.45.2」だった場合

http://192.168.45.2/
http://192.168.45.2/sample1/
http://192.168.45.2/sample2/
http://192.168.45.2/sample3/

設定例

必ず紙かデータかで残してください

登録例1 登録例2
(a)サイト名
(b)FTPサーバ―名 localhost
(c)FTPアカウント名 admin
(d)FTPパスワード 123456
(e)転送先フォルダ★ / /sample1/
(f)WordPress設定名★ XAMPPサイト TOP XAMPP サイト SAMPLE1
(g)データーベース名 hpb
(h)データベースのホスト名 localhost
(i)ユーザー名 root
(j)パスワード 123456
(k)テーブル接頭★ wp_ wpsample1_
(l)サイトのURL★ http://localhost/ http://localhost/sample1/
(m)サイトのタイトル トップページ サンプル1
(n)ユーザー名 admin
(o)パスワード 123456
(p)メールアドレス demo@pcmanabu.com

XAMPPでかんたんWordPressデビュー

ビルダーを起動し、「かんたんWordPressデビュー」をクリック
20131005r69

「次へ」をクリック
20131005r70

好みのものを選択し、「次へ」
業種は、あとから変更できません。できるだけ近いものを選択
20131005r74

基本情報を入力します。あとからでも変更できます。「公開する」を選択
サイト名は、「XAMPPサイト TOP」(a)としました。
20131005r79

「その他のプロバイダを使用する」を選び「次へ」
20131005r76

以下のように設定します。
20131005r80

間違えると二度手間・三度手間になるため、慎重に実施してください。

転送先フォルダは、例1の場合「/」です。例2の場合は、後述します。

テーブル 接頭辞(k):任意 こだわりがなければ例1の場合は、wp_

「完了」をクリックすると自動的に必要なファイルが転送され、初期画面になります。

次にパスワードとメールアドレスを入力し、「WordPressをインストール」をクリック
20131005r82

ログインをクリック

20131005r84

ログインをします。

20131005r85

データの繁栄をクリック

20131005r86

「データの反映を実行する」をクリック

20131005r87

「サイトを見る」をクリック

20131005r88

サイトが出来ています。

20131005r89

もちろんレスポンシブウェブデザインに対応

20131005r90

例2を実施する場合

必ず「転送先フォルダ」と「サイトのURL」を一致させる。

20131005r91

フォルダが実際にないとエラーになります。注意。

20131005r92

よくあるミスと対処方法

需要が、あまり無さそうなため、後回しにします。知りたい方、コメントください。

まとめ

レンタルサーバーは、月々262円で、実質無制限にサイトを作れるため、XAMPPを使わない方法もありますが、無料で試すことができる点は大きな魅力です。

よろしければお試しくください。

   このエントリーをはてなブックマークに追加       

  • ネバーギブアップ

    とにかくわかりやすいです!すごい!私vistaで、この方法で順序通りやってみたのですが、XAMPP control panel画面で左側にチェックが入らなくてダメでした・・。悔しいです!

    • pcmanabu

      ネバーギブアップさん。こんばんは。XAMPP control panel画面で左側にチェックが入らないのは、管理者モードで実行されないためです。コントロールパネルを起動するときに、右クリック。「管理者として実行」で試してください。できなければ教えてください。

  • ネバーギブアップ

    進みました!お早い回答をいただきとても感謝しています。今度はブラウザのアドレスバーにhttp://localhost/と入力したところで、

    Internet Explorer ではこのページは表示できません

    となり、インストールが失敗しているようです。すみません、何か思い当たるようなことがあればご教授ください。

    • pcmanabu

      パソコン再起動しましたでしょうか。再起動していない場合は、Actions下のStartボタンを押さないと開始されないです。解決できなければ、一声ください。

  • ネバーギブアップ

    再起動をしてXAMPP Control Panelが、写真と全く同じですが、IE9を立ち上げ、http://localhost/と
    入力した時点で失敗してしまいます。

    Vistaがだめっぽいですかね・・・。新しいPCほしい~

    • pcmanabu

      Vistaが理由により駄目なことは、ありませんのでご安心ください。
      買い替えは、検討してもいいと思いますが。

      念のため、「http://127.0.0.1」もお試しください。

      私の予想では、「ファイアウォールによってはじかれている」です。
      ウィルス対策ソフトをご利用であれば、そのファイアウォールを無効にする

      利用していないのであれば、Windowsのファイアウォールを無効にします。
      再度、アクセス。これでどうでしょうか!結果を教えてください。

  • Pingback: ロリポップからエックスサーバーに切り替える方法 pcmanabu()

  • Pingback: 短時間でロリポップからエックスサーバーへ切り替える方法【DNS編】 pcmanabu()

  • Pingback: お問い合わせフォームを作成する pcmanabu()

  • Pingback: ブログ運用者へ!知ってた?X Serverのセキュリティ pcmanabu()