2010/08/31

[Google Map V3]地図を表示する

どうやらいつの間にか、GoogleMapのバージョンがあがってしまったみたいです。

というわけで、さっそく、簡単な地図を表示してみたいと思います。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no"
/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8
, center: latlng
, mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas_00")
, myOptions
);
}

</script>
</head>
<body onload="initialize();">
<div id="map_canvas_00" style="width:400px; height:500px;">
</div>
</body>
</html>

Google Maps JavaScript API V3のThe "Hello, World" of Google Mapsで紹介されているプログラムを少し変更しました。

V2と比べてメソッドなどが変更されている模様です。

実行結果はこのようになります。


google.maps.Mapクラスをコールすることで地図を表示できるみたいだが、詳しい引数については別途調査する必要があり。

2010/08/30

[Chrome Web Store]アプリをアップロードする方法

今年10月にオープンするChrome Web Storeにアプリをアップロードする方法について

1:フォルダの作成
「manifest.json」ファイルを入れるためのフォルダを作成します。
(例として、今回は、chromewebappsとします。)
Photobucket

フォルダの中は、下のようにmanifest.jsonファイルのみがあります。
Photobucket

2:zipファイルの作成
1で作ったフォルダをzipファイルにします。
Photobucket

3:Chrome Developer Dashboardで「Add new Item」ボタンを押す
Chrome Developer Dashboardページにアクセスし、「Add new Item」ボタンを押す
Photobucket

4:zipファイルをアップロードする
「choose file」を押して、zipファイルを選択する
Photobucket

ファイル選択後、下のような画像になったら、「Upload」ボタンを押します。
Photobucket

5:アプリの情報を編集する
アップロード完了後、アプリの各情報を編集します。
(変更可能)
Photobucket

右側の部分は、このようになっています。
Photobucket

YouTubeのリンクとスクリーンショットをアップロードできるみたいです。

一方で左側の部分は、このようになっています。
Photobucket

「Pricing and Payments」の「Changing pricing」ボタンを押して金額の変更をすることができます。

「Categories」は最大で3つ選択することができます。
さらに、カテゴリーを追加したい場合は、「Additional categories」で追加することができます。

下にスクロールすると、今度は、下記のカテゴリーがあります。
Photobucket
言語の選択、詳細情報の入力やオフィシャルwebサイトのリンク、サポートサイトのリンク設定などを行います。

本来ならば、下の画像で、「Publish」ボタンが表示されるのですが、まだベータ版なので、でません。
Photobucket
「Save changes and return dashbord」をクリックするとダッシュボードに戻ります。

Photobucket
(↑ダッシュボードに戻った時の画像)

まだmanifest.jsonについて詳細に触れていないのでまた折りをみて考察したいと思います。

2010/08/29

24 -TWENTY FOUR- ファイナル・シーズン

ついに、ついに、ファイナルシーズンかぁ〜( 泣)
24 -TWENTY FOUR- シーズン8 (SEASONSコンパクト・ボックス) [DVD]
24 -TWENTY FOUR- シーズン8 (SEASONSコンパクト・ボックス) [DVD]
20世紀フォックス・ホーム・エンターテイメント・ジャパン

なんだか終わってしまうのが寂しいなー。。。

ジャックどうなっちゃうのかな??

24 season7を見た

そういうことだったのかー


トニーが、トニーが。。。

2010/08/28

[本]闘うプログラマー〈下〉―ビル・ゲイツの野望を担った男達

長い旅路が今、完結


第7章 出荷モード
第8章 死の行進
第9章 バグ
第10章 ショーストッパー

via:目次

画像がないのが残念。

前回、紹介しました闘うプログラマー〈上〉―ビル・ゲイツの野望を担った男達の後編です。

前編と同様ものすごい臨場感で時間を忘れてのめり込んでしまった。

まるで一緒にNTチームで働いているような気分にすらなった。

もうNT納期まで日時が差し迫っているのに、一向に解決しそうな気がしない。

まるで出口のない迷路に迷い込んだような感じ。

NTは完成するのだろうか?
(結果は、本書で確認。)

もし、プログラマーの方で、仕事帰りに本書を読むとまだ仕事が続いているような気分になると思います。
それぐらい強烈な本だった。

読み終わった時の達成感はまるでプログラムを無事にリリースした後のようでした。
(リリースした後も、バグに悩まされるのがこの職業の大変なところでもあるわけなのですが。。。(泣))



2010/08/27

[jQuery]is()

おそらくある要素などが存在している場合は、trueを返し、ない場合は、falseを返すメソッドなのかなーっと思ったら案の定的中
(jQuery日本語リファレンス:is(expr))

<html>
<head>
<title>Jquery isテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div id="test" class="ugougo">
life goes on
</div>

<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
console.log($("#test").is(".ugougo"))
}
);

</script>
</body>
</html>

上記のソースでは、id名testと同じ要素内にugougoというクラスがあるので、結果は「true」を返します。

もしないならば、「false」を返します。

ちなみに、isの中は、selectorを指定するそうなのですが、詳細は、こちらにあります。

2010/08/26

[sqlite]version 2時点におけるincrement

かなり前に、AsialさんのPHPセミナーに参加させていただいたときに、sqliteのauto-incrementの方法を教えていただいた上に資料までいただいたのですが、該当部分をすぐに見つけることができなく、やむなく探すことに。
(記憶力が悪すぎるうえに、部屋がちらかりすぎている。。。)

つまり,SQLite で auto-increment なフィールドを作りたければ,

INTEGER PRIMARY KEY

を指定してあげればいいらしい.

via:SQLite で auto-increment なフィールドを作成する方法

なるほど。。。

2010/08/25

[PHP]文字列をエンコードする

文字のエンコード方法を調べました。

mb_convert_encoding を使います。

$str = $_GET["q"];
$str = mb_convert_encoding($str, "EUC-JP", "auto");

これで、$str を EUC-JP に変換できます。
"auto" を指定すると 元のエンコーディングを自動検出できますが、完璧でもない場合がありますので厳密にしたい場合は

via:文字列の文字コード変換

ここでも疑問が発生するのですが、shift-jisの場合はどうするのでしょうか?
【php】文字コードの変換を拝見すると、"SJIS-win"と指定すればいいみたいです。

2010/08/24

[jQuery]width()

名前通り、横幅を取得するメソッドです。

<html>
<head>
<title>Jquery widthテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div id="test" class="foo bar">life goes on</div>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
console.log($(".foo").width())
}
);

</script>
</body>
</html>

とても簡単です。


参考:jQuery日本語リファレンス width()

2010/08/23

[jQuery]css()

cssメソッドは、単純に、cssを設定してくれるメソッドです。

<html>
<head>
<title>Jquery cssテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div id="test">life goes on</div>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("#test").css("border","solid 1px red");
}
);

</script>
</body>
</html>

このメソッドによって動的にCSSの設定ができるので便利だなと。
(参考にしたサイトは、jQuery日本語リファレンスのCSSメソッド)

2010/08/22

[本]闘うプログラマー〈上〉―ビル・ゲイツの野望を担った男達

通勤中に読了


第1章 コードの戦士
第2章 コードの王者
第3章 郎党
第4章 袋小路
第5章 熊の咆哮
第6章 ドッグフード

via:目次

まるでフィクションのようなノンフィクション。

先の展開がまるで読めない。二点、三点と次々に変わるプロジェクト内容。

果たしてどうなるのだろうか?

内容は、カトラー率いるwindows NTが新しいOSを作るというお話。

同じプログラマとして、とても気になります。

しかも、この時代、まだ小学生だったので、最後の結果がわからなく、早く知りたいと今猛烈なスピードで下巻を読んでいます。
(ひょっとしたら小学生からパソコンを触っていらっしゃった方もいるかもしれませんが、当時は、パソコンよりもスーパーファミコンにはまっていました。)

ノンフィクション小説(?)でここまでのめりこんだのは初めてかもしません。

実は、最近、復刻版がリリースされたの弾さんのこれを食わずしてプログラマーを語るな - 書評 - 闘うプログラマー[新装版]を知って、これを機に中古本を買いました。



2010/08/20

[chrome web apps]chrome web store beta開始

今日は、歴史的な第一歩になるかもしれない。
なぜならば、webアプリケーションが、本当のアプリケーションになる日が到来したからだ。

A developer preview for the Chrome Web Store

Since our announcement of the Chrome Web Store at Google I/O, our team has been hard at work preparing for our launch later this year. Today we’re making the first step towards this milestone by making available a developer preview of the Chrome Web Store.

Developers can now start uploading apps and experiment with packaging them, installing them in Chrome (using the latest Chrome dev channel) and integrating our payments and user authentication infrastructure.

via:Get your apps ready for the Chrome Web Store!

今まで、webアプリケーションとは言っても、URLアドレスを直接入力し、Enterキーをたたいた後表示されるいわゆるホームページ的な側面がすごく強かったのですが、今回のこの試みは、ワードやエクセルやパワポのようなクライアントアプリケーションのようにインストールの概念を持ってきて、chrome上にwebアプリケーションをインストールさせクライアントアプリケーションのようにふるまうことができるようにする試みです。

しかも、従来、webアプリケーションは無料だったのですが、有料にすることもできるようです。

さっそく、今、Chrome Web Storeのリファレンスを読んでいるのですが、今夜も寝れなくなりそうだ。

昨日は、雨トークで寝れなかったけど。。。

2010/08/19

[jQuery]empty()

このメソッドは、_jQuery日本語リファレンスを参考にすると、自分自身ではなく、子要素を削除するみたいです。

<html>
<head>
<title>Jquery.emptyテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
#deleteParent{border:solid 1px red;}
</style>
</head>
<body>
<div id="deleteParent">
life goes on
<span>
I'll be missing you.
</span>
</div>
<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("#deleteParent").empty();
}
);
</script>
</body>
</html>

これじつに使い方は簡単なのですが、一度、削除したものって復元することはできないのだろうか?

show()メソッドみたいなものがあればいいのにーっとリファレンスを眺めていたら、こちらにあった。

show()メソッドの詳細はまた今度、書いていきたいと思います。

2010/08/18

[jQuery]size()

jQuery日本語リファレンスを参考にすると、エレメントの数をカウントしてくれるみたいです。

<html>
<head>
<title>Jquery.sizeテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<span>foo</span>
<span>bar</span>
<span>baka</span>

<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
console.log($("span").size())
}
);
</script>
</body>
</html>

実行結果は、3になりました。

2010/08/17

[jQuery]classの追加と削除

ある特定の要素にクラスの追加、削除をするのは、いたって簡単。
jQuery日本語リファレンスのaddClass

jQuery日本語リファレンスのremoveClass
を参考に、まずは、クラスを追加するプログラムを作ってみる。

<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}

</style>
</head>
<body>
<div>apple</div>

<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("div").addClass("foo");
}
);
</script>
</body>
</html>

こいつを実行すると、fooクラスが適用されます。
(文字が赤くなります。)

一方で、クラスの削除はこのようになります。
<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}

</style>
</head>
<body>
<div class="foo">apple</div>

<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("div").removeClass("foo");
}
);
</script>
</body>
</html>

これを実行すると、元々赤文字だったappleがクラスが削除されることによって黒文字に変更されます。

今回もわりと簡単だったなー。

2010/08/16

[jQuery]eq

今日は、eqについて。

参考元は、jQuery日本語リファレンスのeq
ある特定の集合エレメントにおいて一つだけ要素を取り出したいときに使うみたいです。

簡単なソースを組んでみました。

<html>
<head>
<title>Jquery.eqテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div>apple</div>
<div>lemon</div>
<div>orange</div>
<div>banana</div>
<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
console.log($("div").eq(2).text());
}
);
</script>
</body>
</html>

上のソースは、2番目のdivタグの要素のtextを返してください、という指示を出しています。
(実行結果は、lemonが取得されます。)

これは簡単ですね。

[iGoogle gadget]不具合に関するお詫び

ここのところ、昼ごろにかけて、一斉にiGoogle gadgetが表示されない不具合がありましたが、原因は、Google App Engineの許容量を超えてしまったことによるもので、gooガジェットを他のサーバーに移行させることで、表示されない不具合を解消しました。

ユーザー様に大変ご迷惑をおかけしましたことを深くお詫びいたします。

2010/08/15

[Chrome Web Apps]Appsのインストール

実は、今年の後半に、chrome web storeがオープンする予定です。

これは何かと言いますと、web browserであるchromeにアプリケーションをインストールする機能を追加して、アプリケーション専用のstoreを立ち上げようという計画なのですが、ここでは、そのアプリをインストールする方法について書きたいと思います。
(ここに考察した内容を書いています。)

インストールするアプリを、google mapsとし、インストール方法については、Developer's Guideを参考にし、OSはwindowsを対象とします。

まず、Early Access Release Channelsから、Windows用のdeveloperバージョンのchromeをインストールします。
(インストールしたchromeがdeveloperバージョンかどうかを確認するには、「chromeについて」を選択し「dev」という文字が表示されれば、developerバージョンになります。)

次に、chromeを立ち上げるのですが、その際に、起動時に「--enable-apps」をつけてアプリを起動させてください。

起動後、ローカルに、フォルダを作り、その中に、
manifest.json
24.png
128.png
を入れます。

起動したchromeの拡張機能を選択すると下記のような形になります。
Photobucket
右側の部分を拡大すると、このようになります。
Photobucket
「+」の部分をクリックし、詳細情報を表示させます。
(下は、クリックした後の画像です。)
Photobucket
右側の、「パッケージ化されていない拡張機能を読込みます」をクリックします。
(下記は、その画像)
Photobucket
クリック後、先ほど、作ったフォルダを選択します。

すると、下記のような画像が、表示されます。
Photobucket
これでインストール完了です。

新しいタブを開くと、下記の画像が表示されます。
Photobucket
左側のGoogleMapsをクリックすると、インストールされたアプリが起動します。

起動後は、このようになります。
Photobucket

普通にアドレスを指定して、Yahoo.co.jpにアクセスした時のタブと比較してみると、ちょっと大きさが違いますね。
Photobucket

ベータなので、まだ仕様が確定していないのですが、もし、storeがオープンすれば、アプリを出してみるのもいいかもしれませんね。

2010/08/14

[本]日本経済図説 第三版

これすごい


1 経済発展の軌跡
2 人口・国土・国富
3 食生活と第一次産業
4 変貌する第二次産業・第三次産業
5 IT革命と情報化社会
6 雇用・労働
7 金融・資本市場
8 財政
9 国際収支
10 国民生活
11 日本経済の展望

via:目次

このクオリティーは、新書ではなく、辞書だと思いました。

日本経済の解説を見開きの半ページを文字で解説し、残りの半分を図や、表で説明している。
本書が、すごいのが、必ず、図や表が入っていること。
1ページもないページがないので、著者はよくここまで、図や表などを集めたり作ることができたなーっとただただ感心してしまった。

しかも、その上、文字の部分も、妥協することなく、経済学にはめずらしい歴史的な背景を踏まえて、つまり、明治維新後からの動きを見ながら説明しているので、違った視点から歴史を勉強している感じさえしました。

ただ、ただ、一点ほど、残念な点が。。。

本書が、リリースされたのは、2001年、今は、2010年とすでに、10年近くたってしまっている。

なので、著者には、第4版として、第3版に残りの10年分のデータを追加した形で、再度リリースしてほしいことを願うばかりである。

本書は、弾さんの「弾言」で紹介されていたので機会があり手に取りました。


2010/08/13

[jQuery]val()

valメソッドは、こちらを読むと、単純にvalueの値を返すようです。
(設定もできます)

全ての要素のvalue属性を返す。

jQuery1.2では、selectボックスにも値をセットできるようになった。

via:val(val)

というわけで、さっそく試してみました。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div>
<input type="text" id="baka" value="">
</div>
<div>
<input type="radio" value="1" name="foo">first
 
<input type="radio" value="2" name="foo">second
</div>
<div>
<input type="checkbox" value="1" name="bar">first contact
<input type="checkbox" value="2" name="bar">second contact
</div>
<div>
<textarea id="txtarea" cols="15" rows="5"></textarea>
</div>
<div>
<select id="slct">
<option value=""></option>
<option value="apple_val">apple</option>
<option value="banana_val">banana</option>
</select>
</div>
<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
//textboxの値の取得
console.log($("#baka").val());

//ラジオボタンの値を取得
//何も選択されていないと「undefined」が返ってくる。
console.log($("input[name=foo]:checked").val());

//checkboxの各値を取得
$("input:checkbox[name=bar]:checked").each(
function(index,aval){
console.log(aval.value);
}
);

//selectboxの値を取得
console.log($("#slct").val());

//textareaの値を取得
console.log($("#txtarea").val());

}
);
</script>
</body>
</html>

textbox、selectボックス、textareaの各値を取得することはできたのですが、問題は、checkboxと、radioボタンの値の取得方法

radioボタンの取得方法は、こちらを参考にさせていただいた。

/********************************************************
ラジオボタン
****************************************************** */
//↓femaleにchecked=”checked”された状態になる
//valのカッコの中要注意
$(”input[name=color]“).val(['2'])

//チェックされた値の取得
//tmpにチェックされているvalueの値が取得できる
var tmp = $(”input[name=color]:checked”).val();

via:jQueryでラジオボタン、チェックボックスの値を取得する方法

確かにこれで取得することができました。

一方で、checkboxの方ですが、同ブログでも紹介されていて実装してみたのですが、うまくいかず、違う方法がないのかなーっと探っていたところ、ありました。


HTMLタグのチェックボックスタグに name=”check[]” とした場合、どのようにJavascript側で処理をすればいいのか

・・・省略・・・

$(”:checkbox[name^='check']:checked”).each(function(){
alert($(this).val());
});

via:jquery チェックボックス グループ処理

ここで、どうしても納得がいかない点があり、

なぜ変数名に[]を追加するのか?

ということ。

確かに、PHPではこのような方法で、値を取得するが、JavaScriptで果たして必要なのだろうか?

で、ためしに一番最初に紹介したプログラムで実行してみたところ、無事にcheckboxにチェックが入っている項目の値だけを取得することができたので、[]がなくてもオッケーじゃーんみたいな。

2010/08/12

[jQuery]bindについて

先ほどまでbindの使い方について少し調べました。
(調査先は、jQueryリファレンスのbind)

簡単に言ってしまうと、イベントを貼り付けることができるみたいです。
さっそく、下記のプログラムを作成しました。

<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
$("#hoge").bind(
'click'
, function(){
alert("foo");
}
);
</script>
</body>
</html>

上の場合、idのhogeにonclickイベントを追加しています。

実際に、idがhogeである要素(ここではボタンですが)がクリックされた場合、無名関数が起動し、fooという文言を出すように指示しています。

クリックイベント先の関数が長くなってしまう場合、当然、中出し、失礼、外出ししたい場合は、こんなように書き換えることができるのではないかと。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
function goaway(){
alert("take my breath away");
}

$("#hoge").bind(
'click'
, goaway
);
</script>
</body>
</html>

確かに動きます。

リファレンスを少し眺めると、変数の引継ぎもできるようです。
(まー、これは、JavaScriptの仕様上、もともとできると思ったりもするのですが。)

<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Jessica Simpson";

$("#hoge").bind(
'click'
, function(){
alert(msg);
}
);
</script>
</body>
</html>

実行すると、Jessica Simpsonと表示されます。

これだとあまりにも素っ気無いのでbindメソッドの引数として渡すことも可能です。
それが次の例。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Tom Cruise";

$("#hoge").bind(
'click'
, {message:msg}
, function(event){
alert(event.data.message);
}
);
</script>
</body>
</html>

第二引数に、JSONパラメータとして関数に渡したいパラメータの設定を行い、同時に、無名関数に引数名を指定して「引数名.data.JSONのkey」でパラメータにアクセスすることができます。

formの内容を確認したい場合などにこの方法は便利かもしれませんね。
そんな場合は、おそらくきっと、こんな感じになるのかなと。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="text" id="baka" value="">
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Tom Cruise";

$("#hoge").bind(
'click'
, {validate:$("#baka")}
, function(event){
var temp = event.data.validate;
alert(temp.val());
}
);
</script>
</body>
</html>

(これで、textの内容を取得することができるのですが、valメソッドがなんだかよくわかってない。。。まー推測はつくのですが。)