【CSS】マウスカーソルが乗るとテーブル行の色が変わる

CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録です。
ほんの少しのコーディングの差で変わらないケースも有ります。
例えば、tdを付けてしまってtdの背景色を変えていて、Trの背景色が変わらないとか。。。
なので間違いやすいケースも載せておきます。

まずは、正常に背景色が変わる場合

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) {  
      background-color: #FF8888;
    }  
    #tableA tr:nth-child(even) {  
      background-color: #88FF88;  
    }  
    #tableA tr:hover {
      background-color: #e5e5e5;	/* 行の背景色style="background-color: #FF8888;" */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
  </table>
</body>
</html>

下のテーブルはマウスカーソルが乗ると行の背景色が変わります。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース(1)
styleで#tableB tr:nth-child(odd) tdのようにtdで背景色を付けた場合は上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style>
    #tableB tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableB tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
    #tableB tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableB">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

変わらないケース(2)
trタグの中のstyleで直接背景色を付けた場合も上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style> 
    #tableA tbody tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tbody>
      <tr style="background-color: #FF8888;">
        <td>セルA1</td><td>セルA2</td><td>セルA3</td>
      </tr>
      <tr style="background-color: #88FF88;">
        <td>セルB1</td><td>セルB2</td><td>セルB3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルC1</td><td>セルC2</td><td>セルC3</td>
      </tr>
      <tr style="background-color: #88FF88;">
       <td>セルD1</td><td>セルD2</td><td>セルD3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルE1</td><td>セルE2</td><td>セルE3</td>
      </tr>
     </tbody>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1 セルA2 セルA3
セルB1 セルB2 セルB3
セルC1 セルC2 セルC3
セルD1 セルD2 セルD3
セルE1 セルE2 セルE3

ほんの少しのコーディングの違いですが、上手く背景色が変わる場合と変わらない場合が有るので、変わらない場合は良くチェックしてみてください。

以上、CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録でした。

【CSS】テーブルの背景色を交互に変える

CSSでテーブルの背景色を変えるシステム開発備忘録です。
と言うは、極たまにしか使わないので、忘れてしまうことが多くて。。。

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableA tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

これは、疑似クラスの:nth-child(n)を使っています。
まず、疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。

例としてよく使われているaタグに使う疑似クラスを挙げます。
a:link{}
リンクする要素(a要素)のうち、まだ見ていない(キャッシュされていない)要素に対してスタイルを適用させます。
a:visited{}
リンクする要素(a要素)のうち、既に見た(キャッシュされている)要素に対してスタイルを適用させます。

今回のnth-child(n)は疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。
nにはodd、evenの他に数字や2nのように計算式を入れる事もできます。

#tableA tr:nth-child(odd) td で記述したセレクタは、
#tableAのtrのnth-child(odd)奇数行の状態にあるtdに対して、スタイルを適用することになります。

この辺りの詳細な説明は、ググってもらった方が良いですね。

尚、古いブラウザでは動かないことが有ります。例えばIE8とかの古いブラウザとかでは。
この辺りも別途考慮の必要?が有るなら調べて使用してください。

以上、【CSS】テーブルの背景色を交互に変える、CSSの備忘録でした。

【ASP.NET】 ajax post で、404エラーとなってしまう

今日はajax postで長文を送った場合にエラーになってしまった場合の対策備忘録です。
サーバはWindows IISです。

今までは普通に送れていたのに、長文にした時にエラーになってしまう場合は、IISにはじかれていると考えられます。
ちなみにデフォルトは何バイトか調べて居ません。

で、まずはエラーの内容確認

$.ajax({
   		type: "Post",
   		url: "************",
		contentype: "application/json"
		dataType:"json",
   		success: function(msg){
			document.open();
			document.write(msg);
			document.close();
   		},
   		error: function(XMLHttpRequest, textStatus, errorThrown){
			msg="--- Error Status ---"
			msg=msg+"<BR>"+"status:"+XMLHttpRequest.status;
			msg=msg+"<BR>"+"statusText:"+XMLHttpRequest.statusText;
			msg=msg+"<BR>"+"textStatus:"+textStatus;
			msg=msg+"<BR>"+"errorThrown:"+errorThrown;
			for(var i in errorThrown)
			{
				msg=msg+"<BR>"+"error "+i+":"+ errorThrown[i];
			}
			document.open();
			document.write(msg);
			document.close();
   		}
	});

エラーコードは次のような感じです。
 404.13 : コンテンツの長さが長すぎます
 404.14 : URL が長すぎます
 404.15 : クエリ文字列が長すぎます

各々は以下のパラメータで対応できます。
 maxAllowedContentLength
 maxUrl
 maxQueryString

具体的には、web.congigの中に下のような感じで記述します。

<configuration>
 <system.webServer>
  <security>
   <requestFiltering>
    <requestLimits
           maxAllowedContentLength="30000000"       
	   maxUrl="300"       
	   maxQueryString="10000"/>   
	</requestFiltering>
  </security>
 </system.webServer>
</configuration>

で、今回の備忘録はajax postで長文を送った場合にエラーとなった場合への対応備忘録ですので、コンテンツが長い場合、URLが長い場合は調べて居ませんが、
クエリー文字列が長い場合、上の対応をしたとしても、実はまだエラーになります。

※クエリー文字列が長すぎる旨のエラーになってしまいます。

で、どうすれば良いかと言うともう一つ「maxQueryStringLength」パラメータを設定してあげます。
やはり、web.configの中で設定するのですが、

<configuration>
  <system.web>
    <httpRuntime maxQueryStringLength="10000" />
  </system.web>
</configuration>

私の環境では、

<configuration>
  <system.web>
    <httpRuntime targetFreamework="4.5" maxQueryStringLength="10000" />
  </system.web>
</configuration>

となりました。

これで長い文字列を含むajax Postでも正常にIISで受け付けてもらえました。

以上、ajax postで長文を送った場合にエラーとなった場合への対応備忘録でした。

Cordovaとは

iOSアプリをお手軽に作れると聞いて、とりあえず飛びついてみます。

そのお手軽に作れる仕組みが、「Cordova」と言うものらしいです。。。
いや、、初めて聞いたので、実際どんなものなのか、、、良く分かっていません。

少し調べていくと、
『オープンソースのフレームワーク「Apache Cordova」(Adobe版:「 PhoneGap」)を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。』
とか、
『CordovaはHTML5/CSS/JavaScriptで作ったWebアプリケーションをラッピングしてネイティブアプリ化する技術です。
そしてプラグインを通してスマートフォンネイティブのAPIをJavaScriptで呼び出せるようになっています。』
と、出てきます。

うーん。。。要は、HTML5/CSS/JavaScriptでプログラム(Webアプリケーション)を書き、何かのツールかFreamworkでiOS上でそのまま動くアプリとして登録できる?ってことなのかな?
あっ、「プラグインを通してスマートフォンネイティブのAPIをJavaScriptで呼び出せる」と有りますね。
具体的に良く分かりませんが、これから少しづつ調べていきたいと思います。

まずは仕組みから調査開始します。

jquery selectタグの選択されているテキストを取得する

jqueryネタの開発備忘録です。

jqueryを使用してselectタグで選択されているテキストの値を取得する方法が
すぐに分からなかったので調べた結果をメモしておきます。

結論から言うと、
:selected
を使います。

使い方は、

<select id='selectTest'>
  <option value='A'>表示A</ option>
  <option value='B'>表示B</ option>
  <option value='C'>表示C</ option>
  <option value='D'>表示D</ option>
  <option value='E'>表示E</ option>
</ select>

と、なっている場合

alert($('#selectTest').children(':selected').text());

とすることで、表示Aとか表示Bというテキスト値を取得できます。
とりあえず、アラートで表示していますが、適当に代入してください。

ちなみに、普通にvalueの値が欲しい時は、

alert($('#selectTest').val());

ですからね。

あと、selectで複数選択可能のテキスト値の取得の仕方ですが、eachを使用して回して取得します。
具体的には、

$('#selectTest').children(':selected').each(function(){
  alert($(this).text());
});

です。

以上、簡単に説明しました。。。

【SQL Server】Alter Table 項目の追加・変更・削除

今日はSQL Serverネタです。
最近、Azure SQLの開発をしているのですが、SSMS(SQL Server Management studio)からテーブルの構造を更新できないのでデータ定義言語(Data Definition Language, DDL)で更新しています。

開発時はローカルのSQL Serverで全て行っていたのですが、いざAzure SQLにリリースという段階になるとローカルで修正して本番に移すという作業が出来ない状況になることがあります。
客先で桁あふれデータを見つけたりしてね。。。
そんな時、常日頃SSMSで行っていたテーブル構造の変更をDDLでやらなくてはいけないので、あれ?なんだったけ?ってなります。

ちなみに、Azure SQLをSSMSで行うことはSQL Server 2016のSSMSまではできませんでしたが、SQL Server 2016のSSMSでは可能になりました。この記事を書いている段階ではCTP3版ですが、問題なく編集できます。
非常に助かります。今まで当たり前にできてたことができないって、ほんと面倒に思えますから。
テーブル構造も早く変更できるようにしてもらえればありがたいのですが。。。

本題に戻ります。
忘れてしまっていたテーブル構造を変更するDDLですが、以下の通りです。
追加:Alert Table [table] add [column_name] [column_datatype](,[column_name] [column_datatype]);
変更:Alter Table [table] alter column [column_name] [column_datatype](,[column_name] [column_datatype]);
column名の変更:sp_rename @objname='[table].[old_column_name]’, @newname='[new_column_name]’, @objtype=’column’;
削除:Alter Table [table] drop column [column_name](,[column_name]);

こんな感じです。
その内SSMSで変更できるようになると思います。
本来、Azure SQLにテストリリースする段階では、仕様の変更など無いにこしたことなのですが、実データを流し込むと桁あふれが起こったり、エンドユーザが実画面を見て「こうだったらもっと便利なのに」ってフラグを追加して処理を分岐させたり、いろいろなケースでちょっと修正となることも多いと思います。
特に中小企業では業務設計も仕様確定も固まっていないことも多く、手戻りを覚悟して構築していくことも多々あるので。
この辺りの事前把握を行う構築スキルをもっと磨いていきたいです。

Alter TableのSQL Serverの備忘録まで。

【ASP.NET】RegisterForEventValidation は Render(); の実行中にのみ呼び出されることができます

前回の続きです。
GridViewを利用したExcelファイル出力の際に、『GridViewのコントロールGridView1は、runat=server を含む form タグの内側に置かなければ成りません』のエラーになってしまう対応の続きです。

前回は、

Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
    ' このOverridesは以下のエラーを回避するために必要です。
    ' 「GridViewのコントロールGridView1は、runat=server を含む
    '  form タグの内側に置かなければ成りません」    
  End Sub

を入れることで、VerifyRenderingInServerFormをOverridesして、サーバー フォーム要素の表示方法が異なっているページは、異なった条件の下でこのメソッドをオーバーライドして例外をスローしました。
第一関門突破です。

しかし、『RegisterForEventValidation は Render(); の実行中にのみ呼び出されることができます』
が発生するようになりました。
どうやらGridViewの列にButtonFieldやCommandFieldを使用している場合に、PostBackを検証対象処理として登録を行う際にRegisterForEventValidation を呼び出すようで、この中で Render 中かどうかがチェックされてしまうようです。

で、さらにググると、このチェックを行うかどうかは EnableEventValidation プロパティで制御できるようです。

    Public Overrides Property EnableEventValidation() As Boolean
        Get
            ' 「RegisterForEventValidation は Render(); の実行中にのみ呼び出されることができます。」
            ' を出ないようにする
            Return False
        End Get
        Set(ByVal value As Boolean)
        End Set
    End Property

これでエラーが発生せずExcelファイルの出力が可能になりました。
めでたしめでたし^^

ただ、単純にFalseにすると、今回の私のように入力コントロール等があるGridviewの場合、セキュリティ上まずいと思われるので、Excelファイルを作るときのみFalseになるように制御しないといけないと思います。

今回は気になったので調査しました。
以上ASP.NETのシステム開発備忘録でした。

【ASP.NET】GridViewのコントロールGridView1は、runat=server を含む form タグの内側に置かなければ成りません

今回はたまに使うGridViewを利用したExcelファイル出力の備忘録です。
Webフォームに更新可能でソートも可能なGridViewを作成しました。
帳票を作るときは、画面で仕様が固まった後、PDFもしくはEXCELをGridView経由で出力できるようにしています。

データ更新できるGridviewにすると、EXCEL出力する際にinputコントロールやSelectコントロールまで付いてしまうのでいつもは画面用のGridViewを流用することはしないのですが、何気なく流用してみたところエラーが出てしまいました。

『GridViewのコントロールGridView1は、runat=server を含む form タグの内側に置かなければ成りません』
です。
グッグってみたところ、

このコードを付け加えてみてください。
Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
End Sub

と言う記述を発見しました。

もう少し調べると
VerifyRenderingInServerFormの解説に、

<form runat=server>タグの内側に配置する必要があるコントロールが、表示される前にこのメソッドを呼び出すことができます。その
ため、そのようなコントロールがタグの外側に配置された場合、エラー メッセージが表示されます。登録したスクリプト ブロックをポストバックするコントロール、または登録したスクリプト ブロックに依存するコントロールは、Control.Render メソッドのオーバーライド部で、このメソッドを呼び出す必要があります。サーバー フォーム要素の表示方法が異なっているページは、異なった条件の下でこのメソッドをオーバーライドして例外をスローできます。

上のこのコードを付け加えてみてくださいとは、「異なった条件の下でこのメソッドをオーバーライドして例外をスローできます」のアドバイスに従ったものだとわかりました。

他のページには、更に

Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
    ' このOverridesは以下のエラーを回避するために必要です。
    ' 「GridViewのコントロールGridView1は、runat=server を含む
    '  form タグの内側に置かなければ成りません」    
  End Sub

のように親切に書かれているものもありました。

早速、試してみたところ、該当の『GridViewのコントロールGridView1は、runat=server を含む form タグの内側に置かなければ成りません』は出なくなりましたが、新たなエラーが。。。

『RegisterForEventValidation は Render(); の実行中にのみ呼び出されることができます』
が発生するようになりました。

これの対策はまた後日。。。

Windows 10 Wifi接続のパスワードを調べる

Windows10 接続している Wi-Fi のパスワードを表示するには?

今日はノートPCを持ち出して外で仕事をしています。
外では、インターネットに繋ぐのにスマホのテザリングを利用すると便利ですよね。
今日は他のデバイスも持って来ているのでそのデバイスからのインターネットに繋ごうと思ったのですが、テザリングするためのパスワードを確認する必要があります。

Windows 10でパスワードを確認しようとしたところ、右下に出ているインターネットアクセスから繋いでいるルータを右クリックしてもうんともすんとも言いません。プロパティが見えないようになっているようです。

テザリングなので素直にスマホで確認すれば良いのですが、、、どうなっているのか気になってしまって^^;
現在接続中のワイヤレスのプロパティを開ける場所を探せればOKだと思って少し探してみました。

まずは、ネットワークと共有センターを開きます。

手順 1:
左下のスタートメニュー?から[設定]をクリックし、設定画面を開きます。

手順 2:
設定画面から[ネットワークとインターネット]をクリックし、ネットワークとインターネットの設定画面を開きます。

手順 3:
ネットワークとインターネットの設定画面の下の方の関連設定の中の [ネットワークと共有センター] をクリックしネットワークと共有センター画面を開きます。

手順 4: 図に示すところに現在接続中のネットワーク名が表示されていると思います。
ネットワーク接続1
私の場合だと、Wi-Fi(AndroidAP3)です。
このWi-Fi(AndroidAP3)をクリックし、Wi-Fiの状態画面を開きます。

手順 5:[ワイヤレスのプロパティ]をクリックします。
ネットワーク接続2
ワイヤレスネットワークのプロパティ画面が表示されます。

手順 6:[セキュリティ] タブを選択し、[パスワードの文字を表示する] を選択します。
ネットワーク接続3

ワイヤレス ネットワークのパスワードが [ネットワーク セキュリティ キー] フィールドに表示されます。
めでたしめでたし^^

以上、ちょっと気になったので備忘録として載せておきます。

【HTML CSS】CSSセレクタ クラスの中の要素にクラスを付けると?

今日はCSSのセレクタの備忘録です。
以下のようなCSSの適用は良く行います。
 1)Div要素にクラスをつけCSSを適用させます。
 2)Span要素だけにCSSを適用させます。
で、更に一部だけのSpan要素に違うCSSを付けたいとき。。。有りますよね?

単純にクラスの中の要素にクラスを付けると?
下の例のようにDiv要素の中のspan要素にクラスspanClass1を付けても、思ったような挙動になりません。
「指定あり-divClass・SpanClass1」は

.spanClass1{
  background: blue;
  color: white;
}

としているので、バックグランドに青色、テキスト文字は白を期待するのですが、そのように表示されません。

じゃ、どうするか?

その際は下の例のように、Span要素にクラスを指定して.divClassの中のSpan要素のクラスspanClassが付いているものだけという設定をすることで可能になります。

.divClass span.spanClass2{
  background: blue;
  color: white;
}

idを付けるという手ももちろん有るのですが、要素が沢山あるとメンテがしずらいですから。

<html>
<style>
.divClass span{
  background: red;
  color: black;
}
.spanClass1{
  background: blue;
  color: white;
}
.divClass span.spanClass2{
  background: blue;
  color: white;
}
</style>
<body>
  <div>
    <span>指定なし</span>
    <span class='spanClass1'>指定あり-spanClass</span>
  </div>
  <br />
  <div class='divClass'>
    <span>指定あり-divClass</span>
    <span class='spanClass1'>指定あり-divClass・SpanClass1</span>
    <span class='spanClass2'>指定あり-divClass・SpanClass2</span>
  </div>
</body>
</html>

CSSのセレクタは汎用性が有るで使いやすいですね。
その分奥が深くて、、、私もわからないことが多いので、勉強しなければいけないなって感じています。

今日は、CSSのセレクタのシステム開発備忘録でした。