特集

「Microsoft WebMatrix」でWebアプリの世界へ踏み出そう！第3回

「WebMatrix」があればFTPソフト要らず！　SEO機能やデータベース機能も便利

（11/09/15）

「Microsoft WebMatrix」

　マイクロソフトによるまったく新しい動的なWebアプリの開発環境「Microsoft WebMatrix」（以下、「WebMatrix」）の魅力を紹介する本特集。第2回では、「WebMatrix」の機能“Webアプリのインストール・開発・テスト・アップロード”のうち、とくに“インストール”に焦点を当てて紹介してきた。

　第3回となる今回は、前回「WebMatrix」でインストールした「WordPress」のアップロードおよびその管理を中心に紹介する。実際にホスティングサーバーへアップロード・公開する“発行”にチャレンジしながら、「WordPress」のカスタマイズや最適化に便利なテキストエディター機能などについても併せて紹介したい。たとえば、

「WordPress」などを手軽にレンタルサーバーへアップロードしたい人
レンタルサーバーへ「WordPress」などをアップロードするときにいつも躓いてしまう人
自分の「WordPress」を検索エンジンに引っ掛かりやすくしたい人
「WordPress」のデータベースを覗いて勉強したい人
「WordPress」のデータベースを手軽に編集したり、ローカルにバックアップしたい人

　といった人に参考にしていただければ幸いだ。

「WebMatrix」でインストールした「WordPress」の発行

「WebMatrix」のWeb発行機能

　「WebMatrix」のWeb発行機能には、2つの方法が用意されている。

　ひとつは“FTP”を利用する方法で、Webサイトを運営したことのある人なら一度は利用したことがあるだろう。ホスティングサービスのWebサーバーの種類（IIS/Apache）やWebアプリのプラットフォーム（ASP.NET/PHP）を問わず、ほとんどのケースで利用できる汎用性の高い方法だ。

　もうひとつは“Web配置”を利用する方法だ。これは「IIS」でのみ利用可能な方法で、「WebMatrix」のインストール時（特集第1回）に自動的に導入された「Web配置ツール 2.0」（MSDeploy.exe）を利用する。ローカル・リモート間のコンテンツの差異を検出し、ASP.NET/PHP製アプリを効率的に同期できる仕組みだ。

アップロード方法	FTP（FTPS）	Web配置
プラットフォーム	Windows/IIS、Linux/Apacheなど	Windows/IIS（MSDeploy対応）
ホスティングサービスの対応	さくらインターネット、ロリポップ！、XREA、CORESERVER など多数	ExpressWeb
PHPアプリ	○	○
ASP.NETアプリ	○	○
ファイルの差分アップロード	○	○
ファイルの差分ダウンロード	×	○
データベースのアップロード	×	○
データベースのダウンロード	×	○

　まずは、多くのWebサイトで利用可能な“FTP”を利用したWeb発行を試してみよう。

“FTP”を利用したWeb発行

“CORESERVER”のWebサイト

　ここでは、老舗のホスティングサービス“CORESERVER”を例に挙げる。運営元が同じ“XREA”でも、ほぼ同じの手順で設定が可能だ。また、ほかの「Apache」ベースのホスティングサービスにおいても、基本的な手順は同じ。設定を適宜読み替えながら、読み進めてほしい。

　FTP発行に必要な情報は以下の通り。

・サーバー：ftp://s***.coreserver.jp/ ・サイト パス：/public_html/sample.***.jp/ ・ユーザー名：（FTPのユーザー名） ・パスワード：（FTPのパスワード） ・宛先 URL：http://sample.***.jp/

　今回は、“CORESERVER”側の“ドメインWeb”設定で“sample.***.jp”を登録し、“sample.***.jp”へアクセスすると“/public_html/sample.***.jp/”以下の内容が表示される設定にしてある。もちろん、“http://***.jp/sample/”といったようにサブディレクトリへインストールすることも可能だ（その場合は、“サイトパス”として“/public_html/sample/”などを指定する）。

　まず、サーバー上に「WordPress」用のデータベースを用意する。このとき、データベース名、データベースユーザー名、パスワードをメモしておこう。「WordPress」の初期設定に必要だ。

　次に、“wp-config.php”を編集する。「WebMatrix」向けに設定されたローカル用の“wp-config.php”をどこかにバックアップしたのち、先ほどメモした設定を書き込む。基本的には、“DB_NAME”“DB_USER”“DB_PASSWORD”の3つを編集すればよいが、ホスティングサービスによっては“DB_HOST”の編集が必要になる場合もある。

　これで下準備は完了だ。

サーバー上に「WordPress」用のデータベースを用意。文字コードには“UNICODE”を指定

［ファイル］タブを開いて、ルートフォルダ上にある“wp-config.php”を編集

　続いて、［発行］ボタンを押す。すると、FTP発行のための情報を入力するように促されるので、最初に挙げた情報を入力する。入力が終わったら、［接続の検証］ボタンを押して正常に接続できることを確認し、［保存］ボタンを押そう。すると、サーバーの環境チェックなどが行われ、ファイルのアップロード画面に切り替わる。

　あとは、サーバーへアップロードしたいファイルのチェックをONにして［続行］ボタンを押せば、アップロード作業が始まる。

FTP発行のための情報を入力。［接続を検証］ボタンで、入力した接続情報が正しいかチェックできる

サーバーへアップロードしたいファイルのチェックをONにして［続行］ボタンを押す

アップロード作業が始まる

　これでサーバーへの発行は完了。無事動作しているか確認してほしい。パーミッションの設定も適宜行おう。

　なお、このままでは“wp-config.php”がリモートサーバー向けの設定になっているので、「WordPress」をローカルPCで動かすことができない。先ほどバックアップしたローカル用のものへ“wp-config.php”を書き戻しておこう。

ローカルPC用の“wp-config.php”をサーバーへアップロードしないようにする: 　ローカルPC用に設定された“wp-config.php”がアップロードされないように、“発行”のたびにチェックを外すのは面倒だ。そのような場合は、“隠しファイルをアップロードしない”設定をONにして、“wp-config.php”に隠し属性を付与しよう。アップロードの際のファイル一覧に、“wp-config.php”が現れなくなる。ほかにもアップロードしたくないファイルがあれば、同様の設定を施しておくとよい。
“隠しファイルをアップロードしない”設定をONにして、“wp-config.php”に隠し属性を付与

“Web配置”を利用したWeb発行

　次は、“Web配置”を利用したWeb発行を紹介しよう。

“ExpressWeb”

　この方法はWinodws/IISベースのホスティングサービスでのみ利用可能で、“FTP”による発行よりも簡単で便利だ。しかし、対応しているホスティングサービスが非常に少なく、国内業者かつ個人でも利用可能な価格帯のホスティングサービスは、データ･ジャパン社の“ExpressWeb”に限られてしまうのが現状だ。

　ただし、月額395円でディスク容量が30GB利用できるなど、ほかの「Apache」ベースのホスティングサービスと比べても遜色がない。これを機会に検討してみるのもよいだろう。

　今回は、この“ExpressWeb”を例に挙げて説明する。

　まず、Webサイトを作成する。今回は“sample.***.jp”というWebサイトを作成した。次に、Webサイトのプロパティを開き、［管理］タブにある“リモート接続”を有効にする。加えて、「MySQL」のデータベースの作成が必要だ。

Webサイトを作成して、［管理］タブにある“リモート接続”を有効に

「MySQL」のデータベースも作成

　続いて、［発行］－［設定］ボタンを押す。すると、“発行の設定”ダイアログが現れる。今回はプロトコルとして“Web配置”を選択し、以下の情報を入力する。

・サーバー：sample.***.jp ・ユーザー名：（リモート接続のユーザー名） ・パスワード：（リモート接続のパスワード） ・サイト名：sample.***.jp ・宛先 URL：http://sample.***.jp/

　これに加えて、データベースの接続文字列の入力が必要だ。接続文字列は以下のような形式になっている。データベースサーバーのURLは、“ExpressWeb”のコントロールパネルから確認可能だ。

server=（DBのURL）;database=（DB名）;uid=（DBのユーザー名）;pwd=（DBのユーザーパスワード）

“発行の設定”ダイアログ

データベースサーバーのURLは、“ExpressWeb”のコントロールパネルから確認可能

“アカウントホーム”から、“ExpressWeb”、“スペース詳細を表示”とリンクをたどるとデータベースサーバーの設定を確認できる

ファイルのアップロード画面。データベースのアップロードも可能になっている点が、「Apache」ベースのホスティングサービスの場合と異なる

　接続に成功すれば、“FTP”による発行と同じように、アップロードするファイルの選択画面が現れる。

　“Web配置”と“FTP”が異なる点は、ファイルの差分アップロードだけでなく、差分ダウンロードにも対応していること。もし、サーバー上のファイルが破損したり、ホスティングサービスの契約延長を忘れてしまった場合でも、ローカルにバックアップがあれば復元は容易だ。

　また、データベースサーバーのデータをローカルと同期できるのもうれしい。テスト環境と本番環境のデータベースの同期や、「PHPMyAdmin」などのWebアプリを利用しなくてもローカルでデータベースの内容を編集するといったことも可能だ。

「WordPress」のアップデート

　“Web配置”はサーバーへ発行する際に書き込み権限の設定も行ってくれるが、標準では“wp-content”ディレクトリ以外は書き込み禁止に設定されてしまう。そのため、記事の作成や写真のアップロードは可能だが、サーバー上での「WordPress」のアップデートには失敗してしまう。

　この問題を解消するには、一時的に「WordPress」のインストールディレクトリに書き込み権限を与えればよい。“ExpressWeb”では、“ファイルマネージャー”から権限の設定が行える。また、ローカルPC上の「WebMatrix」で動作させた「WordPress」でアップデート作業を行い、アップデート済みの「WordPress」を再度サーバー側へ発行してもよいだろう。

　ちなみに、筆者は後者の方法を採用している。本番環境をいきなりアップデートするより、ローカルPC上の「WebMatrix」で最新版の「WordPress」をテストして、利用中のプラグインの利用などに問題がないことを確認してから本番環境をアップデートした方が安全だ。

発行したWebサイトの管理

　これまで、「WebMatrix」を使ったWebサイトの発行について説明してきた。しかし、「WebMatrix」の機能はそれだけではない。“テキストエディター”としても十分な機能を備える上、Webサイトの管理に便利な機能がたくさん揃っている。

　「WebMatrix」では、それらの機能が画面左下のメニューにまとめられており、ボタンで簡単に切り替える仕組みになっている。以下に順に紹介していこう。

［ファイル］――Webサイトの編集

　［ファイル］ボタンを押せば、Webサイトのファイルを閲覧することが可能。左ペインはツリー形式のファイル管理機能で、右ペインはタブ切換え型のテキストエディターになっている。

　テキストエディターには、コードの色分け機能やHTML/CSSの自動補完機能が備わっている。また、検索や置換など最低限必要な編集機能はたいてい備わっているので、これさえあれば別途テキストエディターを用意する必要はない。

　フォントやその大きさは、オプション画面でカスタマイズできる。また、ほかのWPFベースのアプリと同じように、［Ctrl］＋マウスホイールで表示を自由に拡大・縮小することも可能だ。

コードの色分け機能やHTML/CSSの自動補完機能を搭載

［データベース］――データベースを表計算ソフトのように編集

　［データベース］画面では、現在のWebサイトで利用されているデータベースの内容を閲覧することが可能。「WebMatrix」では、現在のところ「SQL Server 2005/2008」「SQL Server Compact Edition 4.0（SQL Server CE 4.0）」「MySQL」という3つのデータベースが利用可能で、テーブルの定義やテーブルの内容を閲覧することができる。

「SQL Server 2005/2008」：Microsoft製のデータベースサーバー
「SQL Server Compact Edition 4.0（SQL Server CE 4.0）」:データベースを単一のファイルとして保存しておくことが可能で、開発に便利。「SQLite」のMicrosoft版と言える
「MySQL」:オープンソースで開発されているデータベースサーバー

　さらに、表計算ソフトのように実際に値を編集することも可能。CMSがどのようにデータを保存しているかを見れば、その仕組みを理解する助けになるだろう。また、CMSのプラグインを作る際にも活躍しそうだ。

テーブル内のデータを閲覧。表計算ソフトのように編集することも可能

テーブルの定義を閲覧

　そのほか、データベースを利用したWebサイトをいちから作成することも可能。詳しくは次回に紹介する予定だ。

［レポート］――検索エンジンへの最適化

　［レポート］画面では、Webサイトの“パフォーマンス”と“検索エンジン最適化（SEO）”関連の機能がまとめられている。利用するには、まず“サイトのレポートを作成”を選択して、Webサイトのデータ収集を行おう。

“サイトのレポートを作成”を選択して、Webサイトのデータを収集

　“パフォーマンス”では、Webサイトの応答速度を計測して、快適にWebサイトが利用できるかどうかを確認できる。読み込み時間のスライダーを左右に操作するだけで、応答の遅いWebページを簡単に絞り込めるのが使いやすい。Webサイトが開くのが遅いと、せっかくリンクをたどって自分のサイトへ来てくれた訪問者も、内容を見ずにWebブラウザーを閉じてしまう。ときどき表示の遅いページをチェックして、自分のWebサイトの応答性を向上させれば、ページビューが増えるかもしれない。

　一方、“SEO”では検索エンジンへの最適化に効果のあるアドバイスを行ってくれる。たとえば、Webページの説明がなかったり、見出しタグが適切に利用されていないなどといった、検索エンジンに掲載される際に不利となる問題点を列挙してくれるので、それを修正すれば検索順位の向上が期待できる。また、リンク切れのチェックが簡単に行えるのも便利だ。

Webサイトの応答速度を計測して、快適にWebサイトが利用できるかどうかを確認できる“パフォーマンス”