ホームページビルダー17とXAMPPでWordPress

更新日：2012年10月9日  タグ:

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

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

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

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

XAMPPのメリット

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

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

ビルダーの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です。最新のOSでもXAMPP動かすことができます。

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

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

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

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

コンポーネントの選択は、そのまま「NEXT >」をクリック

インストール先もそのままInstallをクリック

コントロールパネルを表示するため「はい」

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

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

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

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

「Yes」をクリック
Click Yes to install MySQL service

「Yes」をクリック
Click Yes to install FileZilla service

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

ゆっくりと3箇所「Apache」「MySQL」「FileZilla」の右にある「Start」ボタンをクリックしてください。

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

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

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

以下のように表示されれば終了です。

最後に、FTPサーバーのユーザー追加とMySQLのrootパスワードを設定します。今回の例では、パスワードを「123456」と設定します。

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

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

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

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

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

「admin」と入力し「OK」をクリック

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

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

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

 

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

参考URL:FileZilla Serverの設定方法

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

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

ブラウザを立ち上げ、アドレスバーに127.0.0.1と入力します。

次に、「セキュリティ」をクリック

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

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

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

MySQLサーバーの再起動

タスクバーから「XAMPP ControlPanel」を起動

MySQLの「Stop」をクリック後少し待って、「Start」をクリック

DBの作成

今回データベースを作成します。データベースは、データを保存するファイル名みたいなものです。
http://127.0.0.1/phpmyadmin/にアクセスし、「root」「123456」と入力します。

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

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

 

?XAMPPでかんたんWordPressデビュー

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

「次へ」をクリック

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

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

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

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

転送先フォルダは、今回/hpb1としました。(複数のWordPress)をインストールするため、はじめらディレクトリを分けました。

テーブル 接頭辞：任意 こだわりがなければWP_
同じHP上にフォルダを分けて複数のWordPressをインストールできます。
その場合は、ファルダごとにテーブル接頭辞を分ける必要があります。今回は、wphpb1_としました

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

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

「データの反映」をクリック

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

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

XAMPPは、無料で、動作確認ができるメリットがあります。テスト環境を準備したい方は、ぜひお試しください。

ビルダー17を購入するまでは、ローカルサーバーの準備までビルダー側がすることを期待しましたが、さすがにそこまでは、無理でした。

とはいえ、ビルダーのWordPress対応は、よくできています。これから、もっといろんなことに活用したいと思います。

今回作成したもの

今回もグリッドデザインできています

 

 

5:03 午前| カテゴリー：ホームページ作成| タグ：

デバック用: FB:0 TW:0 Po:1 B:0 G+:0 Pin:0 L:0

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

コメント

2012年10月12日9:02 午後 | tanpopo3781

  • PHPを勉強するためにXAMPPをインストールしたばかりでした。すごいです！！
    ホームページビルダー１７のワールドプレスを　さくらサーバーで使えるようにしたいのですが。
    うまくいかなくて、こちらのサイトにたどりつきました。
    もし、良ければ　「さくらサーバーでhpb17のworldpressを使えるページ」を作っていただけないでしょうか？

      2012年10月13日3:56 午前 | pcmanabu

    • コメントありがとうございます。サイト運営者のpcmanabuです。初めてのコメントで、超感謝です。
      少しはお役に立てているようで嬉しいです。早速調べたところ、さくらサーバーでは、無料のお試し期間がありますね。今から試します。少々お待ちください。何分で報告できるかな。

    • 2012年12月21日11:01 午前 | ロビ

  • 設定の流れが、とっても分かり易く書かれていて助かりました。
    これなら、wordPress初体験の方でもインストールまで出来そうですね。

      2012年12月22日6:30 午後 | pcmanabu

    • コメントありがとうございます。
      お役に立てて嬉しいです。
      今後ともよろしくお願いします！

    • 2013年2月2日10:38 午前 | » HPB17 スマートフォンから電話できるようにする パソコン学習ポータルサイト pcmanabu

  • […] ホームページビルダー17とXAMPPでWordPress […]

    • 2013年2月3日4:07 午後 | 羽場淑隆

  • とても分かり安いのですがホームページビルダー17の「かんたんWordＰｒｅｓｓビュー」の設定画面の転送先フォルダーの
    部分が理解できません。設定の方法・ＸＡＭＰＰに関連することなのか、わかりません。
    初心者なので是非ご教授頂けると助かります。

      2013年2月5日5:56 午前 | pcmanabu

    • ご質問の回答をします。ご存じの部分もあるかと思いますが順番に説明します。

      ■サーバーサイドとクライアントサイド

      理解するには、クライアントサイドとサーバーサイドを知っている必要ががあります。
      ビルダーは、クライアントサイドとして動いています。

      WordPressは、サーバーサイドとして動いています。
      通常、自分のパソコンには、サーバーサイドのソフトがないため、WordPressを体験できません。別途、お金を払ってＡＳＰ(プロバイダー)に依頼します。

      今回は、自分でサーバーサイドのソフトを準備しています。それがXAMPPです。XAMPPを使えば、わざわざお金を払わなくても、「かんたんWordＰｒｅｓｓビュー」を試せます。

      ■ビルダーとFileZilla

      先ほどの話で、クライアントサイドからサーバーサイドへ情報を転送する必要があります。様々な技術がありますが、今でも圧倒的にFTPにより情報を転送します。ビルダーも例外ではなくFTPを使って情報を転送します。

      ファイルを転送する先のソフトのことをFTPサーバーと言います。FTPサーバーは、ASP(プロバイダー)が準備してくれますが、今回は、XAMPPに入っているFileZillaと言うソフトで実現します。

      ここの設定も自分でします。
      ここからが本題
      ■どこに転送するか？

      XAMPPの初期設定では、
      C:xampphtdocsにホームページを保存するようになっています。変えることもできますが、通常そのままの設定で使います。
      C:xampphtdocsに転送すると、http://127.0.0.1/
      で見ることができますし、

      C:xampphtdocsabcに転送すると、http://127.0.0.1/abc/で見ることができます。

      今回私の説明では、C:xampphtdocshpb1に転送してhttp://127.0.0.1/hpb1/で見ています。

      まず、「C:xampphtdocs」は、XAMPPの規定値のため、そのまま使う
      よってFileZillaのときの設定も、「C:xampphtdocs」です。FTP転送すると、「C:xampphtdocs」配下に保存されるようになります。

      次、ビルダーの転送設定です。もし、http://127.0.0.1/hpb1/で見たいのであれば、「ファイルの転送先」を、「/hpb1」にしないと駄目です。
      ここの転送先は、FTP転送したときに、「C:xampphtdocs」のどこに保存したいかです。

      「/hpb1」にすると、「C:xampphtdocshpb1」にデータが保存されます。

      また、ビルダーは、どこを見ればいいのかわかりません。そこでサイトのURLとして、http://127.0.0.1/hpb1/
      と人間がビルダー教えてあげています。

      って説明で通じますか？

    • 2013年5月3日9:09 午後 | » HPB17　外部サイトのテンプレートを活用する パソコン学習ポータルサイト pcmanabu

  • […] XAMPP ユーザー　ホームページビルダー17とXAMPPでWordPress […]

    • 2013年10月6日5:12 午前 | ホームページビルダー18 XAMPPでWordPress pcmanabu

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

    • 2013年11月6日5:01 午後 | オクダ　サトリニオ

  • wordpress初心者です。以下ご教授ください！

    お蔭様で、とてもわかり易い説明でHPB17を利用してHPを作成しXAMPPで試して見ることは、難なく出来ました。

    が、

    XAMppのhtdocksに保存したホームページが、いろいろ編集の結果「OKこれでよし！」となった時、

    すでにwordpressを利用できる正式に契約したサーバーサイトの指定されたフォルダーにFTPソフトを使ってUpload する

    ところで躓いています。サーバーサイトのwordpressの(最新の3.71)指定フォルダの中身がwp-adminn,wp-content,wp-includeの

    3フォルダと２つのｈｔｍｌファイル以外は、phpfファイルで、htdocksの保存されたクライアントファイル群とは、当然ながら異なりますので
    どのようにすれば、自分が納得したファイルを、upしてそのまま反映できるのか、戸惑っています。
    何卒ご教授ください！

      2013年11月7日1:36 午前 | pcmanabu

    • 私にとっても、難しい内容ですね。移行先のASPを教えてください。

      また、私の場合は、テーマだけ複写しています。
      記事の内容も、複写したいとのご希望でよろしいでしょうか？

        2013年11月7日9:17 午前 | サトリニオ

      • 目下、以前から利用しているロリポップに申請し、/web以下のフォルダの中にwordpress専用のフォルダを作り簡単なサイトを作っています。当然ながら不完全なので、この状態をxamppとhpbで、納得の行くものをに変えて、(通常変更を加えたhtmlのホームページをftpツールでupして変更する様に)、一度で出来るとうれしいのですが、、、、

      • 2013年11月30日9:03 午前 | pcmanabu

    • 本日、ロリポップさーバーからエックスサーバーに変更しました。
      やり方は、XAMPPからレンタルサーバーよりも、ずっと簡単なため、時間があるときに記事を書きたいと思います。

      出来れば次の週末に記載します。

    • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    トラックバックURL:https://pcmanabu.com/%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%93%e3%83%ab%e3%83%80%e3%83%bc17%e3%81%a8xampp%e3%81%a7wordpress/trackback/