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

[Python]os.path

__file__はモジュールがロードされたファイルのパス。

例えば、

print __file__
//C:\Python27\module1.py

続いて、よく出てくる、os.path.dirname(__file__)の意味。
これは、__file__の入ったディレクトリのパスを表示する。

os.path.join(path1,path2,..)はpathを結合する。
次の例を見れば一目瞭然。

import os
print __file__
//C:\Python27\module1.py
print os.path.dirname(__file__)
//C:\Python27

print os.path.join(os.path.dirname(__file__),'index.htm')
//C:\Python27\index.htm

[参考文献]
http://pyref.infogami.com/__file__
http://effbot.org/librarybook/os-path.htm

if __name__ == "__main__" の意味。

モジュールの実行のされ方は２つ。
１．それ自体が実行される。
２．importされて呼び出される。

１のケースでは、__name__には"__main__"が代入され、
２のケースでは、__name__にはモジュール名が代入される（test.pyなら"test"が代入される）

ゆえに
if __name__ == "__main__"
main()

の意味は、このモジュールがそれ自体で呼び出されたときは、main()を実行し、
importされた場合はmain()はスルーしますよという意味。

[参考文献]
http://www.ibiblio.org/g2swap/byteofpython/read/module-name.html
http://d.hatena.ne.jp/s-n-k/20080512/1210611374

Knowing when to use self and __init__ in python

When defining your class methods, you must explicitly list self as the first argument for each method, including __init__. When you call a method of an ancestor class from within your class, you must include the self argument. But when you call your class method from outside, you do not specify anything for the self argument; you skip it entirely, and Python automatically adds the instance reference for you. I am aware that this is confusing at first; it's not really inconsistent, but it may appear inconsistent because it relies on a distinction (between bound and unbound methods) that you don't know about yet.

Whew. I realize that's a lot to absorb, but you'll get the hang of it. All Python classes work the same way, so once you learn one, you've learned them all. If you forget everything else, remember this one thing, because I promise it will trip you up:


__init__ methods are optional, but when you define one, you must remember to explicitly call the ancestor's __init__ method (if it defines one). This is more generally true: whenever a descendant wants to extend the behavior of the ancestor, the descendant method must explicitly call the ancestor method at the proper time, with the proper arguments.

Dive into python

画像処理

色の情報：
赤、緑、青３つの光の強度（明るさ）を調整すれば、どんな色でも作り出せる。
故に色のもつ変数情報量 = 3 (強度R,G,B=0～255)

グレースケール：
白と黒の濃淡（白の強度）だけで表現された色。変数情報量=1 (強度L=0～255)

グレースケール化：
カラーをグレースケールに変換すること。
変数情報量を３→１に圧縮する。すなわち非可逆圧縮。
この際、L=f(R,G,B)のfをどのように設定するか、が鍵。目的により異なる。


画像の情報化：
画像は単一の色を持ったピクセルの集合と考えられる。
故に画像の変数情報量 = 3×ピクセル数