【ASP.NET Core 】 Webアプリの共通レイアウト① (ヘッダー・サイドバー)

_Layout.cshtmlと部分ビュー、さらにcssを利用し、Webアプリ共通のデザインを定義します。Webアプリでよく見られるヘッダーとサイドバーが常に表示されているレイアウトを、サンプルコードを提示しながら以下の手順で作成します。

  1. _Layout.cshtmlとは
  2. 部分ビューとは
  3. ヘッダー作成
  4. サイドバー作成
  5. 共通レイアウト作成
続きを読む

【Scssの基本】@mixin(ミックスイン)の基本的な利用方法

@mixinとはスタイルの集まりを定義し、いろいろなページで呼び出して使い回すことができる機能です。引数を利用すると、定義した@mixin内のスタイルの値を一部変更することもできます。
他ページでも利用されるスタイルを定義する場合、@mixinを作成しておくとスタイル定義の重複が無くなり見やすいScssを作成することができます。

  1. @mixinの基本的な使い方
  2. 引数を利用した@mixinの使い方
  3. 引数に初期値を設定
  4. 引数を複数指定
続きを読む

【C#, Linq】SelectManyメソッドの使い方

リストのプロパティを持つクラスの一覧を扱う際、foreachを何重か回してデータにアクセスします。しかし、LinqのSelectManyメソッドを利用すると、コレクションの中のコレクションを一つのコレクションに纏めることができます。これを平坦化といい、foreachでの深いネストを書く必要もないため非常に便利です。

     
  1. クラス作成
  2. foreachを利用する
  3. Linq:SelectManyメソッドを利用する
続きを読む

VisualStudioでJsonから簡単にクラス作成

APIから返されるデータ形式はJSONが多いですが、他社が開発したAPIで返されるJSONからクラスを作成するのは少し手間です。VisualStudioで簡単にJSONからクラスを作成することができる機能があるので、作成手順を知っておくと便利です。

     
  1. json作成
  2. visualstudioでクラス作成
続きを読む

【Bootstrap】Navbarのハンバーガーメニューアイコンを変更

Bootstrapのnavbarで作成したレスポンシブなハンバーガーメニューのアイコンは、デフォルトで「bars」です。ナビゲーションバーのカスタマイズとして、アイコンをfontawsomeのアイコンに変更する方法を説明します。

  1. Bootstrapでレスポンシブなハンバーガーメニュー作成
  2. Fontawsomeでアイコン選択
  3. アイコン変更
続きを読む

【Bootstrap4】画面幅に応じてテーブルの特定列の表示・非表示をレスポンシブに切り替える

テーブル(表)を利用すると、データを見やすく表示することができますが、画面幅の狭いスマホだと横長のテーブルは見にくくなってしまいます。そこで、レスポンシブで特定列の表示・非表示を切り替えることができれば、スマホサイズでも見やすいテーブルに変更することができます。今回は、Bootstrapでテーブルを作成し、レスポンシブで特定列の表示・非表示を切り替える方法をサンプルコードを提示しながら説明します。

  1. Bootstrapでテーブル作成
  2. Bootstrapのdisplayクラスを利用して特定列を非表示にする
  3. 画面幅に応じて表示・非表示をレスポンシブに切り替え
続きを読む

【Bootstrap】Navbarを利用してレスポンシブなハンバーガーメニューを作成

画面幅によってヘッダー内のメニューがハンバーガーメニューに切り替わるECサイトをよく見かけます。今回は、Bootstrapに用意されているナビゲーションバーを使用し、レスポンシブなハンバーガーメニューを作成する方法をサンプルコードを提示しながら説明します。

  1. PCサイズ:ヘッダー内にメニュー表示
  2. レスポンシブなハンバーガーメニュー作成
続きを読む

【Bootstrap】タブメニューの基本的な作成方法|コピペ可能

タブを利用するとスッキリとしたレイアウトを作成することができ、表示内容が多い場合には有効なレイアウト方法です。Bootstrapを利用すると、簡単にタブレイアウトを再現することができます。基本的な利用方法をサンプルコードを提示しながら説明していきます。

  1. 下準備:タブ部分
  2. 下準備:コンテンツ部分
  3. タブで表示コンテンツを切り替え
続きを読む

【JavaScript】Internet ExplorerでのAjaxキャッシング対策

Ajaxとは「Asynchronous JavaScript and XML」の略で、JavaScriptとXMLを利用してサーバー側と非同期に通信を行うための技術のことです。Ajaxを利用することで、ユーザーに待ち時間を感じさせないWeb画面を作成することができます。
しかし、IE(Internet Explorer)で一回ajax通信すると、クライアント側にキャッシュが生成されてしまい、次からはキャッシュを読んでしまいます。今回はajaxキャッシングの解決方法を説明します。

  1. Ajaxのサンプル(.NET Core Webアプリ)
  2. IE(Internet Explorer)で確認
  3. Ajaxキャッシング対策
続きを読む

【DB】楽観的排他処理(更新)

楽観的排他制御とは、データ更新時に制御を掛けることによりデータの統合性を保証する方法です。更新対象のデータが取得時と同じ状態と判断するため、Versionカラムを使用し、Versionの値が同じ場合のみ更新します。データの同時更新を防ぐために必要な制御で、DBの更新・削除をする際には必ず必要となる制御です。

  1. 楽観的排他制御とは
  2. 下準備
  3. 楽観的排他制御を利用しない場合の更新処理
  4. 楽観的排他制御を利用した場合の更新処理

※EntityFramwork Coreを利用してDBアクセスを行っています

続きを読む