2014年6月27日金曜日

jQuery eq によるエレメントの取得

複数のエレメントが存在する中から特定のものを取得する際には eq() メソッドが便利です。
例えば複数のボタンタグから2番目の要素を取得し、背景色を変更する場合下記のように記述します。
eq の引数は 0 スタートのインデクサを指定します。

Script
$(function () {
    // 2つ目のボタンの背景色と前景色を変更
    $("input:button").eq(1).css({"background-color":"navy", "color":"white"});
});

HTML
<input type="button" value="button" />
<input type="button" value="button" />
<input type="button" value="button" />
<input type="button" value="button" />
<input type="button" value="button" /> 


実行結果

2014年6月26日木曜日

jQuery nth-child による子エレメント取得

jQuery の nth-child を利用してエレメント内に含まれる子エレメントを取得する方法です。

構文:
$(".selector:nth-child(index/even/odd/equation)")


nth-child では引数にインデックス、奇数、偶数、等間隔で子エレメントを取得することができますが、ここでは簡単にインデックス指定の例を紹介します。
例えば HTML Table があり、1列目の全エレメントを取得する場合、$("table tbody tr td:nth-child(1)") となります。

$(function () {
    $("#button1").click(function () {
        // 1列目全てのセルにテキストを追加
        $("table tbody tr td:nth-child(1)").append("<span> - 1st!</span>");
    })
});

もう少し条件を複雑にして、2列目1行目のセルのみを取得する場合、nth-child を tr と td それぞれに指定します。
$(function () {
    $("#button1").click(function () {
        // 2列目1行目のセルにテキストを追加
        $("table tbody tr:nth-child(1) td:nth-child(2)").append("<span> - target!</span>");
    })
});

例として使う HTML Table のレイアウト
<table style="width:300px; border-style:solid;" border="1">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>
<input id="button1" type="button" value="click" />


:nth-child() Selector
http://api.jquery.com/nth-child-selector/

2014年6月25日水曜日

ASP.NET FindControl で テンプレート内のコントロールを探し出す

ASP.NET のテンプレート機能では、サーバーサイドコントロールの定義を1つ用意しておくことで生成するデータ件数分コントロールを生成してくれます。繰り返し表示されるテーブルのレコードにユーザーコントロールを埋め込んだりするのにとても便利です。例えばこんな感じで TextBox を Repeater の ItemTemplate に1つ用意しておけば、バインドデータの件数分 TextBox を生成してくれます。

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server" Text="<%# Container.DataItem %>"></asp:TextBox>
    </ItemTemplate>
</asp:Repeater>

データをバインドすると、TextBox が繰り返し表示されます。
protected void Page_Load(object sender, EventArgs e)
{
    List<string> values = new List<string>();

    values.Add("アイ");
    values.Add("マイ");
    values.Add("ミー");
    values.Add("マイン");

    this.Repeater1.DataSource = values;
    this.Repeater1.DataBind();
}




ただ、テンプレート内に表示されるコントロールのうち、特定のものにアクセスする際に困ることがあります。例えば、特定の TextBox にフォーカスを設定するシナリオを考えてみましょう。単独の TextBox コントロールのようにサーバーサイドで単純に TextBox1.Focus() と指定することができません。そもそもこの例では TextBox1 を元に生成されたコントロールが4つもあります!
利用するテンプレートよってはサーバーサイドで Intellisense が出て、動きそうな雰囲気のものもありますが、テンプレートに配置されているサーバーサイドコントロールはこのように ASPX 設計時の ID 指定では到達することができません。実際に生成された HTML を見るとより分かるのですが、TextBox1 を元に生成された input エレメント達はそれぞれホストコントロール(ここでは Repeater)の ID と テンプレートコントロール(TextBox)の ID を組み合わせた一意の値が割り当てられています。

<input name="Repeater1$ctl00$TextBox1" type="text" value="アイ" id="Repeater1_TextBox1_0" /><br />

<input name="Repeater1$ctl01$TextBox1" type="text" value="マイ" id="Repeater1_TextBox1_1" /><br />

<input name="Repeater1$ctl02$TextBox1" type="text" value="ミー" id="Repeater1_TextBox1_2" /><br />

<input name="Repeater1$ctl03$TextBox1" type="text" value="マイン" id="Repeater1_TextBox1_3" /><br />

直接 TextBox1 を ID 指定して TextBox にアクセスできないのですが、ASP.NET のテンプレートが提供している FindControl メソッドを利用することでこの ID の差異を吸収してテンプレート内のコントロールを設計時の ID で指定して取得することができます。

    protected void Button1_Click(object sender, EventArgs e)
    {
        foreach(RepeaterItem item in this.Repeater1.Items)
        {
            TextBox tbox = item.FindControl("TextBox1") as TextBox;

            if (tbox != null)
            {
                Debug.WriteLine(item.ItemIndex + 1 + " つ目の値: " + tbox.Text);

                if (item.ItemIndex == 1)
                {
                    tbox.Focus();
                }
            }
        }
    }

2014年6月23日月曜日

コードビハインドの Focus メソッドと WebForm_AutoFocus メソッド

ASP.NET のコードビハインドで下記コードを呼び出すと、出力結果の TextBox にはフォーカスが設定されています。

protected void Page_Load(object sender, EventArgs e)
{
    this.TextBox1.Focus();
}


これはサーバーサイドでフォーカスを直接当てているのではなく、次の工程を経ているようです。

1.サーバーサイドでフォーカスを行うための JavaScript を生成
2.クライアントサイドで JavaScript を読み込み
3.JavaScript の呼び出し


出力されている HTML を見てみると、WebForm_AutoFocus メソッドが ASP.NET によって自動生成されています。
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('TextBox1');//]]>
</script>

WebForm_AutoFocus は ASP.NET が生成する axd の中に記述がありました。確かにこの中を読むと引数で渡されたコントロールにフォーカスを設定しています。

function WebForm_AutoFocus(focusId) {
    var targetControl;
    if (__nonMSDOMBrowser) {
        targetControl = document.getElementById(focusId);
    }
    else {
        targetControl = document.all[focusId];
    }
    var focused = targetControl;
    if (targetControl && (!WebForm_CanFocus(targetControl)) ) {
        focused = WebForm_FindFirstFocusableChild(targetControl);
    }
    if (focused) {
        try {
            focused.focus();
            if (__nonMSDOMBrowser) {
                focused.scrollIntoView(false);
            }
            if (window.__smartNav) {
                window.__smartNav.ae = focused.id;
            }
        }
        catch (e) {
        }
    }
}

Client-Side Enhancements in ASP.NET 2.0
http://aspnet.4guysfromrolla.com/articles/111506-1.aspx

2014年6月22日日曜日

Epson PC の NumLock が初期状態で ON になっている場合の対策

Epson の PC(Endeavor)を購入したのですが、何かと使いにくいことが多いですね。キーボードが押しにくかったり、ハードウェア側で Wifi の ON OFF 切り替えができなかったり・・・。
NumLock に関しても、初動時に ON になってたり、OFF になってたりと動作が不安定です。そこでレジストリから起動時の NumLock の状態を OFF にする方法を調べました。


HKEY_USERS\.DEFAULT\Control Panel\Keyboard を開いて、InitialKeyboardIndicators を探します。





2147483648 → 0 に変更することでデフォルトで NumLock が OFF になります。逆にデフォルトで NumLock を ON にしたい場合は 2 を割り当てます。


2014年6月7日土曜日

SQLite を使って WordPress を XAMPP にインストール

以下の5つのステップで SQLite を使った WordPress を簡単に作ることができます。

1.リソースのダウンロード

まずは、WordPress 本体と SQLite Integration をダウンロードしてきます。
WordPress
http://ja.wordpress.org/

SQLite Integration
http://wordpress.org/plugins/sqlite-integration/

(こちらにもインストール手順があります。)
SQLite Integration 本家
http://dogwood.skr.jp/wordpress/sqlite-integration-ja/


2.WordPress と SQLite Integration を XAMMP に配置

次に、WordPress と SQLite Integration を XAMMP に配置していきます。xampp は C:\xampp にインストールしている前提で説明していきます。

C:\xampp\htdocs\wordpress の様に WordPress を配置します。
また、ダウンロードした SQLite Integration を展開し、C:\xampp\htdocs\wordpress\wp-content\plugins に解凍したsqlite-integration を配置します。

3.db.php のコピー
sqlite-integration に含まれる db.php を以下フォルダにコピーします。
C:\xampp\htdocs\wordpress\wp-content

4.wp-config.php の設定
C:\xampp\htdocs\wordpress の wp-config-sample.php をコピーもしくはリネームして wp-config.php にします。

wp-config.php の 認証用ユニークキー部分を探し出します。

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');



https://api.wordpress.org/secret-key/1.1/salt にアクセスして取得したコードに置き換えます。

5.WordPress のインストール
http://localhost/wordpress にアクセスしてインストールを開始します。

以上でおしまいです。意外と簡単ですね!

2014年6月1日日曜日

html5 meter タグを使ってゲージを表示

html5 で導入された meter タグを使って数値、割合を表示してみましょう。

<meter value="70" low="30" max="100" high="90" optimum="70">値:70/100</meter>
値:70/100

<meter value="20" low="30" max="100" high="90" optimum="70">値:20/100</meter>
値:20/100

【属性】
value : 値
low : 下限値
high : 上限値
optimum : 最適値

value 属性の値が low 属性の値より小さいとゲージがオレンジ色になります。