こんにちは。

Visual Studio Code で使用されているオープンソースの Monaco Editor ベースのブラウザー エディタ「App Service Editor」 (旧名 Visual Studio Online) を使うことで、ブラウザーだけでプログラミングがスムーズにおこなえます。
クラウドを使って、コード補完や検索などのユーティリティを使ったプログラミングが “いつでも どこでも” できることに加え、開発環境の作成・削除もローカル環境を汚すことなく迅速におこなえ、また error_log() によるサーバー側出力 (output) も実際の配置環境でリアルタイムに確認できるなど、多くの付加価値を得ることができます。

この App Service Editor ですが、Node.js については、かなり昔に「App Service Editor で Node.js アプリ開発」の投稿で紹介しましたが、今回は その PHP 編を記載しておきます。

Azure Web App (旧 Azure WebSite) の Free Plan でも使用できますので、はじめて Azure をさわる方も、この Cool なエディタを お気軽にお試しください。 (すべて 0 円で出来ます !)

補足 : App Service Editor は、オープンソースの Monaco Editor がベースとなっています。

App Service Editor の表示

ローカル環境に開発ツールなどをインストールする必要はいっさいありません。ブラウザーと Azure のアカウントがあれば充分です。(無料の Azure Web App で充分です。)

App Service Editor を使用するには、Azure Portal から Web App (App Service) を選択して [Tools] (ツール) の [App Service Editor] を選択するだけです。

下図の通り、App Service Editor が表示されます。
URL を見ていただくとお気づきの方も多いと思いますが、Kudu がベースとなっています。(Kudu についての説明は、ここでは省略します。)

PHP のコード補完はもちろん、ファイル内検索 (Shift-Ctrl-f) やファイル名検索 (Ctrl-e) など、エディターに必要なさまざまな機能を提供します。

CakePHP

では、まず、Gallery にある CakePHP を使用して、Azure Web App を新規作成して動かしてみましょう。

Azure Portal で [New] をクリックすると、いくつか代表的な作成方法が表示されまずが、この中に CakePHP はないので、右上の [Everything] をクリックして、その他の作成方法を表示します。

表示される Gallery の画面で、[Web] の [App framwork] カテゴリの中から [CakePHP] を選択し、必要な構成 (Group 名、Website の domain 名、使用する edition の選択など) を設定して Azure Web App を新規作成します。(ここが特に、時間がかかりますが。。。)
なお、今回は、Azure Web App の Free (F1) 版、MySQL (ClearDB) の Mercury 版 (free) で充分です。(本番運用の際などは、有償版を使用してください。)

新規作成をおこなうと、Azure Web App、MySQL (ClearDB) データベースの含まれた Resource Group が作成されます。(下図参照)

この中の Azure Web App (上図の 2 番目) を選択して App Service Editor を表示すると、CakePHP で使用するさまざまなファイルが作成されているのが確認できます。
これらのファイルを編集したり、ファイルを新規作成するなどして編集が可能です。.php ファイルを編集する際には、下図の通り、Intellisense (Suggestion) も効きます。

CakePHP は、PHPUnit と共に使用することを前提としていますので、まず Composer をインストールし、Composer を使って PHPUnit をインストールします。今回は、app/Vendor にインストールしてみましょう。

左から [Open console] (または Ctrl-Shift-c) をクリックして Console を表示し、以下のコマンドを入力して Composer をインストールします。(この App Service Editor の Console については重要な注意事項がありますので、後述します。)
ここでは Composer を使っていますが、PEAR パッケージ マネージャを使用する場合は「Installing PHP Package on Azure Website Using PEAR Package Manager」を参照してください。

cd app/Vendorcurl http://getcomposer.org/installer | php

つぎに、以下のコマンドで PHPUnit をインストールします。
このコマンドを実行すると、composer.json が自動生成され、その内容に従って Composer が PHPUnit をインストールします。

php composer.phar require phpunit/phpunit=3.7.*

CakePHP で PHPUnit を組み込むには、上記コマンドで作成された vendor/autoload.php (つまり、今回の場合、app/Vendor/vendor/autoload.php) を CakePHP に読み込ませます。
このため、CakePHP の app/Config/core.php に以下の 1 行を追記しておきましょう。(なお、ファイルはいちいちディレクトをたどって探さなくても、Ctrl-e で表示されるテキストボックスにファイル名を入力すると、候補が出てきます。以降も同様です。)

require_once dirname(__DIR__) . 'Vendor\vendor\autoload.php';

つぎに、CakePHP の Model/View/Controller を作成します。
今回は、Sample という Model データを入れておく Table を (MySQL) に作成して、このデータベース定義から Model/View/Controller を Bake で自動生成します。

まず、MySQL Workbench などの MySQL クライアントを使って、上記で作成された MySQL データベース (ClearDB のデータベース) に接続します。なお、host 名、username、password などの接続情報は、app/Config/database.php に記述されているので参照してください。

対象のデータベースに接続したら、以下の SQL コマンドで samples テーブルを新規作成します。

create table samples (  id integer primary key auto_increment,  name varchar(256) not null);

さいごに、テーブル (samples) の構成を元に、Bake を使って Model/View/Controller を作成します。Console (Ctrl-Shift-c) で、以下のコマンドを入力します。
このコマンドを実行すると、app/Contoroller/SamplesController.php、app/View/Samples/*、app/Model/Sample.php が作成されるので、中身を確認してみてください。

lib/Cake/Console/cake.bat bake all Sample

これで CakePHP の簡単なアプリケーションが完成しました。

App Service Editor の左にある [Run] (または、Ctrl-F5) をクリックするとブラウザーが起動し、このサイトのトップページが表示されるので、/Samples を付与してアクセスしてみてください。(例 : http://demo01.azurewebsites.net/Samples)
下図のようなアプリが表示されれば、成功です ! (データの登録などをおこなって、遊んでみてください。)

せっかくなので、PHPUnit も使ってみましょう。

app/Test/Case/Controller/SamplesControllerTest.php というファイルが作成されていると思います。このファイルを開くと、testIndex、testView、testAdd、testEdit、testDelete などの function がありますので、今回は、testIndex に以下の通りテスト コードを記述してみましょう。
このコードでは、/Samples にアクセスした際に View に渡される値 (今回の場合、Sample 一覧の配列) を $result に取り出して、これを debug コンソールに出力します。

. . .public function testIndex() {  $result = $this->testAction('/Samples',    array('return' => 'vars'));  debug($result);}. . .

なお、本来は、テスト用のデータベースを別に準備して、app/Config/database.php の $test (下記) にこのデータベースへの接続情報を記述します。しかし、今回は Mercury 版の free database を使用しているため、データベースやスキーマを複数作成することができません。
このため、今回は、暫定措置として、app/Config/database.php の $test に、上記の開発で使用しているデータベースと同じ接続情報 (下記の $default の情報) を設定しておきましょう。(テスト後に Table が delete されてしまうなど、ちょっとおかしな状況になるかと思いますが、タダなので我慢してください。。。)

. . .class DATABASE_CONFIG {  public $default = array(    'datasource' => 'Database/Mysql' ,    'persistent' => false ,    'host' => '<unique domain>.cloudapp.net',    'login' => '<username>',    'password' => '<password>' ,    'database'=> '<database name>',    'prefix' => '',    //'encoding' => 'utf8',  );  public $test = array(    'datasource' => 'Database/Mysql',    'persistent' => false,    'host' => 'localhost',    'login' => 'user',    'password' => 'password',    'database' => 'test_database_name',    'prefix' => '',    //'encoding' => 'utf8',  );}. . .

再度、[Run] (Ctrl-F5) で起動し、今度は、/app/webroot/test.php (例 : http://demo01.azurewebsites.net/app/webroot/test.php) を開いてみてください。
下図のような画面が表示されます。

上図で「Controller / SamplesController」をクリックすると、1 つだけテストに pass しているのが確認できます。上記でコードを記載した testIndex が pass しているためです。

この画面 (上図) で、下部の [Enable Debug Output] をクリックすると、下図の通り、Debug 出力として、データが 1 件だけ入った配列が確認できます。(このデータは、PHPUnit がテスト用にあらかじめ設定したデータです。)

Resource Group を Delete すると、Azure Web App も MySQL (ClearDB) も、きれいさっぱり削除できます。

Laravel

Gallery にないアプリケーション フレームワークも Composer や Git などを使って簡単にインストールできます。(ただし、後述する注意事項に気をつけてください。)
例えば、Laravel を Github から取得してインストールしてみましょう。

今回は、Azure Portal で、単純な Azure Web App (旧 Azure WebSite) を新規作成します。

App Service Editor を開き、左から [Git] を選択し (または、Ctrl-Shift-g)、表示される画面の下図のテキストボックスに「https://github.com/laravel/laravel.git」を入力して、[Clone from a git URL] をクリックします。

Console が表示され、git clone コマンドが実行されて、Github から Laravel のプロジェクト (ソース) が Clone されます。

補足 : 上記の方法を使用せず、直接、Console 上で git clone コマンドを入力しても Clone できないので注意してください。

Clone されたソースの中に composer.json があることにお気づきでしょう。そうです、あとは Composer を使ってインストールすれば完了です。
[Open Console] をクリックして (または、Ctrl-Shift-c) Console を表示し、以下のコマンドを実行します。

curl http://getcomposer.org/installer | phpphp composer.phar install

さいごに 1 つだけ、IIS 用に書き換えてもらう項目があります。
public フォルダーの下に .htaccess ファイルがあると思いますが、IIS ではこのファイルは参照しないので、同じディレクトリに web.config を新規作成して、以下の通り記述してください。(.htaccess の IIS 版です。)

<configuration>  <system.webServer>    <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>    <staticContent>      <remove fileExtension=".svg" />      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />      <clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />    </staticContent>    <httpProtocol>      <customHeaders>        <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains"/>        <add name="Access-Control-Allow-Origin" value="*" />        <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type" />        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,DELETE,PUT,PATCH" />      </customHeaders>    </httpProtocol>    <rewrite>      <rules>        <rule name="Laravel4" stopProcessing="true">          <match url="^" ignoreCase="false" />          <conditions logicalGrouping="MatchAll">            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />          </conditions>          <action type="Rewrite" url="index.php" appendQueryString="true" />        </rule>      </rules>    </rewrite>  </system.webServer></configuration>

以上で、Laravel のインストールは完了です。

[Run] (Ctrl-F5) で実行し、表示される Url に /public/ と付与すると (例 : http://demo01.azurewebsites.net/public/)、下図の通り Laravel のアプリが表示されます。(本番運用では、public を wwwroot に変えて使用すると良いでしょう。)

作成されている HomeController の真似をして、適宜、Controller / View などを作成して遊んでみてください。

Git が使えるということは、いろいろな組み合わせが考えられます。

例えば、ここまで Debug について記載しませんでしたが、Sublime Text (+ Xdebug) や PhpStorm などで Debug したプロジェクトを、Git を使って簡単に Azure Web App に発行したり、途中まで作成した App Service Editor 上のプロジェクトをローカルに Clone して Debug するといった使い方なども考えられます。
Development, Test, Production などの管理境界を柔軟に扱うことができます。

その他の拡張 (注意すべき事項)

ライブラリーによって使用する PHP のバージョンを変更する場合は、Azure Web App の Application settings で変更できます。

php.ini の編集が必要になった場合には、Azure Web App では user.ini を記述する必要があります。user.ini では、php.ini と同じことが書けるわけではなく、記述可能な内容に制限がありますので注意が必要です

なお、カスタムの dll を使った拡張機能 (extension) は .ini ファイルによる extension ディレクティブの設定ではなく、dll をアップロードして、下図の通り PHP_EXTENSIONS を設定します。(なお、Azure Web App の PHP は Non Thread Safe なので、例えば、dll を取得する際は、nt や nts と付与された dll を使ってください。)
一般的に使う extension は、既存で設定されていますので、追加する必要はありません。(phpinfo などで確認してください。)

設定を変更したら、Azure Web App の Restart (再起動) をおこなってください。

さて、ここまで良い面のみを書きましたが、App Service Editor では、Debug (ブレークポイントの設定、ステップ実行、など) ができないこと以外に、実際使い始めると見えてくるいろいろなペインもあります。(いくつかは、Azure Web App そのもののペインですが。。。)
そのうち、特に気をつけるものを以下に記載しておきます。

1. 対話型コマンド (interactive command) は不可 :
   現在、App Service Editor の Console では、ユーザーにプロンプトを表示するような対話型コマンド (interactive command) が使えません。
   対話型コマンドを使用する際は、Kudu Console を使用してください。(下図の通り、[Opne Kudu Console] を選択すると表示されます。)
   
   実は、上記手順では、あらかじめ対話型コマンドが発生しない方法を選んでセットアップをおこないました。例えば、インストールの途中でユーザー入力が必要になるケースや、Cake の対話型コマンドなども App Service Editor の Console では扱えないので注意してください。(まあ独り言ですが、そもそもユーザー入力を待機するなんて、App Service Editor のベースである JavaScript エンジンとはミスマッチですね。馬田さんいわく「対話型の対応はリソースを食うので難しいらしい」とのことです。。。)
   デバッグなども必要になるので、実際の開発では、Git を使って、ローカルと Azure Web App をうまく組み合わせるという方法が良いでしょう。
2. ファイルの参照ルール :
   また、ファイルはすべて wwwroot (D:\home\site\wwwroot) 上に配置 (公開) されていますが、フレームワークによって、特定のフォルダーやファイルのみを公開するケースが多々あります。(実際、以前紹介した SimpleSAMLPhp など、PHP のフレームワークには、こうしたものがたくさんありますね。) こうした場合、App Service Editor では Web.config の編集 (rewrite ルールの記述など) で対処することになります。
   上述の CakePHP (Gallery のテンプレート) が作成する Web.config でも、実は、こうした設定がおこなわれています。また、上記の Laravel のように自前でインストールした場合には、インストール後に Web.config の作成もちゃんとおこなうべきでしょう。

このようにローカルの開発環境と比べるといろいろ制限はあるものの、PHP におけるさまざまな環境 (使用するフレームワークが異なる複数の環境) をお手軽に立てて、場所を選ばず ここまでの開発ができるという点は、やはり うれしいですね。
ちょっとした編集作業なら、もうブラウザー使えば良いじゃん (Azure Web App にあるものが正)、という感じです。

※ 変更履歴

2015/03/26  Azure WebSite から Azure Web App に名称変更

2016/07/15  Visual Studio Online から App Service Editor に名称変更