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 の無償のエディションとしては、以前から…

1

HTML5 登場からみるフロントエンド開発技術の進歩

現在の Web のフロントエンド開発には、4 〜 5 年前にはなかったような、さまざまなツールや技術、概念が溢れています。 この爆発的とも言える技術の発生と派生、広がりのきっかけを辿ると、HTML5 の登場に行きつくと考えています。 ちょうど、政府系業界誌を発刊されている一般社団法人 行政情報システム研究所さんより HTML5 に関する記事の執筆を依頼いただいたので、HTML5 登場によって生み出された、Web のフロント エンド開発の技術についてまとめてみました。 なお、この記事は、一般社団法人 行政情報システム研究所さんが発行する冊子「行政&情報システム」の 12 月号に寄稿したものを転載の許可を得て加筆したものです。   HTML5 登場からみるフロントエンド開発技術の進歩 10月28日、ついに HTML5 が W3C の正式勧告となりました。 「HTML5」という名前が囁かれはじめた当時、それまでの HTML とは一線を画すその機能性の高さと革新性から、現実的な解というよりかはバズワード的な扱いをされていた HTML5 でしたが、現在ではすでにモバイル デバイス用を含め、多くのWebブラウザーがその仕様をサポートし、実際に動作する環境が整いつつあります。 HTML5 の登場は、あまりに自然で意識されることはないかもしれませんが、Web のフロントエンド開発の技術を大きく進歩させるとともに、さまざまな変化をもたらしました。その影響は Web ブラウザーを飛び出し、クロス プラットフォーム/クロス デバイスで動作するアプリの開発にまで及んでいます。 この記事では HTML5 の登場によってもたらされたフロントエンド開発の変化と、派生した技術、それらによって醸成されたWeb技術について紹介します。   それまでのHTMLとHTML5の違い HTML はオンライン上のドキュメントの構造を記述する目的に設計され発展してきましたが、HTML5 ではそれに加え、アプリケーションの開発プラットフォームとしての仕様が盛り込まれています。さらに、その仕様で定義される API の機能の範囲は、Webブラウザー内にはとどまらず、ストレージやネットワーク、センサーやデバイスなど、多岐にわたります。 たとえば、動画や音声といったマルチメディアの再生は、従来であれば Web ブラウザーにわざわざ別のプログラムをプラグインとして追加し、それを利用する必要がありましたが、HTML5 では video…

2

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2014年 10~11月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを、せっかくだかに毎月まとめていこう、と思ったものの、暇がなくて二か月まとめての投稿です。 前回作ってみたら、個人的には意外なほど役に立ちました。昨今は覚えきれないほどの情報に接しているので、こういうの作っておくといいかもしれません。 リンク先はさまざまにサイトにわたるので、時間の経過とともにリンク切れになるかもしれませんが、何卒ご了承くださいませ。   Internet Explorer 関連 Internet Explorer and the Windows 10 Technical Preview http://blogs.msdn.com/b/ie/archive/2014/10/01/internet-explorer-and-the-windows-10-technical-preview.aspx Windows10 Technical PreviewにおけるInternetExporerの記事が投稿されておりますよ。 バージョン別セキュリティ既定値一覧表 http://msdn.microsoft.com/ja-jp/ie/cc844005#tbl2_ie9ie10 InternetExplorer のバージョン別セキュリティ既定値一覧表。 社内システムが利用しているIEをバージョンアップした場合、強化されたセキュリティ設定によって使用できていた機能が動かなくことがあるので、これを見て確認。 Dev Feedback on Windows Platform Development https://wpdev.uservoice.com/forums/257854-internet-explorer-platform Internet Explorer 専用の Feedback ページができましたよ。 「こんな機能つけてよ~」っていう要望も可。 Web 開発者の皆様からの建設的なご意見をお待ちしております Enterprise Site Discovery Toolkit for IE11 を発表 http://blogs.msdn.com/b/ie_ja/archive/2014/10/29/announcing-the-enterprise-site-discovery-toolkit-for-ie11.aspx IEブログ(本家)にInternetExplorer11の新しい機能が発表されてる! Making it easier for…

0

modern.IE をローカル環境でホストする方法

みなさまご存じ modern.IE は、マイクロソフトが提供する Web サイトについてのさまざまな検証を行うサイトですが、そのページ検証の部分は GitHub で公開されており、ダウンロードしてローカル環境で動作させることも可能です。 とくに、イントラネットのサイトを modern.IE を使用してコンテンツの検証を行いたい場合には、目的のイントラネットサイトにアクセスできるよう、イントラネット環境で modern.IE をホストする必要があります。 今回はこの modern.IE をローカル環境で動作させる方法について紹介します。 実行環境の準備とインストール modern.IE のインストールと実行には node.js が必要ですので、node.js をインストールします。 node.js のインストール node.js のインストールは以下の URL から行います。 Node.js – Official Site http://nodejs.org/ node.js の具体的なインストール手順については、以下のドキュメントの「Node.js のインストール」の項に画面ショット入りで記載しておりますので適宜参考にしてください。 オープンソースになった WinJS を GitHub から取得する方法 http://blogs.msdn.com/b/osamum/archive/2014/04/22/winjs-github.aspx つぎに、modern.IE-static-code-scan のソースコードを入手します。   modern.IE-static-code-scan のソースコードの入手とインストール modern.IE-static-code-scan は GitHub のソースコードを入手するには、以下の URL にアクセスし、ページ右下にある [Download ZIP] ボタンクリックして…

1

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2014年 8~9月編)

Facebook や Twitter(@osamum_MS) で、せっかく開発に役立ちそうなリンクを紹介しているものの、時間の経過とともに流れてしまって目に留まらないのは勿体ないので(じつは、自分であとで参照しようとしてリンクを探し回るハメになるので)、ある程度たまったらここにまとめていきたいと思います。 なお、リンク先はさまざまにサイトにわたるので、時間の経過とともにリンク切れになるかもしれませんが、何卒ご了承くださいませ。   Internet Explorer 編 IE9 以前に作られたコンテンツを最新のIEで表示した際に、表示がずれるなどの問題が発生する場合に確認して欲しい内容。 IE デベロッパーセンター CSS とレイアウトの互換性の変更点 http://msdn.microsoft.com/ja-jp/library/ie/dn467849(v=vs.85).aspx InternetExplorer 9 以降の IE で、以前のIE用ページの文字がズレる場合は、こちらに書かれている方法をお試しあれ。 Japan IE Support Team Blog – Internet Explorer 11 における文字列表示の変更点について http://blogs.technet.com/b/jpieblog/archive/2014/02/14/3622887.aspx Windowsドメイン上のマシンの様々なインベントリデータが取得できるツール。これを使用するとどのマシンがどんな環境になっているか一覧でわかる Microsoft Assessment and Planning Toolkit http://www.microsoft.com/en-us/download/details.aspx?id=7826 これから社内に Internet Explorer 11 を展開する人はこちらをご覧あれ Internet Explorer 11 (IE11) – IT 担当者向け展開ガイド http://technet.microsoft.com/ja-jp/library/dn338135.aspx Internet Explorer の…

0

その Web サイト、Web Application Template (WAT) で Windows ストア アプリ化しよう!

前回と引き続き、WinJS 関連の記事を書こうと思ったのですが、さる事情から Web Application Template (WAT) というツールについて紹介します。   Web Application Template (WAT) とは? Web Application Template (以降 WAT と記述) は公開されている既存の Web サイトを Windows ストア アプリにするための Visual Studio 2013 用のテンプレートです。 WebView で単純に Web サイトを表示するのとは異なり、設定ファイル (json 形式) に HTML コンテンツのエレメントの id や class 名を指定することで、既存の Web サイトのページの任意の部分を非表示にしたり、スタイルシートを上書きするなどできます。同時に、アプリバーや、チャームなど、Windows ストア アプリの特徴的な機能も提供されます。 また、Windows ストア アプリ用の JavaScript コードも追加できるので、既存の Web アプリ (ページ) に、アプリならではのハードウェアを利用した機能を追加することも可能です。…

0

WinJS3.0 がリリースされました。

このブログで WinJS2.1 の機能をちまちまと紹介しているうちに、なんと、WinJS3.0 がリリースされてしまいました。 ライブラリの入手も、いままでは GitHub から入手して npm インストールするしかありませんでしたが、以下のページの [Direct Download] から zip に入った使える状態の js が入手できます。しかも、CDN まで用意されています。 Try WinJS http://try.buildwinjs.com/#get あたらしく 3.0 になった WinJS、いったいなにが変わったのか、詳しく以下の書かれていますので、ぜひご覧ください。 Building Apps for Windows http://blogs.windows.com/buildingapps/2014/09/17/winjs-everywhere/ ざっと読んだかぎり、WinJS3.0 では以下の 3 つの点が強化されているようです。 デスクトップ、モバイルを含めたメジャーな Web ブラウザーどの互換性強化 PC、タブレット、携帯電話(スマートフォン)で共通で使用できるよう、コントロールのユニバーサル化 アプリや Web サイトのパフォーマンスを上げるための WinJS ライブラリのモジュール化 上の文では紹介されていませんでしたが、WinJS のメジャーな PC Web ブラウザへの対応状況については以下で見ることができますので、ご覧下さい。 Try WinJS #status http://try.buildwinjs.com/#status と、いうことで、このへんをおさえておけば大丈夫でしょう。 じゃあ、今回はこのへんで…、というわけにもいかないので、私のつたない英語力と科学技術を結集して意訳した抄訳を (あれ?) 書いてみましょう。…

0

WinJS2.1 によるテンプレートを使用したデータバインド

いくら検索しても見つけられなかった Visual Studio 2013 のショートカットキー一覧を、US 出張の際に「紙」で もらいました。メモ代わりに内容をこのブログに載せようと思い、念のためもういちど Web を検索してみたら、すんなりと記事が見つかってしまいモンヤリしている秋のはじまり、皆様、いかがお過ごしでしょうか? Visual Studio のヒントとテクニック http://msdn.microsoft.com/ja-jp/library/dn320181.aspx 今回の記事では、Visual Studio とはまったく関係なく、Web ブラウザーからも使用できるようになった、WinJS2.1 が提供するテンプレートの機能を使用したデータバインドの方法について紹介したいと思います。 なお、データバインドがよくわからないという方は、あらかじめ以下の記事をお読みいただくとこれからの記事について理解が深まることでしょう。 Web ブラウザーから使う、WinJS2.1 入門(データバインド) http://blogs.msdn.com/b/osamum/archive/2014/07/28/winjs2-1databind.aspx   テンプレートとは? 「Template 」(テンプレート)とは、日本語ではひな形、鋳型、型板を意味し、そこに材料を流し込むなり、それの形を複製し、土台としてなにかを作成するのに使用します。 HTML + JavaScript のプログラミングにおけるテンプレートも同様です。具体的には、非表示にした、定型化された HTML エレメントの集合を複製し、データを流し込んで表示を行います。 テンプレートの処理にデータバインドを組み合わせると、各項目へのデータの設定や、件数の変化にも自動で対応されるようになるため作業効率が高まります。   WinJS の提供するテンプレート機能 WinJS では、テンプレートを WinJS.Binding.Template オブジェクトとして提供しており、JavaScript からもマークアップからも使用することができます。 WinJS のテンプレートは、ListView オブジェクトや FlipView オブジェクトと共に使ってオブジェクトをリストアイテムとして表示することができます。 コードで記述した場合 var object = new WinJS.Binding.Template(element, options); マークアップで記述した場合…

0

Visual Studio 2013 を使用した Universal Windows App(ユニバーサルアプリ) の開発

前回の記事で、「次は WinJS のテンプレート機能について書きます」と書いたのですが、さる事情から、今回は Visual Studio 2013 Update 2 から追加された Universal Windows App (以降、ユニバーサルアプリ) の開発方法について書きます。 ユニバーサル アプリとは Windows ストア アプリと Windows Phone 8.1 のアプリを同時に開発する仕組みです。 ユニバーサル アプリのテンプレートが生成するソリューションには、Windows ストア アプリ用のプロジェクトと、Windows Phone 8.1 用のプロジェクト、そしてこの 2 つのプロジェクトが共有するコードを保持する共有プロジェクトの 3 つのプロジェクトが含まれます。 (ユニバーサルアプリ テンプレートが生成するソリューション) ユニバーサルアプリは、Windows ストア アプリの開発言語 JavaScript、C#、C++ 用のテンプレートが用意されています。 (※Visual Basic 用はまだ提供されていません。) なお、この記事は HTML + JavaScript のプロジェクトについてのみ説明しています。   ユニバーサルアプリの開発 ユニバーサルアプリを開発するには、ユニバーサルアプリ用のテンプレートを選択するか、Windows ストア アプリのソリューションに Windows…

0

Web ブラウザーから使う、WinJS2.1 入門(データバインド)

前回の記事から、HTML5 アプリケーションのフレームワーク WinJS2.1 の使い方について紹介しています。 今回は WinJS2.1 を使用したデータバインドの使用方法について紹介します。   データバインドとは データバインドとは、文字通りデータとなにがしかを結合することであり、Web のフロントエンド開発では、多くの場合 HTML のエレメントと JavaScript で扱われるデータを結合する機能を言います。 データバインドを使用すると、HTML エレメントのプロパティ毎にいちいちデータをセットする処理を記述する必要がなくなります。 あらかじめ使用するデータと、それらに対応した HTML エレメントのプロパティを定義しておけば、メソッドをひとつ実行するだけで、その内容を UI に反映させることができます。また、この HTML エレメントのプロパティに対応するデータの定義は、HTML マークアップの data-win-bind 属性の中に定義しておけるので、HTML エレメントのプロパティと、対応するデータが変更されても JacaSctipt コードを変更する必要はありません。これによってデータと UI エレメントの関係を抽象化することができます。   データバインドに使用するデータ HTML エレメントとバインドするデータは、プロパティを持つオブジェクトでかつ、HTML エレメントのプロパティの値として適切なものである必要があります。たとえば、HTML エレメントの backGround-color 属性に単なる数字を指定しても、backGround-color 属性に指定できるのは、カラーコードやカラー名であるため、その内容は反映されません。 HTML エレメントにバインド可能なデータは以下のようなものです。 var myBlogsData = {        pageTitle : “monoe’s blog”,     url:”http://blogs.msdn.com/b/osamum”,    …

0