====== Web開発(ASP.NET系) ======
===== はじめに =====
* [[http://qiita.com/kazuhisam3/items/f056819172d2b6d36a8c|ASP.NET MVC 開発を始める前に理解しておきたいこと]]
* [[http://qiita.com/yaju/items/3b1b5fb77ff684d564f9|空のプロジェクトからASP.NET MVC5 EntityFramework6 for Oracleを試す]]
===== IISのバージョンとWindows OS =====
^サーバーOS^クライアントOS^IIS^
|Windows Server 2019| |IIS 10|
|Windows Server 2016|Windows 10|IIS 10|
|Windows Server 2012 R2|Windows 8.1|IIS 8.5|
|Windows Server 2012|Windows 8|IIS 8.0|
|Windows Server 2008 R2|Windows 7|IIS 7.5|
|Windows Server 2008|Windows Vista|IIS 7.0|
|Windows Server 2003| |IIS 6.0|
| |Windows XP|IIS 5.1|
|Windows 2000| |IIS 5.0|
===== HTMLカラーコード =====
* [[http://www.colordic.org/|WEB色見本 原色大辞典 - HTMLカラーコード]]
* [[https://webnetamemo.com/coding/bootstrap4/201711026071|Bootstrap4に用意されているクラス【color編】]]
===== 画面レイアウト(Bootstrap) =====
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
* Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
* ライセンスは MIT License で、商用利用も可能です。
Bootstrap 5は、IE 11サポート対象外、jQueryを使わないよう設計されている。
==== 参照 ====
* [[http://qiita.com/zaburo/items/e5b8c51873b193bb1573|Bootstrap3.x.で何かやるときの最低限のメモ]]
* [[https://getbootstrap.jp/docs/4.2/getting-started/introduction/|Bootstrap4.2日本語リファレンス]]
* [[https://codezine.jp/article/detail/8182|Bootstrapでカッコいいナビゲーションバーを表示しよう]]
* [[http://webnetamemo.com/coding/bootstrap/2015062126|Bootstrapに用意されているクラス【table編】]]
* [[http://www.tohoho-web.com/ex/bootstrap.html|とほほのBootstrap入門]]
===== jQuery =====
2022/02/18現在の最新版は「jQuery 3.6.0」となる。
^1.1x系|Internet Explorer 8(IE8)の下位バージョンに対応|
^2.x系|IE9以上、Google Chrome、Firefox、Safariをはじめとしたモダンブラウザ用|
^3.x系|軽量化、高速化をコンセプトにして開発。|
[[https://boel.jp/tips/vol50_jquery3.html|メジャーアップデート!高速化したjQuery3.0の特徴]]\\
[[http://qiita.com/fmy/items/345a264a1cf2e2a73f62|【翻訳まとめ】jQuery 3.0 アップグレードガイド]]
===== 開始ページを指定する =====
Visual Studioのプロジェクトを選んで右クリック、「プロパティ」。\\
「Web」の「開始動作」の「ページを設定する」で、URLにあたる箇所(localhost:57210/以降)を設定する。\\
参照:[[http://tips.recatnap.info/wiki/Visual_studio_2010%E3%81%A7%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%99%82%E3%81%AE%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%8C%87%E5%AE%9A|スタートさせる最初のページ(URL)の指定]]
===== 設定ファイルを読む =====
XML形式の設定ファイルを読み込み、DataTable型にセットする。
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];
}
===== 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()は複数箇所でも可
参照
* [[http://qiita.com/zaburo/items/4f814dff3706d868f6a1|ASP.NET MVC Viewに関するメモ]]
* [[http://blog.okazuki.jp/entry/2013/08/27/082042|ASP.NET MVCの個人的なメモ。テンプレートとか、共通的に使うViewとか]]
===== データ受け渡し =====
ViewBag、ViewData、TempDataを使用する。\\
[[http://blogs.jp.infragistics.com/blogs/jptech/archive/2016/02/25/asp-net-mvc-viewdata-viewbag-tempdata.aspx|ASP.NET MVC の ViewData、ViewBag および TempData]]
==== ViewBag、ViewData ====
コントローラーから Viewへ(モデル以外に)データを渡す必要があります。データを渡す方法は2通りあります。\\
{{:開発:viewbagviewdata.png|}}
=== ViewBagとViewDataの違い ===
違いは型の安全性です。ViewData はキャストか型変換が必要となります。\\
ViewBagはMVC3からサポートされているものでMVC2以前のものはViewDataのみしか選択肢がなかった。\\
[[http://kyabatalian.hatenablog.com/entry/2015/12/05/232504|ViewData vs ViewBag vs TempData]]
==== TempData ====
コントローラーから他のコントローラーやアクションから他のアクションへデータを渡す場合などです。TempData は要求から他の要求へデータを渡すために使用されます。\\
{{:開発:tempdata.png|}}
=== TempData の正体 ===
TempDataは、「セッション状態(Session)」のラッパーライブラリです。\\
[[http://miso-soup3.hateblo.jp/entry/2013/12/14/070356|TempData の正体]]
==== ビューにデータを渡す ====
コントローラー側にてView(myModel)としてデータクラスを引数を渡す。
* [[https://hirahira.blog/%E3%80%90asp-net-mvc%E3%80%91models_to_view/|【ASP.NET MVC】複数のModelをViewに渡す方法]]
* [[https://www.oborodukiyo.info/ASPNET/ASPNETMVC4/ASPNET-HowToPassSomeModelsForUpdate|ASP.NET MVCでビューにおいて複数のデータを渡したい時]]
===== アイドル状態のワーカープロセスのスワップアウト =====
IISのアプリケーションプールのアイドル状態のタイムアウトは20分になっている。\\
この状態では、一定時間アイドル状態(アクセスのない状態)になったワーカープロセスは、タイムアウトされプロセスが停止していた。これにより、頻繁にアクセスのないWebサイトに関してはメモリの消費を抑えられるというメリットがあった。しかし、その分、タイムアウトされた後に来た最初のリクエストに関してはワーカープロセスを起動し直す分、応答に時間がかかっていた。\\
[[https://www.buildinsider.net/web/iis8/06|Windows Server 2012 R2とIIS 8.5の新機能]]
20分放置後だと初回のページ呼び出しに時間がかかる。対応としてアイドル状態のタイムアウトは 0分 にして回避する。\\
また、IISリセット後の初回のページ呼び出しに時間がかかるのは、後述の「ASP.NETアプリの起動を高速化(ウォームアップ)」で解消できる。\\
===== ASP.NETアプリの起動を高速化(ウォームアップ) =====
ASP.NETアプリケーションは初回のページ呼び出しがあった時に、アプリケーションの初期処理(ビルドなど)が実施されます。そのため、ファーストユーザーがページにアクセスした時に遅いと感じることがあります。
IIS 8.0 で標準搭載された Application Initialization機能を有効にしておくと、起動時にIISがアプリケーションを呼び出しておいてくれます。そのため最初のユーザーがアクセスした時の体感速度を向上させることができます。
==== Application Initialization ====
IIS は、既定でサービス開始直後にワーカープロセスを起動しません。ユーザーからのリクエストを受けてからワーカープロセスを起動し、その中で ASP.NET の初期処理などを行っています。結果、最初にリクエストを行うユーザーは、通常時と比べて応答に時間がかかる (初期化が完了するまで待たされる) こととなります。
この初回リクエストにかかるコストを軽減するための機能として Application Initialization が提供されており、自動的にワーカープロセスを起動させる機能と、仮想的な要求を内部的に発行し、該当の初期化処理を事前に終わらせる機能、の組み合わせで実現されています。\\
[[https://social.msdn.microsoft.com/Forums/ja-JP/eedce306-7b33-4f91-80aa-fd48f4bcd17e/application-initialization-http-module-?forum=iissupportteamja|Application Initialization について]]
==== 設定 ====
[[http://www.pine4.net/Memo/Article/Archives/522|[ASP.NET]Application InitializationでASP.NET Webアプリケーションを常時起動する]]
^アプリケーションプール設定|startMode="AlwaysRunning"|
^Webサイト設定|preloadEnabled="true"|
^Web.Config|doAppInitAfterRestart はデフォルト false \\ skipManagedModules はデフォルト false|
=== 参照 ===
* [[https://blog.nextscape.net/archives/2399|IIS Application InitializationでASP.NETアプリの起動を高速化(ウォームアップ)]]
* [[https://www.buildinsider.net/web/iis8/04|オート・スタートによるアプリケーションの初期化処理とメンテナンスページ]]
* [[http://www.zankavtaskin.com/2016/12/azure-web-app-application-initialization.html|Azure Web App Application Initialization]]
* [[https://blog.bright-l.0am.jp/2016/04/19/application-initialization-module-iis/|Application Initialization Module (IIS)]]
* [[https://docs.microsoft.com/en-us/iis/configuration/system.webserver/applicationinitialization/|Application Initialization ]]
* [[https://weblog.west-wind.com/posts/2013/oct/02/use-iis-application-initialization-for-keeping-aspnet-apps-alive|Use IIS Application Initialization for keeping ASP.NET Apps alive]]
* [[https://stackoverflow.com/questions/35480661/iis-8-5-application-initialization-not-working|IIS 8.5 - Application initialization not working]]
* [[https://qastack.jp/server/590865/how-can-i-warm-up-my-asp-net-mvc-webapp-after-an-app-pool-recycle
|アプリプールのリサイクル後にasp.net mvc webappをウォームアップするにはどうすればよいですか?]]
* [[https://tech.mirukome.com/iis7%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%EF%BD%97%EF%BD%85%EF%BD%82%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%8C%E9%81%85/|IIS7を利用したWEBサイトで最初のアクセスが遅いときの対処法]]
==== 調査 ====
IIS applicationInitializationリクエストは内部で行われるため、W3Cログには表示されません。
ただし、Initializer.aspxページでリクエストを確認し、ユーザーエージェントを確認すると、「IIS Application Initialization Warmup」か「IIS Application Initialization Preload」が表示されます。
namespace SampleWebApp
{
public partial class Initializer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//ダミーで10秒待つ
System.Threading.Thread.Sleep(10000);
// ログ・ファイルerr.logへの出力ストリームを生成
StreamWriter objSw = new StreamWriter(
Server.MapPath("~/init.log"),
true, Encoding.GetEncoding("Shift_JIS"));
// 日付、ソース・コード、エラー・メッセージ、エラー原因となった
// メソッドをタブ区切りテキストで記録
StringBuilder objBld = new StringBuilder();
objBld.Append(DateTime.Now.ToString());
objBld.Append("\t");
objBld.Append(Request.UserAgent);
objSw.WriteLine(objBld.ToString());
objSw.Close();
}
}
}
2020/03/04 16:51:00 IIS Application Initialization Warmup
==== 参照 ====
* [[https://blogs.msdn.microsoft.com/chack/2013/09/25/iis-asp-net-web-2223/|IIS オート スタート設定による ASP.NET Web アプリケーションの初回実行時のパフォーマンス向上]]
* [[https://blog.nextscape.net/archives/2399|IIS Application InitializationでASP.NETアプリの起動を高速化(ウォームアップ)]]
* [[https://qiita.com/k_fujita/items/e7bf6d5e6e723ec57b19|IISのオートスタート機能を使ってASP.NET Webアプリケーションの初回実行を行おう]]
===== リソースのメッセージ使用 =====
リソース用フォルダ(例 Resources)を作成する。\\
リソースファイル(例 Messages.resx)を作成して、アクセス修飾子を「Public」とする。\\
先頭に@usingでこのページで使用するリソースフォルダを指定する。\\
文字列を取得したい部分で、「@ResourceFile.name」と記述する。\\
@using mvctest.Resources;
==== リソースの多言語化 ====
* [[http://sannomiyanotes.hatenablog.com/entry/20130209/1360370408|Visual Studio Express 2012 for Web でいってみる 22.多言語対応をやってみた。]]
* [[https://devadjust.exblog.jp/21514252/|ASP.NET MVC におけるテキストの多言語対応 再考]]
===== 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再起動
[[https://stackoverflow.com/questions/14564650/there-are-no-more-files-error-using-express-2012-for-web/10m|there are no more files error using express 2012 for web]]
これでも駄目なら、IIS Expressをコマンドラインで動作確認してみる\\
[[https://blogs.msdn.microsoft.com/osamum/2015/01/27/web-iis-express-2786/|開発用 Web サーバー IIS Express をコマンドラインから使用する方法]]
これでも駄目なら、ソリューションファイルとプロジェクトを一から作り直す。
===== リソースが見つかりません =====
POSTを使用すると、「リソースが見つかりません」というエラーが表示されます。\\
GetSQLDataのコントローラーが見つからないか、IControllerを実装していません。
原因としてコントローラーの指定が間違っている。
postAjax('GetSQLData', JSON.stringify(param), process);
↓
postAjax('/Home/GetSQLData', JSON.stringify(param), process);
===== 発行先だと動作しない =====
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 グループに含まれるアカウントである。
[[http://niwakan.blogspot.com/2014/09/iis-7-id-no5.html|IIS 7 のアプリケーションIDってなんや? No5]]
=== 対象2 ===
IISのアプリのアプリケーションプールの詳細設定にある、「アプリケーションID」を「ApplicationPoolIdentity」のまま。
web.configに「identity impersonate="true"」を追加する。\\
ASP.NETにはユーザの偽装の機能があり、アクセス権が絡むときに使用する。
* [[https://docs.microsoft.com/ja-jp/previous-versions/dotnet/netframework-1.1/xh507fc5(v=vs.80)|ASP.NET の偽装]]
* [[http://asp.popotoo.com/19|【ASP.NET(C#)】ユーザの偽装について]]
* [[https://staff.qualias.jp/technology/iis%E3%81%AE%E5%81%BD%E8%A3%85%E3%81%A8%E8%A7%A3%E9%99%A4asp-net%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/|IISの偽装と解除(ASP.NETプログラミング)]]
===== Tips =====
==== 非同期POST後のリダイレクト ====
jQuery.ajaxのPOSTでdataTypeをjsonにした状態で、リダイレクト(RedirectToAction)しようとするとHTMLをJSONに変換しようとしてエラーとなる。
エラー「200 SyntaxError: Unexpected token '<', "
@ViewBag.MsgError
==== textarea の横幅が指定したサイズにならない ====
原因は site.css を読み込んでいるため 280pxで横幅が固定されていた。\\
site.cssはASP.NETプロジェクト固有のスタイルシートです。
==== AJaxで複数のJSONデータをPOSTする ====
POST用に専用のViewModelを作成すればいい。\\
[[http://itkaeru.blogspot.com/2012/11/aspnet-mvc-jsonjson.html|[ASP.NET MVC] JSONを受け取る、JSONを返す]]
=== AJax使用方法 ===
* [[https://job-support.ne.jp/blog/javascript/howto-ajax|JavaScriptでAjaxを使う方法。使用例や利用方法を解説]]
* [[https://qiita.com/lusf/items/fdcfc0396514f64adc67|ASP.NET MVC : jQuery.ajaxを使った非同期処理]]
==== AJaxでローディング画像の表示 ====
[[https://www.buildinsider.net/web/jqueryref/035|非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)]]
==== フォントのwoffとwoff2ファイルのMIME登録 ====
IIS上でbootstrapのwoffとwoff2ファイルを使う際には注意が必要。デバッグ時にはエラーにならない。\\
MIMEにフォントの「woff」と「woff2」の拡張子が登録されていないため取得できない旨の404エラーが出る。
* [[http://gomocool.net/gomokulog/?p=753|MIMEタイプの追加 IIS と ASP.NET]]
* [[https://blog.pie001.com/entry/2017/09/11/185316|IISでwebフォントのファイルが404エラーになる場合の対策]]
IISでMIMEの追加をすればよいが、設定忘れも考慮してWeb.configに設定を追加する方法がある。\\
直下のweb.configに下記の設定を追加する。
Windows Server 2008R2のIIS 7.5 には、「woff」と「woff2」が未登録\\
Windows Server 2012R2のIIS 8.5 には、「woff2」が未登録
==== "~"チルダはルートURL ====
* [[https://blogs.yahoo.co.jp/dk521123/26988494.html|【ASP.NET】URLなどの扱いあれこれ(取得など) 記事をクリップする]]
* [[http://miso-soup3.hateblo.jp/entry/2013/12/17/052310|ASP.NET MVC 違うコントローラーへのリンクを貼る]]
==== jQueryの読込みの順番 ====
>「ready」と「load」の違いについて
>この2つは読込まれるタイミング違ってきております。
>どういった動作をしているのか
>「ready」は「ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行」でした
>「load」は「DOMがロードされ画像などの関連データの読み込みが完了後処理を実行」となります。
[[http://web-wizardry.net/jquery/jquery%E3%81%AE%E8%AA%AD%E8%BE%BC%E3%81%BFready%E3%81%A8load%E3%81%AE%E9%A0%86%E7%95%AA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/|jQueryの読込み「ready」と「load」と「function」の順番について]]
==== 「@Scripts」と「@Style」が使えない ====
@Scripts.Render と @Style.Render を使いたいがコマンドを認識してくれない。
NuGetで「Microsoft.AspNet.Web.Optimization」をインストールする。\\
MVCの場合、Viewにあるweb.configに下記の設定を追加する。
これを使うには「App_Start\BundleConfig.cs」ファイルにJavaScript/CSSのバンドル・ファイルの登録が必要となる。
* [[https://stackoverflow.com/questions/10951669/mvc-4-scripts-does-not-exist|MVC 4 @Scripts “does not exist”]]
* [[http://www.atmarkit.co.jp/ait/articles/1303/08/news072_3.html|ファイル・ダウンロードを効率化するバンドル&ミニフィケーション機能]]
==== submitイベントを利用する方法 ====
[[https://qiita.com/kazu56/items/cdbf4e371cdc699709f1|【jQuery】submit前に処理を行う方法]]
@using (Html.BeginForm("Index", "Login", FormMethod.Post, new { id = "fmLogin" }))
==== IE11で正しくレイアウトされない ====
互換性表示されると、IE7モードで動作する。IISログにcompatible;+MSIE+7.0とでる。
再現環境\\
* インターネットオプション[接続][LANの設定][プロキシ設定]にプロキシサーバを登録。
* 詳細設定から、対象のIPアドレスが例外になるように登録。
* 互換表示設定で「イントラネットサイトを互換表示で表示する」チェック有り。
対応として、互換表示にならないように常に標準モードになるタグを入れておく\\
[[https://qiita.com/rico/items/09c896290e218ed2b7c3|IE対策:互換表示させない。]]
==== javascript のコールバック関数の引数指定 ====
関数バインディング(bind())を使う
let sayHello = function(who) {
alert('Hi ' + who + '!');
};
setTimeout(sayHello.bind(null, 'Mike'), 3000);
[[https://blog.enjoitech.com/article/222|javascript のコールバック関数を引数付きで指定するには]]
==== フォントアイコンの検索 ====
Font Awesomeのアイコンを日本語、英語、カタカナで簡単一発検索!\\
[[https://search-fa.com/|Search for Font Awesome]]