« 2007年11月 | メイン | 2008年1月 »

2007年12月 アーカイブ

2007年12月31日

2007年を振り返る その2

昨日に引き続き2007年後半を振り返ります。

今日は7月から12月まで。

7月

U.T. を Google ガジェット化

mash up award 3rd 用に作ったU.T.をガジェットにしたほうが面白いかもと思ってガジェット化してみました。これでiGoogleガジェットコンテストの賞をいただくことができたので嬉しかったですね。

 

8月

gihyo.jp で redMine の連載始まりました。

初めての外部サイトでの連載。連載後も、gihyo.jpのサイトでは「良く読まれている連載」としてランクインしていて、今でもたまにはてブされているので、良かったです。期間も短く、準備が大変でしたが、色々と勉強になりました。

 

9月

マッシュアップ・カフェ 第3回「ブログ検索」レポート

社外イベントで初のプレゼンターをやらせていただきました。アンケートの結果も良く、懇親会では楽しい話を聞くことができて、これまた勉強になりました。

 

10月

暇つぶしに JavaScript のライブラリを作ってみることにしました。

JavaScriptのライブラリ作成に手を出してみることに。最近はjQueryのプラグイン開発とかの方が良いかもと思ってます。

 

11月

iGoogle ガジェットコンテスト授賞式レポート

ガジェットコンテストで特別賞をいただくことに。mash up award 3rd がダメだったので半分あきらめていたんですが、なんとか拾っていただいたようで。講評を聞いてみると、僕が狙っていたところをちゃんと理解していただいたようで、それが嬉しかったですね。

 

12月

thinkITでバグ管理についての連載始まりました。

今年2つめの連載です。こちらは会社経由でお話があったもの。前回の連載とはまた性格がちがうものだったので、割に時間がかかりました(準備期間もちょっと短かったですしね)。

 

ということで、ざくっと1年振り返ってみました。受賞と連載と、エンジニアとしてレベルアップする機会をいただけたのがありがたかったです。

2008年もがんばりたいと思いますので、よろしくお願いいたします。

2007年12月30日

2007年を振り返る その1

年末なので、2007に書いたエントリの中で、各月1つずつエントリを選んで、一年を振り返りたいと思います。

今日は1月から6月まで。

1月

会社で勉強会を開催するときの色々

年初は会社で勉強会してました。SSLのこととか会社の先輩から聞けて、すげーためになりましたよ。

 

2月

Railsで作られたプロジェクト管理ツール"redMine"

はじめてはてブのホッテントリに入ったエントリです。オレンジニュースで配信されていたRedmineをちょっと調べて書いてみたら予想外に反応がありました。このおかげで、gihyo.jpのRedmine連載のお話が来たり。ちょうど仕事でTracを使っていたときで、Ruby on Rails も勉強しなきゃなーと思っていたタイミングだったので、色々タイミングが良かったです。

 

3月

mash up award 2nd の授賞式に行って来ました。

3月にはmash up award 2nd で受賞することができました。傾向と対策を練っていたので、ちょっとだけ自信はありましたが、過去そういうときは大抵ダメな場合が多いので、受賞の連絡があったときはほんとびっくりしました。また、この件がきっかけになって僕のmash up 熱が高まったことは言うまでもありません。

 

4月

Web3.0の姿

このときに、次にGoogleが攻めてくるのは翻訳の分野と予測していたことが、現実のことに。派手なニュースやプレスリリースにはなってないですが、Googleの翻訳って結構ちらほらと見かけるようになってます。Bloggerの記事の自動翻訳とかね。12月には、Google talkでリアルタイムチャットを翻訳することを始めたというニュースがあり、すごいなぁと感心しました。

 

5月

Google Developer Day 2007 に行ってきました。

Google Japan 初のオフラインイベント。終日楽しくお勉強させてもらった上に、美味しいお弁当や懇親会まで無料でいただき、さすがGoogle という感じのイベントでした。このイベントで、Google Gadget コンテストのことを知って、Gadgetの作り方もセッションで聞いて、家に帰ってすぐにガジェットやマップレットを作りました。色んなエネルギーをもらったイベントでした。

 

6月

mash up award 3rd 開催! そして「つくるぶ」公開!

mash up award 2nd で味をしめて、受賞者インタビューとか受けちゃったりして。でもって、mash up award 3rd へむけて意気込みを語ってますね。結果、受賞ならずでしたが、素材をもとにアプリの仕様を考えているときはほんと楽しかったです。

 

コンテストで賞をもらったり、はてブでホッテントリ入りしたり、オフラインイベントに参加したりと、これまでのエンジニア人生にはない刺激を受けた上半期でした。

ということで、後半は明日のエントリで。

2007年12月29日

MovableType4 へアップグレード

ブログをMovableType3からMovableType4へアップグレードしました。

以前もチャレンジしたんですが、ファイルのアップロードにとちって断念してました。

今回は、tarファイルをアップロード後、cronを使って tar の解凍を行いました(コンソールのログインが使えないレンタルサーバなのです)。

で、デザインもがつっと変えようと思ったんですが、MT3とMT4ではテンプレートの構造が変わっているらしく、時間がかかりそうだったので年末年始の課題にしようかと。

いっそWordpressに切り替えた方が良かったのかなぁ。

或いは、思い切ってブログエンジン自作するとか(ないない)。

2007年12月28日

IE6 で Redmine0.6 の右クリックコンテキストメニューのサブメニューを表示させる

Redmineのユーザグループに投げられた下記の問題。

 

IE6利用時に、Redmine0.6 の問題リストで右クリックしたときに表示されるコンテキストメニューのサブメニュー表示されない。

 

原因を探っていて、分かったことが色々あったので書いておきます。

 

・右クリックのコンテキストメニューの階層構造は、CSSで制御されている。

・li:hover という属性で、その下のulタグがdisplay:block;に切り替わる仕組み。

・でも、~IE6では、a タグ以外に :hover 属性が効かない

・そこで、Redmine では、csshover.htc を読み込んで、a タグ以外にも:hover が効くようにしている。

・でも出ない。

・コンテキストメニューは、右クリック時に、Ajax で動的に取得される

・csshover.htc の中にはjavascript が書いてあって、documentonready つまり、ドキュメントがすべて表示された段階で、parseStylesheets()という関数が実行されている。

・つまり、li:hover してほしいHTMLElementがページ表示時にページ内にいないので、読み込んでいるcsshover.htcがコンテキストメニューの部分に対して意味をなしていない。

・ということで、コンテキストメニューがサーバから取得され、ページ内に表示された段階で、parseStylesheets()を実行できれば良い。

 

で、対応方法は以下の通り。

 

/public/stylesheets/csshover.htc

の27行目(コメント行から下)すべてを

/public/javascripts/context_menu.js

の最終行より下に、コピー。

そして、同じ context_menu.js の 42行目にある


new Ajax.Updater({success:'context-menu'}, '../../issues/
context_menu/' + id, {asynchronous:true, evalScripts:true,
onComplete:function(request){Effect.Appear('context-menu', {duration:0.20});}})

 

を、


new Ajax.Updater({success:'context-menu'}, '../../issues/context_menu/' + id,
 {asynchronous:true, evalScripts:true,onComplete:function(request){
 Effect.Appear('context-menu', {duration: 0.20});
 parseStylesheets();
}})

に書き換えます。

 

ただし、この方法だと、コンテキストメニューが表示される毎にparseStylesheets()関数が実行されて、あまりいけてないです。


csshover.htcの中身は、CSSをチェックして、:hover と書いているところを探し、そのクラスが適用されているページ内のHTML Elementにonmouseover とonmouseout のイベントをattach しているだけ。

コンテキストメニューの構造は分かっているので、じゃあ、べた書きでイベントをattach するようにしたのが以下のソース。


new Ajax.Updater({success:'context-menu'}, '../../issues/context_menu/' + id, {asynchronous:true, evalScripts:true, onComplete:function(request){
  Effect.Appear('context-menu', {duration: 0.20});
  if(!navigator.userAgent.match(/MSIE/) || window.XMLHttpRequest) return;
  try{
    var uls = $('context-menu').getElementsByTagName('ul');
    uls[0].id = 'context-menu-base-ul';
    uls[1].id = 'context-menu-sub-ul_0';
    uls[2].id = 'context-menu-sub-ul_1';
    uls[3].id = 'context-menu-sub-ul_2';
    var lis = $('context-menu').getElementsByTagName('li');
    for(var i = 0,j = 0,len = lis.length;i<len;i++){
      if(lis[i].className.indexOf('folder') >= 0){
        lis[i].id = 'context-menu-folder_' + j;
        j++;
      }
    }
    var menuShow = function(event){
      var li = Event.findElement(event, 'li');
      li.style.zIndex='10';
      $('context-menu-sub-ul_'+li.id.split('_')[1]).style.display='block';
    }
    var menuHide = function(event){
      var li = Event.findElement(event, 'li');
      li.style.zIndex='0';
      $('context-menu-sub-ul_'+li.id.split('_')[1]).style.display='none';
    }
    $('context-menu-sub-ul_0','context-menu-sub-ul_1','context-menu-sub-ul_2','context-menu-folder_0','context-menu-folder_1','context-menu-folder_2').each(function(obj) {
      Event.observe(obj, "mouseover", menuShow, false);
    });
    $('context-menu-sub-ul_0','context-menu-sub-ul_1','context-menu-sub-ul_2','context-menu-folder_0','context-menu-folder_1','context-menu-folder_2').each(function(obj) {
      Event.observe(obj, "mouseout", menuHide, false);
    });
  }catch(e){
  }
}
});


べたべーたですが、これでIE6でも右クリックメニューのサブメニューが表示されるようになりました。


 

2007年12月27日

197Xsに参加してみたよ

gothedistanceさんのブログで「197Xsを作った件 - GoTheDistance」こんなエントリを見かけたので、衝動的に参加しちゃいました。

↓グループのページはこちら。
197Xs | Google グループ

最初のオフ会が2008.2.2に予定されていて、どうやら↓こちらのイベントと合同開催、というかトゥギャザーすることになるようです。

ホントにもうすぐ三十路のひとたち(1978-79)のオフ会 - mokanaの喜録@ついったー部【78-79オフ(2/2),一鶴オフ(1/26)募集中】 - はてなグループ::ついったー部

197Xsは1981sと雰囲気が違ってそう。SIerの人の割合多そうだし、話の内容も家族の話とか、あと中間管理職的な、コード書きたいけど会社的には管理の仕事が、みたいな話が聞けるんじゃないかなぁと勝手に推測してたりします。

1981sではエロトークで盛り上がったみたいですが、個人的にはそっち方面もいける口なので、そういう流れになっても良いかなぁ。

来年が楽しみです。

2007年12月26日

JavaScriptの多言語対応の方法についてぼんやり考えてみた

ぼんやりとJavaScriptでの多言語対応について。

実装方法は色々あって、メリット・デメリットがそれぞれあるので、思いつくままにさらさら書きます。

基本方針

メッセージ系は、定数としてオブジェクトにまとめておきます。

var messages = {};
message.loading = 'ロード中';
message.error = 'エラーが発生しました。';

小文字だと分かりづらかったら、大文字にしておくというのも手。

var M = {};
M.LOADING = 'ロード中';
M.ERROR = 'エラーが発生しました。';

で、使うときに、

alert(messages.error);

こんな感じで使います。

で、この messages オブジェクトに、どうやってそのときの言語を設定するのかという話。

1.サーバ側(動的に生成されるページのロジック)でメッセージを管理

サーバ側で、DBや或いは設定ファイル(Railsならymlとかかな)に、多言語の情報を保持しておきます。
ページを表示したときに、ページ中のscriptタグで messages オブジェクトを作ってやります。

<script>
  var messages = {};
  message.loading = 'ロード中';
  message.error = 'エラーが発生しました。';
</script>

英語だったら、

<script>
  var messages = {};
  message.loading = 'now loading';
  message.error = 'error was occuerd';
</script>

こんな感じで。そのときの言語を判断するのは、サーバ側で保持しているユーザ情報の言語設定とか、或いはGETパラメータで渡された値とか。

或いは、上記メッセージが書いてある言語別語とのjsファイルを用意しておいて、動的に読み込み先を変えるという手もあります。
↓フォルダ毎に管理しておくとか。
<script type="text/javascript" src="/messages/ja/message.js" />

↓ファイル名で管理するとか。
<script type="text/javascript" src="/messages/ja.js" />

2.JavaScript でメッセージを管理

メッセージオブジェクトに一つ階層を持たせて、

var messages = {};
messages.ja = {};
messages.en = {};

それぞれの言語のところにメッセージを詰め込んでいくと。
で、使うときに、

var useMessages = messages['ja'];
こんな感じで使ってみるとか。

fastladderのjs を見てたら、↓こういう分岐でメッセージをセットし分けてた。

if(typeof Language != "undefined" && Language == 'English'){
}else{
}

script.aculo.us のロードと同じように、GETパラメータでjsに値を渡してやったりとか。

<script type="text/javascript" src="hoge.js?lang=ja" />

みたいな感じで読み込むようにして、

hoge.js のソース中で、
var LANGUAGE = 'en';//デフォルト設定
var s = document.getElementsByTagName('script');
for(var i =0,len = s.length;i<len;i++){
  if(s[i].src.indexOf('hoge.js?') > 0){
    var tmp = s[i].src.splite(?)[1].splite('&');
    for(var j = 0,leng = tmp.length;j<leng;j++){
      var tmp2 = tmp[j].splite('=');
      if(tmp2.length == 2 && tmp2[0] == 'lang') LANGUAGE = tmp2[1];
    }
  }
}
var useMessages = messages[LANGUAGE];

こんな感じで取り出してやります。

続・Gmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ 」で作ったbookmarkletは、この方法で、英語と日本語のメッセージを出し分けてます。
bookmarkletを多言語対応させたいときとか、多言語分jsファイルを作るよりも、この方法が良いかも。

或いは、上記方法で取得したGETパラメータのlang の値を使って、

var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = '/messages/'+LANGUAGE + '.js';
とかやって、メッセージのファイルを動的に読み込んでも良いんじゃないかな。
1.の最後に書いている方法を、javascriptでやる方法ですね。
この場合、メッセージのファイルがロードされるまで、そこにアクセスしようとするとエラーになっちゃうから、ちょっと工夫が必要ですが。

こうやって多言語対応を意識して作っておくと、メッセージがソース中に散らばっちゃうこともなく、文言修正とかのメンテナンスも楽になります。



2007年12月25日

Think IT 連載第4回「バグ管理で陥りやすいワナ」公開

Think IT で連載している「バグ管理のノウハウ」の第4回が公開されました。

第4回:バグ管理で陥りやすいワナ

今回の内容は、バグ管理で陥りやすいシチュエーションについて書いています。

書いていることは、結構あちこちの現場で起きていることだと思うんですが、どうでしょうか。

メール、コメント等でフィードバックいただけると嬉しいです。

【バグ管理の作法】バグ管理のノウハウ
第1回:バグはなくならない?
第2回:紙か? Wordか? Excelか? BTSか?
第3回:バグの優先順位はこう付けろ!
第4回:バグ管理で陥りやすいワナ
※第2回目以降が僕の担当です。


普段、「プロジェクト管理」「テスト管理」という切り口で考えることはありましたが、「バグ管理」という切り口で考えることはなかったので、良い経験になりました。

2007年12月24日

AIRについて最近知ったこと

ちょっと前に、会社にAdobeの人が来て、デモとか技術的な解説とかしてくれました。

で、そのとき知ったこと、思ったことのメモ。

・Flash と Flex の違い
→開発環境の違い。Flash はタイムラインにライブラリから表示するものを乗せていく作り方で、Flexは描画するものをmxmlで記述する(かなりざっくり言うとだけど)。できあがるものは両方とも.swfファイル。ただし、Flexでしか利用できない機能があるらしい。
※この辺を分かりにくくしているのは、Adobe / Macromedia のネーミングセンスが悪いからだと、個人的に思ってます。

・AIRアプリケーションには、AIR(実行環境)のインストールモジュールも含めることができる。
→なので、AIRがインストールされていない人がAIRアプリをインストールするときに、わざわざ別にAIRをインストールする必要がない。

・「ブラウザの制約を受けたくない」「ローカルのファイルにアクセスしたい」ってときだけ、FlashのAIR化を検討すれば良いかも。

・AIRのHTML エンジンはSafariで使われているものと同じ。

・AIR で使われるFlash Player のバージョンは、当面、通常のFlash Player のリリースの後追いになる(けど、いづれは同期をとる予定だとか)。

・AIR の売りの一つは、Web系のシステムを作ってきた人で、VBとかの知識がなくてもデスクトップアプリを作れる点。

2007年12月23日

Google マイマップ EXPO

Google がGoogle Maps のマイマップのコンテストを開催しています。

Google マイマップ EXPO

街でお気に入りの場所。自分しか知らない場所。街で見つけた面白いもの。地元自慢。自分だけの、日本にひとつしかないオリジナルの地図を作って、みんなに見せよう。 参加作品の中から、ベストマイマップ優秀賞 10 作品と、さらにその中から、最優秀賞を選びます。ベストマイマップの作成者には、記念トロフィーを贈呈します。さあ、マイマップ EXPO に今すぐ参加を!

ゲストマイマップってところに押切もえのマイマップが。どういう層にアピールしたいんでしょうか・・・。

マイマップはGoogle Maps 上で簡単に作れるので、僕も何か作って応募してみようかな。

2007年12月22日

Redmine の wiki 編集画面を auto preview にする

Redmineのwikiのプレビューが、幸いなことにAjaxを利用してプレビュー部分を書き出していたので、それをうまくHackして、書いていると自動的にプレビューが生成されるようにしてみます。

方法は以下の通り。

1. custom_wiki_preview.js というファイルを /public/javascripts 以下に作成する。

2. custom_wiki_preview.js の中に以下の内容を記述する。

var preveiwTimerId;
var previewFunc = function(){
new Ajax.Updater('preview', '/wiki/1/Docs/preview',
{asynchronous:true, evalScripts:true, method:'post',
onComplete:function(request){
Element.setStyle($('content_text'),{'width':'50%'});
Element.setStyle($('preview'),
{'position':'absolute','width':'48%','top':'146px','right':'10px'});
}, parameters:Form.serialize('wiki_form')});
return false;
}
var previewTimerFunc = function(){
clearTimeout(preveiwTimerId);
preveiwTimerId = setTimeout(previewFunc,1000);

}
Event.observe('content_text', 'keyup', previewTimerFunc, false);


3. /app/views/wiki/edit.rhtml に以下の記述を追記する。

<script type="text/javascript" src="/javascripts/custom_wiki_preview.js"></script>


これでOKです。

wikiの編集画面で、編集エリアに何か入力を加え、1秒待つと↓このように、画面右側にプレビューが表示されるようになります(デフォルトでは画面下に表示される)。

redmine_auto_wiki_preview.png


上記JavaScriptの内容は、編集欄のKeyupイベントを監視して、イベント発生毎にpreviewTimerFunc()を実行します。
previewTimerFunc() の中では、previewFuncを1秒後に実行するようにタイマーをセットしています。ここで、前のタイマーIDをクリアしているので、連続してキーが入力されたときは、previewFuncが実行されずサーバに負担をかけにくいようにしています。

3のステップで、rhtmlをいじっちゃってますが、これがやだなーって人は、2で作ったjsファイルをページにappendするbookmarkletを作っても良いですし、FireFox限定でよければGreasemonkeyスクリプトを作るという方法もあります。

2007年12月21日

× はてブガジェット 2つ追加 --- はてなセリフ & amazon.co.jp

昨日のエントリで「はてなハイク × はてブ iGoogle ガジェット」を公開しましたが、同じノリでガジェットを2つ追加しました。

↓はセリ × はてブのガジェットです。


はてなセリフも、はてなハイク同様の性質を持っているので、はセリ好きな人には良い感じのガジェットなんじゃないかと思います。


もう一つは、↓amazon.co.jp × はてブのガジェットです。

amazon.co.jpのページではてブされたページを見ることができます。

新着のタブが結構おもしろいです。

こっちはアフィリエイトID入ってるので、そういうのちょっとって人はスルーしてください。

2007年12月20日

はてなハイク × はてブ iGoogle ガジェット作った

はてなの新サービス「はてなハイク」が個人的にかなりヒットしていて、「エンジニアがやたら使う言葉 - はてなハイク」とか更新を楽しみにしてたりします。

でも、ログが早くて、なかなかおもしろいところに出会えなかったり。まあ、「Keywords - はてなハイク」のページから見たら良いんですけどね。

で、ふと「おもしろいページははてブされてるんじゃないか」とか思って見てみたら、やっぱりそこそこの人たちがぶくましていて。

じゃあそれを見るガジェットでも作ろうかなと思ったわけです。

↓で、とりあえずこんな感じで作ってみましたよ。

まあ、ちょいちょいいじるんで、ブクマボタンとかできるかもしれませんが、取り急ぎ公開することに。

よろしければ左下の追加ボタンからiGoogle へ追加してやってください。

2007年12月19日

jQuery plugin --- selectbox-utils 0.1.1 Release

日付のセレクトプルダウンを動的に作る jQuery plugin を作った」でリリースした、数値のoptionタグを動的に生成するプラグインですが、Opera でバグがあったので修正しました。

バグの内容は、Optionタグを動的に生成した後、下記コードで選択されている箇所を指定すると、

this.selectedIndex = settings.selectedIndex;

以下の図ような状態になってしまうというもの。

opera_option.png

以下のOperaのフォーラムで指摘されているとおり、

OperaでのJavascriptで、おかしい所がある - 日本語 - 日本語

Operaの場合だけ、下記のコードで指定するようにしました。

this.options[settings.selectedIndex].defaultSelected = true;

Operaかどうかの判定は、jQueryの下記変数を利用しています。

jQuery.browser.opera

確認は以下のページで。

jQuery plugin --- selectbox-utils Demo page

ダウンロードは以下からどうぞ。

jquery.selectboxutils-0.1.1.js

2007年12月18日

Think IT 連載第3回「バグの優先順位はこう付けろ!」公開

Think IT で連載している「バグ管理のノウハウ」の第3回が公開されました。

第3回:バグの優先順位はこう付けろ!

今回の内容は、バグの優先順位の付け方について書いています。

バグの優先順位って、下手するとリーダの気分次第ってことになりかねない部分があるので、論理的・合理的な判断の手助けになれば幸いです。

メール、コメント等でフィードバックいただけると嬉しいです。

【バグ管理の作法】バグ管理のノウハウ
第1回:バグはなくならない?
第2回:紙か? Wordか? Excelか? BTSか?
第3回:バグの優先順位はこう付けろ!
※第2回目以降が僕の担当です。

次回第4回で最終回。公開は12/25です。クリスマスか。今年ももう終わりですね。

2007年12月17日

SE出世双六

ITSSに基づいたSEのキャリアアップを疑似体験できる双六だって。

SE出世双六--ITSSに基づいたキャリアアップでSEの仕事を疑似体験:ニュース - CNET Japan

SE出世双六は、学生などがSEという職業に少しでも興味や親近感を持ち、技術者の育成につながることを目的としたもの。新入社員(「ITスペシャリスト」のレベル1)から始まり、「初めてのリリース」「資格取得」などSEが社会人生活の中で体験するさまざまなイベントを体験していく。

SE版人生ゲームみたいなものかな。

ゲームが進む中で、「ITアーキテクト」「プロジェクトマネジメント」など職種を選択しながら、ITSSのレベルを上げてゴールを目指す。マスのイベントには、日立システム社員から募集したイベントも掲載されている。また、ITSSについて説明した解説書も同梱される。

発想はおもしろいなぁ。買ってみようかなぁ。やる人だれかいますか?

個人的には、人生ゲームで言うところの「サラリーマン」か「自営(独立とかプロスポーツ選手とか、芸術家とか」か的な選択のところで、大手企業か、ベンチャーか、独立か、とか選択肢を入れて欲しいな。

あとは、こんなマスあったら嬉しいな、ってので。

「ブログに会社の悪口書いたら上司に見つかり、厳重注意(2マス戻る)」

「社外の勉強会に参加してステップアップ(3マス進む)」

「ブログのエントリーがはてブのホッテントリに入る(2マス進む)」

「winny で情報流出(5マス戻る)」


・・・あ、ITSSと全然関係なくなってるわ。


↓興味がある方は、こちらから購入できるそうです。

SE出世双六 2個セット:SEshop.com/商品詳細

2007年12月16日

国内SIベンダーの強みを力説?

今度は住商情報システムさんですか。

【IT Service Forum 2007】「摺り合わせ文化など日本には日本の良さがある」,国内SIベンダーの強みを力説:ITpro
Matzにっき(2007-12-10)

講演後半の日経BP社田中克己主任編集委員との対談では,「システム開発において日本のSIベンダーはインドのSEと戦えるのか」という問いに対して「(顧客企業の業務ノウハウに強いなど)日本独自の世界でなら,日本がインドに負けるわけがない」と断言。「シリコン・バレーと同じことをしていたら,日本は他国に勝てるわけがない。逆に,日本独自の世界でなら,他国に負けるわけがない」とした。

ほんと? 本当にそう思ってます?

「日本独自の世界でなら」って前提が、そもそもおかしくないっすか?逆に言うと、「日本独自の世界じゃなくなったら、日本がインドや他国に負けることもあり得る」って言ってるわけで。昨今の問題はその日本的な世界がなくなるんじゃないの?ってところに焦点があるんじゃないかなぁ。

あと、SIer とかは「オフショア」言うて、他国のSEやプログラマに日本の仕事をやらせようとしてるわけで。なんかそういうことすることで、自ら墓穴を掘っていることに気が付かないのかなぁ。

2007年12月15日

jQuery で select タグの option タグを増減させるときの注意点

昨日のエントリ「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」で、select タグに対してoptionタグを削除したり、追加したりしたんですが、その中でちょっとだけはまったことをメモ。

option タグを select タグに append するとき、最初↓こんな風に書いてました。

this.append('<option value="1">1</option>');

this はselect のjQueryオブジェクトです。上記のappendをfor文でぐるぐる回す感じ。

で、

<select id="year"></select>
<select id="month"></select>
<select id="date"></select>

↑こういうoptionがないタグに対して、ページ表示時に、

$(function(){
$('#year').numericOptions({from:2007,to:2011});
$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
$('#date').numericOptions({valuePadding:2});
});

こんな感じで実行してやると、IE のときに、年と日のプルダウンの横幅が正常に表示されないんですね。

というわけで、↓Option オブジェクトを new して、options のオブジェクトに入れる形にしました。

this.options[j] = new Option(padfunc(i,settings.namePadding),padfunc(i,settings.valuePadding));
//padfung は0詰め用の関数

IE6には、select タグに optionタグを innerHTMLで差し込むことが出来なって言う地味なバグがあるので(BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。)、そこはjQueryのオブジェクトに頼らない方が良いのかなと。もしかしたらOptionタグを設定するメソッドを僕がしらないだけかもしれませんが。


ついでに、IEのDOM に関連するバグで、table を動的にcreateElement してappend する場合、TBODY タグがないと表示されないってバグがあるんですが、これはjQueryは上手くクロスブラウズ対応してくれています。

$('body').append('<table><tr><td>a</td></tr></table>');

↑このコードで生成されるHTMLは、ちゃんと

<table><tbody><tr><td>a</td></tr></tbody></table>

になってるんですね。

2007年12月14日

日付のセレクトプルダウンを動的に作る jQuery plugin を作った

jQueryのお勉強に、ってことでプラグインを作ってみました。

参考にしたのは↓こちらの記事。

jQuery のプラグインを作成する : ブログの新着記事を表示:Goodpic

(function() { $.fn.myplugin = function(config){ config = jQuery.extend({ value1: "Default value 1", value2: "Default value 2" },config);

var target = this;
target.append("Hello jQuery Plugin !
"
+ config.value1 + "
" + config.value2);
};
})(jQuery);

↑こんな感じで、$.fn のプロパティとして関数を作成してやればOK。簡単。

注意点は、関数名を他のプラグインと被らないようにするってことと、メソッドチェーンしても良い関数のときには、最後に return this するのを忘れないようにするってことかな。

で、作ったのが↓以下の2本。

・jquery.numericoption.js
・jquery.datepulldown.js
(2007.12.16 追記)
結局1本にまとめました。
jquery-selectbox-utils-0.1.0.js
(2007.12.16 追記 ここまで)

numericoption.js の方は、

$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});

↑こんな風にして、使って、1から12までのオプションタグをappend するってプラグインです。

config の値として渡せるのは、以下のもの。

remove : 既存のoption タグを削除するかどうか。default は true
from : 開始の値。default は 1
to : 終了の値。default は 31
selectedIndex : 生成後に選択済みにしておくオプションタグの index。default は 0
valuePadding : value 値の左0詰め桁数。default は 0
namePadding : name 値の左0詰め桁数。default は 0

動的にオプションタグの値を変えたいときに地味に便利です。

でもって、それを利用しているのが、datepulldown.jsの方。

$('#date1').datePulldown({year:$('#year1'),month:$('#month1')});

↑こんな感じで使います。

これで、year と month に指定した値が変わったときに、指定したタグの下にその年月に応じた日数のプルダウンを生成します。

デモ見てもらった方が早いと思うので、↓デモページをどうぞ。一番下の奴です。

jQuery plugin --- selectbox-utils Demo page

コードはいつものようにGoogle code でホスティングしてます。

jquery-selectbox-utils - Google Code

2007年12月13日

プルダウンについてちょっとだけ考える

IE6 以前のブラウザだと、select プルダウンエリアが常にページのトップレイヤに表示されてしまうというバグ(仕様?)があります。

ページ内にDivタグとかをフロートウィンドウっぽく表示させたり、ドラッグオブジェクトを作ったりすると、結構やっかいなことに。

それを回避する方法として、以下の3つが挙げられます。

1.select のスタイルを display:none にする。

重なっているときは、見えなくすれば良いってことで、こういう対応がまあベタですね。
ただ、フロートウィンドウを select ボックスがあるページ内でドラッグさせたいときは、一々ウィンドウの位置とselect の位置を判定して、表示/非表示を切り替えることを考えねばならず、あまり現実てきじゃないです。

2.iframe を使う

HTMLElement の中で例外的にiframe だけは select ボックスの上に表示することができます。
ということで、ブラウザがIE6以前のときのみ、select の上に表示するオブジェクトの下にiframe を入れて、src は javascript:false style に filter : 'alpha(opacity=0)' を指定してやればOK。
jQuery プラグインの datepicker や YUI のカレンダーなど、ページ内でドラッグさせる可能性があるものについては、そういう対応がしてあります。

3.select を使わずプルダウンを自作する

select じゃなくてそれっぽく見えるモノを作っちゃう系の対応です。
Select Box replacement
jQuery Select box
↑こんな感じかな。
クロスブラウザ対応がめんどくさそうですが、上手く使うと面白いU/Iになったりします。
Google Reader の上方にあるのも、その一例ですね。

↓こんな感じでプルダウンの中に文字を入力できるようになっています。
071213_01.png

↓「i」と入力すると、候補がリストに。
071213_02.png

form に関連するものを自分で作り込んでいくのは、submit処理やライブラリの利用に影響が出そうですが、インターフェースを考える上で、その部分をちょっと検討するのも悪くないんじゃないかと思います。

2007年12月12日

jQueryのパフォーマンスについて --- id アクセスとclass アクセス

最近、jQueryを利用して書かれたソースのパフォーマンスチェックをしていて、jQueryのソースも見つつ色々と分かってきました。

jQueryのパフォーマンス最適化に関するTips

で、↑このエントリで話題になっている

  • class指定だとid指定より遅くなる。
  • $('div#hoge') と $('#hoge') では、$('#hoge')の方が早い。

という2点について、その理由を解説します。

・class指定だとid指定より遅くなる。

javascript にはdocument.getElementById() という関数はありますが、class指定でHTMLElementを取得するメソッドは存在しません。

なので、class名で取得しようとした場合、検索対象のHTMLElementを総なめしてclass名をチェックする必要があります。

検索対象が多ければ多いほど当然遅くなっちゃいます。

・$('div#hoge') と $('#hoge') では、$('#hoge')の方が早い。

これは上記に関連するのですが、jQueryのソースを見ると、$('div#hoge') は document.getElementById()で値を取得するのではなく、まずdocument.getElementsByTagNames で検索対象のHTMLElementを取得して、それをfor文でまわして id 属性を文字列比較しています。

同じように、$('div.hoge') も 、class 属性を文字列比較して取得しています。

結論

  • 可能な限り$('#id') でid属性を指定して使おう。
  • class指定を使うときは対象を絞り込んでから。
  • $('tagName#id') と $('.class') はダメ。絶対。

余談

結論として$('tagName#id') は使っちゃダメって話なんですが、$('div.hoge') とどっちが早いのか。

僕の環境では $('tagName#id') の方が早かったです。

ソースを見ると、id はhtml中で一意ということで、for文でチェックしつつ見つかったら breakでfor文を抜けていますが、classの場合全部チェックしないといけないので、その分の差かもしれません。

あと、class は class = "hoge moge" のようにスペース区切りで複数指定できるので、jQueryのソースでは指定したclass名の前後に半角スペースを付け、チェック対象のHTMLElementのclassName 属性値の前後にも同様に半角スペースを付けて、indexOf でチェックしています。

↓$('tagname#id')で id でチェックしているところ

var tmp=[];
for(var i=0;r[i];i++)
  if(r[i].getAttribute("id")==m[2]){
    tmp=[r[i]];
    break;
  }
r=tmp;

↓$('tagname.class')で class名 でチェックしているところ

// r がチェック対象のオブジェクト、mがチェックするclass名、
// not がbool値でtrue:mのclass名が該当しないものをリターン,false:mのclass名が該当するものをリターン
classFilter:function(r,m,not){
  m=" "+m+" ";
  var tmp=[];
  for(var i=0;r[i];i++){
   var pass=(" "+r[i].className+" ").indexOf(m)>=0;
   if(!not&&pass||not&&!pass)tmp.push(r[i]);
  }
  return tmp;
}

この辺の泥臭い処理もベンチマークの結果に効いてくるのかもしれません。

にしても、jQueryおもしろい。なんか書いていて楽しくなりますね。

2007年12月11日

thinkITでバグ管理についての連載始まりました。

thinkITの今月の特集が「バグ管理の作法」なんですが、その中の「バグ管理のノウハウ」というコーナーで連載することになりました。

全4回で、僕の担当は第2回~第4回。

本日、第2回が公開されました。

[Think IT] 第2回:紙か? Wordか? Excelか? BTSか?

バグ管理の基本のキについて書いたつもりです。

第3回では、バグ修正の優先順位の付け方について、第4回では、実際に遭遇したバグについて書くことになっています。

メール、コメント等でフィードバックいただけると嬉しいです。

文体が「だ・である調」なのは、第1回目がこの文体で書かれており、それに合わせる形となったためです。なんかキャラと合ってませんが、そこはスルーしてください。

2007年12月10日

Google で「頻度」を検索すると・・・

ちょっと調べモノをしていてGoogle で「頻度」を検索したら、↓こんな結果に。

071210_02.png

「セックスの頻度はどのくらい?」ってページが1位になるなんて、ちょっとびっくり。

もしかして「パーソナライズ」検索だから、僕の趣味嗜好を見抜いてるの?なんて思っちゃって、思わず周りの人にも検索してもらいましたよ。

僕もログアウトして検索してみましたが、やっぱり同じでした。

やっぱみんな興味あるんでしょうかね。

頻度 - Google 検索

面白いのは、同じログイン状態でも、IEとFireFoxでは検索結果順が違うってこと。

071210_01.png

各ブラウザのユーザ属性とか観ているのかなぁ。

それとも単純に異なるサーバの静的な検索結果にヒットしているだけなのか。

ちなみに、普段利用しているIEで、ログイン状態で検索するとGIGAZINEが2位に出てくるんですが、ログアウトすると順位が変わるんですよね。これは、僕が良くGIGAZINEを見ているから順位を上げてくれてるのかな。

この辺のロジック面白いですね。

2007年12月 9日

Rails 2.0 Release

Rails の version2.0がリリースされたようですね。

Ruby on Rails

Ruby on Rails 2.0 ついにリリース : メディアテクノロジーラボ ブログ

うーん。1.X系の勉強があんまりできなかったなぁ。本結構たくさん買ったのに。


2.0については、↓このブログエントリに書いてあるみたいなので、時間を見つけて読んでみようかな。

Riding Rails: Rails 2.0: It's done!

2007年12月 8日

twitterの忘年会楽しそうだねぇ

Twitter のオフ会の様子を、ustream.tvで見てて(リンク1 / リンク2 ※中継サイトだからリンクはるのあんまり意味ないけど)、なんかすげーなぁと。みんな楽しそうだしね。twitter あんまり活用してないけど、参加すれば良かったかな。

こういう忘年会イベントを、ネットでつながった100人以上の人が集まって、そんでもってそれをネットで100人以上が見ているって状況が面白いです。

Shibuya.jsがこないだの勉強会イベントを生中継していたけど、今後こういうスタイルが主流になっていくのかなぁ。

学生向けの会社説明会とかもustreamで中継したらおもしろいのにね。ネット系の会社はもうやってるところあるのかも。

受験生に悩む大学とかは、学生の一日の様子とか、研究室の様子をこういう仕組みを使って宣伝すれば、安くで意外と効果高い宣伝できるんじゃないかな。


来年はこういうオフ会関連に積極的に参加してみたいな。でも2人目が産まれるから、そんな暇ないか。

2007年12月 7日

東京じゃないところでSEのお仕事

僕も、出身は鹿児島だし、大学は大阪で、妻の実家も兵庫県ってことで、ずっと東京に住みたいと思っているわけじゃないです。

SEの仕事って、東京にしかないもんだよね?/Tech総研

この記事のように、確かに地方でもIT需要が高まって、東京より逆に就職口があったりするのかなぁとか思うのですが、やっぱり中心は東京という気持ちもあったり。

ネットのオフ会とかも都心の方が盛り上がっているみたいですしね(当たり前か)。

子供のこととか考えると、東京じゃないところに住んだ方が良いんだろうなぁ。

いっそ海外か?とか血迷ったりもしますが、言語の壁がね。

東京じゃないところでSEじゃないお仕事、という選択肢もあるんだよなぁ、そういえば。そういうのも一度検討した方が視野が広がって良いのかもね。

2007年12月 6日

H.264 超すげぇ。

最新版のFlash Player で H.264エンコードがサポートされ、HD画質の動画が見られるようになったということで早速見てみました。

↓こちらのCodeZineの記事を参考に。

CodeZine:H.264やばい、マジやばい。Adobeサイトで動画を見られるから今すぐ見て!(Flash)

CodeZine の記事タイトルが興奮度合いを表してますが、その気持ち分かります。

この画質超すごいっす。

このレベルの動画が手軽に見られるってのは、ほんとすごいですねぇ。

最近は民生品のビデオカメラでハイビジョンタイプのカメラが売れている見たいですし、YouTubeあたりがHD画質動画をサポートし始めたら、素人投稿ビデオがもっと面白くなってきそうな予感がします。

2007年12月 5日

Google に期待する「コミュニティ検索」機能

Google の検索と言えば、普通のウェブ検索をはじめとして、地図検索、ブログ検索、ニュース検索、ソースコード検索 etc と実に様々な検索の種類があります。

最近は lab の方で、検索結果をキーボードで操作したり、検索結果の順位を自分で操作できるようになっていたりと、種類ではなく、機能や使い勝手の向上を目指しているようですね。

そんなGoogleの検索に、こんな機能できたら良いなぁと勝手に期待しているのが、「コミュニティ検索」の機能。

最近、Web2.0というキーワードの流行をうけてか、やたらと「コミュニティ」が乱立しています。

例えば、今日のニュースだと↓こういうのとか。

iタウンページも「Web 2.0」風?--新たな検索機能とコミュニティ機能を追加:マーケティング - CNET Japan

例えば、ある映画の情報とか知りたいとき、ホームページやブログの情報は既存の検索で検索できますが、掲示板とかMLのログとかそういうの対象に限定して横断的に検索する仕組みが今ないですよね?(あったらごめんなさい)

検索のオプションで、活動度(発言が頻繁に行われている具合)とか、発言の期間とかを絞り込めたりして。

クローズドなSNSとかのコミュニティの情報をどうするんだとか、実現の可能性は低そうですが、あったら便利だろうなぁと思っています。

2007年12月 4日

Opera 愛用してますが

オトナサイト専用ブラウザとしてデス。ごめんなさい。

でもそれだけ、Operaを信頼してるんですよ。

IEとFirefox、どちらが安全? なんでOpera使わないの? - TERRAZINE

TERRAZINE さんでも紹介されているように、セキュリティ的に安全だし。早いし。

そしてなんといっても、妻が触らない

これ大きいあるね。

FireFoxとか前に微妙に教えちゃったから使えないし。

Operaは今のところ安全。

2007年12月 3日

Re:「ワード・エクセルできます!」

はてな増田より。

「ワード・エクセルできます!」

  1. セルの中で改行(スペースを大量に入れて調節するの禁止)
  2. 電話番号みたいに、0ではじまる数字を表示(頭に'付けるの禁止)
  3. 入力すべきセルに最初に色を付けておいて、何らかの数値が入ったらセルを白くする。値を検証して、矛盾するようなら赤くするとなおよし。
  4. A1に「=10/3」、B1に「=10/3」と入力されていて、C1に「=A1+B1」と入力されていたとき、C1に「7」と表示されても「あれ?」とか言わない。
  5. すでにできあがったシートがあるとき、「このシートでC列の値が最も高いもの」を探す方法が分かる。

はてぶとか見てたら3が出来ない人結構いるみたいですね。

僕なら「条件付き書式」使います。

Excel で タスク管理シートを作る (でぃべろっぱーず・さいど)」とか「Excel でスケジュール管理 (でぃべろっぱーず・さいど)」で公開しているExcelは、この条件付き書式を使ってます。

Excelってほんと不思議で、ctrl + C / X / P / Y とか使ってないひとが、複雑な関数でマニアックな業務処理の計算をしてたりするんですよね。その人の中ではそれが常識になっているから、普段の所作を見て、「この人Excel使えないんだろうなー」とか思って会話してると痛い目にあうことも。

ちょっと複雑な計算とかになってきたら、Excelで関数やマクロ使うより、DBに入れてプログラムで処理した方が早いんじゃないかとか思ったり。

2007年12月 2日

PSP で「勇者のくせになまいきだ。」体験版ダウンロード

久しぶりにPSPを取り出して、ネットワークに繋いでみました。

で、前から気になっていたゲーム「勇者のくせになまいきだ。」の体験版がダウンロードできるというので、PSP Storeのサイトへ。

いやはや、簡単にダウンロード出来ちゃいましたよ。

すごいね、最近の携帯ゲーム機は。(ってこんなの常識なのか)

家のFON もまだ健在ってことが確認できたし、「みんなのゴルフポータブル2」でも買って、オンライン対戦に興じてみようかと思ったり。

なんか忙しい年末に限って、こういう面白そうなゲームが発売されるんだよね。。。

勇者のくせになまいきだ。
ソニー・コンピュータエンタテインメント (2007/12/06)
売り上げランキング: 27
おすすめ度の平均: 4.5
5 発売日がたのしみ
5 体験版しかプレイしていないけど
4 久しぶりに面白い


みんなのGOLF ポータブル2 特典 携帯クリーナー付き
ソニー・コンピュータエンタテインメント (2007/12/06)
売り上げランキング: 11
おすすめ度の平均: 4.0
1 あきる頃か
5 ゴルフゲームの傑作
5 来た♪

2007年12月 1日

SIerはもっとオープンソースに関わるべきだ

NTTデータが自社のフレームワークをオープンソース化しました。

NTTデータ、Javaや.NETのフレームワークをOSS化:ITpro

NTTデータってSIerの業界(敢えてIT業界とは言いませんが)の中では、やっぱり巨人で、売上金額とか従業員数とか群を抜いているわけです。でまあ、お役所仕事的なところもあるのかなぁとか思っていたんですが、最近の流れにのってこういう手を打ってくるところはすごいなぁと素直に感心しちゃいます。

普通のSIerならこういう「自社ノウハウ」的なものって外部に公開したがらないものなんですけどね。

SIerも、もっとオープンソースコミュニティに積極的に参加していくべきですよね。

strutsとか使って、自前のフレームワークを作っているところはたくさんあると思うんですけど、そういう閉じられたところにある技術って、外の空気に触れることでもっと良くなったりする可能性はあるわけで。

国産ベンダが目覚める前にエンジニアの空洞化が始まる - @IT

そのうえで、山野井氏は、優秀なエンジニアを日本につなぎとめるには「プロフェッショナルな人材の流動性を高める仕掛けが必要」と話した。優秀なエンジニアを正しく評価し、給与で優遇し、高い生産性を維持して働ける職場環境を用意することがポイント。エンジニアのコミュニティの中でその企業の評判が高まれば、優秀なエンジニアが集まり、面白いサービスが生まれる。エンジニアを単なる作業者と考える企業からは人材が流出するだろう。このエンジニアの自由な移動を実現するには流動性を高める仕掛けが必要というのだ。

SIerが本気を出して、すげーおもしろい/良いフレームワークとかをオープンソースに提供しだしたら、そういうことをしている会社ってエンジニアにとって魅力的に見えると思うんだけどなぁ。

SIerじゃないけど、Google には広告収入で得た利益を、オープンソースにどんどん還元していこうって雰囲気があるようだし(現にいくつもオープンソースプロダクトを発表してるし)、楽天も今後そういう風に動いていきたいと、この間のテクノロジーカンファレンスで言ってたし。

まあ、3Kだなんだと言われている職場で、どこにオープンソースと関わる時間があるんだよと言われると、「スケジュール管理の問題」だから自分でなんとかして、としか言えないんだけどね。