2012年10月13日

Visual Studio 2012 Web機能

今回も知人より寄稿してもらいました。この場を借りて感謝します。
※ 前回の記事(Microsoft Conference 2012に参加してきました。)もよろしくどうぞ。

Visual Studio 2012
-- セミナーフィードバック その1 --



この夏〜秋のMicrosoftセミナーを梯子しました。
その中でも特に、Visual Studio 2012のWeb系の便利そうな印象を受けた機能を、備忘録としてまとめたいと思います。(個人的にWeb系のお仕事が多いので)
※ 一部機能はVisual Studio 2010でも拡張機能をインストールすると利用できます。ただ、それを記載し始めると長くなってしまうため、ここでは拡張機能を入れていない状態のVisual Studio 2010とVisual Studio 2012を比較して便利だと思った箇所をまとめます。
(Visual Studio に拡張機能を入れた場合、2010と2012でどのようなことが出来るようになるのかは、次回まとめて公開できればと思っています)


● [マイクロソフト ソリューション セミナー] 新製品 Visual Studio 2012 概要〜新世代の統合開発環境で実現するこれからのアプリケーション開発とは
● The Microsoft Conference 2012
● Developer Camp 2012


Web系開発・便利機能まとめ


Webを構成する技術のHTML/JavaScript/CSS、これらを開発する際の便利機能を、所感を交えながら記載します。

(1) HTML


タグをサクサクと作成(HTML5にもバッチリ対応)


まずはこちらのHTMLを見てください。

HTML5のvideoタグ

<video controls="controls">
<source src="hoge.mp4" type="video/mp4" />
<source src="hoge.webm" type="video/webm" />
<source src="hoge.ogv" type="video/ogg" />
</video>


HTML5のvideoタグになるのですが、こちらをVisual Studio 2012で記載する際のステップは、
@.「<vi」とタイプ → インテリセンスのvideoを選択!
A.タブタブ♪ → videoタグの雛形が出力されます。
B.デフォルトで、1行目のsourceタグのsrc属性にフォーカスが設定されています。その値を変更すると、2行目・3行目のsrc属性も連動して変更されます。(デフォルトでは「test」と表示されていたものを「hoge」に変更しました。)

videoタグの作成が、キーボードを5回タイプ(+ファイル名の文字数)で完了です!


タグのサクサクとリファクタ


まずはこちらのHTMLを見てください。

タグのリファクタ

<div>
<!--たくさんの入れ子になっているタグ…-->
</div>


こちらのdiv要素をHTML5っぽいタグに変更したいと思った場合、そのdivの中には、「たくさんの入れ子になっているタグ」が。。終わりの「div」はどれ?なんだか違うタグを変更してしまった!など、タグを変更する場合、ちょこっと面倒だったりします。
Visual Studio 2012のHTMLエディターでは、<div>を<section>に変更すると、連動して紐付く終了タグが</div>から</section>になってくれるんです。
Demoで見たときに、「おぉ、これは便利!」と思いました。
※ 終了タグを修正した場合は開始タグが連動して修正されます。


よく使うタグの塊をユーザーコントロールにサクサクと変換


気がついたら、HTMLで似たようなタグの構成のものが、複数ペ ージに書かれていることがあります。
セッセとコピペするよりは、ユーザーコントロールにしてしまうほうが、再利用性が高まります。
Visual Studio 2012では、以下のステップで簡単にユーザーコントロールとして抽出することが出来ます。
@.タグの塊を選択
A.右クリック → ユーザーコントロールに展開
すると、「.ascx」拡張子のユーザーコントロールがWebプロジェクト内に追加されます。
と、同時にユーザーコントロールに展開した部分のタグが、ユーザーコントロールに置き換わってくれています。
気が利いてて良いなぁって思いました。


(2) JavaScript


かゆい所に手が届く、コードの可読性を上げる機能モロモロ


JavaScriptエディターも随分使い勝手が上がった印象を受けました。
関数の折り畳みが出来たり、カッコの開始と終了の照合が出来たり、関数や変数の定義にジャンプ出来たり。。
「待ってました!」な機能が盛りだくさんでした。


何でもアリのJavaScriptを厳格に制御!


JavaScriptのファイル内に、"use strict";という1行を書き込むと、そのJavaScriptファイルは厳格モードになります。
例えば、「function hoge(a, a)」みたいに、「関数の引数が同じ変数名?!」などというコードには、Visual Studioおなじみの波線が表示されて、不正な書き方であることを教えてくれます。
※ ただ、このエラーはビルドが通らない類のエラーではありません。


JavaScriptの単体テストも自動化できちゃう!


Visual Studio 2010でASP.NETを開発した時、サーバーサイドロジックの単体テストの自動化をやり始めて、「これは便利!」とゴリゴリテストコードを書きました。
いろんなパターンのデータでテストが楽々行えて、反復可能。関数リファクタ後の動作検証もハードルが下がり、リファクタ三昧!ヒャッハー!
しかし、そこでハタと気づきました。
JavaScriptファイルの中身も結構盛りだくさん。ロジックたっぷりだけど、JavaScriptファイルの単体テストは自動化できないということに。。!
Visual Studio 2012ではその悔しさも消し飛びます。


(3) CSS


至れりつくせりのカラーピッカー


色を指定する際に、「#」と入力すると、カラーピッカーが表示されます。
カラーピッカーは、グラフィカルな色の選択、透明度の指定、さらに、Visual Studioの外から色を抽出することもできます。
これで「色は何にしようかな」と思ったときに、Visual Studioから離れて別のツールを使う手間がぐっと減ると思いました。
カラーピッカー

ゴチャリンコになりがちなCSSをregionですっきりグルーピング


「Regionディレクティブ」、どれだけこれのお世話になったことか。。!
Visual Studio 2012ではその「Region」をCSSでも利用できるようになります。
整理整頓で保守・可読性がアップしそうな予感です。

cssのregionディレクティブ

/*#region ××エリア*/
/*××エリアに係るモロモロのcss*/
/*#endregion*/





posted by ぺるたご at 00:16| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年09月29日

Microsoft Conference 2012に参加してきました

今回は知人より寄稿してもらいました。この場を借りて感謝します。


Microsoft Conference 2012に参加してきました。


Microsoft Conference 2012ロゴ

下記のような構成で、まとめてゆきたいと思います。
1.全体の感想をざっくり日記調で記載します。
2.特に気になった技術についてのセミナー内容を、備忘録として記載します。
  ・ Windows Azure
  ・ Internet Explorer 10
  ・ Visual Studio 2012



全体の感想


初めて参加するMicrosoft Conferenceです。
場所は品川グランドプリンスホテルでした。
こんなキレイなホテルは、こういう機会がない限りご縁がなさそうな所だなぁと思いながら、初日の会場に向かいました。
すると、あまりの会場の広さ、人の多さに圧倒されました。

初日も2日目も、午前のキーノート会場の演出は、曲・映像共にすごくインパクトがありました。

※ チョコットだけ残念だったのは、2日目のキーノートで、全員に配布されていた同時通訳機の調子が少し悪かった点です。ところどころで通訳さんの声が聞こえなくなりました。。通訳なしで聞き取ることができるようになれれば一番いいんですけどネ…!

午後はセッションの梯子で1階〜3階をせっせと移動しました。
私は立ち見になったのは1回だけ(しかも一番最初のセッションでした。。)なのですが、セッションによっては結構立ち見の人が多いものもありました。

特に2日目は同じ時間で参加したいセッションがかぶってしまい、結構迷いました。。
(本当はSQLServer系のセッションも参加したかったのですが、同じ時間にVisualStudioが。。!VisualStudioの方を選んでしまいました!)

2日とも、セッションのアンケートに答えて提出すると、ノベルティをいただけました。
初日は水筒(?)2日目はペン。重宝しています。
ノベルティ
では、以下特に気になった技術についての、備忘録を記載します。



Windows Azure関連


・ 無料版がある!


■ InfoQ(無料で使えるWindows Azure Webサイトの新モードを試す)
当ブログのリンク集にある「ranktoyoutube」はGoogleAppEngineを利用しているようです。
このリンクのサイトを構築するのにWindows Azureも検討に入れていたようですが、いかんせん、その際には無償版が無かったため、眼中になかったと聞きました。


・ WebMatrix2


■ Publickey(無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応)
簡易にWeb構築ができるツールとして、WebMatrixは人から教えてもらったことがあるのですが、2が出ていたことは知らなかったです。
バージョンがあがったことによる便利さなども増しているかも?!
機会を見て調べてみたいと思っています。

Azureとは直接関係ないですが、受けたセッションのデモでは、Azure上でテンプレート(今回はWordPress)を利用して作成したWebサイトを、ローカルに落としてきて編集する際に、WebMatrixを利用していました。
お手軽にWebサイトを作る際に便利そうって思いました。



Internet Explorer 10関連


・ IE10ドキュメント


私が参加したセッションで、唯一このセッションだけは、セッション時に利用したドキュメントを後ほど公開していただけるとうかがいました。
それがこちらです。

■ Internet Explorer 10

目からうろこだったのは、IEのパフォーマンスに関しての情報です。
私のパフォーマンスに対するイメージでは、Chrome >>> IEというものだったのですが、上記のドキュメント内で、それと正反対のデータが記載されていました。

Bubblesのサイトは家のPC(Vista/IE9/Chrome22.0)で表示してみたところ、IE9の方が滑らかに表示されました。
(IEは特に描画に強いみたいなことをうかがいました。もちろんセッション発表者自身も手前味噌(Microsoft自身が提供しているサイト)であることには言及していました。)

また、このドキュメントの後半に記載されている、野村総合研究所のIE10に関しての資料は、是非目を通してもらいたいと、発表者の方がプッシュしていました。
備忘としてURLを残しておきます。

■ 野村総合研究所(InternetExplorer10に関する調査結果書)


・ 日本のブラウザシェア


また、上記のドキュメントにはありませんでしたが、ブラウザ利用率に関して、以下のサイトを取り上げていました。

■ StatCounter(日本のシェア)

StatCounterは全世界のシェアでChromeがIEを抜いたというニュースで見たことがあったのですが、国別に表示できるとは知りませんでした。
日本では圧倒的にIEの一人勝ちというグラフになっています。
(セッション発表者もおっしゃっていましたが、この結果はあくまで参考程度なものだと思います)

※ 手前事ですが、つい最近係ったプロジェクト(ASP.NET)でのサポートブラウザはIE(6〜9)とSafariでした。。
IE6のセキュリティ面・サポート面などを懸案事項として主張したのですが。。根強い人気(需要?)があることを噛み締めました。。


・ MSPointer


現在のところは、IE10にのみ搭載されている拡張イベントらしいです。
(タッチ、マウス、ペンなどを「ポインタ」としてデバイスには依存せず扱えるイベント)
ただ、こちらはIE10にのみ搭載されていますが、マイクロソフトの独自仕様にするつもりは無いらしく、現在W3Cに標準仕様として提出しているということを力説していました。


・ CSSのドラえもん☆


■ CSS3のドラえもん
ちょっと横道かもですが。。
前にネタとしてみたCSS3だけを使ったドラえもん、こちらが取り上げられたのにびっくりしました。

IEのCSSが残念な感じだというので見たサイトなのですが、IE10で他のブラウザとまったく同様の表示になっていたのを確認しました。

また、IEのドキュメントモードの性能の正確さ(忠実さ!)を、このドラえもんサイトで再現してくれました。
…ドラえもんが四角くなって、色もなくなって、とIEのバージョンを下げるたびに会場には笑いが!
※ 発表者の方も、「ちょっと自虐ネタになってしまいますが」と断りを入れていましたが。。!



Visual Studio 2012関連


・ Microsoft Fakes


Visual Studio 2012では、特に目を見張ったのがこちらの機能です。
テスト用のスタブを容易に差し込める機能だそうです。
デモでは、2000年問題の検証を行っていました。
このように「システム日時がある特定の日時の場合」という条件のテストは実行が困難なものです。
けれど、システム日時になっている部分を定数の値にしてしまったら、定数の値からシステム日時に変更した時に修正ミスをしてしまい、結果としてテストした故にバグを仕込んでしまうかもしれません。

今回紹介されたMicrosoft Fakesはそのようなシーンに有効です。

こちらの機能を利用すれば、システム日付(DateTime.Now)をプログラムから書き換えることができるようです。

以下に簡単に例を記載したいと思います。
※ MSDNにあったサンプルコードです。

Microsoft Fakesサンプル
using (ShimsContext.Create()) {

ShimDateTime.NowGet = () => new DateTime(2000, 1, 1); // この設定でシステム日付(DateTime.Now)が2000/1/1になります。
// 何らかの処理。。

}

■ MSDN(shim を使用した単体テスト メソッドにおける非仮想関数呼び出しの分離)


posted by ぺるたご at 18:56| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年09月01日

元ガラケーユーザーがGALAXY S3 (SC-06D)をレビューしてみる(その3)

レビューその3です。この記事を書いている時点で、使い始めておよそ1ヶ月ちょっとです。
元ガラケーユーザーがGALAXY S3 (SC-06D)をレビューしてみる(その2)」からの続きです。


★新品(未使用品)★docomo/ドコモ Galaxy S3 SC-06D 白ロム携帯 標準セット品



側面のボタン

その1でも書いたように、GALAXY S3はでかくて片手で操作するのはちょっときついです。それもあって、防護カバーをつけるのを躊躇っていました。やっぱすっぴんがいいよね〜。

ところが思わぬ問題がありまして。左側面のボリュームボタンや、右側面の電源ボタンを誤って押してしまうことがよくあるのです。特にボリュームボタンを誤って押してしまうと、マナーモードが解除されてしまいます。仕方ないのでカバーを付けました。誤ってボタンを押すことも少なくなり、すこぶる快適です。



スクリーンショット

Android 2.3.3 (Gingerbread)からOSの機能でスクリーンショットを撮れるようになりました。もちろん、我らがGALAXY S3もいけます。やり方は、
電源キーとホームキーを長押し
です。

これ、どちらかを押しながらもう片方を押す、ではダメです。同時に押し込んでそのまま手を離さず1秒くらい押しっぱなし、って感じです。なお、機種によっては押すボタンが異なるようです。GALAXY S3以外の機種ではご注意ください。

保存先は本体メモリのScreenshotsディレクトリで、画像形式はPNGになります。



手書き入力

手書き入力を試してみます。「T」みたいなアイコンを押すと手書き入力モードになります。
手書き入力

思ったより認識精度は高い感じです。画数の多い漢字もわりと正しく変換してくれます。また、漢字仮名混じりで手書き入力して、そこからさらに漢字変換することもできます。状況によってはちょっと便利かも。

ただ、一般的にはどうしても入力スピードは遅くなりますね。読み方のわからない漢字を入力するときや、さくっと記号を入力したいときに使うのがいいのではないでしょうか。そういえば一部の記号は全く認識してくれませんでした。「∇(ナブラ)」とか「∀(ターンエー)」とか「∫(インテグラル)」とか。数学系はダメなのか?



バイブレーション

私はGALAXY S3に対してそこそこ良い印象を持っているのですが、唯一絶対に認められないのがこれ。とにかくバイブレーションが弱すぎます。硬い机の上に置いていても、まさに蚊の鳴くような感じで震えます。着信があっても普通に気づきません。一応、「設定」→「サウンド」でバイブレーションの強度を調節できるのですが、最強にしてもいまいち・・・。。まぁ、昨今のスマホでは、でかいモーターを積む余裕なんてないのはわかるんですけど。



ワンセグ

ワンセグなので画質はお察しのとおり。GALAXY S3の美しい有機ELディスプレイには到底似つかわしくないダメ画質です。もちろんGALAXY S3のせいではないです。

むしろ文句を言いたいのはプリインストールされている「Gガイド番組表」ってアプリです。まず重い。たかが番組表なのにこれでもかというくらい重い。カックカクですよ。次にUIがいまいち。番組表から見たい番組を選んでワンセグで表示、ってやるのに3回もタップしなきゃならんのですよ。激重のアプリで3回もですよ。1タップで何とかしてほしいところ。

ワンセグに過度の期待をするのもどうかと思いますので、まあこんなものでしょうか。つーかなくても良かったのでは?ワンセグ用アンテナもついてるし、ハードウェアの設計がつらくなるだけでしょうに。



おサイフ

我らがGALAXY S3にはFeliCaが搭載されていますので、EdyやらIDやらが使えます。GALAXY S3とは関係なく、モバイル+電子マネーの便利さは全人類が使うべきものといっても過言ではありません。私もよくコンビニなどで使ってるのですが、ちょっと困ったことが。コンビニの端末にGALAXY S3の背中をタッチすることで代金を支払うんですけど、GALAXY S3の背中って父の背中より広いでしょう?ていうより図体がでかいでしょう?対してコンビニの端末(特にファミマ)は小さいんですよ、GALAXY S3よりも。なので認識してくれないことが2回ほどありました。背中にFeliCaのマークが印字されてるので、そこらへんでタッチするように注意するといいかも。



★新品(未使用品)★docomo/ドコモ Galaxy S3 SC-06D 白ロム携帯 標準セット品
ラベル:レビュー
posted by ぺるたご at 18:35| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。