モジュールの結合

結合の基準
サイズ＝モジュール間結合の数
サイズは小さければ小さいほど良い。
・引数が１つのルーチンは引数が６つのルーチンより結合が弱い（サイズが小さい）
・４個のpublicメソッドからなるクラスは37個のpublicメソッドからなるクラスより結合は弱い

結合の可視化
・引数による結合は、グローバル変数による結合より明示的なので良い

結合の柔軟性
・モジュール間の結合が容易に帰られるほど柔軟性が高い
var employee = {'雇用日': , '職種': , ....};
に対して、雇用日と職種から休日を算出する関数は
function lookupVacationBenefit ( employee) { ... }
とするよりも、
function lookupVacationBenefit ( 雇用日, 職種 ) { ... }
にしたほうが、他のモジュールからも扱いやすくなる。
（過剰な情報伝達が悪になる例でもある）

結合の種類
○単純パラメータ結合
○単純オブジェクト結合
△オブジェクトパラメータ結合
×セマンティック結合

情報の隠蔽と変更の影響の最小化

指針
・情報を隠蔽し、内部構造は必要がなければ考えないで済むようにする
・変更が発生したときに、その影響を一カ所にとどめるようにする


具体的なプラクティス

・ユーザーとのやり取りをするコードを一カ所に集中させる

・マジックナンバーのハードコーディングは避け、定数として一カ所で定義する

・グローバル変数を避ける（必要以上のデータを渡さない）
・循環依存（AからBを参照し、BからもAを参照する）をしない
・変更されそうな部分を予測して、分離する
・状態変数としてブール型ではなく、列挙型を使う
・状態変数は直接参照せずに、アクセスルーチンを使い抽象化する
・他のモジュールへの依存度を減らし、疎結合（弱い結合）にする

ソフトウェア開発のノウハウ

前提：ソフトウェアの開発　＝　知的生産活動
（１）ビジョンステートメント

（２）仕様とアーキテクチャを固めるためのプロトタイピング
（３）スタートダッシュの２０％で８０％の完成を目指す
（４）頻繁なαリリース

前提：ソフトウェアの開発　＝　知的生産活動
クリエイティビティに１００％のコストが集中している。
そのため、どれだけ人数とお金を投入したところで、成果が全くでない事がある。
複数の行程に分割して、それぞれの作業コストを見積もるということも難しい。
大事なのはクリエイティビティ。

（１）ビジョンステートメント
最初に作ろうとしているソフトウェアが成し遂げようとしているビジョンを明確に定めて、それは明文化しておく。これを行うことによって、制作の途中で本来何をすべきだったかを忘れて迷走することを防ぎ、さらにはモチベーションを高めることができる。

（２）仕様とアーキテクチャを固めるためのプロトタイピング
実際に形にしてみないと、本当に必要な仕様や最適なアーキテクチャを理解できない。
つくっていく過程で「ここはこうしたい」「こうすれば他でもうまくいく」など新しいアイデアが生まれてくるのである。細部まで作ってからのアーキテクチャの変更は不可能に近いので、この段階で徹底的に妥協無しで作り直しをする必要がある。

ZenCodingショートカットまとめ

Command+Eで展開

HTML5　→　html:5
HTML4.01Transisional　→　html:4t
HTML4.01Strict　→　html:4s
CSS　→　link:css
JavaScript　→　script:src

[Objective-C]配列にオブジェクトを格納する場合のメモリ管理

★iPhoneプログラミングのTips★

配列や辞書（dictionary)周りのメモリ管理について。

メモリリークしないために、オブジェクト生成にメモリを確保(alloc)したら、
deallocでリリース(release)するのが基本だが、

配列・辞書にオブジェクトを格納して管理しようとする場合に、
allocやらretainやらreleaseは必要になるのか？という話。

stackoverflowでわかりやすい説明を発見。
http://stackoverflow.com/questions/885839/with-an-nsarray-of-object-references-do-i-explicitly-release-all-objects-in-the

結論から言うと、配列の中に格納したオブジェクトに関しては、
★allocなりretainなりでリテインカウントを上げる必要がある。
★配列をreleaseしたときに、中のオブジェクトも自動でreleaseされる。

例えばこんな具合。

//配列をグローバル変数にする為にリテインカウントを１上げる。

mojilabelArray = [[NSMutableArray alloc] init];
//配列に格納するオブジェクトに関してもリテインカウントを１あげる。

CCLabelTTF *ttllabel = [[CCLabelTTF labelWithString:moji fontName:@"Arial" fontSize:50] retain];

[mojilabelArray addObject:ttllabel];



//dealloc

[mojilabelArray release];

//ttllabelはmojilabelArrayがreleaseされたとき、同時にreleaseされる。

HTML&CSSパターン【随時更新】

☆リストのマーカーを画像で表示する：その１
☆選択した要素を横中央ぞろえ marigin: 0 auto;
☆選択した要素の子要素を横中央ぞろえtext-align: center;
☆背景画像固定
☆画像テキストボックスと余白
余白はpaddingでとる。ただしpaddingした大きさだけ外枠のwidth,heightをマイナスすることを忘れずに。 例：
.txtbox { width:451px; height:52px;background:url(box.gif) no-repeat; margin: 0 auto; padding: 10px 10px;}
☆テーブル
その１：テーブルタグを使う

Applim用参考アプリ一覧

参考アプリ一覧
iButterfly
iButterfly企画書
ふ＊らいふ
ふ＊らいふ企画書
Who is Who?
rubberduckzilla

ブログ

z The Startup http://thestartup.jp/ （梅木さん、26歳。2009年卒）
z 世界を変えるｽﾀｰﾄｱｯﾌﾟ http://gendai.ismedia.jp/category/startup（鈴木仁士さん、22歳）
z TechCrunch Japan http://jp.techcrunch.com/ （言うまでもなく）
z TechCrunch http://techcrunch.com/ （日本語に訳されていない記事多数）
z VentureBeat http://venturebeat.com/
z TechWave http://techwave.jp/
z Techdoll.jp http://www.techdoll.jp/
z Mashable http://mashable.com/ （この分野では必読。ただし、以下に日本語での紹介もあり）
z ネクスパスブログ http://blog.nexpas.co.jp/ （町田龍馬さん、ﾆｭｰｼﾞｰﾗﾝﾄﾞ、ｼﾝｶﾞﾎﾟｰﾙ留学、24歳）
z Don’t be Lame http://kenichinishimura.blogspot.com/ （西村顕一さん、シンガポール留学後2011年卒）
z NPOにﾏｰｹﾃｨﾝｸﾞの力を http://www.ikedahayato.com/ （イケダハヤトさん、2009年卒）
z クローズドとソーシャルの交差点 http://ststgc.posterous.com/ （瀬戸口翔太さん、大学4年）
z Little_shotaro’s blog http://www.littleshotaro.com/ （植原正太郎さん、23歳、大学4年）
z The Public Returns – 続・広報の視点
http://goo.gl/u9XOT http://goo.gl/W8qbQ http://goo.gl/saf6z
z Social Media 360.jp http://socialmedia360.jp/
z Gamification.jp http://gamification.jp/
z Inside Facebook http://www.insidefacebook.com/
z All Facebook http://www.allfacebook.com/
z ReadWriteWeb http://www.readwriteweb.com/
z Social Commerce Today http://socialcommercetoday.com/
z Social Times http://socialtimes.com/

リンクテスト

てすとここ

新しいテストはここ。

ここからテスト。

モジュール化と隠蔽

素人なりに基本を整理。


プログラミングにはいくつか原則がある。

１つは『コード間の依存関係を荒くすること』。


例えば、同じ変数をいろんなとこに書いてしまうと、コードが長くなるにつれて困難極まってくる。


変数xが２つの関数A,Bで使われているとする。

Aの動作を変更するためにxをいじる。

すると気づかぬうちにBの動作も変更されてしまった、というのが悲劇の始まり。（副作用と呼ぶ）

関数２つならまだいい。

A,B,C,D...と増えるにつれ、副作用を避けつつAの動作だけを変更するのが難しくなっていく。


さらに恐ろしいことに、Bで発生した副作用を直そうとして変数yをいじると、yをいじったことによる新しい副作用が発生するという無限地獄に突入する。

これがコードのスパゲッティ化という現象である。



どうすれば、スパゲッティ化を防げるのか？

それが、『コード間の依存関係を荒くすること』である。


具体的にはまず、コードを役割に応じて小さくグループ化する（モジュール化）。

そして、外部からモジュール内部への自由なアクセスを禁じて、定義したインターフェイスを用いたアクセスのみを許可する。


この外部から内部変数への自由なアクセスを禁じることを、「隠蔽」という。

関数の中身、クラスであれば「内部変数・関数」は、原則的に外部から直接変更できない。


これによって異なるモジュール同士の変数が、密に依存しあうことを避けているのである。



言語によって、「モジュール化と隠蔽」を実現する手段は微妙に異なる。

例えば、プロトタイプベースであるJavaScriptのオブジェクトでは、

関数とクロージャを使ってモジュール化と隠蔽を図る、など。


プログラミングをするときは、言語に応じた「モジュール化と隠蔽」を常に意識して書くように心がけたい。

[JavaScript]クロージャを使った、プライベート変数・関数の共有

C言語のようなクラスベースのオブジェクト指向言語では、staticを用いてプライベート変数・関数の共有をする。

では、JavaScriptのようなプロトタイプペースではどうするかという話。

呼び出すたびにカウントが１づつ増加していくcounter()という関数の例で考える。

何も考えずに作ると次のようになる。

var i = 0;
function counter(){
  i+=1;
}

counter(); //1
counter(); //2

問題は、変数iが関数の外に出ているがために、外部から簡単にアクセスできてしまうということ。
(グローバル変数は極力使いたくない)

オブジェクト指向でいうところの、変数の隠蔽をしつつ、この関数内だけで変数iを共有するためにはどうすればよいか？

ここでクロージャの出番となる。

var counter = (function(){
  var i=0;
  return function(){
    i+=1;
  };
})();

counter(); //1
counter(); //2

(function(){})()の部分で、無名関数を即実行する。

その結果counterに代入されるのは、return 以降に書かれている関数、

function(){i+=1};

である。では、このreturn文の前に書かれている var i=0;はどうなるか。

このiは最初に実行された後、消えず、全てのcounter()に共有され、参照されるようになる。

よって、counter()が呼ばれるたびにiは0に初期化されず、変更が反映される。


クロージャを使ってプライベート変数を共有する方法は、オブジェクトを作るときにも利用でき、

var counter = (function(){
  var i=0;
  reuturn {
    inc : function(){
      i += 1;
    },
    dec : function(){
      i -= 1;
    }
  };
})();

オブジェクト間で、共有する場合は基本的にこのパターン。

[GoogleMap]複数マップのそれぞれにマーカーを追加

それぞれに一個ずつ置きたいのに・・・。

こんなときは、map変数が二つのマップで共有されていないかチェック。

自分の場合はmapがグローバル変数になっていたので、これをローカル変数に変更したら、
下図のようにうまくいきました。

[Python]break文

break文１つで、抜けるループは１つだけ。

つまり、nested roop内でbreak文を使った場合も、抜け出すのは１つのループのみ。

list = [[0,1,2],[3,4,5],[6,7,8]]
for x in range(3):
for y in range(3):
if list[x][y]>3:
list[x][y] = 10
break
print list

>>
[[0, 1, 2], [3, 10, 5], [10, 7, 8]]

この例でいうと、yのループは抜けてもxのループは続いているということ。

GoogleMapをdisplay:noneで初期化するとバグる件

ボタンを押したらGoogleMapが表示されるというコードを書いたのだが、なんどやっても表示がバグる。

ググり続けること30分、visibilityを使え的なコメントがあったので、試すと成功。

てことで、グーグルマップを隠しておくときは、

display: none;

ではなく、

visibility: hidden;

にしておいて、jQueryでは、

$("#map-canvas").css("visibility","visible");

のように書けばよし。

Android開発環境構築、行き詰った個所まとめ。

・Android SDKインストール時に「javaが入ってない」と言われて進めない。

確か、JDK has not been found とかなんとか。

いや、たしかにJDKを入れたはずなのに…。なぜだ！！

これはなんとびっくりインストーラーのバグらしい。

一旦backしてからnextすると、認識されてます。なんだったんだこのバグ。

詳細はここに書いてありました。

ググっても意外とすぐに発見できなかったので、ここで挫折する人もいたんじゃないかと。


・付属のサンプルコードを実行できない他。

creating project from existing sourceができかったり、

SDK and AVD manager のInstalled packageをアップデートしようとしたらアクセス拒否されましたとか。

ググりまくって、やっとstack overflowで同じ問題に苦しんでる人発見。ここ。

「windows7だったらProgram Fileへのアクセス権ないかもよ。管理者認証してみ。」

とあるので、eclipseを右クリックから「管理者として実行」でやったら、アクセスできたあ！！

毎回やるのめんどくさいので、右クリック→プロパティ→互換性→管理者としてこのプログラムを実行するにチェックを入れる。これでOK。


以上、心が折れるくらい行き詰った個所でした！！ｗ

[jQuery]HTMLタグのidを動的に生成(or変更)する方法

例えば、Twitterの新しいつぶやき一つ一つにidがついていくが、JavaScriptでどうやってidを生成、変更しているのかという話。


jQueryのattr()を使う。

もし、idを'oldid'→'newid'に変更したいのなら、

$('#oldid').attr('id', 'newid');

とすれば良い。


しかし、もっと動的に、生成された番号などをid内に入れたいときなどは、

例えば、attr(function(i){...})を使う。

以下はClick meボタンを押すと新しいpタグが挿入されていき、TESTボタンをクリックすると、上から４番目のものの背景が赤になるというコード。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#button1").click(function(){
    $("div.contents").prepend("<p>This is test.</p>");
    $("p").attr("id",function(i){
      return "num"+i;
    });
  });

  $("#button2").click(function(){
    $("p#num4").css("background-color","red");
  });
 
});

</script>
</head>

<body>
<button id="button1">Click me</button>
<button id="button2">TEST</button>
<div class='contents'></div>
</body>
</html>

jQueryのattr()関数についてはここを参照。

ブログにHTMLのタグを文字として貼り付ける方法。

ブログと言えども、HTMLは使えるので、タグを実体参照変換する必要があるようだ。

ここで自動変換してくれます。

[jQuery]セレクター：n番目の要素だけをセレクトするeq()フィルター

eq()filterを使う。
例１：２番目のpだけを選択したい場合。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('p:eq(1)').css("background-color","red");
});
</script>
</head>
<body>
<p>This is 1</p>
<p>This is 2</p>
<p>This is 3</p>
</body>
</html>

これを使えば動的に生み出したhtmlタグにも適用可能。
例２：動的に生み出した３番目のpを選択

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#button1').click(function(){
        $('.content').append('<p class="hello">Hello</p>');
    });
    $('#button2').click(function(){
        $('p.hello:eq(2)').css("background-color","red");
    });
});
</script>
</head>
<body>
<button id='button1'>add</button>
<button id='button2'>test</button>
<div class='content'></div>
</body>
</html>

[javascript]空配列[]の真偽値

配列が空であることを確認したい時、
var a=[];
if(a === []){...}
と書くと間違い。

参考に、下のサイトをちぇっく。
http://d.hatena.ne.jp/reosablo/20090519/1242723949

要するに、
[]は配列、配列はオブジェクト、だから基本的にtrue。
でもif([] ===...
のようにif文章の左辺で使われるときは、[配列]は[配列].toStringと見なされる。
（配列のtoStringメソッドはDavid FlanaganのJavaScript第５版121ページ参照。）

例えば、
var a=[];
if(a){} //true
if(a==true){} //false

var b=[1];
if(b==true){} //true
var c=[2];
if(c==true){} //false

のようになる。bのプロセスを説明すると、

var c=[1,2];
if(c==true){} //false

var d=[{'num':1};
if(d==true){} //false

となることに要注意。

The Social Network Clip

Sean Parker: You know why I started Napster?
[Mark shakes his head]
Sean Parker: The girl I loved in high school was with the co-captain of varsity lacrosse team and I wanted to take her from him. So I decided to come up with the next big thing.
Mark Zuckerberg: I didn't know that.
Sean Parker: Napster wasn't a failure. I changed the music industry for better and for always. It may not have been good business but it pissed a lot of people off. And isn't that what your facemash was about? They're scared of me pal and they're gonna be scared of you. What the VC's wanted to say "Good idea, kid. Grown ups will take it from here". But not this time. This is our time. This time you're gonna...you're gonna hand 'em a business card that says "I'm CEO Bitch". That's what I want for you.



Lawyer: Mr. Zuckerberg, do I have your full attention?
Mark Zuckerberg: No.
Lawyer: Do you think I deserve it?
Mark Zuckerberg: What?
Lawyer: Do you think I deserve your full attention?
Mark: I had to swear an oath before we began this deposition, and I don't want to perjure myself, so I have a legal obligation to say no.
Lawyer: Okay...no. You don't think I deserve your attention.
Mark Zuckerberg: I think if your clients want to sit on my shoulders and call themselves tall, they have the right to give it a try, but there's no requirement that I enjoy sitting here listening to people lie. You have part of my attention - you have the minimum amount. The rest of my attention is back at the offices of Facebook, where my colleagues and I are doing things that no one in this room, including and especially your clients, are intellectually or creatively capable of doing. Did I adequately answer your condescending question?


'Let the Hacking begin'
http://www.youtube.com/watch?v=odOzMz-fOOw&feature=related

'drink and hacking'
http://www.youtube.com/watch?v=vAf9mUnafcQ