Web アプリ/サービスの開発環境をローカル/クラウド両方同時に整える - Part.1 WebMatrix で Web サイトを作成
こんにちは。
マイクロソフトの渡辺です。
開発者向けのツールが続々とリリースされている今日この頃ですが、Windows & Microsoft Azure の世界にも、とっても便利な開発環境があります。
Windows で Web というと、XAMPP for Windows や IIS の設定をする必要があるの?エディタは Visual Studio をダウンロードする必要あり?というような、少し面倒なイメージを持たれている方も多いのではないでしょうか。
そこで今回は、HTML/CSS/JavaScript で Web 制作をしたい方から、PHP や node.js 等でサーバサイド開発をされたい方までご活用いただける、Web アプリ/サービスの開発環境を、ローカル/クラウド両方同時に ” さくっと ” 整える方法をご紹介していきます。
- Part.1 *この記事「 WebMatrix で Web サイトを作成 」
- Part.2「 jQuery Mobile でスマホ向けサイト制作 」
- Part.3「 ローカルのエディタから直接クラウドを利用して Web に公開 」
- Part.4「 Azure Web サイトをブラウザから直接編集 」
Web 開発の環境を Windows 上にさくっと構築
Windows 上に Web 開発の環境をさくっと構築したい場合は、Web Pltaform Installer を使います。Web Platform Installer ( Web PI )は、オープンソースのフレームワークや CMS を含む Web 開発に使う最新のコンポーネントを、簡単にインストールできるツールです。
IIS, SQL Server Express, .NET Framework や Visual Studio Web Developer といった、Windows 上で Web 開発を行う際に必要となるツール群も、この Web PI からまとめてダウンロード/インストールされるので、初めて Web 制作/開発に取り組む方も安心です。
また、軽量かつクラウドサービスと統合された無料の Web 開発ツールである WebMatrix 3 は、簡単な Web サイトの制作から、オープンソースのフレームワークを利用した Web サービスの開発までに対応することができます。
今回はまず、この WebMatrix 3 を使って、jQuery Mobile を利用したスマートフォン向けの Web アプリを制作していきましょう。
Web PI を通じて WebMatrix をインストール
WebMatrix のページにある " Download " ボタンを押すと、インストーラーをダウンロードすることができます。保存、実行してインストーラーの指示に従い、Web PI と WebMatrix をインストールしましょう。インストールの流れをスクリーンショットでご覧になりたい場合は、WebMatrix のインストール手順をご覧ください。
インストール完了後はさっそく WebMatrix を開いてみましょう。
" 新規 " を、クリックしテンプレート ギャラリーから新しくサイトを作成してみます。
今回はシンプルに空のサイトで作成してみたいと思います。
" 次へ " を押して進むと、index.html と favicon.ico が作成されます。これで最小構成の Web サイトは作成完了です。
適当に index.html を編集してみます。もちろんコード補完が効くのでスムーズにコードを書いていくことができます。
ローカル環境で作成したページを見てみたい場合は、エディタ左上の " 実行 " を押します。
するとブラウザが立ち上がり Web サイトが表示されます。アドレスバーを見ると locahost にサーバが起動していることがわかります。本来なら別途環境構築が必要なローカルの Web サーバ環境等が、Web PI を使うと WebMatrix と一緒に必要なものをインストールしてくれるので、このようにさくっと開発を始めることができます。
ちなみに、Internet Explore では、" F12 " ボタンを押すと表示される F12 開発ツールで、Web ページのデバッグやテスト、高速化が行えますので、ぜひご活用ください。
以上、まずは Web 開発の環境を整え、新しく Web サイトを制作する流れをご覧いただきました。ここまでご紹介したツールは以下の3つです。
次回は、jQuery Mobile を使ってスマートフォン向けの Web サイトを制作していきます。
- Part.1 *この記事「 WebMatrix で Web サイトを作成 」
- Part.2「 jQuery Mobile でスマホ向けサイト制作 」
- Part.3「 ローカルのエディタから直接クラウドを利用して Web に公開 」
- Part.4「 Azure Web サイトをブラウザから直接編集 」