ユーザ用ツール

サイト用ツール


it技術:web開発

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
it技術:web開発 [2018/09/06 11:48] yajuadminit技術:web開発 [2022/10/28 10:22] (現在) – [Tips] yajuadmin
行 1: 行 1:
 ====== Web開発(ASP.NET系) ====== ====== Web開発(ASP.NET系) ======
-[[http://qiita.com/kazuhisam3/items/f056819172d2b6d36a8c|ASP.NET MVC 開発を始める前に理解しておきたいこと]]\\ +===== はじめに ===== 
-[[http://qiita.com/yaju/items/3b1b5fb77ff684d564f9|空のプロジェクトからASP.NET MVC5 EntityFramework6 for Oracleを試す]]+  * [[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カラーコード ===== ===== HTMLカラーコード =====
-[[http://www.colordic.org/|WEB色見本 原色大辞典 - HTMLカラーコード]]+  * [[http://www.colordic.org/|WEB色見本 原色大辞典 - HTMLカラーコード]] 
 +  * [[https://webnetamemo.com/coding/bootstrap4/201711026071|Bootstrap4に用意されているクラス【color編】]]
  
 ===== 画面レイアウト(Bootstrap) ===== ===== 画面レイアウト(Bootstrap) =====
行 11: 行 25:
   * ライセンスは MIT License で、商用利用も可能です。   * ライセンスは MIT License で、商用利用も可能です。
  
-※ASP.NETのBoostrap 3.3.7は、jQuery 1.19.1に依存している。+<wrap em>Bootstrap 5、IE 11サポート対象外、jQueryを使わないよう設計されている。</wrap>
  
-参照+==== 参照 ====
   * [[http://qiita.com/zaburo/items/e5b8c51873b193bb1573|Bootstrap3.x.で何かやるときの最低限のメモ]]   * [[http://qiita.com/zaburo/items/e5b8c51873b193bb1573|Bootstrap3.x.で何かやるときの最低限のメモ]]
-  * [[http://bootstrap3.cyberlab.info/|Bootstrap3日本語リファレンス]]+  * [[https://getbootstrap.jp/docs/4.2/getting-started/introduction/|Bootstrap4.2日本語リファレンス]]
   * [[https://codezine.jp/article/detail/8182|Bootstrapでカッコいいナビゲーションバーを表示しよう]]   * [[https://codezine.jp/article/detail/8182|Bootstrapでカッコいいナビゲーションバーを表示しよう]]
   * [[http://webnetamemo.com/coding/bootstrap/2015062126|Bootstrapに用意されているクラス【table編】]]   * [[http://webnetamemo.com/coding/bootstrap/2015062126|Bootstrapに用意されているクラス【table編】]]
行 21: 行 35:
  
 ===== jQuery ===== ===== jQuery =====
-2017/03/21現在の最新版は「jQuery 3.1.1」となる。+2022/02/18現在の最新版は「jQuery 3.6.0」となる。
  
 ^1.1x系|Internet Explorer 8(IE8)の下位バージョンに対応| ^1.1x系|Internet Explorer 8(IE8)の下位バージョンに対応|
行 96: 行 110:
 [[http://miso-soup3.hateblo.jp/entry/2013/12/14/070356|TempData の正体]] [[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分になっている。\\ IISのアプリケーションプールのアイドル状態のタイムアウトは20分になっている。\\
行 108: 行 127:
 ASP.NETアプリケーションは初回のページ呼び出しがあった時に、アプリケーションの初期処理(ビルドなど)が実施されます。そのため、ファーストユーザーがページにアクセスした時に遅いと感じることがあります。 ASP.NETアプリケーションは初回のページ呼び出しがあった時に、アプリケーションの初期処理(ビルドなど)が実施されます。そのため、ファーストユーザーがページにアクセスした時に遅いと感じることがあります。
  
-IISApplication Initialization機能を有効にしておくと、起動時にIISがアプリケーションを呼び出しておいてくれます。そのため最初のユーザーがアクセスした時の体感速度を向上させることができます。+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アプリケーションを常時起動する]]+[[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| 
 + 
 +<code xml web.config> 
 +  <system.webServer> 
 +    <applicationInitialization> 
 +      <add initializationPage="/api/S0100/S0102" /> 
 +    </applicationInitialization> 
 +  </system.webServer> 
 +</code> 
 + 
 +=== 参照 === 
 +  * [[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 <applicationInitialization>]] 
 +  * [[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」が表示されます。 
 + 
 +<code csharp Initializer.aspx> 
 +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(); 
 +        } 
 +    } 
 +
 +</code> 
 + 
 +<code xml web.config> 
 +  <system.webServer> 
 +    <applicationInitialization remapManagedRequestsTo="Loading.html" skipManagedModules="false" doAppInitAfterRestart="false"> 
 +      <add initializationPage="/Initializer.aspx" /> 
 +    </applicationInitialization> 
 +  </system.webServer> 
 +</code> 
 + 
 +<code txt init.log> 
 +2020/03/04 16:51:00 IIS Application Initialization Warmup 
 +</code>
  
 ==== 参照 ==== ==== 参照 ====
行 159: 行 251:
  
 これでも駄目なら、ソリューションファイルとプロジェクトを一から作り直す。 これでも駄目なら、ソリューションファイルとプロジェクトを一から作り直す。
 +
 +===== リソースが見つかりません =====
 +POSTを使用すると、「リソースが見つかりません」というエラーが表示されます。\\
 +GetSQLDataのコントローラーが見つからないか、IControllerを実装していません。
 +
 +原因としてコントローラーの指定が間違っている。
 +
 +<code javascript 例>
 +postAjax('GetSQLData', JSON.stringify(param), process);
 +
 +postAjax('/Home/GetSQLData', JSON.stringify(param), process);
 +</code>
 +===== 発行先だと動作しない =====
 +Visual Studio上のWebブラウザでは動作したが、発行した環境ではエラーになる。\\
 +Visual Studio上ではIIS Expressで動かしていた。
 +
 +==== URL先が違う ====
 +開発では、localhost 直下であったが、発行した環境では、仮想ディレクトリ のエイリアス(例 Test)が付く
 +
 +<code>
 +http://localhost/Home/Schedule
 +  ↓
 +http://localhost/Test/Home/Schedule
 +</code>
 +
 +<code>
 +先頭の"/"は不要だった。
 +Redirect("/Home/" + page)
 +  ↓
 +Redirect("Home/" + page)
 +</code>
 +
 +<code>
 +jQuery.ajax({
 +     url: '/Home/' + method,
 +  ↓
 +jQuery.ajax({
 +     url: method,
 +</code>
 +
 +==== 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にはユーザの偽装の機能があり、アクセス権が絡むときに使用する。
 +
 +<code xml web.config>
 +  <system.web>
 +    <compilation debug="true" targetFramework="4.6"/>
 +    <httpRuntime targetFramework="4.5.2"/>
 +    <identity impersonate="true" userName="Administrator" password="xxxxxxx" />
 +  </system.web>
 +</code>
 +
 +  * [[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 ===== ===== Tips =====
 +==== 非同期POST後のリダイレクト ====
 +jQuery.ajaxのPOSTでdataTypeをjsonにした状態で、リダイレクト(RedirectToAction)しようとするとHTMLをJSONに変換しようとしてエラーとなる。
 +
 +エラー「200 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON」
 +
 +
 +=== 対応 ===
 +Json形式でリダイレクトするURLを返し、jQuery.ajaxのPOST側でwindow.location.hrefにURLを指定してリダイレクトさせる。
 +
 +  * [[https://stackoverflow.com/questions/47903390/asp-net-mvc-redirecttoaction-doesnt-work-after-ajax-post-from-view|ASP.NET MVC RedirectToAction doesn't work after AJAX Post from view]]
 +  * [[http://msprogrammer.serviciipeweb.ro/2013/01/21/redirect-and-ajax-redirect-in-mvc/|Redirect and Ajax Redirect in MVC]]
 ==== Index.d.tsにてRecordが見つかりません ==== ==== Index.d.tsにてRecordが見つかりません ====
 TypeScriptのバージョンが古いとのことで、NuGetで最新版2.9.2を入れたがエラーが解消されなかった。 TypeScriptのバージョンが古いとのことで、NuGetで最新版2.9.2を入れたがエラーが解消されなかった。
行 190: 行 358:
 POST用に専用のViewModelを作成すればいい。\\ POST用に専用のViewModelを作成すればいい。\\
 [[http://itkaeru.blogspot.com/2012/11/aspnet-mvc-jsonjson.html|[ASP.NET MVC] JSONを受け取る、JSONを返す]] [[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でローディング画像の表示 ==== ==== AJaxでローディング画像の表示 ====
行 210: 行 382:
 </code> </code>
  
-==== フォントのwoff2ファイルのMIME登録 ==== +==== フォントのwoffとwoff2ファイルのMIME登録 ==== 
-IIS上でbootstrapのwoff2ファイルを使う際には注意が必要。デバッグ時にはエラーにならない。\\ +IIS上でbootstrapのwoffとwoff2ファイルを使う際には注意が必要。デバッグ時にはエラーにならない。\\ 
-MIMEにフォントの「woff2」の拡張子が登録されていないため取得できない旨の404エラーが出る。+MIMEにフォントの「woff」と「woff2」の拡張子が登録されていないため取得できない旨の404エラーが出る。
  
-[[http://gomocool.net/gomokulog/?p=753|MIMEタイプの追加 IIS と ASP.NET]]+  * [[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に設定を追加する方法がある。\\ IISでMIMEの追加をすればよいが、設定忘れも考慮してWeb.configに設定を追加する方法がある。\\
-MVC場合、Viewにあるweb.configに下記の設定を追加する。+直下のweb.configに下記の設定を追加する。
 <code xml web.config> <code xml web.config>
 <system.webServer> <system.webServer>
     <staticContent>     <staticContent>
 +        <remove fileExtension=".woff" />
 +        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
         <remove fileExtension=".woff2" />         <remove fileExtension=".woff2" />
         <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />         <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
行 226: 行 401:
 </system.webServer> </system.webServer>
 </code> </code>
 +
 +Windows Server 2008R2のIIS 7.5 には、「woff」と「woff2」が未登録\\
 +Windows Server 2012R2のIIS 8.5 には、「woff2」が未登録
 +
  
 ==== "~"チルダはルートURL ==== ==== "~"チルダはルートURL ====
行 267: 行 446:
 </script> </script>
 </code> </code>
 +
 +==== IE11で正しくレイアウトされない ====
 +互換性表示されると、IE7モードで動作する。IISログにcompatible;+MSIE+7.0とでる。
 +
 +再現環境\\
 +  * インターネットオプション[接続][LANの設定][プロキシ設定]にプロキシサーバを登録。
 +  * 詳細設定から、対象のIPアドレスが例外になるように登録。
 +  * 互換表示設定で「イントラネットサイトを互換表示で表示する」チェック有り。
 +
 +対応として、互換表示にならないように常に標準モードになる<meta>タグを入れておく\\
 +<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 +
 +[[https://qiita.com/rico/items/09c896290e218ed2b7c3|IE対策:互換表示させない。]]
 +
 +==== javascript のコールバック関数の引数指定 ====
 +関数バインディング(bind())を使う
 +
 +<code>
 +let sayHello = function(who) {
 +    alert('Hi ' + who + '!');
 +};
 + 
 +setTimeout(sayHello.bind(null, 'Mike'), 3000);
 +</code>
 +
 +[[https://blog.enjoitech.com/article/222|javascript のコールバック関数を引数付きで指定するには]]
 +
 +==== フォントアイコンの検索 ====
 +Font Awesomeのアイコンを日本語、英語、カタカナで簡単一発検索!\\
 +[[https://search-fa.com/|Search for Font Awesome]]
 +
it技術/web開発.1536202087.txt.gz · 最終更新: 2018/09/06 11:48 by yajuadmin