MW211 EXIT

devlog
jQueryUI/選択中タブIDの取得
2014年03月11日
表示済みのタブの選択中タブIDを取得するには、以下の要領で参照すればよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs('option', 'selected')                                      │
└──────────────────────────────────────┘

タブの切り替え操作を実施した瞬間に新タブのタブIDを取得するには
以下のような感じ(ui.index)で行えばよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs({                                                          │
│    select  :function(event, ui) {                                          │
│        $.post(AjaxサーバURL, {"tab_id":ui.index});                         │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
上記のようにAjaxでPOSTしてしまってサーバ側にセッションとして
記録してしまえば、こっそり現在表示しているタブを把握することができる。
→表示時にこのセッション情報を使えば、画面をリロードされても
  初期表示のタブに戻ることなく、直前まで表示中のタブで表示できる
分類:jQuery
JavaScript/画面リロード
2014年03月10日
画面リロードの方法としては以下が著名である。
┌──────────────────────────────────────┐
│location.reload();                                                          │
└──────────────────────────────────────┘

以下の方法も使える。
┌──────────────────────────────────────┐
│location.href = location.href;                                              │
└──────────────────────────────────────┘
これは自分自身にリダイレクトすることによりリロード相当としている。

前者と後者の違いはPOST項目を再送信するかという点。
前者は再送信するが、後者はリダイレクトなので再送信しない。

再送信しなければPOST項目を引き継げないが、再送信する場合には
「このページを再表示するには、以前送信した情報を再送信する必要があります」的な
ダイアログが表示される恐れがある。

ちなみに念には念を入れて、GETパラメータ(「?」以降)を除去したURLにすれば
過去(直前)のPOST項目の影響もGET項目の影響も受けなくできる。
┌──────────────────────────────────────┐
│location.href = location.href.replace(/\?.*$/, '');                         │
└──────────────────────────────────────┘
分類:JavaScript
CSS3/画像を反転
2014年03月09日
CSS3等で画像を横に反転させる方法(左右対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleX(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleX(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleX(-1);        /* Opera              */        │
│    transform           :scaleX(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦に反転させる方法(上下対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipV;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipV";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleY(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleY(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleY(-1);        /* Opera              */        │
│    transform           :scaleY(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦横に反転させる方法(斜対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH FlipV;       /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH" "FlipV";   /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scale(-1, -1);     /* 旧Firefox          */        │
│    -webkit-transform   :scale(-1, -1);     /* 旧Chrome、旧Safari */        │
│    -o-transform        :scale(-1, -1);     /* Opera              */        │
│    transform           :scale(-1, -1);     /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3のtransformに対応しているのは、
今のところ最新の「Firefox、Chrome、Safari」のみ。
分類:HTML5+CSS3
CSS/vertical-alignの誤解
2014年03月08日
tdタグ中の文字は、既定で「vertical-align:middle;」なので
縦位置は中央に表示される。

で、tdタグをdivタグに移行した場合、divタグに「vertical-align:middle;」を
指定してもうんともすんともいわない(上詰になる)。

「vertical-align」が使えるのは、テーブルセルとインライン要素のみで、
ブロック要素のdivタグでは無効ということだ。

インライン要素ってそもそもブロック要素と違って縦幅とか指定できなかったはずだ。
ということで、テーブルセルの代替となるようなものはない…と思いがちだが、
spanタグの「line-height」を広げれば、そんな感じにはなる。
┌──────────────────────────────────────┐
│span {                                                                      │
│    line-height         :160px;                                             │
│    vertical-align      :middle;                                            │
│}                                                                           │
└──────────────────────────────────────┘
但し、spanタグ中で改行が入ると「line-height」毎に一行ずつ表示されるから注意。
分類:CSS
SVN/排他属性の設定方法
2014年03月07日
「TortoiseSVN」の「プロパティ」を選択。
┌──────────────────────────────────────┐
│プロパティ                                                                  │
├──────────────────────────────────────┤
│┌────────────────────────────────────┐│
││                                                                        ││
││                                                                        ││
││                                                                        ││
│└────────────────────────────────────┘│
│  ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐  │
│  │        ││        ││        ││        ││        ││新規    │  │
│  └────┘└────┘└────┘└────┘└────┘└────┘  │
└──────────────────────────────────────┘
「新規」を右クリックして、「ロックが必要」を選びウインドウを開く。
┌──────────────────────────────────────┐
│ロックが必要                                                                │
├──────────────────────────────────────┤
│  ●ロックが必要(読み取り専用で更新)                                        │
│  ○ロックは不要                                                            │
│                                  ┌─────┐┌─────┐┌─────┐│
│                                  │    OK    ││キャンセル││  ヘルプ  ││
│                                  └─────┘└─────┘└─────┘│
└──────────────────────────────────────┘
「ロックが必要」を選び、「OK」を押下。
この時点ではまだ設定は反映されないので、最後に「SVNコミット」を実行して完了。
分類:SVN
MySQL/結果に連番をふる
2014年03月06日
得点が多い順にならべて順位をつけるSQLは以下のような感じ。
┌──────────────────────────────────────┐
│SELECT 列,                                                                  │
│       (SELECT COUNT(*)                                                     │
│            FROM 表 AS 別表                                                 │
│            WHERE 表.得点 < 別表.得点                                       │
│       ) + 1 AS `順位`                                                      │
│    FROM 表                                                                 │
│    ORDER BY 得点 DESC;                                                     │
└──────────────────────────────────────┘

逆に、失点の少ない順にならべて順位をつけるSQLは以下のような感じ。
┌──────────────────────────────────────┐
│SELECT 列,                                                                  │
│       (SELECT COUNT(*)                                                     │
│            FROM 表 AS 別表                                                 │
│            WHERE 表.失点 > 別表.失点                                       │
│       ) + 1 AS `順位`                                                      │
│    FROM 表                                                                 │
│    ORDER BY 失点 ASC;                                                      │
└──────────────────────────────────────┘

自己結合を使う。
分類:MySQL
jQuery/セレクタ「:hidden」に注意
2014年03月05日
「input type="submit"」を指すセレクタの「$(':submit').」と同じように
「input type="hidden"」を指すセレクタとして「$(':hidden').」が使える。

でも、これは非表示要素(「display:none;」)も対象とするので
意図しないところを指してしまい嵌ってしまうことがある。
「$('input:hidden').」と、絞り込んだ方が安全だと思う。
分類:注意、jQuery
CSS/左寄せセンタリング
2014年03月04日
┌──────────────────────────────────────┐
│                                   あいう                                   │
│                                   えお                                     │
└──────────────────────────────────────┘
上記のように複数行を左寄せしてさらにそれをセンタリングするには、
以下いずれかのtableタグで実現できる。
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう<br>えお</td></tr>                                          │
│</table>                                                                    │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう</td></tr>                                                  │
│  <tr><td>えお</td></tr>                                                    │
│</table>                                                                    │
└──────────────────────────────────────┘
これをtableタグを使わずにdivタグでできないものか?

こうする。
┌──────────────────────────────────────┐
│body {                                                                      │
│    text-align          :center;                                            │
│}                                                                           │
│div {                                                                       │
│    display             :inline-block;                                      │
│    text-align          :left;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│<body>                                                                      │
│<div>あいう<br/>えお</div>                                                  │
│</body>                                                                     │
└──────────────────────────────────────┘
「display:inline-block;」を使うのだ。
純粋なブロック要素でなくなるので、「margin:auto;」は使えないが、
外側で「text-align:center;」してあげればよい。
なお、外側のセンタリングが内側にも継承されるので、
内側で左寄せ「text-align:left;」してあげるのを忘れずに。

なお、「display:inline-block;」はIE8から使用可能となった(IE7以前は使えない)。
分類:CSS
主な仮想化ソフト
2014年02月26日
VMware     … VMware社製。Player版は非営利目的なら無償。
VirtualBox … Oracle社製。オープンソース、無償。
Hyper-V    … Microsoft社製。WindowsServer2008標準付属。
Xen        … Citrix社製。オープンソース、Server版は無償。
KVM        … Linux向け。オープンソース。
分類:IT全般
正規表現/行末が特定の文字でないもの
2014年02月23日
秀丸エディタで、行末が「a」という文字で終わらないものをヒットするには?
┌──────────────────────────────────────┐
│[^a]$                                                                       │
└──────────────────────────────────────┘

で、こいつでgrepすれば、その行のみ抽出…と思ったら、
ほぼ全ての行がヒットしてしまった。

もう一度元に戻って、前出の正規表現で検索していくと…。
そう、気にしていなかったが、「a」という文字で終わっている行も
微妙にその末尾(改行コード?)がヒットしているのだ。

よって、grepすればこの行もヒットしてしまうということだ。

じゃ、望む通りに抽出するには、どうすればいいのか?
こうする。
┌──────────────────────────────────────┐
│^(?!.*a$).*$                                                                │
└──────────────────────────────────────┘
むむむ、難しい。
後読みを上手いこと駆使するってことだ。
分類:正規表現
前へ 1 … 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 … 156 次へ