2012年01月28日

FormのControlsをLINQできない?

Formクラスに配置してあるコントロールを列挙したいことはよくあります。例えば、テキストボックスだけを取り出してみましょう。

//C#の場合
var query = from Control c in Controls
where c is TextBox
select c;
foreach (var c in query)
{
//何かの処理
}

'VBの場合
Dim query = From c In Controls Where TypeOf c Is TextBox
For Each c In query
'何かの処理
Next


LINQにはクエリ構文とメソッド構文があります。これをメソッド構文で書こうとすると・・・。
linq.png
WhereメソッドがIntelli Senseに出てきません。なのでビルドエラーになります。正しくはこちら。

//C#の場合
var textBoxes = Controls.Cast<Control>().Where(c => c is TextBox);
foreach (var c in textBoxes)
{
//何かの処理
}

'VBの場合
Dim textBoxes = Controls.Cast(Of Control)().Where(Function(c) TypeOf c Is TextBox)
For Each c In textBoxes
'何かの処理
Next


Whereメソッドの前にCastメソッドを挟みましょう。

ちなみに上記のコードと同様のことをしたいならOfTypeメソッドでもできます。

//C#の場合
var textBoxes = Controls.OfType<TextBox>();
foreach (var c in textBoxes)
{
//何かの処理
}

'VBの場合
Dim textBoxes = Controls.OfType(Of TextBox)()
For Each c In textBoxes
'何かの処理
Next


OfTypeメソッドは、コレクションの中から指定した型の要素だけを取り出すことができます。

Controlsプロパティの型であるControlCollectionクラスは、LINQの前からある古いクラスなのでジェネリック版IEnumerableインターフェイスを実装していません。なので直接、WhereなどのLINQ系メソッドを呼び出せないのでしょう。クエリ構文で書いた場合は内部的にCastメソッドが呼び出されているようです。

今回のまとめ。
LINQを使うときに、「Intelli Senseに出てくる項目が少なくね?」と思ったらCastメソッドを呼んでみましょう。
ラベル:.net
posted by ぺるたご at 15:12| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年12月30日

ロボフォームからKeePassに乗り換えた

まえがき


パスワード管理アプリってことで、永らくロボフォームを使ってたのですが、KeePassに乗り換えました。乗り換えた理由は、ロボフォーム(無料版)ってパスワードを10個までしか登録できないから。同類のアプリでLastPassってのもあるのですが、こちらはサーバー側にパスワードを保存するのがちょっと嫌です。KeePassはローカルに保存するのでそういう意味では安心。ということで、KeePassの導入、および設定について書いてみます。




KeePassって何ができるの?


このページに書いてある設定を行うと、以下のような感じになります。

ブラウザ(今回はChromeですがFirefoxでも同様)で適当なサイトのログイン画面を開くとアカウント名とパスワードが入力された状態で表示されます。
後はEnterキーを押すだけでログインできる状態です。

ユーザーは諸々のパスワードを覚える必要がなくなります。
ただし、KeePassのマスターパスワードはユーザーが覚えなくちゃだめです。




では導入


1.KeePass本体をインストール
2.日本語化
3.KeePassHttpってプラグインをインストール
4.ChromeIPassってChromeの拡張をインストール


まずはKeePass本体のインストールです。こちらからインストーラをダウンロードしてください。最新版(現時点だとバージョン2.17)でOKです。KeePassを動かすには.NET Framework2.0以上が必要です。Windows Vista以降にはデフォルトで含まれていますが、XP以前の人は注意してください。
インストールは簡単です。「はいOK同意」の精神でいきましょう。この時点ではまだKeePassを起動しないでください。


次は日本語化です。デフォルトだとKeePassは英語ですので、日本語化パッチを当てます。英語無問題な人は読み飛ばしてかまいません。以降の説明は日本語化した前提で進みます。こちらから日本語化パッチをダウンロードしてください。こちら、公式サイトのパッチよりもナチュラルな日本語になってるらしいです。あとはダウンロードした「Japanese_xxxx.lngx」をKeePass本体と同じフォルダに置いてください。この時点でもまだKeePassを起動しないでください。


次にKeePass用のプラグイン、KeePassHttpをインストールします。後述のChrome拡張、ChromeIPassがこいつを必要とします。こちらからZIPファイルをダウンロードしてください。ページ上部の「ZIP」って画像です。ダウンロードしたら解凍してKeePassHttp.plgxってファイルを取り出し、KeePass本体と同じフォルダに置いてください。この時点でもまだまだKeePassを起動しないでください。


最後にChromeIPassをインストールします。
Chromeでこちらにアクセスしてインストールしてください。
FirefoxでもKeeFoxという同様のアドオンがありますので良かったらどうぞ。
ここまで来たらとりあえずKeePassを起動します。




設定


英語アレルギーの人は真っ先に日本語化の設定をしましょう。メニューバーから「View」→「Change Language…」で「Japanese○○○」を選択し、KeePassを再起動します。
ついでにKeePassHttpがちゃんと認識されてるか確認しましょう。メニューバーから「ツール」→「プラグイン」で一覧にKeePassHttpが表示されればOKです。
次はオプションの設定です。各自の好みがあるため、大雑把に紹介します。

「セキュリティ」タブ
・KeePassの非アクティブ…
・ユーザーの操作後にワークスペース…
・クリップボードを自動的に…
・メインウィンドウを最小化したときに…
・コンピューターのロック化ユーザーの切替…
この辺はワークスペースのロックに関する設定です。
PCの周りを他人がうろちょろしてる環境では設定したほうが良いでしょう。常にPCに張り付いてる人や、ぼっちの人にはあまり関係ありません。

「インターフェイス」タブ
・閉じるボタンで終了せず…
・最小化時にタスクバーに表示せず…
KeePassを常駐させたい人は、この辺の設定をONにしましょう。

「統合」タブ
・システム全体で有効なホットキー
ショートカットキーを覚えておくと便利かも。
・Windows起動時にKeePassを実行
これもお好みで。

「高度な設定」タブ
・起動時に最後に使用したデータベース…
普通、データベースは1個しか使わないのでONにしたほうが良いです。
・データベースをロック、または閉じるとき…
勝手に保存してくれるほうが便利ならONで。




パスワードを登録してみる


いよいよパスワードを登録してみます。とりあえず例としてニコニコ動画を挙げます。ユーザー名、パスワードには各自のものを入力してください。URLの欄にはログインページのURL「https://secure.nicovideo.jp/secure/login_form」を入力します。
パスワードのエントリー
パスワードを登録したら、ログアウトした状態で、Chromeでログインページに行ってみましょう。初回はChromeIPassやKeePassHttpがメッセージを出してくると思います。「Connectしろ」とか「Allow or Deny」とかですね。おとなしく言うとおりにすればOKです(英語ですけど)。2回目以降は何も聞かれません。ログインページを開いたらユーザー名とパスワードが入力された状態になってるはずです。




あとがき


ここに書いた方法では、パスワード入力欄が複数あるサイト(Twitterなど)や、何回もパスワードを入れるサイト(オンラインバンクなど)には対応できません。半自動でよければ、もう少し複雑な設定をして何とかなりそうな気もします。

また、KeePassはパスワードをローカルに保存するのでハードディスクのクラッシュなどには十分注意してください。データベースファイル(*.kdbx)をバックアップしておくことをお勧めします。




ラベル:KeePass
posted by ぺるたご at 20:42| Comment(0) | TrackBack(1) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年09月28日

jQueryの「Data Link」で、フォームと楽々連動できる

今回はjQueryのData Linkについてです。




Data Linkって何?


jQueryのData Linkは、ユーザーがテキストボックスなどに入力した値と、プログラムの変数やオブジェクトの値を連動させる仕組みです。.NETでいうところのバインドと同様の機能になります。


Data Link


通常、「ユーザーが入力した値」をそのままプログラムで使いまわすのではなく、いったん、変数に入れてから使いまわすことが多いです。そうすると「ユーザーが入力した値」と「変数に入れた値」の同期を取る必要があります。Data Linkはその同期処理をやってくれるので便利、ってことですね。

Data LinkはjQueryの本体に実装されてるわけではなく、jQueryの公式プラグインです。プラグインのダウンロードやAPIについては、jQueryのサイト(英語)を参照してください。




最も単純なサンプル


まずは単純なサンプルです。テキストボックスなどがformタグの中に入っている場合、以下の2行でData Linkできます。

var person = { };
$("form").link(person);


サンプル1のソースコードを見てみてください。personオブジェクトに対して代入していないのに、personオブジェクトにユーザーが入力した値が入っています。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
alert("First Name:" + person.firstName + "\nLast Name:" + person.lastName);
});
</script>


テキストボックスのname属性がpersonオブジェクトのプロパティになります。サンプル1では、テキストボックス→personオブジェクト、の方向に連動しましたが逆はどうでしょう?

サンプル2では、personオブジェクト→テキストボックス、の方向に連動しています。オブジェクト側に値をセットするときはsetField()関数を使いましょう。ついでに言うと、setField()の戻り値もpersonオブジェクトになるのでメソッドチェーンで書けます。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>





少し複雑なサンプル


テキストボックスがformタグの中に入っていない場合、或いはinputタグ以外のDOM要素とData Linkする場合はどうでしょうか?サンプル3ではspanタグと連動しています。

Object.firstName: <span id="objFirst"></span><br/>
Object.lastName: <span id="objLast"></span>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("#objFirst").link(person, {
firstName: {
name: "objFirst",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#objLast").link(person, {
lastName: {
name: "objLast",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>


何かいろいろ書いてありますね。赤い文字の部分がpersonオブジェクトが持つ各プロパティの名前になります。の文字の部分がDOM要素(ここではspanタグ)のid属性になります。link()関数のオプションについては以下のような感じです。

name:
連動するDOM要素(ここではspanタグ)のid属性、またはname属性です。

convertBack:
オブジェクト(ここではperson)からDOM要素(ここではspanタグ)に同期する際の処理です。上記の例ではspanタグのテキストにそのまま文字列をセットしていますが、文字列をフォーマットしたり、値を四捨五入したり、ちょっとした工夫をするのもありです。
convertBackの引数の意味は、
 value:オブジェクト側から渡された値("名"や"姓")
 source:オブジェクト(personオブジェクト)
 target:DOM要素(span)
です。

convert:
convertBackの逆です。DOM要素からオブジェクトに同期する際の処理です。上記の例では使われていません。

twoWay:
trueまたはfalseをセットします。falseをセットすると、オブジェクト→DOM要素、の連動が無効になります。デフォルトはtrue(双方向に連動)です。上記の例では使われていません。




コンボボックスやラジオボタンもData Linkできる?


inputタグの全type、その他form系タグについて試してみました。サンプル4をご覧ください。HTML5で追加されたtypeやタグについては、ブラウザごとに挙動が違うかもしれません。以下、簡単に結果を書いておきます。

テキストボックス、およびその亜種については問題なさそうです。表示されてる値が、オブジェクト⇔DOM要素、の双方向で連動します。hiddenについても同様です。

select(コンボボックス)も問題なさそうです。オブジェクト⇔DOM要素、の双方向で連動します。なお、連動する値は「選択されてる項目のvalue」です。multiple(複数選択あり)にした場合、「選択されてる項目のvalue」の配列がやり取りされます。素直な動きですね。好感度アップです。

ボタン系は大丈夫そうです。ボタンのvalueが連動します。要するに、ボタンのキャプションが連動します。あまり使う機会はなさそうですが。

ラジオボタンやチェックボックスは・・・、ここら辺から雲行きが怪しくなります。まともに連動しません。「Data Linkプラグインを改造しろ」って言ってる人がいますね。以下を参照。
Setting radio buttons with setField in datalink (jQuery)

file(サーバーにファイルをアップロードするときのあれ)も連動しません。JavaScriptからfileのファイルパスにアクセスできませんから、当たり前かもしれません。ブラウザの仕様ですから諦めましょう。セキュリティの都合とはいえ少し残念。




DOM要素から別のDOM要素にData Linkできる?


できます。ただし直接連動ではなく、

DOM要素→オブジェクト→別のDOM要素

という風に2段階で連動させます。jQueryのサイト(英語)にあるExampleもそうですね。

もう少し見栄えのいいサンプルを作ってみました。サンプル5をご覧ください。イベントがらみの処理などがなく、すっきりとしたソースコードになってると思います。IE9以下でも動くと思いますが、「<input type="range" />」に対応してないのであまり気持ちよくありません。Chromeなど、まともなブラウザでご覧ください。




まとめ


jQueryのData Linkは、うまく使うとプログラムがすっきりして幸せになれます。また、少しの工夫で幅が広がりそうな予感がします。ぜひとも使ってみてください。















ラベル:jquery
posted by ぺるたご at 22:23| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。