文書の過去の版を表示しています。
目次
Web開発(ASP.NET系)
はじめに
IISのバージョンとWindows OS
OS | IIS |
---|---|
Windows Server 2016 | IIS 10 |
Windows Server 2012 R2 | IIS 8.5 |
Windows Server 2012 | IIS 8.0 |
Windows Server 2008 R2 | IIS 7.5 |
Windows Server 2008 | IIS 7.0 |
Windows Server 2003 | IIS 6.0 |
Windows 2000 | IIS 5.0 |
HTMLカラーコード
画面レイアウト(Bootstrap)
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
- Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
- ライセンスは MIT License で、商用利用も可能です。
※ASP.NETのBoostrap 3.3.7は、jQuery 1.19.1に依存している。
参照
jQuery
2017/03/21現在の最新版は「jQuery 3.1.1」となる。
1.1x系 | Internet Explorer 8(IE8)の下位バージョンに対応 |
---|---|
2.x系 | IE9以上、Google Chrome、Firefox、Safariをはじめとしたモダンブラウザ用 |
3.x系 | 軽量化、高速化をコンセプトにして開発。 |
開始ページを指定する
Visual Studioのプロジェクトを選んで右クリック、「プロパティ」。
「Web」の「開始動作」の「ページを設定する」で、URLにあたる箇所(localhost:57210/以降)を設定する。
参照:スタートさせる最初のページ(URL)の指定
設定ファイルを読む
XML形式の設定ファイルを読み込み、DataTable型にセットする。
- ReadCofig
private DataTable ReadConfig() { DataSet ds = new DataSet(); string path = HttpContext.Current.Server.MapPath("~/App_Data/config.xml"); ; using (System.IO.StreamReader xml = new System.IO.StreamReader(path)) { ds.ReadXml(xml); } return ds.Tables[0]; }
- config.xml
<?xml version="1.0" encoding="utf-8" ?> <config> <data SystemType="HT" SystemName="部材受入れシステム" TableID="RESH003040" TableName="部材受入れ実績" Column="EC,ED" /> <data SystemType="HT" SystemName="部材払出しシステム" TableID="RESH003050" TableName="部材受入れ実績" Column="EC,ED" /> </config>
Viewが表示される基本的な流れ
HomeControllerのIndex Actionが呼ばれたとき下記のような流れで処理されます。
- /Views/_ViewStart.chtmlが読み込まれる
- /Views/Shared/_Layout.chtmlが読み込まれる(1.で指定しているから)
- 2.の_Layout.chtml中の@RenderBody()が呼ばれる(2. に記述されているから)
- /Views/Home/Index.chtmlが呼ばれる
- 必要に応じて@RenderSection()が呼ばれる
- @RenderBody()はテンプレートに1箇所のみ
- @RenderSection()は複数箇所でも可
参照
データ受け渡し
ViewBag、ViewData、TempDataを使用する。
ASP.NET MVC の ViewData、ViewBag および TempData
ViewBag、ViewData
ViewBagとViewDataの違い
違いは型の安全性です。ViewData はキャストか型変換が必要となります。
ViewBagはMVC3からサポートされているものでMVC2以前のものはViewDataのみしか選択肢がなかった。
ViewData vs ViewBag vs TempData
TempData
TempData の正体
TempDataは、「セッション状態(Session)」のラッパーライブラリです。
TempData の正体
アイドル状態のワーカープロセスのスワップアウト
IISのアプリケーションプールのアイドル状態のタイムアウトは20分になっている。
この状態では、一定時間アイドル状態(アクセスのない状態)になったワーカープロセスは、タイムアウトされプロセスが停止していた。これにより、頻繁にアクセスのないWebサイトに関してはメモリの消費を抑えられるというメリットがあった。しかし、その分、タイムアウトされた後に来た最初のリクエストに関してはワーカープロセスを起動し直す分、応答に時間がかかっていた。
Windows Server 2012 R2とIIS 8.5の新機能
20分放置後だと初回のページ呼び出しに時間がかかる。対応としてアイドル状態のタイムアウトは 0分 にして回避する。
また、IISリセット後の初回のページ呼び出しに時間がかかるのは、後述の「ASP.NETアプリの起動を高速化(ウォームアップ)」で解消できる。
ASP.NETアプリの起動を高速化(ウォームアップ)
ASP.NETアプリケーションは初回のページ呼び出しがあった時に、アプリケーションの初期処理(ビルドなど)が実施されます。そのため、ファーストユーザーがページにアクセスした時に遅いと感じることがあります。
IISのApplication Initialization機能を有効にしておくと、起動時にIISがアプリケーションを呼び出しておいてくれます。そのため最初のユーザーがアクセスした時の体感速度を向上させることができます。
設定
参照
リソースのメッセージ使用
リソース用フォルダ(例 Resources)を作成する。
リソースファイル(例 Messages.resx)を作成して、アクセス修飾子を「Public」とする。
先頭に@usingでこのページで使用するリソースフォルダを指定する。
文字列を取得したい部分で、「@ResourceFile.name」と記述する。
@using mvctest.Resources; <input type="button" value=@Messages.cstButton1 > <!-- 行追加 --> <input type="button" value=@Messages.cstButton2 > <!-- 確定 --> <input type="button" value=@Messages.cstButton3 > <!-- 行削除 -->
リソースの多言語化
BINフォルダに頻繁な更新ファイルを置かない
ASP.NETは仕組み上、BINフォルダ内のファイルの更新を検知すると、アプリケーションを再起動するようになりセッション切れが発生する。
BINフォルダにはDLLなど滅多に更新されないファイルのみを配置する。
※頻繁に更新される出力ファイル(PDF)やログは、BINフォルダ以外の別フォルダに作成すること。
アプリケーションが再起動すると、初期状態になりASP.NETの呼出しに時間がかかってしまう。
VSデバッグ時の「これ以上ファイルがありません。」
Visual Studio上のWeb開発で「Internet Exploler」を使用してデバッグしようとすると、「これ以上ファイルがありません。」のメッセージ画面が表示されて、デバッグが出来なくなってしまう。
別のブラウザ(例 Chrome)にするとデバッグは出来る。
対応
タスクマネージャーで「iexplore.exe」を全て削除する。コマンドでは「taskkill.exe /F /IM iexplore.exe」
これで駄目なら、プロジェクトの右クリックメニューで「クリーン」を実行する。
これでも駄目なら、PC再起動
there are no more files error using express 2012 for web
これでも駄目なら、IIS Expressをコマンドラインで動作確認してみる
開発用 Web サーバー IIS Express をコマンドラインから使用する方法
これでも駄目なら、ソリューションファイルとプロジェクトを一から作り直す。
発行先だと動作しない
Visual Studio上のWebブラウザでは動作したが、発行した環境ではエラーになる。
Visual Studio上ではIIS Expressで動かしていた。
URL先が違う
開発では、localhost 直下であったが、発行した環境では、仮想ディレクトリ のエイリアス(例 Test)が付く
http://localhost/Home/Schedule ↓ http://localhost/Test/Home/Schedule
先頭の"/"は不要だった。 Redirect("/Home/" + page) ↓ Redirect("Home/" + page)
jQuery.ajax({ url: '/Home/' + method, ↓ jQuery.ajax({ url: method,
Windowsサービスの操作ができない
Visual Studio上のWebブラウザでは動作していたので、権限の問題。
対象1
IISのアプリのアプリケーションプールの詳細設定にある、「アプリケーションID」を「ApplicationPoolIdentity」から「LocalSystem」に変更する。
Local System アカウントは Web サーバーの Administrators グループに含まれるアカウントである。
IIS 7 のアプリケーションIDってなんや? No5
対象2
IISのアプリのアプリケーションプールの詳細設定にある、「アプリケーションID」を「ApplicationPoolIdentity」のまま。
web.configに「identity impersonate=“true”」を追加する。
ASP.NETにはユーザの偽装の機能があり、アクセス権が絡むときに使用する。
- web.config
<system.web> <compilation debug="true" targetFramework="4.6"/> <httpRuntime targetFramework="4.5.2"/> <identity impersonate="true" userName="Administrator" password="xxxxxxx" /> </system.web>
Tips
Index.d.tsにてRecordが見つかりません
TypeScriptのバージョンが古いとのことで、NuGetで最新版2.9.2を入れたがエラーが解消されなかった。
Cannot find name 'Record' in index.d.ts build error
Build error “Cannot find name 'Record'” with bootstrap 4
TypeScript for Visual Studio 2015 をインストールしたらエラーが解消された。
https://www.microsoft.com/ja-JP/download/details.aspx?id=48593
ふわっと表示して徐々に消えるメッセージ
<div id="alert" class="alert alert-danger mt-2" role="alert"><span class="fa fa-exclamation-circle pr-2"></span>@ViewBag.MsgError</div> <script type="text/javascript"> $('#alert').fadeIn(1000).delay(3000).fadeOut(2000); </script>
textarea の横幅が指定したサイズにならない
- 例
<textarea style="width:1015px" rows="5" class="ml-3">
原因は site.css を読み込んでいるため 280pxで横幅が固定されていた。
site.cssはASP.NETプロジェクト固有のスタイルシートです。
AJaxで複数のJSONデータをPOSTする
POST用に専用のViewModelを作成すればいい。
[ASP.NET MVC] JSONを受け取る、JSONを返す
AJaxでローディング画像の表示
非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)
<form> <div id="spinner" style="display:none;"><img src="ajax-loader.gif" /></div> <ul id="result"></ul> </form> <script> $(document) .ajaxStart(function() { $('#spinner').show(); }) .ajaxStop(function() { $('#spinner').hide(); }); </script>
フォントのwoffとwoff2ファイルのMIME登録
IIS上でbootstrapのwoffとwoff2ファイルを使う際には注意が必要。デバッグ時にはエラーにならない。
MIMEにフォントの「woff」と「woff2」の拡張子が登録されていないため取得できない旨の404エラーが出る。
IISでMIMEの追加をすればよいが、設定忘れも考慮してWeb.configに設定を追加する方法がある。
直下のweb.configに下記の設定を追加する。
- web.config
<system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent> </system.webServer>
Windows Server 2008R2のIIS 7.5 には、「woff」と「woff2」が未登録
Windows Server 2012R2のIIS 8.5 には、「woff2」が未登録
"~"チルダはルートURL
jQueryの読込みの順番
「ready」と「load」の違いについて
この2つは読込まれるタイミング違ってきております。
どういった動作をしているのか
「ready」は「ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行」でした
「load」は「DOMがロードされ画像などの関連データの読み込みが完了後処理を実行」となります。
「@Scripts」と「@Style」が使えない
@Scripts.Render と @Style.Render を使いたいがコマンドを認識してくれない。
NuGetで「Microsoft.AspNet.Web.Optimization」をインストールする。
MVCの場合、Viewにあるweb.configに下記の設定を追加する。
- Web.config
<add namespace="System.Web.Optimization" />
これを使うには「App_Start\BundleConfig.cs」ファイルにJavaScript/CSSのバンドル・ファイルの登録が必要となる。