MW211 EXIT

devlog
やることマトリックス
2014年03月29日
やらなきゃならないことに優先度をつけなければならないが、
緊急性はあるけど難易度が高いものに手をつけてしまうと、
他の残作業も積み重なって、総崩れになってしまう恐れがある。

ということで、独自に、以下の二次元分析をしてみた。
┌──────────────────────────────────────┐
│┌───────────────┬───────────────┬→難易度  │
││すぐやる                      │やれるように調整する          │   (高)   │
││・‥‥‥‥                    │・‥‥‥‥                    │          │
││・‥‥‥‥                    │・‥‥‥‥                    │          │
│├───────────────┼───────────────┤          │
││余裕がある時にやる            │やらないもしくは暇な時にやる  │          │
││・‥‥‥‥                    │・‥‥‥‥                    │          │
││・‥‥‥‥                    │・‥‥‥‥                    │          │
│├───────────────┴───────────────┘          │
│↓                                                                          │
│緊急性(低)                                                                  │
└──────────────────────────────────────┘
さっさとやってしまえて、実際にさっさとやった方が喜ばれるものから
手をつけてしまえばよい。
なぜなら、調整とか不要でボトルネックなく解決できるものだからら。
で、同じ乗りでやってしまおうと思えばやれるんだけど、
緊急性が低いものについてはぐっとこらえて後回しにしてしまう
(ここで優先度を見失ってはいけない)。
難易度の高いものについては、客観的にすぐの対応は難しいのだから
援軍要請や引き伸ばし工作など別の観点から攻めた上で、
環境がしっかり整った段階で始めるのがよい。
で、意外に差がつくのが、緊急性の低いものへの対応。軽視しない方がよい。
難易度に関わらず、暇をみつけて着実に解決しておくべきだ。
スキルアップおよび今後の予防につながるものだ。
分類:設計
設計/バージョン表記法
2014年03月28日
以下の三つの階層でバージョンを管理するのが一般的である。
┌─────────────┬────────────────────────┐
│(1) メジャーバージョン    │大規模な仕様の変更によりバージョンアップ        │
├─────────────┼────────────────────────┤
│(2) マイナーバージョン    │中規模な仕様の変更によりバージョンアップ        │
│                          ├────────────────────────┤
├─────────────┤小規模な仕様の変更によりバージョンアップ        │
│(3) メンテナンスバージョン├────────────────────────┤
│                          │バグの修正によりバージョンアップ                │
└─────────────┴────────────────────────┘
表記方法としては以下がある

【ピリオド二つ版】例:Ver.1.2.3
  ・1の部分…メジャーバージョン
  ・2の部分…マイナーバージョン
  ・3の部分…メンテナンスバージョン

【ピリオド一つ版】例:Ver.1.02a
  ・1の部分…メジャーバージョン
  ・2の部分…マイナーバージョン
  ・aの部分…メンテナンスバージョン

・アルファ版の場合は、末尾に「A」をつけたりする(「Ver.1.2.3A」)。
  ベータ版は「B」(クローズドベータ版は「CB」、オープンベータ版は「OB」)、
  リリース候補版は「RC」をつけるようだ。
  第一期リリース候補版の場合は「RC1」、第二期は「RC2」のように、
  さらに末尾に数字が付く場合もある。

・場面によってはメンテナンスバージョンについては省略される場合もある。

・初回バージョンは「1.0」で、それよりも前のドラフト版は「0.1」などが使われる。

・キャッシュが保持されるJavaScript外部ファイルやCSS外部ファイルについては
  参照URLの末尾に「?1.0」などと敢えてバージョンを埋め込んだ
  GETパラメータを付加することにより、
  画面リロードによるキャッシュ放棄をせずとも、
  バージョンアップ後のソースを強制的に読み込ませる手法がある。
分類:設計
設計/バージョンの正式版までの流れ
2014年03月27日
大きくいって、以下のような段階を踏んで正式版となる。

【アルファ版】接尾辞:A(Alpha、α)
  内部(開発者・評価者)向け開発初期版。
  性能や使い勝手を評価するためのもの。
  未実装機能や不安定な動作を許容する(最悪システム破壊の危険性もあり)。

【ベータ版】接尾辞:B(Beta、β)、CB(Closed Beta)、OB(Open Beta)
  外部向け試用版。
  ユーザ目線での性能やデザインを評価するためのもの。
  死角となっていたバグ情報も吸い上げる。
  以下の二種類に分けられる。
    ・クローズドベータ版(CB)…限定外部者(関係者・公募者)向け
    ・オープンベータ版  (OB)…一般外部者向け

【リリース候補版】接尾辞:RC(Release Candidate)
  ベータ版よりも正式版に近い(より公式な)位置づけのもの。

【正式版】接尾辞:なし(Stable)
  評価が完了した製品版。安定版ともいわれる。
分類:設計
実践jQuery/表示関係
2014年03月25日
────────────────────────────────────────
【表示中の判定】
┌──────────────────────────────────────┐
│if ($(this).css('display') == 'block')                                      │
├──────────────────────────────────────┤
│if ($(this).is(':visible'))                                                 │
└──────────────────────────────────────┘
────────────────────────────────────────
【表示する】
┌──────────────────────────────────────┐
│$(this).css('display','block');                                             │
├──────────────────────────────────────┤
│$(this).fadeIn();                                         ※速度の指定が可能│
└──────────────────────────────────────┘
────────────────────────────────────────
【非表示にする】
┌──────────────────────────────────────┐
│$(this).css('display','none');                                              │
├──────────────────────────────────────┤
│$(this).fadeOut();                                        ※速度の指定が可能│
└──────────────────────────────────────┘
────────────────────────────────────────
分類:実践jQuery
設計/紛らわしい英数字
2014年03月24日
シリアル番号などの照合用文字列を英数字で作る場合、
避けた方がいいですよという文字をまとめてみた。
┌─┬─┬──────────────────────────────────┐
│×│0 │「O」、「D」、「Q」、「o」                              と紛らわしい│
│×│1 │「I」、「l」、「7」、「L」、「i」、「j」                と紛らわしい│
│×│2 │「Z」、「z」                                            と紛らわしい│
│○│3 │                                                                    │
│○│4 │                                                                    │
│△│5 │「S」、「s」                                            と紛らわしい│
│△│6 │「b」                                                   と紛らわしい│
│△│7 │「1」、「I」、「l」、「L」、「i」、「j」                と紛らわしい│
│○│8 │                                                                    │
│×│9 │「q」、「g」                                            と紛らわしい│
├─┼─┼──────────────────────────────────┤
│○│a │                                                                    │
│△│b │「6」                                                   と紛らわしい│
│△│c │「C」                                                   と紛らわしい│
│○│d │                                                                    │
│○│e │                                                                    │
│○│f │                                                                    │
│△│g │「g」、「9」                                            と紛らわしい│
│○│h │                                                                    │
│△│i │「j」、「1」、「I」、「l」、「7」、「L」                と紛らわしい│
│△│j │「i」、「1」、「I」、「l」、「7」、「L」                と紛らわしい│
│△│k │「K」                                                   と紛らわしい│
│×│l │「1」、「I」、「7」、「L」、「i」、「j」                と紛らわしい│
│○│m │                                                                    │
│○│n │                                                                    │
│×│o │「O」、「0」、「Q」、「D」                              と紛らわしい│
│○│p │                                                                    │
│×│q │「9」、「g」                                            と紛らわしい│
│○│r │                                                                    │
│×│s │「S」、「5」                                            と紛らわしい│
│○│t │                                                                    │
│×│u │「v」、「y」、「U」、「V」、「Y」                       と紛らわしい│
│△│v │「u」、「y」、「V」、「U」、「Y」                       と紛らわしい│
│×│w │「W」                                                   と紛らわしい│
│×│x │「X」                                                   と紛らわしい│
│△│y │「v」、「V」、「Y」、「u」、「U」                       と紛らわしい│
│×│z │「Z」                                                   と紛らわしい│
├─┼─┼──────────────────────────────────┤
│○│A │                                                                    │
│○│B │                                                                    │
│△│C │「c」                                                   と紛らわしい│
│△│D │「O」、「0」、「Q」、「o」                              と紛らわしい│
│○│E │                                                                    │
│○│F │                                                                    │
│○│G │                                                                    │
│○│H │                                                                    │
│×│I │「1」、「l」、「7」、「L」、「i」、「j」                と紛らわしい│
│○│J │                                                                    │
│△│K │「k」                                                   と紛らわしい│
│△│L │「1」、「I」、「l」、「7」、「i」、「j」                と紛らわしい│
│○│M │                                                                    │
│○│N │                                                                    │
│×│O │「0」、「Q」、「D」、「o」                              と紛らわしい│
│○│P │                                                                    │
│×│Q │「0」、「O」、「D」、「o」                              と紛らわしい│
│○│R │                                                                    │
│×│S │「5」、「s」                                            と紛らわしい│
│○│T │                                                                    │
│×│U │「V」、「u」、「v」、「y」、「Y」                       と紛らわしい│
│△│V │「Y」、「U」、「v」、「y」、「u」                       と紛らわしい│
│×│W │「w」                                                   と紛らわしい│
│×│X │「x」                                                   と紛らわしい│
│△│Y │「V」、「y」、「v」、「U」、「u」                       と紛らわしい│
│×│Z │「z」                                                   と紛らわしい│
└─┴─┴──────────────────────────────────┘
分類:設計
CSS/複数背景画像(3)z-index
2014年03月23日
「z-index」が低め(他を高くする)の「img」タグを、
「position:fixed;」で固定表示するという回避策もある。

但し、「position:fixed;」は「position:absolute;」と違って、
親を持つことができない。

よって、センタリングした領域とかに配置するのは難しい。
こんな感じになる。
┌──────────────────────────────────────┐
│div {                                                                       │
│    position            :relative;                                          │
│    width               :640px;     /* ① */                                │
│    margin              :auto;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│img.left {                                                                  │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    left                :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-left         :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
│img.right {                                                                 │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    right               :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-right        :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
└──────────────────────────────────────┘
分類:CSS
CSS/複数背景画像(2)CSS3
2014年03月22日
CSS3では、カンマ区切りで指定すれば、
二つ以上の画像を背景画像として配置することができるようになった。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background          :url("左画像.png") no-repeat  5% center,            │
│                         url("右画像.png") no-repeat 95% center;            │
│}                                                                           │
└──────────────────────────────────────┘
上記は画面中央の左端と右端に画像を配置した例。

ちなみに「background」プロパティは、「background-image」プロパティなど
いくつかの「background」系プロパティをまとめたものだが、
プロパティごとに指定する場合には、それぞれの順番を合わせればよい。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background-image    :url("左画像.png"),                                 │
│                         url("右画像.png");                                 │
│    background-repeat   :no-repeat,                                         │
│                         no-repeat;                                         │
│    background-position : 5% center,                                        │
│                         95% center;                                        │
│}                                                                           │
└──────────────────────────────────────┘
分類:CSS
CSS/複数背景画像(1)CSS
2014年03月21日
背景画像を二つ以上配置するにはどうすればよいか?

結論からいうとCSS(CSS3の前)では、実現できない。
一つの領域に一つの背景画像となる(もしくは背景画像なし)。

なので、一つの領域に見せかけ、実は二つ以上の領域に分割し
そこでおのおのに背景画像を配置するような方法を採ることになる。
分類:CSS
CSS3/画像を薄くする(透過にする)
2014年03月20日
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :alpha(opacity=30);     /* 旧IE(IE4以降) */         │
│    -ms-filter          :"alpha(opacity=30)";   /* 旧IE(IE8以降) */         │
│    -moz-opacity        :0.3;                   /* 旧Firefox     */         │
│    -khtml-opacity      :0.3;                   /* 旧Safari      */         │
│    opacity             :0.3;                   /* CSS3          */         │
│}                                                                           │
└──────────────────────────────────────┘
上記は画像を「30%」の濃さに薄める場合の例。
分類:HTML5+CSS3
CSS/displayの値
2014年03月19日
displayに指定できる値を調べてみた。
┌─────────┬────────────────────────────┐
│none              │非表示                                                  │
├─────────┼────────────────────────────┤
│block             │ブロック要素                                            │
│inline-block      │インラインブロック要素                                  │
│inline            │インライン要素                                          │
├─────────┼────────────────────────────┤
│table             │(tableタグ系の)tableタグ相当                            │
│inline-table      │(tableタグ系の)tableタグ相当(インライン要素版)          │
│table-header-group│(tableタグ系の)theadタグ相当                            │
│table-footer-group│(tableタグ系の)tfootタグ相当                            │
│table-row-group   │(tableタグ系の)tbodyタグ相当                            │
│table-row         │(tableタグ系の)trタグ相当                               │
│table-cell        │(tableタグ系の)tdタグ相当                               │
│─────────┼────────────────────────────│
│table-caption     │(tableタグ系の)captionタグ(見出)相当                    │
│table-column-group│(tableタグ系の)colgroupタグ(列グループ定義)相当         │
│table-column      │(tableタグ系の)colタグ(列定義)相当                      │
├─────────┼────────────────────────────┤
│list-item         │liタグ相当                                              │
│marker            │マーカー要素                                  (廃止予定)│
├─────────┼────────────────────────────┤
│ruby              │ルビ要素                                                │
│ruby-base-group   │ルビ要素                                                │
│ruby-base         │ルビ要素                                                │
│ruby-text-group   │ルビ要素                                                │
│ruby-text         │ルビ要素                                                │
├─────────┼────────────────────────────┤
│run-in            │文脈に応じてブロック要素またはインライン要素            │
│compact           │文脈に応じてブロック要素またはインライン要素            │
├─────────┼────────────────────────────┤
│inherit           │親要素を継承                                            │
└─────────┴────────────────────────────┘
いろいろあるんだね。
簡単にdivタグをtableタグ代替にできるようtableタグ系が広まることを期待。
分類:CSS
前へ 1 … 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 … 156 次へ