Yuta Watanabe's Blog

開発周りと、その他諸々

Web アプリ/サービスの開発環境をローカル/クラウド両方同時に整える - Part.1 WebMatrix で Web サイトを作成

こんにちは。

マイクロソフトの渡辺です。

開発者向けのツールが続々とリリースされている今日この頃ですが、Windows & Microsoft Azure の世界にも、とっても便利な開発環境があります。

Windows で Web というと、XAMPP for Windows や IIS の設定をする必要があるの?エディタは Visual Studio をダウンロードする必要あり?というような、少し面倒なイメージを持たれている方も多いのではないでしょうか。

そこで今回は、HTML/CSS/JavaScript で Web 制作をしたい方から、PHP や node.js 等でサーバサイド開発をされたい方までご活用いただける、Web アプリ/サービスの開発環境を、ローカル/クラウド両方同時に ” さくっと ” 整える方法をご紹介していきます。

Web 開発の環境を Windows 上にさくっと構築

Windows 上に Web 開発の環境をさくっと構築したい場合は、Web Pltaform Installer を使います。Web Platform Installer ( Web PI )は、オープンソースのフレームワークや CMS を含む Web 開発に使う最新のコンポーネントを、簡単にインストールできるツールです。

f:id:yuwata:20140908151203p:plain

IIS, SQL Server Express, .NET Framework や Visual Studio Web Developer といった、Windows 上で Web 開発を行う際に必要となるツール群も、この Web PI からまとめてダウンロード/インストールされるので、初めて Web 制作/開発に取り組む方も安心です。

また、軽量かつクラウドサービスと統合された無料の Web 開発ツールである WebMatrix 3 は、簡単な Web サイトの制作から、オープンソースのフレームワークを利用した Web サービスの開発までに対応することができます。

f:id:yuwata:20140908151305p:plain

今回はまず、この WebMatrix 3 を使って、jQuery Mobile を利用したスマートフォン向けの Web アプリを制作していきましょう。

Web PI を通じて WebMatrix をインストール

WebMatrix のページにある " Download " ボタンを押すと、インストーラーをダウンロードすることができます。保存、実行してインストーラーの指示に従い、Web PI と WebMatrix をインストールしましょう。インストールの流れをスクリーンショットでご覧になりたい場合は、WebMatrix のインストール手順をご覧ください

インストール完了後はさっそく WebMatrix を開いてみましょう。

f:id:yuwata:20140908151743p:plain

f:id:yuwata:20140908151725p:plain

" 新規 " を、クリックしテンプレート ギャラリーから新しくサイトを作成してみます。

f:id:yuwata:20140908151639p:plain

今回はシンプルに空のサイトで作成してみたいと思います。

f:id:yuwata:20140908151841p:plain

" 次へ " を押して進むと、index.html と favicon.ico が作成されます。これで最小構成の Web サイトは作成完了です。

f:id:yuwata:20140908151900p:plain

適当に index.html を編集してみます。もちろんコード補完が効くのでスムーズにコードを書いていくことができます。

f:id:yuwata:20140908151924p:plain

ローカル環境で作成したページを見てみたい場合は、エディタ左上の " 実行 " を押します。

f:id:yuwata:20140908152015p:plain

するとブラウザが立ち上がり Web サイトが表示されます。アドレスバーを見ると locahost にサーバが起動していることがわかります。本来なら別途環境構築が必要なローカルの Web サーバ環境等が、Web PI を使うと WebMatrix と一緒に必要なものをインストールしてくれるので、このようにさくっと開発を始めることができます。

ちなみに、Internet Explore では、" F12 " ボタンを押すと表示される F12 開発ツールで、Web ページのデバッグやテスト、高速化が行えますので、ぜひご活用ください。

f:id:yuwata:20140908152128p:plain

以上、まずは Web 開発の環境を整え、新しく Web サイトを制作する流れをご覧いただきました。ここまでご紹介したツールは以下の3つです。

次回は、jQuery Mobile を使ってスマートフォン向けの Web サイトを制作していきます。