桝原翔市の日常

引越し

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Wed, 03 Jun 2009 05:56:00 +0000

はてなダイアリーへ引っ越します。いや、引っ越しました。

http://d.hatena.ne.jp/shoichimasuhara/

よくやる変数のミス

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 01 Jun 2009 03:06:00 +0000

Javascriptのforは

for(i=0;i<10;i++) と
for(i in array)がありますが

↑の書き方だと i がグローバルオブジェクトのプロパティになってしまって
ずっと残ってしまいます。なので

for(var i=0;i<10;i++)
for(var i in array)

のようにちゃんとvarで宣言しましょう。
関数内ならその関数のCallオブジェクトのプロパティになるので、
関数が終わり次第消えます（変にクロージャみたいになってなければ。

IEのArrayオブジェクトにindexOfメソッド追加

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 01 Jun 2009 02:55:00 +0000

IEのindexOfメソッドはStringにしかついてないので

['hoge', 'foo', 'bar'].indexOf('foo')

ということができません。なので必要な場合は事前にArrayオブジェクトにメソッドを追加する必要があります。

if(!Array.indexOf){
　Array.prototype.indexOf = function(object){
　　for(var i = 0; i < this.length; i++){
　　　if(this[i] == object){
　　　　return i;
　　　}
　　}
　　return -1;
　}
}

IEやっぱりめんどくさい
【参考資料】
http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/

Nikon F2 Photomic

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sat, 18 Apr 2009 01:34:00 +0000

mixiのほうでは書いてたんですが、先日Nikon F2 Photomicを購入したしました。
フルマニュアル(AF、AE、手ブレ補正すべてなし)のフィルム一眼レフカメラです。
一緒にNikkor 50mm 1:1.4 単眼レンズがついてきました。これで

　　　　　　　　　　■ HOLGA 120GCFN

　　　　　　　　　　■ LOMO SMENA 8M

　　　　　　　　　　■ Nikon F2 Photomic

といったメンツがそろいました。なんか増えたなぁ。。。
で、Nikon F2の１発目とSmena 8M、Holgaそれぞれ現像があがってきました。
いつものごとくFlickrにあげましたので興味ある方はご覧ください。

http://www.flickr.com/photos/shoichimasuhara

猫が多いけどｗｗ

まえから思ってたけど

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sat, 04 Apr 2009 02:55:00 +0000

Bloggerなんかおそい。レイアウトのせいっぽいのでいろいろ変更中。。。

SMENA 8M一本目

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sat, 04 Apr 2009 02:04:00 +0000

やっとSMENA8Mの一本目の現像上がりました。HOLGAと違って絞りとシャッター速度が変更できるだけに逆に難しい。クロスプロセス現像をしたのでハイコントラストになったもののコントラストきつすぎ・露出オーバなどで没になった写真多数。。。空送り、二重露光などミスもあったので36枚撮りフィルムなのにOKがだせる写真は数枚とだけなりました。

しかしながらクロス処理だけに普通では撮れないいい写真も取れました。やはりトイカメラ＋クロスプロセス、いいね。

ということで続きはFlickrで。

http://www.flickr.com/photos/shoichimasuhara

Ubuntuの筐体交換

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Tue, 31 Mar 2009 10:10:00 +0000

ちとはまったのでメモ

UbuntuをVMに入れてCloneを作るとなぜかeth0が認識しない。Redhat系なら/etc/sysconfig/network-script/ifcfg-eth0にMACアドレスが書いてあって、それのせいだろうというのが定番過ぎるんだけど、そんなファイルもないし、でもどこかにMACアドレスが書いてあるんだろうなーと思ったらやっぱりそうだったみたい。

参考
http://d.hatena.ne.jp/shimonoakio/20080324/1206345084

とりあえず

/etc/udev/rules.d/70-persistent-net.rules

にMACアドレスが書いてあるからこれを消してリブートしろってことやね。筐体を交換もしくはNICの交換をする際はこのファイルをみるべし、と。

Javascriptで継承

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Thu, 12 Mar 2009 17:58:00 +0000

Javascriptで他の言語のクラスの継承っぽいものを考えてみた
たぶん車輪の発明だろうけど気にしない気にしない

Javascripにおけるクラス(っぽいやつ)のメンバには基本的にどこからでもアクセスできるpublicなものしかありません。privateなメンバを作るにはJavascriptではクロージャを使って隠蔽するというのが定石となっています。で、今回はクロージャを使って隠蔽したprivateなメンバごと継承できるかどうか考えてみました。とりあえず以下のコードを呼んでみてください

var originalClass = function(){
　　var originalPrivateVariable = 'This is a original class private variable';
　　return function(){
　　　　this.setOriginalPrivateVariable = function(x){
　　　　　　originalPrivateVariable = x;
　　　　};
　　　　this.getOriginalPrivateVariable = function(){
　　　　　　return originalPrivateVariable;
　　　　};
　　　　this.originalPublicVariable = 'This is a original class public variable';
　　};
};

var extendedClass = function(){
　　var extendedPrivateVariable = 'This is a extended class private variable';
　　return function(){
　　　　originalClass().apply(this);
　　　　this.setExtendedPrivateVariable = function(x){
　　　　　　extendedPrivateVariable = x;
　　　　};
　　　　this.getExtendedPrivateVariable = function(){
　　　　　　return extendedPrivateVariable;
　　　　};
　　　　this.ExtendedPublicVariable = 'This is a extended class public variable';
　　};
};

var object = new (extendedClass())();

originalClass が元のクラス、extendedClassがoriginalClassを継承したクラスです。ややこしいことになってますがこれで継承できます。もちろん継承には通常通り apply() を使っていますが、ちょっと特殊な書き方になってるのがわかるかと思います。

まずoriginalClassですがクロージャになっています。returnでラムダ関数が帰っているのでお分かりいただけると思います。クロージャですのでラムダ関数のラッパ関数(エンクロージャ)で宣言されている originalPrivateVariable も保持します。しかしここで originalClass = (function(){})() としてしまうとこの時点でのクロージャが返されてしまいますのでここでは実行しません。

そしてextendedClass。構造は1点を除きoriginalClassと同じです。違うのはreturnで返されるラムダ関数内の

originalClass().apply(this);

だけです。通常ですとapply()はhoge.apply(this)のように書きますが、applyされる時点でクロージャを形成する必要があるので一度originalClassを実行してから返されたものをapplyしているのでこのような形になります。

そして最後、インスタンスの生成。
これも上記と同じですね。生成時にクロージャを形成するので

var object = new (extendedClass())();

と言う形で書かなければならなくなります。

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

さて、とりあえずコードの解説をしてきましたが、たしかに上記コードではprivateなメンバ変数にはセッタ・ゲッタからのみしかアクセスできなくなってます。しかしながら注意しなければならないことがありまして、

継承元のprivateなメンバへは継承元で定義したセッタ・ゲッタからのみしかアクセスできない

という縛りがあります。すなわち拡張したクラスでprivateなメンバ変数へのセッタ・ゲッタを増設しようとかいうことはできません。お気づきかと思いますが

継承元で定義したprivateなメンバ関数は使えなくなります。

privateにしてもこれでは意味がないですね・・・というように問題が多く残され、しかも記述もややこしくなるだけなのであまり良いことはなさそうですねというオチ。普通に書いたほうがよさそうです。しょせんクロージャはクロージャでしかないということでしょうか。またいい案が浮かべばここに書きます。

JavascriptにおけるCallオブジェクトへのアクセス

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 09 Mar 2009 15:20:00 +0000

どうにかできんのか？

Activation オブジェクトは純粋に仕様のメカニズムである。 Activation オブジェクトへのアクセスは ECMAScript プログラムには不可能である。 Activation オブジェクトのメンバへのアクセスは可能だが、 Activation オブジェクト自身へのアクセスはできない。基準オブジェクトが Activation オブジェクトである Reference 値に呼出操作が適用されるとき、その呼出の this 値として null が使われる。

さいでっか。。。

HOLGAの現像が上がってきました

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 16 Feb 2009 01:32:00 +0000

先日購入したHOLGAですが、フィルム3本分現像があがってきたのでFlickrにアップロードしました。

僕の写真一覧へのリンクです↓
Flickr::shoichimasuhara's photostream

うちの猫、近所の神社、蒸気機関車の写真です。

購入したHOLGAがHOLGA120GCFN、前にはWOCAといわれていたガラスレンズタイプだったせいか結構普通な写りになりました。ケラレもほかの人の写真と比べると少なめです。
でも全体的なゆがみが出ていて魚眼レンズつけてるわけではないのですが少し魚眼のような効果が出ていました。絞りもシャッター速度調整もできないので日の光にかなり左右されますが、逆にそのおかげでいい風合いの写真が取れたりもしていましたｗ

今回の3本は Fujicolor PRO400 でしたが、現在は Kodak 400VC に変えてるので次の現像であがってくる写真はまた違ったものになるかもしれません。非常に楽しみですｗ

それはそうと、スメハチでおなじみの LOMO SMENA 8M も購入しましたｗ
HOLGAは120フィルムだけにでかいので自転車でもまだ軽く持ち運べる135フィルムのカメラを探していて、実は LOMO LC-A が欲しかったんですが案の定ヤフオクでも値段が高かったので同じLOMOつながりでスメハチを購入してみました。性格はぜんぜん別物らしいですがね。。。

現在スメハチで使ってるフィルムは Kodak E100VS です。リバーサルなのでこれをクロスプロセスで現像しようかとたくらみ中～はてさてどんな写真ができることやら

皆さんも興味をそそられたら、ひとつトイカメラを購入してみてはいかがでしょうか。

ちなみに Flickr に上げた写真は Canon MP980 で現像した写真を取り込みました。

Holga買っちまいました

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Thu, 22 Jan 2009 07:50:00 +0000

どうも、ものすごく筆不精になってる翔市です。皆様いかがお過ごしでしょうか。最近デジカメを探していたんですが、カメラ好きの会社の上司と「こんなんどうですかねー」「いやーそれはないやろ」なんて話をしていた折、「そうそう、ホルガってのがあるのよねー」という話になりまして

なんでも”トイカメラ”に分類されるこのカメラ、古いフィルムカメラらしいんですが、一種アンティーク写真のような感じの写真が取れるということらしいです。独特なケラレが発生するのが特長とか。

なんつーかこの手の代物には目が無いもので、しかもヤフオクで新品6800円ときたもんですから

ぽち

っと購入してしまいましたｗ
現在品物の到着待ちです。購入したのはHolga 120GCFNブラックです。プラスチックレンズの120CFNとかほかのでもよかったかもしれませんが、僕がチキンでプラスチックレンズが劣化しすぎるのを恐れてガラスレンズのGCFNにしました。

さーて、これからHolgaもって自転車の旅でも出ますかね。それどころではない気もしますが。とりあえず商品到着が待ち遠しいです。

ちょっとした小話

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Thu, 01 Jan 2009 09:05:00 +0000

某所からの抜粋（どこかは言わない
ちょっとした小話を3つほど

-----

A社にaさん、B社にbさんがいました
ある日それぞれの会社にある仕事が入りました
その仕事はそれぞれの会社でaさん、bさんしか出来ない仕事でした

　A社にて：　aさん「じゃあこの仕事は僕がやっておきますよ」
　B社にて：　bさん「じゃあz君、この仕事一緒にやってみようか」

その後、aさんbさん共にC社にヘッドハンティングされ会社を辞めました
そして後日、先ほどと同じ仕事がそれぞれの会社に入ったとき

　A社はその仕事を誰も出来ないことに気づいて破綻し、
　B社は誰もがその仕事を出来るようになってたので難なくこなしましたとさ

おしまい

-----

D社での会話

d課長「これに関してはこれ、これに関してはこれ、これに関してはこのファイルにメモを取るように」
社員「了解です」

社員「これはどのファイルにメモを取りましょう？」
d課長「ああ、これならあのファイルがいいんじゃないか？」
社員「ではこれは？」
d課長「これは新しくファイルをつくろう」

-- そして1年後 --

社員「これはどれにメモするんでしたっけ？」
d課長「うーんと、どれだったかな、わすれたなぁ」
d課長「そうだ、どれにメモするか、まとめたファイルを作ってくれ」
社員「それよりいいかげんファイルを1つにまとめないですか？」

-----

ある日の休日、eさんfさんそれぞれの家庭で夕食の準備の手伝いを、
二人とも珍しくやっていたときの会話

【 eさん宅】
eさん「あの皿はどこにあるんだい？」
e婦人「ここよー」
eさん「スプーンはどこだっけ？」
e婦人「ここよー」
eさん「あれ、あれはどこいった？？」
e婦人「もう、自分で探してよ、日ごろ全然手伝ってないからわかんないんでしょう」

【 fさん宅】
fさん「えーと皿がここだから･･･なるほどここか、準備できたよー」
f婦人「ありがとー早かったわね」

この違いはいったいなんなんでしょうね？といったところで

おわり、と。

-----

複数人で何かをする上で最も重要なこととは？

リニューアル

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 24 Nov 2008 11:02:00 +0000

なんとなくデザインを変えてみた。ただそれだけ。

ECMA-262 3rd仕様書の日本語版

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Wed, 10 Sep 2008 08:54:00 +0000

いまさらだけどリンク張っとく。ECMA-262 3rd Editionの仕様書の日本語訳。どっちかというと自分自身用。

【Under Translation of ECMA-262 3rd Edition】
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/

　

Javascriptのreplace

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Wed, 10 Sep 2008 03:50:00 +0000

Javascriptの文字列置換、replaceがちょっと奇妙だったのでメモ。
正規表現を使わない単純な文字の置換はJavascriptだとreplaceメソッド、PHPだとstr_rplaceとなります。例として
"This,is,a,pen."を"This is a pen."にしてみます。要するに","を" "へ置き換えるだけ。で、まずPHPで書いた場合は以下。
------
<?php
$msg = "This,is,a,pen.";
$result = str_replace(",", " ", $msg);
print $result;
?>
結果：This is a pen.
------
まぁそれがどうしたとしか言いようがないですが、このように書きます。同じノリでJavascriptで書いてみましょう
------
<script>
var msg = "This,is,a,pen.";
var result = msg.replace(","," ");
document.write(result);
</script>
結果：This is,a,pen.
------
PHPと同じようなノリで書くと、Javascriptだと1つ目しか置換されていないのがわかりますね。この辺がちょっと奇妙というかいまさらながら意外でした。では全部書き換えるにはどうすればいいかというと

var result = msg.replace(',',' ','g');

という風に第3引数に'g'を足せば全部置換されるようです。なんだろうこの裏技というか隠し技？たしかパターン文字列を正規表現オブジェクトにしなければ単なる文字列置換だったはずなのですが、なにやら正規表現チックですね・・・お前はsedかと。
------
<script>
var msg = "This,is,a,pen.";
var result = msg.replace(","," ","g");
document.write(result);
</script>
結果：This is a pen.
------
めでたしめでたし。

jQueryプラグイン::jquery.ajaxslt.jsの紹介

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 01 Sep 2008 05:29:00 +0000

シリーズ「WEBサイトの構造を考える」にしようかと思いましたが、今回は自作のプラグインの紹介及び「教えてエロい人！」的な内容なのでシリーズからはずしました。
さて、今回紹介するのは僕がぼちぼち作ってきたjQueryのプラグイン、jquery.ajaxslt.jsです。「もうすでに同じ機能のプラグインが***によって公開されてるよ？」とかあったとしてもそういうツッコミは無しです。この手のプラグインは乱立とかビビッてたら何も出来ないのでねー

あ、そうそう、とりあえず一言。

「jQuery本家サイトのデザインが変わりすぎててワロタｗｗｗｗｗ」

Be a Javascript ROCK STARってなんやねんｗｗｗｗｗ
あまりにも変わりすぎてて一瞬フィッシングサイトかと思ってしまったじゃないか・・・
それはさておき、プラグインの紹介紹介っと。

このプラグインの機能は
「XMLとXSLをAjax的に取得し、XSLTを適応してHTMLへ埋め込む」
という一連の動作を非常に容易にするというものです。なんか2005年くらいにググル先生がajaxsltパッケージみたいなの作ってたような気もするんですが、気にしない気にしない。

今のところ下記のようなインターフェースで構築しています。

$(#～).ajaxslt({
　xml : {
　　doc : xmlDocument,
　　method : methodType,
　　data : requestData
　},
　xsl : {
　　doc : xslDocument,
　　method : methodType,
　　data : requestData
　},
　option : {
　　asynchronous : asynchronousFlag,
　　onSuccess : onSuccessFunction,
　　onFailure : onFailureFunction,
　　onComplete : onCompleteFunction
　}
});

また、ドキュメントを前もって取得し、ストックする関数も用意しました
xmlDocument or Msxml2.FreeThreadedDOMDocument = jQuery.ajaxslt.stock({
　doctype : documentType,
　URL : documentURL,
　method : methodType,
　data : requiestData,
　asynchronous : asynchronousFlag
});

prototype.jsなどのパクリインターフェースなんですが、何がエレガントで何がダサいのか分からなくなってきたので、「これでいいのかな？？？」という状態です。
一応このまま上記仕様の説明をすると

■　$(#～).ajaxslt()

x[ms]lDocument	DocumentURL, XMLDocument	通常はドキュメントのロード先URLを記述します。ただし、ここでjQuery.ajaxslt.Stock()で生成したXMLDocumentをここで指定するとロードは行われずにメモリにストックされているドキュメントが適応されます。XSLファイルの使いまわしをする際はいちいちロードせずにストックしたドキュメントを使用するほうがよいでしょう。
methodType	get, post (default:get)	リクエストのタイプ
requestData	任意の文字列	GETパラメータまたはPOST時の送信データをセットします
asynchronousFlag	true, false (default:true)	非同期/同期のフラグ
on***	function	それぞれの状況で実行される関数を指定

■　jQuery.ajaxslt.stock()

documentType	xml, xsl	ロードするドキュメントのタイプ
documentURL	Document URL	ドキュメントのURL
methodType	get, post (default:get)	リクエストのタイプ
requestData	任意の文字列	GETパラメータまたはPOST時の送信データをセットします
asynchronousFlag	true, false (default:false)	非同期/同期のフラグ

こんな感じです。まぁありがちな仕様なのですが、今行き詰っている点は

インターフェースってこれでいいのか？
IEでXSLをPOSTで取得する方法がわからない

という2点です。XMLのGET,POST, XSLのGETだけのサポートならIE,FF,Opera,Safariで動作確認取れてるのですがねー

上記2点、教えてエロい人！

WEBサイトの構造を考える -その7-

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Mon, 01 Sep 2008 04:41:00 +0000

9月になりました。まだ暑い日が続いていますが、何とか生きています。翔市です。さて、8月は結局1個も記事を書かなかったのですが、今月はそれを避けるために早速シリーズ「WEBサイトの構造を考える」の第7回の記事を書いてみようと思います。前回までいったい何を書いてきたのかいよいよ忘れてきましたが、このシリーズの最終目標は「オーバーヘッドを極限まで減らすためにPHP等のサーバサイドスクリプトの使用を可能な限り避けてAjaxとXMLを駆使した高速なブログシステムを構築する」ということだったような気がします（ぉい

ここのところAjaxとXMLTを組み合わせたサイト構築を容易に出来るようにするためのjQueryライブラリの構築をしてきましたが、それがほぼ完成しました。このライブラリについては次に書く記事に任せるとして、このライブラリの完成によって全体像が見えてきました。

大まかな仕様は以下の通り

記事データの保存・管理はDBで行う
1記事1ファイルのgzipで圧縮されたXMLファイルとする
ファイル数の増大を防ぐため、ファイル数上限を設定し、ファイル数上限を超えた場合は古い記事のファイルから削除する
削除された古い記事をロードする場合はサーバサイドスクリプトを介してDBからXML形式で取得する
記事の投稿・編集を行うページはほぼ別アプリケーションとして構築する
JavascriptのフレームワークはjQueryを使用
サーバサイドスクリプトはPHPを使用、フレームワークはZend Frameworkを使用

といった感じを予定しています。ブログを表示したときの動作順序は以下の通り

index.htmlをロード
JSON形式でロードすべき記事リストをロード
JSONデータでXMLファイルが指定されていれば、該当するファイルをロード
JSONデータでDBが指定されていればサーバサイドスクリプトへリクエストを発行、ロード
ロードしたXMLデータをXSLTで整形し、順次index.htmlへインサート

となります。検索機能などをつけるなら、この順序の2番目のJSONデータを変化させるだけでOK。
注意すべき点はDBがXML形式でクエリの結果を返してもらわないと困るので、例えばMySQLを使用する場合だとMySQL5.1以降のバージョンを使用する必要があります。また、まだ解決していないのは"SEO対策"と"Ajaxとhistory"の問題。とくにhistoryの実装が面倒になりそうですね・・・

記事の投稿・編集を行うアプリケーションはFrameworkを用いた、ユーザ管理・認証機能つきの"ありがちな"アプリケーションになると思うので特に変わったことはありません。いちおう投稿時の順序を書くと

記事のPOSTを受ける
DBへ登録
XMLファイルを生成
ファイル上限を超えている場合は一番古いファイルを削除

となります。XML(キャッシュ)ファイルの生成が特徴的なくらい。あと、インターフェースレベルにおいての話ではこちらもAjax+XSLTを使った構造にしたいところです。どちらかというとこちらは動作の高速性能より、XSS、XSRF、その他HACK対策(いまさらながらSQLインジェクション対策も)のほうに工数を費やす形になると思います。

という感じに作るべき全体像がかなり見えてきました。
次の記事では今回作成したjQueryのAjaxsltライブラリの紹介をします。

closure を知らなかった件

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Wed, 23 Jul 2008 17:23:00 +0000

今日の今日まで closure の存在を知りませんでした。ゴメンナサイ。もしかしたら今まで書いたコードの中にバグがあったかもしれません。しかしながら、インスタンス変数でない限り、 function 内で宣言した変数なんてものは月下美人のごとく一夜限りの命かと思っていましたが、そんなことはないというのは非常に奇妙に感じます。

そんなこんなで closure を知らなかった僕のような人を出来るだけ減らすために今回は closure に関して説明をしてみます。

クロージャのサンプルコードを書いてみます
---
var hoge = function(){
　　var i = 0;
　　var foo = function(){
　　　　i++;
　　　　return i;
　　};
　　return foo;
};

var bar = hoge(); // (1)
alert(bar()); // 結果：1 (2)
alert(bar()); // 結果：2 (3)
alert(bar()); // 結果：3
---
まぁこんな感じでしょう。

・　(1) で hoge の結果が bar に入ります。
・　hoge の内部で return foo となってるので foo への関数ポインタが突っ込まれます。
・　なので bar() とやると foo() とやってるのと同じことになります。
・　i=0 で宣言されてるので (2) で 1 が返るのは当たり前。
・　でもね
・　(3) で i がさらにインクリメントされます！ (当たり前じゃーんとか言う人はスルーしてね

どういうことかというと (1) でbar に hoge() の結果が突っ込まれたときに foo が定義され、同時に i も定義されています。 foo 内の i はhoge のスコープでで定義されています。i の状態がbar()が終わっても保持されているということは、つまりは foo が foo の定義時の定義スコープを保持するわけです（やはり説明が難しいなこれ）。んで、この関数本体(foo)と定義スコープの対を「クロージャ(closure)」、ここでいう hoge を「エンクロージャ(enclosure)」と呼ぶそうです。

これって結構重要で、便利に使う方法を探すのは良いですけど、逆にバグの温床になりそうな悪寒がします。使い捨てだと思っていた関数内で宣言した変数が状態を保持するとなると、予期せぬ結果が返ったりするかもしれません。

いままでこんなこと知らなかったことにちと反省。しかしこれは奇妙だ。

objectdump.jsが便利すぎる件

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Wed, 23 Jul 2008 16:43:00 +0000

Javascriptを組むときの強い味方といえばFirebugですが、僕の場合、Firebugでエラー拾え切れないときはOperaやSafariのエラーコンソールを使っております。IEはIEのバグつぶしのみ使用。IEなんてブラウザ、さっさとなくなればいいのに・・・なんて話はおいといて、PHPを組むときはprint_rやvar_dumpが便利なのでそれを利用していたりします。ただこれらはJavascriptには用意されてないので、arrayやobjectをdumpする場合は別途関数を自前で作るかどこかから拾ってくる必要があります。

最近までウノウラボで公開されてるprint_r を使用していましたが、別サイトで objectdump.js なるものを発見し、使ってみたところこれがなかなか完成度が高く便利でした。

まぁやってることはおそらくどちらもほぼ同じなんでしょうけど（ソース読んでないから知らん。おそらく再帰関数でゴリゴリやってるだけだと思う） objectdump.js のほうが作り込みが激しく、なかなかいい感じです。

マイ糞ソフトのActiveXObject以外ならおそらくすべてdump出来るので、一度お試しあれ。特に自分の作ったWEBアプリのwindowオブジェクトをdumpすると意外な発見があるかもしれません。「え、それってそこにつながっ・・あー・・ね。」みたいな。単純な使い方は簡単で、リファレンスもリンク先にあるので使い方は割愛します。

WEBサイトの構造を考える -その6-

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sun, 20 Jul 2008 15:17:00 +0000

さて、第６回です。ちと音楽活動に専念していてなかなかこちらが更新できてませんが、がんばっていきます。

今回は、”その２”で「 --- 具体的いうと、入力フォームで記述された記事をJSON（の予定。他のフォーマットでも可）ファイルで書き出し --- 」ということを書いた件について。

この記事を書いた時点ではprototype.jsを使ってjsonでのサーバ・クライアント間のやり取りをメインにスクリプトを組んでいたため、こういうことを書きました。でもよく考えたら今回作るのはWEBサイトです。Jsonを使う目的はデータとデザインの分離。それって何かすでに用意されてなかったっけ？っと思ったら、XMLがあるじゃないか！という話になったわけです。AjaxならぬAjasonばっかりやってるとXMLの存在を忘れがちになってしまうのが問題ですね。

ということで現在XMLとXSLTをJavascriptを使ってAjax的に出来るライブラリを作成中です。物自体はjQueryのプラグイン・・・というかjQueryに依存したものになりそうです。
おおよそのところは完成(とりあえずの動作は出来た、後はエラー処理などの実装のみ)してるので、近日ソース公開と行きたいですね。

で、大まかなロジックは
・　XMLHttpRequest(jQueryを使用)でXMLとXSLを取得
・　JavascriptでのXSLTで生成したHTMLを任意のタグへ突っ込む
単純な話ですね。

普通のXSLTだとXML自体に書かれたXSLを読み込んで勝手にXSLTがあたるわけですが、Ajax的に操作を行う場合は自分でスクリプト上で当ててやらないといけない点が異なります。ただしおおよそブラウザのコンパイルされた機能を使うのでめちゃくちゃ高速です。PHPのSmartyなどのテンプレートエンジンよりはるかに速い。また、逆に自分でやれるだけに自由度が高まります。XML、XSL、CSSすべてあと取りさくさくなのでフレキシブルでダイナミックなサイトの構築が可能になりますね。

Javascriptで処理するだけにクライアントのリソースを多少消費しますが、高速なサイト作りで重要なのはサーバのリソースを出来るだけ使わないようにすることで、今日日のクライアントPCなんて一部の変態を除けばあまりまくってるんですから、どんどんクライアントのリソースを消費しちゃっていこうと思います（VM立ち上げてコンパイルしながらニコニコ見てるとかいう変態さんゴメンナサイ）

ちなみにMySQL5.1からはクエリの結果を直接XMLで出力できるそうなので、より高速なWEBインターフェイスを構築することが可能になるようです。また、amazonのようにXMLDBに乗り換えるというのもひとつの手かと。ただXMLDBは直接テキストファイル（XML）をいじる構造なのだと思うので、既存のDBと比べて書き込み性能がどれくらい落ちるのかが気になるところです。

1998年にw3cから勧告された割にはRSS以外ではWEBにはあまり用いられない（他の用途では結構使われている）XMLでありますが、いよいよWEBにも多用する時代が来たのかもしれません（ぇ、もうばりばり使ってるよ？って話があったらゴメンナサイ）

国尾衛のニコニコ動画アップロード情報

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Tue, 01 Jul 2008 03:37:00 +0000

「ショパン：：幻想即興曲」だそうで。あちこちミスってやがる。

&amp;lt;a href="http://www.nicovideo.jp/watch/sm3724932"&amp;gt;【ニコニコ動画】ショパン：：幻想即興曲&amp;lt;/a&amp;gt;

ふと思い出を書いてみる - その3

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Thu, 26 Jun 2008 19:20:00 +0000

2の続き。

■　3浪目（ニート2年目）
　この年が僕にとって一番飛躍の年になりました。3浪目になるともう大学はあきらめてて、就職のほうに方向転換をしていました。なので年度はじめからいろんな資格試験を受けまくるという、もう浪人生ではない行動をとってました。この年に受けた資格試験と結果が以下。

電気通信主任技術者第１種伝送交換主任技術者（データ通信） - 4科目中2科目合格
第２種電気主任技術者 - 4科目中1科目合格
工事担任者アナログデジタル総合種 - 3科目中2科目合格
テクニカルエンジニアネットワーク - 不合格

あれ？他にも受けたような気がするが・・・まぁいいや。ようは全部落ちました。資格受かったら就職しようと思っていたものの、これではムリで、さらに、いちおう受けた大学も落ちて、4浪目かと思いきや陸上自衛隊の一般曹候補学生に合格したので次の年は陸上自衛官となりました。
まぁそれはさておき、この年はこれらの資格試験を受ける際にした勉強がかなり多岐に渡り、特に電気通信主任技術者は試験範囲が広いだけに、この試験勉強を行うことによってIT・通信業界を大まかながら全体的に理解できるようになりました。高校時代からのJavascript,HTMLだけの知識もかなり豊富となり、そんなこんなしてるうちに、この年、Linuxと出会ったわけです。
Redhat9との出会い。そしてApacheとの出会い。なんて感動してるまもなく陸上自衛隊へ入隊・・・

■　陸上自衛官時代　（２年間）
　とくにPCはいじらず。大砲は実弾を２発、空砲を２発撃った。対迫・対砲レーダで勤務

■　もう一度ニート時代　（半年間）
　今度こそIT業界に就職すべく家鯖をいじり倒して勉強。PHP, MySQLに手を出す。そんなこんなで某IT系企業へ入社。

■　なんちゃってITエンジニア (今)
　つらつらと書いてきましたがこんなことが今までありました。いや、これは僕自身のための思い出しでした。んで最近あったことというと

いつの間にかJavascriptがAjaxという別名？見たいなのが付けられてナウい技術になってる
電気通信主任技術者（1伝送D）に合格
ここのブログを開設

くらいですかね。ほかはぜんぜん成長せず。まぁのらりくらりとやってます。

------

このブログをごらんの皆さんもふと思い出を書いてみるのはいかがでしょうか。

ふと思い出を書いてみる - その2

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sun, 15 Jun 2008 00:36:00 +0000

その1の続き。前の記事では結局いっさいPCやコンピュータについてでてきませんでしたが、まぁお暇な人だけでいいので付き合ってみてください。
さて、続きです。

■　小学校6年生 - PCとの出会い
　小６でやっとPCと出会います。近所のダイエーに展示用のＰＣが置いてあって、スクリーンセーバーのパスなどはかけておらず、誰でも遊ぶことが出来ました。おそらく時期的にＯＳはWindows3.1。これがPCとの初めての出会いですね。前の記事に書いていたように、TTLをいじくって7セグメントLEDを無意味に点灯させていた少年にとっては半田ごてや設計無しに、フレキシブルに、かつカラフルに動くPCがあまりにも魅力的で、面白く思えました。かといって当時のＰＣは40万円以上。たいして普及しておらず、インターネットも無い時代なので買ってもらえるものではありません。なのでそのダイエーに入りびたりになってましたｗ

■　中学1年生 - MSX-DOS・BASICとの出会い
　友人の親父さんがMSX-DOSマシンをもってはったので、それで友人とBASICを書いて遊ぶ。とくに高度なことはせず。

■　中学2年生 - PC購入
　記憶が曖昧ですが、たしかこの頃に当時30万円したPC(win95/Pen133MHz)を家に導入。親をだまくらかして買ってもらいました。おかげでその後しばらく家業の事務員扱い。PC版「音楽ツクール」が手に入ったので電子工作よりこっちのほうばかりやるようになっていきました。

■　中学3年生 - インターネット初接続
　兄が大学の情報学科へ進学し、大学をプロバイダとして使えばプロバイダ料金は無料という状況になったので初めてインターネットに接続。当時のサイトといえば静的なHTMLコンテンツのみで非常に手作り感満載のサイトしかありませんでした。学校の先生とメールのやり取りなんてのもやってみたり。技術の授業時間に学校のPC-9801で88basicを書いてよく遊んでました。

■　高校1年生 - BSDとの出会い
　兄の学校がUNIXを使っていたそうで、「家のＰＣにも導入するわー」とか言っておきながらインスコで失敗。というか、今思えばXが立ち上がってなくてCLIだっただけのところをインスコ失敗と誤解してパニクっただけ。HDDフォーマット⇒Windowsの新規インストールという最終手段で復旧。

俺の100を超えるMIDIファイル返せ。

その後BSDとは関わりを持たず。

■　高校1年～2年 - HTML、CSS、そしてJavascriptとの出会い
　たしか友人がホームページなるものを解説したのがきっかけだったと思いますが、それがHTMLとの出会いです。友人のページのデザインがしょぼくて、「もうちょっとマシなものが出来なのだろうか」ってなノリでHTMLの勉強を始めたんだったと思うのですが、その辺曖昧。当時まだCSSがそれほど使われてなかったように思いますが、HTML->CSSと勉強を進めるうちにDHTMLなるものにぶち当たります。「なんだ、この動くホームページは？」で、そのままJavascriptへ突入。たしかまだ第1次ブラウザ戦争の最中だったので、思い切り巻き込まれてしまう結果になりました。高校時代はそんなこんなでHTMLとJavascriptの勉強が主流となりました。あとMIDIの打ち込み（SC88-proを買ったよ）。

■　1浪目
　この年はいちおう大学入試の勉強してたんだよ？本当に。

■　2浪目（ニート1年目）
　この年の記憶が一切無い。タイムスリップしたんじゃなかろうか。

うーむ、3つに分けるか。

ふと思い出を書いてみる - その1

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sun, 15 Jun 2008 00:03:00 +0000

IT業界というだだっ広くていろんな種類の仕事のあるこの業界で働く人は、いろんな形でいろんな種類のIT技術と出会い、そして付き合ってきはったと思います。それは年齢やスキルの上達速度を含めて本当にさまざまなものがあり、結構な年齢になってから初めて一気に一流になった人や、若いころからやってて、なあなあになって中途半端になってる人も多いかとおもいます。

僕は後者のほうで、PCに出会ったのはかなり昔で、それからそこそこ年数が経っているにもかかわらず、ぜんぜんスキルアップしていないというグダグダな感じです。ただ、いままでの出会いにはそれぞれ思いでがあり、懐かしいものさえあります。そこで今回は原点回帰という意味もこめていままでいつ何に出会ったか、というのを書いてみようと思います。

■　小学4年生 - リレーとの出会い
　電池と豆球をつないだら光ったり、モータをつないだりしたら回るというのが好きだったようで、良くモーターをばらしてエナメル線をいっぱい巻く改造をして、巻きすぎて壊すという小学生にはありがちなあほなことを良くやってたころ、たまたま「リレー」に出会いました。
　リレーに関しては余り出会ったころの記憶がなくて、覚えてるのはリレーを使ってフリップフロップのようなものを作ろうとして失敗したということくらいですかね。とりあえず半田ごて使い出したのもこの頃。

■　小学5年生前半 - トランジスタとの出会い
　まぁどうでもいいものを分解しまくる日々を送ってたわけですが、そんなことしてると黒い変な三本足の物体に多分にもれず出会ってしまうわけです。たまたま知り合いの人で電子に詳しい人がいて、その人に聞いてそれがトランジスターであり信号増幅に使われるものだと知りました。これは結構記憶に残ってて、一種の感動のようなものを覚えました。その頃手元にあったのが2sc945と2sc1815。すべてはこの2sc945から始まったような気がします。当時のお小遣いだと４～５カ月分のトランジスタ規格表を取り寄せていろんな妄想（部品買う金がないからね）をしてました（脳内回路シミュレータ）

■　小学5年生後半 - TTLとの出会い
　算数しかやらない小学生にはアナログ回路の設計なんて難しすぎるわけです。ましてやバイアス回路や周波数特性の補正回路（負帰還など）を理解しようとしても無理。そんなこんなで電子回路って難しいなーと思ってた矢先にTTL(74**シリーズ)、要は論理回路と出会いました。AND,NOT,OR,NAND,NOR,XOR。それらを組み合わせて0と1だけを考えれば回路が出来る。本当にこれは衝撃的で、なんと単純明快で簡単なんだ！と思いました。ただオシレータを理解するのには苦労しましたがね･･･
この頃の学校の僕の机は論理回路の落書きで全部埋まってたような気がします。

長くなりそうなので２つにわけます。

jQuery

noreply@blogger.com (桝原翔市(マスハラショウイチ)) — Sun, 08 Jun 2008 05:30:00 +0000

どうも勢いがなくなるととたんに書くのを辞めてしまう翔市です。皆様いかがお過ごしでしょうか。で、最近思ったことをひとつ。

「jQueryが熱そうだ！！！」

以上。
なんかね、ずっとprototype.js使ってて、今までは特に困ったことはなかったんだけど、いろいろリファレンス見る限りjQueryすごくね？って感じがしたわけですよ。ちょっといろいろ調査してみて、よさそうならこちらに乗り換えようかと。あと勝手に思い込んでたのがライブラリが重過ぎるってこと。でも実際はそんなことはなかった。prototype.jsと非圧縮版のjqueryの差が約4kB。圧縮版だとたいぶ小さいようです。噂に聞いてたように、ホントにDOMの扱いがよさそうだ・・・

prototype.jsのネックはUnique URLsの扱いとDOMへのアクセスを自前でよしなにしないといけないってことですからねー（違ったりして