Web 製作者のための Visual Studio Community 2013 インストールガイド


先月 (2014 年 11 月) 行われたマイクロソフトの開発者向けイベント Connect(); で発表があったとおり、有償製品である Visual Studio Professional と同等の機能をもった無償(※)の Visual Studio Community 2013 が即日公開されました。

(※)企業での使用は制限付きとなります。詳しくは以下のページの「Visual Studio Community FAQ」の項をご参照ください。

http://www.microsoft.com/ja-jp/dev/products/community.aspx

開発製品スイートである Visual Studio は、サーバーサイドを含めた強力な Web 開発の機能を持っており、それら機能を提供するツールは、純粋な Web のフロントエンド開発にも利用することができます。

今回の記事では、Visual Studio Community 2013 の入手とインストール方法、Web 製作の役に立つプラグインについて紹介します。

Visual Studio Community は、以前からある Express とは異なり、さまざまな制限が解除されているため HTML + JavaScript を使用する開発者の可能性を Web ブラウザーの外へと押し広げてくれることでしょう。

 

これまでの無償版 Express との違い

Visual Studio の無償のエディションとしては、以前から Express がありましたが、Express は有償版から開発のターゲットごとに機能を抽出したものとなっており、目的に合わせそれぞれ異なる Visual Studio をセットアップする必要がありました。たとえば、Web 開発を行うのであれば、Visual Studio Express for Web を、Windows ストア アプリを開発するのであれば Express for Windows を、デスクトップ アプリや dll を開発する場合には Express for Desktop といった具合です。Visual Studio Community では、これらは統合された状態でインストールされます。

また、Express では Visual Studio の機能を拡張するプラグインを使用することができませんでしたが、Community では豊富に用意されたプラグインをインストールして、Visual Studio をさまざまに拡張することができます。

たとえば、Visual Studio Tools for Apache Cordova プラグインをインストールすれば、Apache Cordova を使用して iOS、Android 用アプリの開発を行えるようになります。

<参考>

Muiti-Device Hybrid Apps を使った Android、iOS アプリの開発

インストールの準備

Visual Studio Community 2013 のインストールを行う前に、[Windows アップデート]を使用して、かならず Windows を最新の状態にしておいてください。OS が最新の状態でないとインストールが開始できない場合があります。

Visual Studio Express 2013 が既にインストールされている場合は、これを完全にアンインストールしておいてください。アンインストールが完全でないと、インストールに失敗する可能性があります。

また、インストールには時間がかかる場合がありますので、充分な時間的余裕があるときに行ってください。間違っても帰りがけや、PC を持って出かける用事が控えている場合は行わないほうが良いでしょう。

 

Visual Studio Community 2013 の入手とインストール

Visual Studio Community 2013 は、ダウンロードページから直接インストールを行うことができます。

以下に具体的な手順を示します。

  1. 「Visual Studio のダウンロード」ページに移動します。
     
  2. [Community 2013 with Update 4] のバーをクリックすると詳細が表示されます。

    dl_button

  3. すぐにインストールを開始する場合は [Install now] リンクを、インストール用の ISO ファイルを入手するには [DVD ISO Image] リンクをクリックします。
    なお「English」 と書かれていますが、あとで Language Pack (言語パック) をインストールして日本語化するので問題ありません。

    image

    以降は、[Install now] リンクをクリックした前提で手順を紹介します。

  4. [Install now] リンクをクリックすると、インストーラーがダウンロードされ、ファイルを [保存] するか [実行する] か選択するダイアログボックスが表示されるので、[実行]ボタンをクリックします。

    image

  5. インストーラーが起動してくるので、[License Terms] と [Privacy Policy] リンクをクリックし、内容に充分納得のうえチェック ボックスにチェックをつけ [Next] ボタンをクリックします。

    image

  6. インストールする機能を選択し、[INSTALL] ボタンをクリックします。 

    image

    純粋に Web の開発しかしないのであれば、選択するのは [Microsoft Web Developer Tools] だけで良いでしょう。
    HTML + JavaScript のスキルを活かし、Windows ストア アプリを開発するのであれば、HTML、CSS のオーサリングツールである [Blend for Visual Studio] も選択しておいたほうが良いかもしれません。
    また同様に、Multi Hybrid-Apps プラグイン (Apache Cordova) を使用して iOS、Android アプリの開発を行うのであれば、以下を選択しておいたほうがよいでしょう。

    • Tools for Maintaining Store Apps for Windows 8
    • Windows Phone 8.0 SDK
  7. インストールが開始されます。

    image

    ネットワークや機器の構成 (※SSD だと早い) にもよりますが、かなり時間がかかるので、食事に出かけるか、ひとっ風呂浴びるか、ひと眠りすることをお勧めします。
    ちなみに私は、自宅でインストールが完了する前にカレーを作り終えることができました。(大量の玉ねぎを飴色になるまで炒めて作りましたが、時間的に余裕がありました)

  8. 完了すると、「LAUNCH」のリンクが表示されるのでクリックして Visual Studio を起動してみましょう。

    image

  9. 無事に起動できるか確認しましょう。初回起動時は、マイクロソフトアカウントによる開発者ライセンスの取得が行われますので、[Sign in] ボタンをクリックします。

    image

  10. マイクロソフト アカウント (として登録したメールアドレス) とパスワードを入力して [サインイン] ボタンをクリックします。マイクロソフト アカウントがない場合は「新規登録」リンクをクリックしてアカウントを作成します。
    マイクロソフト アカウントの作成は無料です。

    image

  11. ログインが完了すると開発者アカウントが取得されます。

    image

  12. 開発者アカウントの取得が完了すると Visual Studio が使用可能になります。メニューが英語ですが、Langage Pack を適用して日本語化することができます。

    image

 

言語パック (Language Pack) 適用による Visual Studio の日本語化

インストールされた Visual Studio Community 2013 は英語 (インターナショナル) 版であり、メニューが英語のなので日本語言語パックをインストールして日本語化します。

具体的に手順は以下のとおりです。

  1. 「Visual Studio のダウンロード」ページ の [Community 2013 with Update 4] の詳細内にある 「Visual Studio 2013 Language Pack」 の [ダウンロード言語]ドロップダウンリストボックスから 「日本語」 を選択し、「今すぐインストール」 リンクをクリックします。

    image

  2. インストーラーがダウンロードされ、ファイルを [保存] するか [実行する] か選択するダイアログボックスが表示されるので、[実行]ボタンをクリックします。

    language01

  3. 言語パックのインストーラーが起動してくるので、「ライセンス条項」 と 「プライバシーポリシー」 リンクをクリックし、内容を確認して充分納得のうえチェックボックスにチェックをつけ、[インストール] をクリックします。

    image

  4. ネットワークの状態や PC の構成にもよりますが、インストールにはそこそこ時間がかかります。コーヒーやお茶をいれるなどして気長に待ちましょう。

    image

  5. インストールが完了したら [閉じる] ボタンをクリックしてダイアログボックスを閉じます。

    image

これで言語パックのインストールは完了ですが、これだけで Visual Studio が日本語化されるわけではありません。

Visual Studio の設定画面内で、使用する言語を選択する必要があります。

以下に手順を示します。

  1. Visual Studio 2013 を起動します。
     
  2. メニュー [TOOL] – [Option] を選択し、[Option] ダイアログボックスを表示します。
     
  3. [Option] ダイアログボックスの左のリストから [Environment] – [International Settings] を選択し、右ペイン内の [Language] ドロップダウンリストから 「日本語」を選択し [OK] ボタンをクリックします。

    image

Visual Studio を再起動すれば日本語化は完了です。

 

アドインのアップデート

Visual Studio 2013 のウィンドウの右上にある旗のマークをクリックすると、アップデート可能なエクステンションが表示されます。

リストをクリックすると、それぞれアップデートが行えます。念のためすべてアップデートしておきましょう。

image

 

Web 制作に役に立つエクステンション

Web のフロントエンド開発に強力な機能を提供してくれる Web Essentials 2013 for Update 4 をインストールします。

Web Essentials のインストール手順は以下のとおりです。

  1. Visual Studio 2013 のメニュー [ツール] - [拡張機能を更新プログラム] をクリックします。
  2. [拡張機能を更新プログラム] ダイアログボックスが表示されるので、ダイアログボックス左の [オンライン] バーをクリックして展開し、[Visual Studio ギャラリー]を選択します。

    image

  3. 同ダイアログボックス右上の検索ボックスに「Web Essentials」と入力してキーボードの [Enter] キーを押下します。
     
  4. 検索結果に 「Web Essentials for Update 4」がリストされるので、クリックし、表示された [ダウンロード] ボタンをクリックしてインストーラーをダウンロードしてインストールを行ってください。

    image

Web Essentials for Update 4 をインストールすると、入力補完機能の強化をはじめ、Coffie Script や Less、Sass  (SCSS)、HTML への画像 Base 64 エンコードの埋め込みや CSS Sprite といった Web 制作にあると便利なさまざまな機能がインストールされます。

詳細につきましては、Web Essentials の公式ページをご覧ください。

 

Web Essentials for Visual Studio
http://vswebessentials.com/

こちらもごらんください。

 

Visual Studio で Less、CoffeeScript、MarkDown を使うには?
http://blogs.msdn.com/b/osamum/archive/2013/11/25/visual-studio-less-coffee-script.aspx

 

その他、jQuery 専用のスニペットも用意されているので、jQuery を使用する場合は、こちらもインストールしておくと便利でしょう。

 

jQuery Code Snippets
https://visualstudiogallery.msdn.microsoft.com/577b9c03-71fb-417b-bcbb-94b6d3d326b8?SRC=VSIDE

 

Visual Studio 2013 の Web 関連の入力支援機能の使い心地につきましては、以下の動画をご覧ください。

 

HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) - 第二回 html5j Webプラットフォーム部ナイトセミナー
https://youtu.be/gWt405fHSs8?t=31m11s

 

Visual Studio 2013 と HTML5 でなにができるかは以下の記事をご参考にしてください。

 

Visual Studio 2013 Update 2 での HTML5 関連の強化点
http://blogs.msdn.com/b/osamum/archive/2014/06/12/visual-studio-2013-update-2-html5.aspx

 

上記の記事のもとになったセッション動画が以下になりますので、ご覧ください。

 

Visual Studio 2013 Update 2 と HTML5 によるクロスデバイス、クロスプラットフォーム開発の全貌
http://www.microsoftvirtualacademy.com/training-courses/decode-track1

 

Android、iOS アプリの開発について

Visual Studio 2013 に Muiti-Device Hybrid Apps というエクステンションをインストールすると、Apache Cordova を使用して Android、iOS アプリの開発を行うことができます。

詳細については以下の記事をご覧ください。

 

Muiti-Device Hybrid Apps を使った Android、iOS アプリの開発
http://blogs.msdn.com/b/osamum/archive/2014/07/02/muiti-device-hybrid-apps-android-ios.aspx

 

まとめ

Visual Studio 2013 を使用すると、純粋な Web のフロントエンド開発に強力な支援機能を提供してくれるだけでなく、Windows ストア アプリ、Windows Phone アプリ、iOS、Android 用アプリと、Web 製作者の可能性を広げてくれます。

いままで Web 制作にしたかかわったことがない人も、Visual Studio の使用をきっかけにらぜひアプリの開発にも挑戦してみてください。

 

<おしらせ>

「Microsoft Azure 史上最大のコミュニティイベント」とサブタイトルが入った、マイクロソフトのクラウド Azure のイベントが開催されます。
場所と日時は以下のとおりです。

GoAzure 2015 ~Microsoft Azure 史上最大のコミュニティイベント ~
場所: ベルサール渋谷ファースト
〒150-0011 東京都渋谷区東1-2-20 住友不動産渋谷ファーストタワー
日時 : 2015/1/16(Fri.) 10:30~20:00

参加料: 無料

詳細 : http://r.jazug.jp/event/goazure/

 

こちらもどうぞよろしくお願いします。

 

 

Real Time Analytics

Clicky

Comments (1)

  1. Visual Studio 2013 でフロントエンド開発をするためのチュートリアル記事を書きましたのでご活用ください。

    blogs.msdn.com/…/front-end-web-development-using-visualstudio.aspx

Skip to main content