MW211 EXIT

devlog
jQuery/非同期のループ
2014年04月02日
以下のような感じで、配列ごとに非同期でAjaxでデータを取得して処理をするとする。
┌──────────────────────────────────────┐
│for (var index in 配列) {                                                   │
│    $.getJSON(                                                              │
│        配列[index]['url'],                                                 │
│        function(json) {                                                    │
│            alert(配列[index]['name']);                                     │
│        }                                                                   │
│    );                                                                      │
│}                                                                           │
└──────────────────────────────────────┘
ここで、配列ごとの他の要素(「配列[index]['name']」)を、
コールバック関数で参照したい場合、上記のようにすると、
戻った頃には「index」が最後まで進んでいたりして、正しい値を取得できない。
例えば、「赤、青、黄」という三つのデータ配列だった場合、
コールバック関数中ではすべて「黄、黄、黄」となってしまう。

これを解決するには、「$.each()」を使えばよい。
┌──────────────────────────────────────┐
│$.each(配列, function(index, value) {                                       │
│    $.getJSON(                                                              │
│        value.url,                                                          │
│        function(json) {                                                    │
│            alert(value.name);                                              │
│        }                                                                   │
│    );                                                                      │
│});                                                                         │
└──────────────────────────────────────┘
PHPの「foreach (配列 as $index => $value)」のようなものだ。
#連想配列の場合「$index」の部分は「$key」の方が一般的だろう。
分類:jQuery
JavaScript/配列(添字配列)の欠番
2014年04月01日
突然、大きな添字の配列に値を代入した場合、配列はどうなるのか?

PHPだと添字配列も連想配列の一部なので、そこまでの配列は欠番となる。

では、JavaScriptの場合は?
┌──────────────────────────────────────┐
│var 配列 = [];                                                              │
│配列[2] = 値;                                                               │
│alert(配列.length);  // →「3」(0,1,2)                                      │
└──────────────────────────────────────┘
こちらの場合は、配列はあくまで添字配列なので(連想配列はハッシュで代用)、
欠番はできず、値のない配列ができる。
分類:JavaScript
SQL/条件付き追加・削除
2014年03月31日
「OR REPLACE」   「REPLACE」…存在したら置き換える
「IF NOT EXISTS」「IGONRE」 …存在したら作らない
「IF EXISTS」               …存在しなかったら消さない
┌───────────────┬─────┬─────┐
│                              │  MySQL   │PostgreSQL│
├───────────────┼─────┼─────┤
│CREATE DATABASE               │    ○    │    ○    │
│CREATE OR REPLACE DATABASE    │    ×    │    ×    │
│CREATE DATABASE IF NOT EXISTS │    ○    │    ×    │
│───────────────│─────│─────│
│DROP DATABASE                 │    ○    │    ○    │
│DROP DATABASE IF EXISTS       │    ○    │    ×    │
├───────────────┼─────┼─────┤
│CREATE TABLE                  │    ○    │    ○    │
│CREATE OR REPLACE TABLE       │    ×    │    ×    │
│CREATE TABLE IF NOT EXISTS    │    ○    │    ×    │
│───────────────│─────│─────│
│DROP TABLE                    │    ○    │    ○    │
│DROP TABLE IF EXISTS          │    ○    │    ×    │
├───────────────┼─────┼─────┤
│CREATE INDEX                  │    ○    │    ○    │
│CREATE OR REPLACE INDEX       │    ×    │    ×    │
│CREATE INDEX IF NOT EXISTS    │    ×    │    ×    │
│───────────────│─────│─────│
│DROP INDEX                    │    ○    │    ○    │
│DROP INDEX IF EXISTS          │    ×    │    ×    │
├───────────────┼─────┼─────┤
│CREATE VIEW                   │    ○    │    ○    │
│CREATE OR REPLACE VIEW        │    ○    │    ○    │
│CREATE VIEW IF NOT EXISTS     │    ×    │    ×    │
│───────────────│─────│─────│
│DROP VIEW                     │    ○    │    ○    │
│DROP VIEW IF EXISTS           │    ○    │    ×    │
├───────────────┼─────┼─────┤
│CREATE TRIGGER                │    ○    │    ○    │
│CREATE OR REPLACE TRIGGER     │    ×    │    ×    │
│CREATE TRIGGER IF NOT EXISTS  │    ×    │    ×    │
│───────────────│─────│─────│
│DROP TRIGGER                  │    ○    │    ○    │
│DROP TRIGGER IF EXISTS        │    ○    │    ×    │
├───────────────┼─────┼─────┤
│INSERT                        │    ○    │    ○    │
│REPLACE                       │    ○    │    ×    │
│INSERT IGNORE                 │    ○    │    ×    │
│───────────────│─────│─────│
│DELETE                        │    ○    │    ○    │
└───────────────┴─────┴─────┘
分類:SQL、PostgreSQL、MySQL
設計/ドキュメントのフォルダ構成
2014年03月30日
  こんな感じか。(ひとつの案)
┌──────────────────────────────────────┐
│ドキュメント                                                                │
│├仕様書                                                                    │
│││・基本仕様書                                        ※外部向け  ※最新版│
│││・概要仕様書                                                    ※最新版│
│││・定数定義書                                                    ※最新版│
│││・電文仕様書                                                    ※最新版│
│││・共有メモリ定義書                                              ※最新版│
│││・ファイル定義書                                                ※最新版│
│││・共通関数仕様書                                                ※最新版│
│││・画面仕様書                                        ※外部向け  ※最新版│
│││・入力制限仕様書                                                ※最新版│
│││・実行環境定義書  #フォルダ構成も含む                          ※最新版│
│││・著作権定義書                                                  ※最新版│
││├データベース定義書                                                      │
│││  ・テーブル定義書  #ER図も含む                                ※最新版│
│││  ・ビュー定義書                                                ※最新版│
│││  ・トリガ関数仕様書                                            ※最新版│
││├詳細設計書                                                              │
│││  ・●●詳細設計書                                  ※非共有    ※最新版│
││├01初回開発                                                              │
││││・基本仕様書(初回)                                ※外部向け          │
││││・概要仕様書(初回)                                                    │
│││└詳細設計書                                                            │
│││    ・●●詳細設計書(初回)                          ※非共有            │
│││    ・単体評価項目&成績書                          ※非共有            │
││└02(改造プロジェクト名)                                                  │
││  │・改造基本仕様書(改造プロジェクト名)              ※外部向け          │
││  │・改造概要仕様書(改造プロジェクト名)                                  │
││  └改造詳細設計書                                                        │
││      ・●●改造詳細設計書(改造プロジェクト名)        ※非共有            │
││      ・単体評価項目&成績書                          ※非共有            │
│├評価書                                                                    │
││├01初回開発                                                              │
│││・総合評価項目&成績書                                                  │
│││・結合評価項目&成績書                                                  │
││└02(改造プロジェクト名)                                                  │
││    ・総合評価項目&成績書                                                │
││    ・結合評価項目&成績書                                                │
││    ・回帰評価項目&成績書                                                │
│├取扱説明書・手順書                                                        │
││  ・取扱説明書                                        ※外部向け  ※最新版│
││  ・保守手順書                                                    ※最新版│
│└販売促進資料                                                              │
│    ・(パワーポイント資料など)                          ※外部向け          │
└──────────────────────────────────────┘
  以下の三つのレベルに分ける(上流から下流へ、公開性が高いものから低いものへ)
    (a) 外部向け資料        …顧客にほぼ提示可能なもの、「ですます」調で記述
    (b) 内部向け共有資料    …開発者が共有する開発の核となる資料
    (c) 内部向け非共有資料  …担当者のみで閉じた資料、ブラックボックス的なもの
  開発の核となるのは(b)であり、これをもって開発プロジェクト全体の統制をとる。
  個々の担当者はあくまで(b)としての結果を出せばよく、
  その補助資料的な役割としての(c)がある(咄嗟の問い合わせに回答できるように等)。
  顧客向けには(a)を提供することにより、説明責任を果たすことになる。
  一方で、要求の元は顧客からのものなので、(a)が(b)の上流資料にあたることになる。
分類:設計
やることマトリックス
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
前へ 1 … 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 … 156 次へ