技術メモ

【センスのいいプロ】

kurow — 2013-07-10T06:07:11+09:00

【センスのいいプロ】

●顧客の視点
プロ・アマの違いは顧客の有無
眼前の顧客だけでなく「眼前の顧客にとっての顧客」についても考える

●仕事の範囲を見直す視点
プロとして自分の仕事の範囲を把握
時には、既存の行動範囲にこだわってはならない

●世界への視点
「世界の中でこの仕事はどういう位置にあるか」

●細部への視点
現場の細部に分け入って仕事の本質をつかみ、そこから現場に戻って視野を広げる

●子供・学生の視点
彼ら彼女らは将来の顧客

●まったく異なる分野の視点
企業情報システムと無縁の分野においてコンピュータがどう使われているか。そうした話に触れる

●自分で改善する視点
自分の担当範囲で改善を繰り返すことも重要

●内省の視点
自分自身の分別を付けられる人がセンスのいい人

UML 9つの図

kurow — 2013-07-03T23:55:17+09:00

モデリング
業務をプログラムに置き換える際に、
クラスの集合体として設計すること

(1)システムの静的な側面を示す図
    クラス図                    クラスとクラス間の関連を示す
    オブジェクト図              オブジェクトとオブジェクト間の関連を示す
    ユースケース図              システムの使われ方を示す
(2)システムの動きを説明する図
    シーケンス図                オブジェクトの相互の関係を時間軸に沿って示す
    コラボレーション図          オブジェクト間の相互作用を示す
    ステートチャート図          オブジェクトの状態の変化を示す
    アクティビティ図            オブジェクトのアクションの変化を示す
(3)システムの構成などを説明する図
    コンポーネント図(協調図)    コンポーネントとコンポーネント間の関連を示す
    デプロイメント図(配置図)    オブジェクトの物理的な配置を示す

UML入門

kurow — 2013-07-03T07:23:34+09:00

包含：クラス内部にクラスがある
継承：属性・操作を引き継ぐ
↑
↓似ている
汎化：共通する属性・操作をまとめる
多態性：1つのクラスの中に、同じ名前で機能の異なる操作を複数定義すること
属性：変数
操作：関数

メッセージ

◆モデリング基本
　・クラスの属性・操作を決める
　・クラス間の関連を決める

◆カプセル化
　クラスの属性を他クラスに見せない
　クラスの操作を通してのみ変更可能
　属性に不適切な値を設定させない

「オブジェクトとは、属性と操作を持ち、メッセージを送り合うものである」

◆クラス間の関連
　クラスが他のクラスのオブジェクトを作成し、その操作を呼び出すこと
　　メッセージを送るだけ
　クラスが内部に他のクラスを含んでしまうこと
　既存のクラスを拡張して新しいクラスを定義すること

◆モデリングの基本的な手順
　(1)システム化の対象となる現実世界の業務の中に
　　存在する部品を抽出し、それらに名前を付けて
　　クラスとして定義する。
　(2)個々のクラスが持つ属性と操作を決定し、
　(3)クラス（オブジェクトも同様）間の関連を決定する

　(1)クラスの抽出は、システムの仕様書の中にある名詞を抽出する作業

◇カプセル化の効果
　必要なものだけを開示して混乱を避ける
　不適切な値を設定できなくする

◇多態性
同じ名前で機能の異なる操作が多々ある

HTML5とは

kurow — 2013-07-03T00:23:28+09:00

◆HTML5とは

htmlの標準化団体であるw3cが2010年に策定したhtmlのバージョン5

◆HTML5特徴

構造化タグと動画編集タグの追加が大きな特徴

・header,footer,articleなど、ヘッダー、フッター、

　記事部分がどこか区別されるようになった。

・audio.video,canvasタグにより、動画編集が可能になった。

◆HTML5範囲

広義な意味だとcss3とセット

狭義な意味だとhtml5タグとAPI

◆構造化タグの細分化

header,navi,section,article,footer などの構造化タグが追加

検索エンジンに明確に文章構造を伝えられるようになった

┌──────────┐

｜header ｜

└──────────┘

┌──────┐┌──┐

｜section ｜｜navi｜

｜┌────┐｜｜｜

｜｜article ｜｜｜｜

｜└────┘｜｜｜

└──────┘└──┘

┌──────────┐

｜footer ｜

└──────────┘

◆canvasとは

html5で新規に指定されたタグでJavaScriptを使い図を描くことができます

◆WebStorage

データをブラウザ側で保存する機能

「cookie」よりも大容量で長期間の保存が可能

・セッションストレージ

　ウィンドウが開いている間は有効でウインドウが閉じられるとデータは破棄

・ローカルストレージ

　ウインドウを閉じても有効で自分のPC内に永続的に保存

◆HTML5の書き出し

JavaScriptクラス宣言

kurow — 2013-07-02T07:17:22+09:00

◆JavaScriptクラス宣言

◆プロトタイプ・ベースのオブジェクト指向

・JavaScriptでは関数オブジェクトにクラスとしての役割を与えている

・コンストラクタとは、オブジェクトを生成する際に

　自動的に呼び出される関数（メソッド）のこと

・本質的な違いはない、new演算子で呼び出すか、

　関数として呼び出すかの違う

・オブジェクト共通で利用するプロパティ（メンバ変数）などを

　定義するのがコンストラクタの役割

・インスタンスに追加したメンバは、

　（オブジェクト共通ではなく）そのインスタンスのみで有効である

　それぞれのインスタンスのためにメモリを確保す

・「プロトタイプ・ベースのオブジェクト指向」

　＝単にクラスという抽象化された設計図が存在しない

//◆クラス定義(※コンストラクタに近い)

//・戻り値を返す必要がない

//・オブジェクトの初期化

var Animal = function() {};

//インスタンス作成

var anim = new Animal();

//◆プロパティ・メソッド宣言

//・thisキーワードは新たに生成されるオブジェクトを表す

//・値として関数オブジェクトが渡されたプロパティがメソッドと見なされる

var Animal = function(name, sex) {

//プロパティ

this.name = name;

this.sex = sex;

//メソッド

this.toString = function() {

window.alert(this.name + " " + this.sex);

}

var anim = new Animal("トクジロウ", "オス");

anim.toString(); // 「トクジロウオス」

//◆メソッド追加

//・インスタンスに対して動的にメソッドを追加できる(動的性質)

//・インスタンスへのメソッドの追加は

//　あくまでインスタンス（ここではanim）への追加

//・インスタンス、あるいはコンストラクタ経由で

//　追加したメンバはdelete演算子（後述）で削除することも可能

var Animal = function(name, sex) {

this.name = name;

this.sex = sex;

}

var anim = new Animal("トクジロウ", "オス");

anim.toString = function() {

window.alert(this.name + " " + this.sex);

};

anim.toString(); // 「トクジロウオス」

var anim2 = new Animal("リンリン", "メス");

anim2.toString(); // エラー発生

//◆プロトタイプ

//・コンストラクタでメソッドを追加するのは好ましいことではない

//・クラス（コンストラクタ）はインスタンスを生成する都度、

//・すべてのオブジェクトは「prototype」という名前のプロパティを公開している

//・prototypeプロパティは、デフォルトで何らプロパティを持たない

//　空のオブジェクト（プロトタイプ・オブジェクト）を参照している

//・ここで追加されたメンバは、そのままインスタンス化された先の

//　オブジェクトに引き継がれる

//・関数オブジェクトをインスタンス化した場合、インスタンスは

//　基となる関数オブジェクトに属するprototypeオブジェクトに対して、

//　暗黙的な参照を持つことになる

var Animal = function(name, sex) {

this.name = name;

this.sex = sex;

}

Animal.prototype.toString = function() {

window.alert(this.name + " " + this.sex);

};

var anim = new Animal("トクジロウ", "オス");

anim.toString(); // 「トクジロウオス」

//◆プロトタイプ・オブジェクトを介する利点

//（1）必要なメモリ量を節約できる

//・プロトタイプに対する暗黙的な参照が利用されるのは、読み込みの場合だけ

//・この状態を、インスタンスa1のnameプロパティが

//　プロトタイプ・オブジェクトのnameプロパティを

//　「隠ぺいする」といういい方をする場合もある。

//・この考え方はdelete演算子の場合でも同様

//・「delete Animal.prototype.name」のように記述すれば、

//　プロトタイプ・オブジェクトのメンバを削除することも可能だ

//・undefined値でプロトタイプ・オブジェクトメンバを無効化することもできる

//（2）プロトタイプ・オブジェクトの変更はリアルタイムに認識

//・インスタンスを生成した「後」に、基となるプロトタイプ・オブジェクトに

//　メンバを追加した場合にも、これを認識できる

var Animal = function() {};

Animal.prototype.name = "サチ";

var a1 = new Animal();

var a2 = new Animal();

window.alert(a1.name + "｜" + a2.name); // 「サチ｜サチ」

a1.name = "トクジロウ";

window.alert(a1.name + "｜" + a2.name); // 「トクジロウ｜サチ」

delete a1.name; // インスタンスa1のnameプロパティを削除

delete a2.name; // インスタンスa2のnameプロパティを削除

window.alert(a1.name + "｜" + a2.name); // 「サチ｜サチ」

//◆プロトタイプをオブジェクト・リテラルで定義する

//・リテラルとは、任意の式内に直接に記述可能なデータ値（表現）のこと

var Animal = function(name, sex){

this.name = name;

this.sex = sex;

}

Animal.prototype = {

getVoice : function() {

window.alert(this.name + "「チュウ！」");

toString : function() {

window.alert(this.name + " " + this.sex);

}

};

var anim = new Animal("トクジロウ", "オス");

anim.toString(); // 「トクジロウオス」

◆プロトタイプ・チェーン－ JavaScriptの継承機構－

//・継承関係を自由に変更可能

//・いったん形成されたプロトタイプ・チェーンは

//　その後の変更にかかわらず保存される

----------------------------

var Animal = function() {}

Animal.prototype = {

walk : function() {

window.alert("トコトコ");

}

};

var Hamster = function() {};

Hamster.prototype = new Animal();

Hamster.prototype.gnaw = function() {

window.alert("ガジガジ…");

};

var ham = new Hamster();

ham.walk(); // 「トコトコ」［A］

ham.gnaw(); // 「ガジガジ…」

----------------------------

var Animal = function() {}

Animal.prototype = {

walk : function() {

window.alert("トコトコ");

}

};

var SuperAnimal = function() {}

SuperAnimal.prototype = {

walk : function() {

window.alert("ダーッ！");

}

};

var Hamster = function() {};

Hamster.prototype = new Animal(); // Animalを関連付け

var ham1 = new Hamster();

ham1.walk(); // 「トコトコ」［A］

Hamster.prototype = new SuperAnimal (); // SuperAnimalを関連付け

var ham2 = new Hamster();

ham2.walk(); // 「ダーッ！」［B］

ham1.walk(); // ？？？［C］

----------------------------

◆オブジェクトと連想配列

//・JavaScriptではオブジェクトと連想配列との間に厳密な区別はない

//・JavaScriptの世界においては同一の概念

var obj = new Object();

obj.x=1;

obj.x=2;

↑

↓

var obj = {x:1,y:2};

obj.x

↑

↓

obj["x"]

//・オブジェクト配下のメンバを列挙できる(prototypeは除く)

//・prototypeプロパティがDontEnum属性でマーキングされている

//・DontEnum属性が付与されたメンバは、for…inループによる

//　列挙の対象から外される

var ary = new Array();

for (name in ary) { window.alert(name); }

jQuery速習

kurow — 2013-07-01T23:57:27+09:00

1.導入とダウンロードと利用方法

http://jquery.com/

サーバーにアップしなくてもすぐ使える

https://developers.google.com/speed/libraries/?hl=ja

2.jQueryのコードを記述する場所

$(function(){

ここにjQueryの処理を記述

});

※$(document).ready()の省略形

3.セレクター

「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」

$("セレクター")

※CSSで記述できるものが使える

4.jQueryでHTML/CSSを操作する

HTML/CSSを操作するためのライブラリー

$(セレクター),jQueryの命令

html()という命令を使うと、セレクターで指定した要素の内側を変更できます

5.処理のタイミングを決める「イベント」

$("セレクター").イベント(function(){

ここにイベント発生時の処理を記述

});

6.jQueryでアニメーション効果を付ける

ノーマルアニメーション

$("セレクター").show(スピード);

$("セレクター").hide(スピード);

スライドアニメーション

$("セレクター").sideDown(スピード);

$("セレクター").sideUp(スピード);

フェードアニメーション

$("セレクター").fadeIn(スピード);

$("セレクター").fadeOut(スピード);

7.jQueryを使って15分でUIを作ろう!!

$(function(){

$("dd:not(:first)").css("display","none");

$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){

$("dd").slideUp("slow");

$("+dd",this).slideDown("slow");

}

});

【Validatorについての検証】

kurow — 2010-04-21T13:02:54+09:00

①CutomValidator
.Net2.0からはValidateEmptyTextを利用して空白の場合でもCustomValidatorの検証実行できる
※.Net2.0以前はこのプロパティは存在しない

ValidatorValidate(document.getElementById('cstvalSocialInsuranceStateSearchStandardRewardGradeEnd'), 'mainValidationGroup', null);
var validationGroup = 'mainValidationGroup';

【VSにおけるコンパイルエラーに関する検証】

kurow — 2010-04-14T11:01:31+09:00

[DLL参照]
DLLを参照する
※Dllの更新頻度が少ない場合に利用するのが良い
[利点]
  コンパイルが必要ない
  ソリューションファイルが軽くなる
[欠点]
  デバッグができない(条件によっては可能)
  Dllの参照先を正確に行わないとエラーが発生する
  頻繁に修正が発生する場合、Dll参照は向かない

[プロジェクト参照]
プロジェクトを参照する
※Dllの更新が頻繁に発生する場合に利用する
[利点]
  プロジェクト内で完結する
  デバッグができる
  Dllの位置を意識する必要がない
[欠点]
  追加するプロジェクトが増えるとVSが重くなる
  デフォルトでリコンパイルが実行される

ソリューションにプロジェクトを追加し尚且つ、プロジェクトのbinフォルダ内をDll参照元にしている場合
以下の現象が発生する
①依存ファイルが何らかの理由で上書きできなかった場合、コンパイルエラーが発生する
②コンパイルエラーが発生すると、参照元が存在しなくなるのでコンパイルエラーが発生する

Aproj←(依存)─Bproj←(依存)─Cproj

となっていた場合で、何らかの理由でAprojがコンパイルエラーが発生すると
Bprojコンパイルエラー、CprojコンパイルエラーとなりA.dll、B.dll、C.dllが参照元よりなくなり
タスク一覧にエラー表示されるようになる

.NET参照ツール一覧

kurow — 2010-04-14T10:08:37+09:00

GAC(Global Assembly Cache)
    Systemroot%\assemblyフォルダ
    gacutilユーティルで登録
    Drag&Dropで登録
.NET Framework Configuration管理ツール
    ｢管理ツール｣-｢［Microsoft .NET Framework 1.1 構成］｣
PEファイル参照
    dumpbin
アセンブリ情報参照
    ildasm

ASP.netでファイルをダウンロード＆実行

kurow — 2010-04-13T10:28:13+09:00

Dim strFile As String = "wk.pdf"

        Response.ContentType = "application/octet-stream"
        Response.AddHeader("Content-Disposition", "attachment; filename=" + strFile)
        Response.Flush()
        Response.TransmitFile("c:\00nham\" + strFile)
        Response.End()