アーカイブ

Archive for the ‘ASP.NET’ Category

メモ Microsoftによる.NETアーキテクチャの手引きに関する発表

Microsoftによる.NETアーキテクチャの手引きに関する発表

https://www.infoq.com/jp/news/2017/05/microsoft-architecture-guidance?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global

4つのアプリケーションアーキテクチャに関する手引きのドラフトが、MicrosoftのDeveloper DivisionとVisual Studioの製品チームから入手可能になった。これらのドラフトは4つの領域を対象としている。マイクロサービスとDocker、ASP.NETによるWebアプリケーション、Azureのクラウド配置、そしてXamarinによるモバイルアプリケーションである。それぞれの手引きはそれぞれのトピックに沿った複数の文書から構成される。Microsoftはこれらのドラフト文書に対して一般のコミュニティからのフィードバックを求めている。

軽く見ようかと思ったら、全部が全部重くて挫折しました。。。

広告

ASP.NET WebAPIをVB.NETで利用する場合に、ヘルプページのコメントを利用する。

ASP.NETではVB.NETの積極的なサポートがなくなりつつ有るこの頃ですが、うちのちかくではVB.NETの要望が収まらず、VB.NET+WebAPIでアプリを作っています。

この頃のVisual StudioのWebAPIプロジェクトでは、APIのヘルプページを自動的に作成する機能が提供されていますが標準のままだと、ドキュメンテーションコメントを書いてもDescriptionに反映してくれません。

検索すると、Areas/App_Start/HelpPageConfigの下記コメントを外せという指示とともにWebプロジェクトのビルド設定で、ドキュメンテーションコメントを吐き出す場所を設定しろという記事が目につきます。

Public Sub Register(config As HttpConfiguration)
    '' Uncomment the following to use the documentation from XML documentation file.
    'config.SetDocumentationProvider(New XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")))

 

C#のWebプロジェクトのビルドプロパティー

image

VB.NETのWebプロジェクトのコンパイルプロパティー

image

ところがVB.NETのASP.NETプロジェクトではこの項目がありません。ただ、VB.NETのプロジェクトファイルにもProject/PropertyGroup/DocumentationFile要素はあるのでこいつにパスを指定すれば大丈夫だろ。と思ったのですが、、、出てくれません。無視されるようです。。。

ただ、まぁ指定のフォルダーにドキュメンテーションコメントがコピーされればいいので、ビルド後イベントを使ってあげましょう。

image

copy "$(ProjectDir)bin\$(TargetName).xml" "$(ProjectDir)App_Data\"

カテゴリー:ASP.NET, Visual Basic

OraOps12.dllが見つからないと思ったら、MSVCR100.dllがなかった

Oracleに接続するWebサーバーを改めて構築しているわけですが、Oracleクライアントを入れるのもめんどくさい。ただ、これまでのしがらみがあってマネージドドライバーが使えないため、インスタントクライアントを利用することにしました。

いざデプロイしたサイトを実行すると、OraOps12.dllがないエラーでしばらくはまったのでメモ。

ODACをダウンロード

現在の最新版をOTNからダウンロード(現在は12.1.0.2.1)して、C:\install\odacあたりに解凍します。

http://www.oracle.com/us/products/tools/index-090165.html

インスタントクライアントのセットアップ

解凍したODACのフォルダーに移動して、allでinstant Clientをセットアップします。

cd C:\install\odac

install.bat all c:\oracle myorahome true

環境変数の設定

必要な環境変数を設定します。NLS_LANGは環境に合わせて。

  環境変数名 設定値 備考
1 PATH c:\oracle/bin;c:\oracle binを先にする?
2 NLS_LANG JAPANESE_JAPAN.JA16SJISTILDE 必要な場合

動作確認

Webアプリケーションをデプロイして動かしたらこうなった。

System.TypeInitializationException: ‘Oracle.DataAccess.Client.OracleConnection’ のタイプ初期化子が例外をスローしました。
—> System.DllNotFoundException: DLL ‘OraOps12.dll’ を読み込めません:指定されたモジュールが見つかりません。 (HRESULT からの例外:0x8007007E)
場所 Oracle.DataAccess.Client.OpsInit.CheckVersionCompatibility(String version)
場所 Oracle.DataAccess.Client.OracleInit.Initialize()
場所 Oracle.DataAccess.Client.OracleConnection..cctor()

— 内部例外スタック トレースの終わり —
場所 Oracle.DataAccess.Client.OracleConnection..ctor(String connectionString)
場所 LoginProcess.Load(String domain)
場所 Login.Page_Load(Object sender, EventArgs e)
場所 System.Web.UI.Control.LoadRecursive()
場所 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)()

調査中

しょうがないのでConsoleApplicationでDUAL表を検索するおなじみのサンプルを作る。ん?

image

コンピューターに MSVCR100.dll がないため、プログラムを開始できません。この問題を解決するには、プログラムを再インストールしてみてください。

Microsoft Visual C++ 2010 再頒布可能パッケージ (x64)のインストール

ダウンロードセンターからダウンロードしてインストールします。

http://www.microsoft.com/ja-jp/download/details.aspx?id=14632

 

無事動きました。

カテゴリー:ASP.NET, Oracle タグ:

ついにこの時が、、、No More WebForms, No More Visual Basic

Top 10 Changes in ASP.NET 5 and MVC 6

いや、わかってたんですよ。わかってはいましたが、、、

No More Web Forms

You can continue to build Web Forms apps in Visual Studio 2015 by targeting the .NET 4.6 framework. However, Web Forms apps cannot take advantage of any of the cool new features of ASP.NET 5 described in this list. If you don’t want to be left behind as history marches forward then it is finally time for you to rewrite your Web Forms app into ASP.NET MVC.

超意訳

引き続きVisual Studio 2015でも.NET 4.6を選択すればWebFormsのビルドを行うことができます。しかし、ASP.NET WebFormsではASP.NET 5の新機能を利用することはできません。これはASP.NETの進化に取り残されたくない場合ASP.NET WebFormsアプリをASP.NET MVCアプリに書き換えるための猶予期間なのです。

カテゴリー:ASP.NET, Visual Basic タグ:

dotTrace 6.0, dotMemory 4.2のリモートエージェント

以前dotMemory4.0のリモートプロファイリングについて記事を書きましたが、dotTrace 6.0やdotMemory 4.2ではRemoteAgentの場所が変わっているので探してしまいました。

dotTrace5.*やdotMemory 4.0, 4.1の場合、各プログラムのインストーロフォルダーにRemoteAgentフォルダーがあるのでそれを利用します。例えば下記の場所に有るはずです。

  • dotTrace 5.5: %ProgramFiles(x86)%\JetBrains\dotTrace\v5.5\Bin\Remote
  • dotMemory 4.1: %ProgramFiles(x86)%\JetBrains\dotMemory\v4.1\Bin\Remote
    dotTrace 6.0やdotMemory4.2では、インストーラーが一新された影響で、プログラムの一式が%ProgramFiles(x86)%ではなく、%LOCALAPPDATA%にインストールされるようになったためこんなパスにZIPファイルとして配置されているはずです。
  • dotTrace 6.0:%LOCALAPPDATA%\JetBrains\Installations\dotTrace01\RemoteAgent.zip
  • dotMemory 4.2:%LOCALAPPDATA%\JetBrains\Installations\dotMemory01\RemoteAgent.zip

dotTraceやdotMemoryのコンソールからリモートエージェントに接続する方法はこれまでと変わりありません。dotTraceの場合、上記のZIPファイルへのショートカットのリンクがあるので、ここからもリモートエージェントのフォルダーを参照することができます。

image

プロファイル対象のプログラムを指定するUIと、プロファイリング中のスナップショットを取得したり破棄したりするUIがガラッと変わっていますね。

image image

Visual Studio(Web Essentials)でCSSスプライトを作成する。

あんまり触っていなかったんですが、Web Essentialsってすごいですね。Webページのパフォーマンス改善をやっていたのですが、Web Essentialsのお陰でかなり作業がはかどりました。

Web Essentialsの概要については井上さんのブログがとても参考になります。

    CSSスプライトってなに?

    CSSスプライトは複数の画像ファイルを一つのファイルにまとめることで、ダウンロード回数を減らし、ページ全体の表示を高速にする手法です。

詳しいことは、Googleさんに聞いてください。

で、前からCSSスプライト処理には興味はあったんですが、一部の画像だけ変更されたり、画像が追加されたりした場合に、画像の再結合作業がめんどくさかったり、CSSを調整するのが面倒だったりしてよほど読み込み頻度が多いような画像以外は対応していなかったんですよね。

Visual Studio(Web Essentials)を使ったCSSスプライト

Web Essentialsを使うと、このCSSスプライト処理を簡単に行えるというわけです。しかも画像が変更された場合は自動的に再作成してくれるし、画像が追加された場合も簡単な作業でCSSスプライトを更新できます。

Web Essentialsがインストールされていない場合は、Visual Studioの拡張機能と更新からWeb Essentialsを選択してインストールしてください。Visual Studioギャラリーからダウンロードしてインストールすることもできます。

image

画像の結合と関連ファイルの作成

チェックボックスをイメージしたこんな2つの画像があるとします。

image

ソリューションエクスプローラーで結合したいファイルを選択後、コンテキストメニューから Web Essentials → Create image sprite… を順にクリックします。適当に名前をつけてSpriteファイルを保存します。

image image

spriteファイルの他に、png,css,less,map,scssと言ったファイルがソリューションに取り込まれます。

image

エクスプローラーでImagesフォルダーを見てみると、こんな感じにファイルたちが作成されています。lessやscssはcssファイルはcssを簡易に記述するためのCSS拡張メタ言語用のファイルです。mapファイルにはscssやless,cssを出力するための定義がJSON形式で記述されています。

image

画像を表示する

先ほど作成された、cssファイルを確認してみます。もちろんlessやscssからcssを生成したい場合はそちらを参照しても良いです。取り込んだ画像ファイルは、[フォルダー名_画像ファイル名(拡張子なし)]で表示用のクラスが定義されていることを確認できます。ちゃんとbackgroundにオフセットが指定されていますね。

/*
This is an example of how to use the image sprite in your own CSS files
*/
.Images-checkbox_off {
/* You may have to set 'display: block' */
    width: 16px;
    height: 16px;
    background: url('CheckboxSprite.png') 0 0;
}
.Images-checkbox_on {
/* You may have to set 'display: block' */
    width: 16px;
    height: 16px;
    background: url('CheckboxSprite.png') 0 -16px;
}

こんなHTMLを作成すれば画像を表示できます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Images/CheckboxSprite.png.css" rel="stylesheet" />
</head>
    <body>
        <div class="Images-checkbox_on"></div>
        <div class="Images-checkbox_off"></div>
    </body>
</html>

表示できましたね。

image

画像の差し替え

画像を差し替えたい場合は、ファイルを差し替えるだけです。先ほどとは色合いが違う画像を同じ名前でVisual Studioに取り込んであげます。

image

いっぺんにファイルをソリューションフォルダーにドロップすると、アクセス拒否されるので、一つ一つドロップしてあげてください。取り込み後のImageフォルダーを見ると、結合画像も同時に更新されていることが確認できます。

image

画像の追加

Spriteに画像を追加する場合はSpriteを作り直しても良いですが、Spriteファイルに定義を追加してあげればSpriteファイルを保存したタイミングで再生成してくれます。filses要素に<file>/Images/ping.png</file>を追加しました。

<?xml version="1.0" encoding="utf-8"?>
<sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd">
  <settings>
    <!--Determines if the sprite image should be automatically optimized after creation/update.-->
    <optimize>true</optimize>
    <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.-->
    <orientation>vertical</orientation>
    <!--File extension of sprite image.-->
    <outputType>png</outputType>
    <!--Determin whether to generate/re-generate this sprite on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.-->
    <fullPathForIdentifierName>true</fullPathForIdentifierName>
    <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).-->
    <useAbsoluteUrl>false</useAbsoluteUrl>
    <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForCss />
    <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForLess />
    <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForScss />
  </settings>
  <!--The order of the <file> elements determines the order of the images in the sprite.-->
  <files>
    <file>/Images/checkbox_off.png</file>
    <file>/Images/checkbox_on.png</file>
    <file>/Images/pin.png</file>
  </files>
</sprite>

追加されていますね。

image

画像やCSSの再生成なんかを後ろで勝手にやってくれるのは楽ですね。いや、ホント楽ですね。

カテゴリー:ASP.NET, Javascript タグ: , ,

ASP.NET Web APIのサービスをJSONPで呼び出す。

2014年7月9日 3件のコメント

MSDNフォーラムをのぞいたら、こんなスレッドがあったのでWeb APIの入門を兼ねていじってみます。

クロスドメインリクエストへの対応については松崎さんのブログで詳しくまとまっています。

JSONP などクロス ドメイン (Cross-Domain) 問題の回避と諸注意

Web Apiの追加

まずは何も考えずに、WebApiを一つ追加しましょう。

image image

名前はとりあえずUserControllerとかにしておきます。

image 

とりあえずそのまま動作を確認してみる

この状態で http://host/api/user/http://host/api/user/1 といったURLをリクエストすれば、[ “value1”, “value2" ] や “value” といったJSON文字列が取得できるはずです。

FiddlerやChromeのAdvanced Rest Clientなんかから確認してみましょう。

一応それっぽい文字列が帰ってきていますね。

image

jQueryから呼び出してみる。

jQueryのajax関数から呼び出すとするとこんなかんじですね。

$("#getUser").on("click", function () {
    var userId = $("#userId").val();
    $.ajax({
        url: "http://localhost:45924/api/user/" + userId,
        type: 'GET',
        dataType: 'json'
    }).success(function (data) {
        alert(data);
    }).error(function(data) {
        alert(data);
    });
});

ちゃんと返ってきました。

image

Web ApiをJSONPに対応させる。

Web ApiでJSONP形式で値を返したい場合は、NugetパッケージのWebApiContrib.Formatting.Jsonpを使うと簡単に実現できます。前述のパッケージを導入後、Global.asaxやWebApiConfigなどのクラスでコールバック付き(?callback=関数名)のリクエストを受け付けた場合にJSONP形式に整形するFormatterを登録します。

Public Module WebApiConfig
    Public Sub Register(ByVal config As HttpConfiguration)
        ' Web API の設定およびサービス

        ' Web API ルート
        config.MapHttpAttributeRoutes()

        config.Routes.MapHttpRoute(
            name:="DefaultApi",
            routeTemplate:="api/{controller}/{id}",
            defaults:=New With {.id = RouteParameter.Optional}
        )

        config.AddJsonpFormatter()
    End Sub
End Module

ちょっと見えづらいですが、Responseタブの中身を見ると、JSONP形式(a([“value1”, “value2”]))で結果が帰ってきたのを確認できます。

image

jQueryから呼び出す。

jQueryを使っている場合は、ajax関数のdataTypeパラメーターに”jsonp”を指定するだけですね。

$(function() {
    $("#getUser").on("click", function () {
        var userId = $("#userId").val();

        $.ajax({
            url: "http://localhost:45924/api/user/" + userId,
            type: 'GET',
            dataType: 'jsonp'
        }).success(function (data) {
            alert(data);
        }).error(function(data) {
            alert(data);
        });
    });
});
カテゴリー:ASP.NET, Javascript, Visual Basic