PHP ユーザーのための WebMatrix 使用方法


先日 (2010/09/25) 、PHP カンファレンス 2010 にて、『Microsoft ♥ PHP ~ 2nd Stage ~ WebMatrix 登場!』 というタイトルでセッションに登壇させていただきました。

その際に使用したスライドは、奥主さんのブログで公開されていますが、行ったデモの内容は UST の録画公開もないよう なので、実際のデモの手順を今回の記事に記載させていただきます。

その前にまだ “WebMatrix って、…なんだよ?” という方は、奥主さんのブログ内のスライドをご覧ください。

それも面倒だという方のために WebMatrix について簡単に説明すると、WebMatrix というのは、”Web サイトの作成” をお手伝いするための無償ツールです。

現在はまだ β 版ですが、このページから入手することができます。( 現在はまだ英語版しかありませんのであしからず )

WebMatrix Beta
http://www.microsoft.com/web/webmatrix/

 

WebMatrix の機能

WebMatrix には、Web サイトを作成するための様々な機能が、4 つのメニューに割り振られて搭載されています。

image

image
(図 : WebMatrix の 4 のメニュー)

その 4 つのメニューの機能の内訳は以下のようになっています。

メニュー 機能
Site Web サーバー管理
Files コンテンツの編集
Databases データベース管理
Reports SEO 分析

(表 : WebMatrix 4 つの機能の内訳)

各機能の具体的な内容については、以降のデモの手順を通して明らかにしていきましょう。

 

WebMatrix の初期起動画面

WebMatrix を起動すると、既定の設定では以下の画面が表示されるようになっています。

image
(図 : WebMatrix の 初期起動画面)

画面の 4 つの大きなアイコンは、それぞれこれから作業を行うためのメニューとして機能します。

この画面のメニューの内訳は以下の通りです。

メニュー 機能
My Sites WebMatrix で作成した Web サイトを編集する際に使使用
Site From Web Gallery OSS Web アプリケーションをセットアップし、カスタマイズを行う際に使用
Site From Template 新規に Web サイトを作成する際に使用。テンプレートが提供される
Site From Folder コンピューター内のフォルダを Web サイトとして使用する際に使用

(表 : WebMatrix の 4 つのメニューの内訳)

説明のしやすさもあるので、今回のデモでは [ Site From Web Gallery ] を使用します。

 

[ Site From Web Gallery ] を使用した WordPress のインストール

[ Site From Web Gallery ] アイコンをクリックすると、以下のようにメジャーな OSS Web アプリケーションの一覧が表示されます。

image
(図 : [Site From Web Gallery] 内のアプリケーションリスト)

この画面に表示されるWeb アプリケーションの画像や説明文は、各 Web アプリケーションの提供元であるコミュニティの方々にメンテいただいています。というか、このリスト自体が、コミュニティの皆様にご登録いただいたアプリケーションの情報できています。

この画面から WordPress をインストールするには、WordPress アイコンをクリックし、[Next] ボタンをクリックします。

image
(図 : ダウンロードするパッケージリスト)

画面には WordPress をインストールして実行するために必要になるパッケージの一覧が、ダウンロード先の URL とともに表示されます。

デモで使用している環境には、あらかじめ PHP のランタイムと MySQL がスンストールされているので、上の画面ショットに WordPress しか表示されていませんが、インストールされていない場合にはそれらもリストされます。

[ I Accept ] ボタンをクリックすると、リストされたパッケージについてのダウンロードが行われます。

ダウンロードにかかる時間は、必要なパッケージの数と、その容量、通信速度によって変わりますので、ダウンロードする項目が多い場合はのんびりと待ちましょう。

image
(図 : パッケージダウンロード中)

次に、各パッケージごとの設定画面が表示されるので、ウィザードの指示に従い適宜設定してください。

image
(図 : WordPress 設定画面)

設定が完了し [Next] ボタンをクリックすると、インストール画面を経て、WebMatrix の作業画面が表示されます。

最初に表示されるのは、WebMatrix の 4 つのメニューのうちの [ Site ] メニューの画面です。

image
(図 : WebMatrix 初期起動画面)

 

[ Site ] メニューの機能

WebMatrix の [Site] メニューは Web サーバーの管理機能を提供します。

WebMatrix は IIS Developer Express Edition という、IIS 7.5 をコンパクト化した Web サーバーを提供しており、これを使用してコンテンツをホストするため、WebMatrix があれは、IIS がない環境でも Web の開発を行うことができます。

WebMatrix の [Site] メニューは、まさにこの IIS Developer Express Edition を管理するためのものなのです。

なお、IIS Developer Express Edition については、このブログでも記事を書いていますのでぜひご覧ください。

さて、メニュー内の各機能の UI を提供する右側のパネルを見てみると、作業対象となっている Web サイトの URL と、同サイトが使用しているフォルダまでの物理パスが表示されているのが確認できます。

image
(図 : [Sites] メニューの URL と物理パス)

URL のほうは パイパーリンクになっているので、クリックして作業中の Web サイトの既定のページを表示させてみましょう。

WordPress をインストールした場合は、以下のような WordPress のセットアップ画面が表示されますので、必要項目を入力してセットアップを完了してください。

image
(図 : WordPress の ブログ設定画面 1 )

image
(図 : WordPress のブログ設定画面 2 )

上記までの作業で、[ Site From Web Gallery ] メニュー ( アイコン ) を使用すると Web アプリケーションが簡単にセットアップできる点、作業中の Web サイトが http でホストされているとことが確認できたと思います。

さて、もう少し [ Site ] メニューの機能を見ていきましょう。

画面左のメニューから [ Requests ] をクリックします。

 image
(図 : [Sites]メニュー内のメニュー)

すると、WordPress の設定を行った際のリクエストのログがリスト表示され、リスト内のリクエストをクリックすると、画面の右側に、選択されたリクエストの詳細な情報が表示されます。

image
(図 :  [Requests] メニュー内のリクエストの一覧)

次に、画面左側のメニューより [ Settings ] をクリックします。

このメニューでは、作業中の Web サイトのバインディング設定や、SSL、URL でファイル名を省略した際に使用される既定のドキュメントの設定が行えます。

image
(図 : [Settings] メニューの画面)

 

[ Files ] メニューの機能

Web サイトを作成する上で欠かせない作業の一つにコンテンツ ( ファイル ) の更新作業があります。

WebMatrix にはシンプルなテキストエディタが付属しており、これを使用してファイルの編集作業を行うことができます。

テキストエディタを使用するには [ Files ] メニューを選択します。

左側に Web サイト内のファイルの一覧が表示され、ファイル名をダブルクリックするとファイルの内容が表示されます。

以下は WordPress のファイルをオープンしたところです。マイクロソフト製の言語でない PHP であっても、コメント、関数、引数、変数などが正しく認識され、色分け ( コードハイライト ) されているのが確認できます。

image
(図 : PHP コードを WebMatrix で読み込んだところ)

このようにコードハイライトされたエディター画面を見ていると、コードの入力支援機能や、デバッガを期待してしまうのですが、残念ながら今回のリリースではそういった機能は残念ながら盛り込まれないということです。

ちなみにこれは WebMatrix のもう一つのうりである ASP.NET “Razor” の記述においても同様です。

[ Files ] メニューが提供している機能は、ファイルの編集機能だけではありません。ファイルの新規追加も行えます。

ファイルを新規に追加するには、メニューバーの [ New ] ボタンをクリックします。

image
(図 : ツールバー上の [New] ボタン )

新規に追加するファイルのテンプレートの中から [ PHP ] をクリックすると、拡張子 php のファイルを追加することができます。

image
(図 : ファイルテンプレートの一覧)

 

[ Databases ] メニューの機能

今回のデモのシナリオのように、”Web サイトにアプリケーションをインストールしてカスタマイズを行う” という作業においては、ファイルの編集作業のみならず、データベースへの変更作業も発生することが多いでしょう。

WebMatrix の [ Database ] メニューでは、SQL Server Compact Edition という、アプリケーションのプロセス内で動作する小さくて軽量なデータベースエンジンと、それを管理するための GUI ベースのクライアント ツールが提供されます。

ちになみに、このデータベース管理用の GUI ツールは、MS SQL Server や MySQL に接続してそれらを管理することも可能です。

今回のデモシナリオでは、[ Site From Web Gallery ] から WordPress をしましたが、その際には WebMatrix が自動で MySQL への接続設定を行ってくれます。

[ Databases ] メニューをクリックして表示される画面の、左のツリーを確認すると、WordPress 用の接続が作成されており、マウスでクリックすると、ツリーが展開され、データーベース内のテーブルが表示されます。

さらに右クリックして表示されるコンテキストメニューからは [ Data ( データの表示と編集 ) ]、[ Definifion (テーブルの定義の表示)]、[ Delete Table ( テーブルの削除 ) ] という作業が行えます。

image
(図 : テーブルリスト)

また、画面上部のツールバーからは [ New Database ( データベースの新規作成 ) ]、[ New Connection ( データーベースへの新しい接続 ) ]、[  New Table ( テーブルの新規作成 ) ]、[ New Query ( SQL 文の記述 ) ]、[ Execute (SQL 文の実行) ] という作業も選択することができます。

image
(図 : [Databases] メニューのツールバー)

ためしに以下の手順で WordPress が使用しているテーブル wp_posts の内容を書き換えてみましょう。

  1. WordPress 画面左のテーブルツリーより、 テーブル wp_posts を選択
  2. マウスの右ボタンをクリックし、表示されたコンテキストメニューより [ Data ] を選択
  3. 画面右にテーブルの内容が表示されるので、先頭のレコードの [ post_title ] フィールドの内容を “Hello World!” から “Hello PHP World!” に変更し、カーソルを次のレコードに移動

上記の手順で、wp_posts テーブルのレコードの内容が変更されました。

Web サイトの WordPress にアクセスすると、最初の投稿のタイトルが “Hello PHP World!” に変更されているのが確認できると思います。

 

PHP Web サイトの新規作成について

既存のアプリケーションのカスタマイズを行うのではなく、空の Web サイトを作成して PHP の開発を開始することも可能です。

しかし、その前にちょっとしたハック、….じゃなくて、改造が必要になります。

現在の WebMatrix では、新規にファイルを追加する際のファイル テンプレート一覧に PHP ファイルが表示されるのは、WordPress などの PHP アプリケーションの Web サイトを編集している場合に限られます。

これだと、新規で作成した空の Web サイトに、拡張子 PHP のファイルを追加することができませんので、ファイルテンプレートの設定を変更し、PHP ファイルを追加できるようにする必要があります。

ファイルテンプレート一覧から PHP ファイルを選択可能にするには

ファイルテンプレートを変更するには、以下のフォルダにあるファイル Templates.wstemplate をテキストファイルでオープンします。
※) なお、実際に編集作業を行う際には、かならず変更前に Templates.wstemplate ファイルのコピーを取得しておいてください。

C:\Program Files\Microsoft WebMatrix\en\Item Templates

テキストエディタにファイル テンプレートの設定 ( XML ) がロードされるので、その中から PHP ファイルの定義が書かれた箇所を特定するため、文字列 “<Name>PHP</Name>” で検索を行います。

<Template> タグで囲まれた PHP ファイルの定義箇所が見つかりますので、その定義中の <ScriptingLanguage> の値を “PHP” から “*” に変更します。

具体的には以下のような感じです。

<ScriptingLanguage>php</ScriptingLanguage>
  を  に変更
<ScriptingLanguage>*</ScriptingLanguage>

変更が終了したら WebMatrix を起動し、初期画面の 4 つのメニューから [ Site From Web Gallery ] を選択します。

image
(図 : [Site From Web Gallery] アイコン )

次に [ Files ] メニューの画面に切り替え、ツールバー上の [ New ] ボタンをクリックし、表示されたファイルのテンプレートから “PHP” を選択して [OK] ボタンをクリックします。

追加されたファイル内に PHP 環境の動作検証でおなじみの phpinfo() 関数を記述して実行してみましょう。

image
(図 : phpinfo() 関数の記述)

追加したファイルをブラウザーで表示してみるには、画面左のツリービューで目的のファイルを選択し、画面上部の [ Run ] ボタンをクリックしします。

また、[ Run ] ボタン下部の ▼ をクリックすると、そのマシンにインストールされているブラウザの一覧が表示されるので、表示を確認したい任意のブラウザを選択するか、すべてのブラウザで表示することができます。

これによってクロスブラウザの検証も簡単に行うことができます。

image
(図 : [Run] ボタンのブラウザリスト)

ちなみに上記の画像には Internet Explorer が表示されていませんが、これはインストールされていないのではなく、既定なので表示されていないだけです。

 

[ Reports ] メニューの機能

WebMatrix には、Web サイトへの SEO 分析を行い、その結果をレポートしてくれる機能が付属しています。

この機能を使用することでインターネット上の実際の Web サーバー配置する前に、SEO 的なチューニングをある程度行うことができます。

WebMatrix が提供する SEO 分析機能を使用するには、[ Reports ] メニューを選択し、画面右側のペインに表示される “Run an SEO Report for your site” リンクをクリックするか、ツールバーより [ New ] ボタンをクリックします。

image
(図 : [Reports] メニュー選択時の画面)

生成されるレポートの名前と、SEO を検証する Web サイトの URL を指定するための画面が表示されるので、そのまま [OK] ボタンをクリックします。ちなみに [ Start URL ] に任意の Web サイトを指定すると、外部の Web サイトに対しても SEO の検証を行うことができます。

image
(図 : SEO 解析の指定画面)

SEO の検証が完了すると、画面左のツリービューに生成されたレポート名が表示されるので、ダブルクリックして検証した URL リストを表示します。

image
(図 : SEO レポート選択画面)

リスト中の URL をクリックすると、SEO 的に違反している部分の概要 ( “Violation Details” ) と、推奨される設定 ( “Recommendations” ) 情報が表示されます。

image
(図 : Violation の概要画面)

また、概要部分下の “View More Details” リンクをクリックすると、さらに詳細な情報がダイアログボックスに表示されます。

image
(図 : Violation の詳細ダイアログボックス)

これら検出されたレポートの内容と、ご自身がお持ちの SEO の知識を使用して、作成中の Web サイトに SEO のチューニングを施すことが可能です。

 

WebMatrix の配置機能

WebMatrix は作成した Web サイトを、インターネットのサーバー上にアップロードするための機能も提供しています。

この機能を使用するには、ツールバー上の [ Publish ] ボタンをクリックします。

image
(図 : [Publish] ボタン )

コンテンツをアップロードするための設定画面が表示されるので、[ Protocol ] ドロップダウンリストボックスから使用するプロトコルを選択し、サーバー名、アカウント情報、その他必要情報を入力して [ Publish ] ボタンをクリックします。

image
(図 : [Publish] の設定画面 )

これでインターネット上の Web サーバーへの配置作業は完了です。

さて、この [ Publish ] ボタンにはもう一つの機能があります。それは登録いただいている Web ホスティング事業者のサービスを選択できるという機能です。

この機能を使用するには [ Publish ] ボタン下の ▼ をクリックし、ドロップダウンの中から [ Find Web Hosting ] を選択します。

image
(図 : ホスティング事業者のリストを表示するメニュー)

ホスティング事業者 ( おそらく Hosting Gallery に登録していただいている事業者 ) のリストが表示されるので、用途に合わせホスティングサービスを選択することができます。

image
(図 : ホスティング事業者のリスト)

 

以上、PHP カンファレンス 2010 で行ったデモの手順はここまでです。

今回ご紹介させていただきましたように、WebMatrix には、Web アプリケーションのインストール機能と合わせ、Web サイトを作成するために必要な一連の作業を補完する機能が搭載されています。

また、今回は紹介しませんでしたが、ASP.NET アプリケーションを PHP、ASP ( Active Server Pages ) ライクに、簡単な記述で作成する “Razor” という仕組みも搭載されていますので、こちらもぜひお試しください。

Razor については同僚にしてチームメイトの井上章さんがブログに書いておりますのでぜひご覧ください。

 

WebMatrix、リリースが待ち遠しいですね。

Real Time Analytics

Clicky

Comments (5)

  1. WebMatrix で作業するぶんにはあまり関係ないのですが。。。

    PHP を Windows (IIS) で動作させるためのドキュメントを作成しました。

    今現在、IIS 上で PHP を動かすということにおいて、これ以上のものはないと自負しております。

    とくに 2 章、3 章は必見です。

    もうすでに、IIS で PHP をホストされている方も一度ご覧ください。

    PHP on Windows ガイドライン (ドラフト)

    technet.microsoft.com/…/gg535422

  2. HOHO より:

    webmatrix(wordpress)でエラー表示されます。

    はじめwebmatrix をインストール後wordpressを入れ問題なく動作していたのですが、クイックスタートにある円柱?を「サイトおよびコンテンツの削除」してしまい使えなくなってしまいました。

    その後webmatrixをアンインストールして入れ直しwordpressでログインした後「サーバーが存在しないか表示できません」となります。また、wordpress 3.xにアップグレードしようとすると「Bad Request (Invalid 」と表示され困っています、どうすればよろしいでしょうか?Hostname)

  3. HOHO さん

    書き込まれた内容からのみしか判断できないのですが、どうも MySQL が動作していない可能性があります。

    まず、以下の手順で、MySQL が正常に動作しているか確認しましょう。

    1. [スタート] ボタンをクリックし、[プログラム] – [MySQL] – [MySQL Server 5.1] – [MySQL Command Line Client] を起動します。

    2. コマンドラインにプロンプトが表示されるのて゛、インストールの際に設定した root アカウントのパスワードログインしてください。

    3.以下のコマンドを実行すると、My SQL  内のデータベース一覧が表示されるので、「wordpress」 (既定の場合) があるか確認してください。

    show databases;

    ここまでの手順でエラーが出る場合は、MySQL が正常に動作していない可能性があります。

    その場合は、Windows の [コントロールパネル] 内の [管理ツール] – [サービス] の内容を確認し、MySQL のサービスが動作しているか確認してください。

    「MySQL」 の [状態] が "開始" になっていない場合は、右クリックして表示されるメニューから [開始] を選択してサービスを開始してください。

    >wordpress 3.xにアップグレードしようとすると「Bad Request (Invalid 」と表示され困っています、どうすればよろしいでしょうか?

    これはちょっとわからないですね。

    WordPress についてのは、WordPress にフォーラムがあるので、そちらで質問されたほうが解決が速いかもしれません。(私、自身 WoedPress は詳しくありませんので)

    以下に、WoedPress  フォーラムのリンクを張らせていただきます。

    ja.forums.wordpress.org

  4. HOHO より:

    返信ありがとうございます。

    >2. コマンドラインにプロンプトが表示されるのて゛、インストールの際に設定した root アカウントのパスワードログインしてください。

    上記でパスワードを入れた所動作はしましたがwordpressの文字は見当たりませんでした。

    サービス内容でMySQLを確認したところ「開始」状態で問題はありませんでした。

    上記を確認してもう一度ログインできませんでした。一度アンインストールして入れなおしたにも関わらず問題が解決できません。

  5. HOHO さん

    >上記でパスワードを入れた所動作はしましたがwordpressの文字は見当たりませんでした。

    show databases; コマンドは実行されましたでしょうか?

    もし show databases; コマンドの結果に wordPress が表示されないとなると、問題の原因は WordPress 用のデータベースが無いためと考えられます。

    その場合は、単純に WordPress さえ入れなおせばデータベースが新しく作成されて、動作するようになるはずなのですが。。。

    もし、MySQL 内のデータが消えても構わないのであれば、 Windows の [プログラムのインストールと削除] から MySQL と WebMatrix の両方を削除して再度入れなおしてどうかお試しください。

    残念ながら、これ以上は私にはわからないですね。

    お役に立てずにすみません。。

Skip to main content