« 2007年12月 | メイン | 2008年2月 »

2008年1月 アーカイブ

2008年1月31日

jQueryの$(function)がwindow.onload後に効かない問題

病み上がり職場復帰のリハビリ代わりに、下記jQueryの$(function)の挙動をソースから追っかけてみました。

で、amachangの

jQuery.event.special.ready.setup()
/* または */
$.event.special.ready.setup()

は、たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。

川崎さんが困っている、

具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。

という現象は、そもそも普通に実行しちゃだめなのかなぁと思うのですが、どうなんだろう。

hoge()を$(hoge)と書かなければいけない理由が作られているアプリにあるのかな。

 

ソースを見ていて、

(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
  DOM 構築後に初めて $(function) を呼び出す
    →スルーされる

こうなっちゃうのは、jQuery.ready()が実行されていないからで、強引に、

$.ready()

とかやっちゃえば使えるようになるんだけど、これもいまいちかな。

$(function)をDOM構築前に実行すると、以下のbindReady()が実行されて、最後にwindowがloadするタイミングでjQuery.ready()が実行されるようになっているから間違っちゃいないとは思うんだけども。うーむ。

function bindReady(){
 if ( readyBound ) return;
 readyBound = true;
 // If Mozilla is used
 if ( jQuery.browser.mozilla || jQuery.browser.opera )
  // Use the handy event callback
  document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 
 // If Safari or IE is used
 // Continually check to see if the document is ready
 else (function(){
  try {
   // If IE is used, use the trick by Diego Perini
   // http://javascript.nwbox.com/IEContentLoaded/
   if ( jQuery.browser.msie || document.readyState != "loaded" && document.readyState != "complete" )
    document.documentElement.doScroll("left");
  } catch( error ) {
   return setTimeout( arguments.callee, 0 );
  }
  // and execute any waiting functions
  jQuery.ready();
 })();
 // A fallback to window.onload, that will always work
 jQuery.event.add( window, "load", jQuery.ready );
}

 

2008年1月30日

DisられやすいPHP

Rubyの作者Matzことまつもとゆきひろさんのブログで、PHPについて書かれたエントリが盛り上がっています。

PHPは、確かに簡単お手軽な言語である分、上記リンク先で指摘されているような問題点も確かにありますよね。

エンジニア的な立場からすると、各言語のメリット・デメリットをしっかり把握しておくのは重要なので、こういう指摘は勉強になります。

この件に関連しているエントリをメモメモ。

2008年1月29日

JavaScript Pretty Date

John Resigさんのブログで、pretty.jsなるものが紹介されていました。

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

こんな感じで、セットした日時に応じて、現在の時間との差分を文字で表現してくれるライブラリです。

サーバサイドで重宝しそうです。

2008年1月28日

IEのメモリリーク検出

IEでのJavaScriptメモリリークを発見するツールが発表されたようです。

IEのJavaScriptメモリリークを検出:JavaScript Memory Leak Detector - builder by ZDNet Japan

FireFoxにはこの手のツールがいくつかありましたが、IEには決め手になるようなものがなかったので、嬉しいニュースですね。

後で試してみよ。

2008年1月27日

JAXERでサーバサイドjQueryが超便利

 一昨日に引き続きJaxerの話。

今回は、jQueryをサーバサイドでも使えるよという内容です。

jQueryを一度でも使ったことのある方は、その便利さに、もうjQueryなしには生きられない感じになってしまってるのではないでしょうか(僕だけか?)。

John Resigのサンプルコード

jQueryを作ったJohn Resigさんのブログで、jQueryをサーバサイドでも使うというサンプルコードが公開されています

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>
  <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>
  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>
</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

とりあえず、上記コードをテキストにコピペして、index.htmlと名前をつけ、jaxerのpublicフォルダの下に配置しましょう。

サーバが起動している状態であれば、http://localhost:8081/ でアクセスすることができます。

すると↓こんな画面が表示されます。

jaxer_003.png

この画面で、テキストエリアに文字を入力し、「クエリ送信」をクリックすると、index.htmlを配置しているディレクトリに、テキストエリアの内容が書かれたtmp.txtが出力されます。

一度画面を閉じ、再度ページを表示すると、先ほど入力した値が、デフォルト値としてテキストエリア内に表示されます。

というわけで、サンプルコードのコード解説です。

1~3行目

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>

jQueryを読み込み、runat="both"で、このコードをサーバとクライアントの両方で利用することを宣言しています。

4~11行目 

 <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>

ドキュメント中のformエレメントのsubmitイベントに、テキストエリア内の値を引数としてsave関数を実行するようにバインドしています。このscriptタグにrunat属性はないので、必然的にクライアント側でのコードとなります。

12~22行目

  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>

runat="server"なので、サーバ側での関数定義です。

saveは、引数で渡された値を、tmp.txtとしてファイルに書き出します。

loadは、tmp.txtが存在すれば、その内容をページ中のテキストエリアの値としてセットします。

save関数は、proxy=trueとされており、これでクライアント側のJavaScriptからsave関数をコールすることができます。逆に、load関数は指定がないので、クライアント側から呼び出すことはできません。

また、サーバ側で動作するこのコードで、$("textarea").val()と、jQueryのコードが書けているのも注目です。

23~30行目

</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

bodyタグのonserverloadという指定で、ページ表示時にload関数が実行されるようになっています。

サーバ側でjQueryを使うことで何が便利になるのか?

基本的にjQueryはDOMを簡単に直感的に利用できるライブラリになっており、サーバサイドでの出番はあまりないようにも思えます。

では、サーバサイドでjQueryを使うメリットはどんな点なのか。

1つは、「入力フォームの値をset / get しやすい」という点です。

これは今回のサンプルでも明らかだと思います。

もしjQueryを利用していなければ、値のset / get は以下のようになって、コードも長くなり少々面倒です。

document.getElementById('hoge').value = 'moge';

document.forms[0].hoge.value = 'moge';

もう1つは、「スクレイピングしやすい」という点です。

Jaxerでは、以下のコードで任意のページのHTMLを取得できます。

Jaxer.Web.get(url);

これを利用すると、以下のようにjQueryのselectorを用いて取得したHTMLを操作することができます。

$('selector',Jaxer.Web.get(url))

例えば、ページ中のaタグのhref要素を全部取得する場合は、

     var txt = '';
     $('a',Jaxer.Web.get(url)).each(function(){
       txt += $(this).attr('href') + '\n';
     });

こんな感じで。

このままだと正規表現の方が簡単じゃんってことかもしれませんが、ページ中の特定の部分の中身からurlを抜き出したりとかできて、個人的には正規表現でゴリゴリ書くよりやりやすいです(まあ僕が正規表現苦手なだけですが)。

ただ、jQueryのメソッドすべてがサポートされているわけではないので、注意が必要。

Jaxer付属のサンプルページで、jQueryのユニットテストの動作結果が確認できます。

<関連エントリ>

2008年1月26日

BPMオフ会に参加してきた(飲み会だけ)

BPMのオフ会に参加してきました。

勉強会の方には参加せず、飲み会だけ行ってみるメソッド発動。

Twitterで、「飲み会だけ参加するのありかしら」とつぶやいたら、幹事のid:gothedistanceさんが「OKOK」と返してくれたので決心した次第です。なんかTwitterっておもしろ、と思った瞬間でした。

勉強会の最後にみなさん自己紹介をしていたらしく、そんなのに顔を出していないおいらはひとりぼっち。やはり飲み会からの参加は無謀かと思ったんですが、会社の同僚のpapandaを見つけて一安心。彼の知っている人を何人か紹介してもらいました。

で、この飲み会で分かったことを箇条書いてみると、

  • gothedistanceさんは男前。
  • Yoshioriさんはもてる。
  • java-jaは仲がよい。そして濃い。
  • はぶさんはパワフルである。
  • wicket は面白そうだ。
  • twitterで変なことを発言するとふぁぼられるらしい。
  • そしてふぁぼられると嬉しいらしい。

こんな感じ。

ネット上でブログ読んだり、プレゼン動画見ている人と生で合う感じは、なんか不思議な感じですね。

さて、来週は197Xsのオフ会だ。

java-jaの人たちから「197Xsはおとなしい!もっとエロいことを発言しても良いでしょ!」みたいな突っ込みがあった。まあ1981sの人にないたいわけじゃないから別にいいんじゃね?と思ったけど、エロい話をするのには賛成。

さてどんな集まりになるのか。楽しみ楽しみ。

<追記>

せっかくなのでBPMオフで知り合った人のエントリをメモ(顔とかちゃんと覚えてるかな・・・)

2008年1月25日

Ajax server Aptana JAXERを触ってみた

 最近JavaScriptづいていて、サーバサイドもJavaScriptで書きたいなぁと思っていたところに、AptanaからJAXERなるAjax Serverがリリースされたとのニュースがあったので、渡りに船とばかりに触ってみました。

とりあえず動かしてサンプルを見るまでは超簡単。興味がある人は試してみると良いよ。

ということで遊んでみた内容のメモ。

環境構築

JaxerのホームページのDownloadをクリックして、"Download Jaxer for Windows (.zip)"をダウンロード。

ダウンロード後、解凍して、必要なら任意のディレクトリに移動。

解凍後のルートディレクトリにある"StartServer.bat"を実行すると、http://localhost:8081/aptana/ にアクセスすることができます。※環境によってはセキュリティソフトから、Jaxer やApache がネットワークに接続することを許可しろとか言われます。

これだけでOK。もはや環境構築と呼ぶまでもない簡単さです。

サンプルで遊ぶ

上記URLのページを表示して、左側のSample And Tools をクリックすると、サンプルの一覧が表示されます。

 

jaxer_001.png

サンプルの内容は見たまんま、メール送信やRSS取得、タスク管理、チャットなんかが扱えます。個人的にはタスク管理やチャットが普通にまんま使えそうかなと思ったり。

各サンプルは、画面の右上に「HTML」マークがあって、そこからソースを見ることができます。

 

jaxer_002.png

タスク管理やチャット、wikiにユーザ情報等は、付属のSQLiteに保存されます。つまり、サーバ側で、JavaScriptからDBを操作するAPIが提供されています。

一番下のjQuery Compatibilityは、サーバサイドでjQueryのtest suitsを実行した結果が見られます。そこそこ動くようですが、100%ではないようです。↓こんなメッセージが表示されてます。

PLEASE NOTE: The current jQuery test Suite has a number of tests which currently fail. We are working to extend the test coverage to be as complete as possible.

サンプルをちょっと改良して見たいなと思った場合、サンプルの実ファイルは、<Root directory>/jaxer/aptana/samples にあります。

例えばRSS Sample のRSSの取得先を自分のブログにしてみます。

<Root directory>/jaxer/aptana/samples/rss-sample/index.html の

var feed = Jaxer.Web.get("http://www.news.com/2547-1_3-0-20.xml?tag=pre_ft");

のURLを好きなRSSのURLに書き換えて、アクセスすればOKです。※サンプルページに文字コードの指定がないので、文字化けしてしまうこともあります。

自分でアプリを作ってみる

自分でアプリを作る場合は、<Root directory>/public の下にファイルを配置します。

ページ中にJaxerの読み込みがうまくいくと、

<script type="text/javascript">/** Jaxer clientFramework_compressed.js - 

こんな行が、ページのソース中(上部)に書き出されます。

動的な部分はJavaScriptで定義していきます。

<script runat="server">と書かれたタグはサーバ側で動作するJavaScript、<script runat="client">と書かれたタグはクライアント側で動作するJavaScript、<script runat="both">と書かれたタグは両方側で動作するJavaScriptとなります。

DBに接続してSQLを発行したりするJavaScriptはサーバ側にしか書けません。そこで定義された関数をクライアント側から呼び出すことができます。

例えば、サーバ側の関数hoge()をクライアント側から呼び出したいときは、

<script type="text/javascript" runat="server">
function hoge(){
}
hoge.proxy = true;
</script>

としておきます。最後のhoge.proxy = ture;がポイントです。これにより、ページが生成されるとき、

<script type="text/javascript">
function hoge() {return Jaxer.remote("hoge", arguments);}
function hogeAsync(callback) {return Jaxer.remote("hoge", arguments, callback);}
 </script>

というコードがクライアント側に生成され、クライアント側からサーバ側にアクセスし、結果を受け取るということができます。

注意点としては、クライアント側から呼び出したい(つまりhoge.proxy = trueとしたい)関数は、外部.jsファイルではなく、ページ中に書いてある必要があるようです。(これでちょっとはまりました)

Jaxerのウリ

Jaxerの公式サイトトップページに書いてあることですが、以下の点がポイントになります。

  • アプリケーションを.html と.jsファイルで構築できる。
  • サーバ側で、htmlのDOMにアクセスするような記述ができる。
  • ブラウザとサーバがシームレスにコミュニケーションできる。
  • 既存の他の言語で書かれたページにアクセスできる(既存資源を活かせる)。
  • Validationコードをブラウザとサーバで共有できる。
  • データベースやファイル、ソケット通信がJavaScriptから可能になる。
  • 最新のJavaScript標準に則ってる。

個人的にはValidationコードをサーバとクライアントでシェアできるというのが嬉しいですね。Javaでアプリを作っていて、ブラウザ側のチェックとサーバ側のチェックの仕方が微妙に異なり、それがバグにつながるなんてことが結構起こりやすいので。

ただ、サーバ側のJavaScriptファイルがエンドユーザに見えてしまう可能性があるという点がちょっとだけ気になります。SQLとか丸見えだしね。僕が触ったバージョンだと、サーバのJaxerでエラーが発生したとき、クライアント側にサーバ側のJavaScriptソースがまるっと見えちゃって、これはちょっとと思いました。この辺は今後改善されていくのだろうと思います。

というわけで、これを使ってちょっとしたアプリを作ってみようかなと。サンプルを改造するだけでもそこそこのものができそうですし。

興味が沸いた方は、この土日に是非遊んでみてください。

<参考リンク>

2008年1月24日

英語ブログのススメ

英語ブログのことを書こうと思っていたら、てっく煮のにとよんさんが英語ブログについて書かれていました。

ちょうど良いから便乗します。

Ajaxian で紹介してもらったよ - てっく煮ブログ

実は僕も昨年末から英語ブログをちょろっと書いていて、先日公開したiGoogleテーマエディタが、海外のGoogle情報ブログに取り上げられました。

Editors for Creating iGoogle Themes

Ajaxianほどではありませんが、このサイトもGoogle情報にかけてはそこそこ影響力があるサイトで、Google-maniaさんがこの記事を元に紹介記事を書いていました。

たった2分でオリジナルiGoogleテーマを作れるサイトを2つ紹介 | Google Mania - グーグルの便利な使い方

ってことで、日本のブログで自分が書いた英語のブログが紹介されるという逆輸入的な展開でした。

 

やったこと

まずは紹介するアプリ作り。最初はオール英語だったんですが、以前に多言語対応についてエントリを書いたことがあったので、せっかくなので日本語と英語の2言語でリリースすることにしました。

で、英語の記事の作成にとりかかったのですが、にとよんさんほどまじめに書かず。なんとなく雰囲気で書いてしまいましたよ。なので、正直うんこになってます英語です。うんこクラスの英語です。はい。

しょぼい記事を書き終えたところで、digg.comに投稿しました。

日曜の夜に投稿して、月曜の夜までなんの反響もありませんでしたが、その後上記サイトに取り上げられ、そこそこアクセスしていただいた次第になります。

なんか自分の書いたエントリが、英語ブログに取り上げられていたときはちょっと小躍りしましたよ。An even cooler solutionとか書かれてるし。

 

思ったこと

にとよんさんも書かれていますが、日本のレベルの高い技術が、言語のせいで国内だけにしか知られないのは、やはりもったいないです(レベルが高いってんは、もちろん僕のコトじゃないです)。

ブログの更新が滞る原因として、コメントやトラックバックが少なく、書いてもあまり楽しくなくなってしまうということが挙げられます。その点、海外の人は気楽にコメントを残してくれるので、反応がある感があって、きっと楽しいと思いますよ(僕のブログはこれからですが;)。

あと、以前作ったtimer ガジェットも英語対応させていて、アクセス解析を見ると、ヨーロッパの人や北米の人が使った形跡が分かります。iGoogleユーザもまた、英語圏の人が結構多いので、日本特有のガジェットではない限り、英語対応のことも考えておくと良さそうです。

2008年1月23日

iGoogleテーマエディタのコード解説 --- その2

今日は「Gmailの使い方」メールマガジンでもiGoogle Theme Editor を紹介していただきました。ありがとうございます。

というわけで昨日のコード解説の続きです。

 

150~202行目:エディタ自身のHTMLです。

多言語対応させるメッセージ部分はmessage(key,lang)で返ってきたメッセージを結合させています。なんか眺めれば眺めるほどリファクタリングできそうだなぁと思ってきましたよ。

 

203~245行目:スタイルオブジェクトの定義とスタイル指定。

エディタのCSSをJSONで定義しています。jQueryは、$.css(key,value)や$.css(styleObj)で簡単にスタイルを指定できるので、外部にCSSファイルを持たないようにしています。

また、226~230行目では、各ブロックの開け閉めを$.toggle(fn,fn)で設定しています。これまた簡単ですわ。

var deco = {"cursor":"pointer","text-decoration":"underline"};
$('#str_1').css(deco).toggle(function(){$(this).text('[-]'+message('m1',lang));$('#tbl_1').show();},function(){$(this).text('[+]'+message('m1',lang));$('#tbl_1').hide();});

 

246~284行目:テキストエリアやセレクトボックスで値を入力/選択したときに、即座にiGoogleの画面に繁栄させるようにしているところです。

Class名とかはFireFoxのfirebugでちまちま調べながら作りました。

$('#header_bgcolor').keyup(function(){try{$('#nhdrwrap').css('backgroundColor',$('#header_bgcolor').val())}catch(e){}}).val('#FFFFFF').keyup();

あと、上記のように、テキストエリアにkeyupイベントで実行される関数を割り当て、それをkeyup()で実行できることを知りました。超便利。上記部分は、jQueryオブジェクト取得→keyupイベントに関数割り当て→初期値設定→keyupイベントに割り当てた関数を実行という流れになっています。これがつらつらとメソッドチェーンで書けちゃうのが気持ちよいです。さすがjQuery。

 

こうやって解説を書きながら、かなり無駄に書いている部分が多いなぁと思ったので、リファクタリングしていこうと思います。

なんか2日に分けて書くと言いつつさらっと終わっちゃいました。

2008年1月22日

iGoogleテーマエディタのコード解説 --- その1

先日公開した「iGoogleテーマエディタbookmarklet」をWebOS Goodiesさんで取り上げていただきました。ありがとうございます。

で、今日はbookmarkletのコード解説をしたいと思います。といっても、たいしたソースじゃないですが。

(※行数はversion 0.1.0 でカウントしているので、後から見るとずれるかもしれませんが雰囲気で追ってください)

1~11行目:コメントです。

12~18行目:

var jq=document.createElement('script');
jq.id="jqery";
jq.type="text/javascript";
jq.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/jquery-1.2.2.min.js?"+new Date().getTime();
document.getElementsByTagName('head')[0].appendChild(jq);

いきなりjQueryのjsファイルをheadにappendしています。今回はデザインを色々といじるってことで、ライブラリを読み込んだ方が都合が良かったのでそうしました。jQueryを選んだ理由は、ファイルサイズが小さく、グローバルなオブジェクトを汚染せず、かつスタイルの操作がやりやすいからです。

19~22行目:

var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(themeEditorload,500);

続いて、iGoogleテーマエディタを表示するために、setIntervalで定期的にthemeEditorload()を実行します。即実行できないのは、scriptタグで後からappendしたjsファイルが、ロードが終了し、ページ上でコンパイルされるまでタイムラグがあるからです。

23~31行目:

function themeEditorload(){
try{
if($){
 clearInterval(jqueryStartTimer);
}else{
 throw new Exception();
}

メインメソッドです。$をチェックし、定義されていれば(if($)でtrueが返れば)、setIntervalで定義したタイマーをclearIntervalでクリアしています。もしこの関数が実行されたとき、まだjQueryがロードされていなければ、Exceptionをthrowしてスルーします。

32~46行目:URLを操作する現在開発中のjQueryプラグインです。まだアルファ版にもならない完成度ですが、試しに使ってみることにしました。

47~61行目:iGoogle Theme 用のXMLの元データです。文字列の最後に\を付ければ改行できることを知ったので、そういう風に書いています。

62~65行目:

function createAttr(id,attr){
 if($('#'+id).val()) return '<Attribute name="'+attr+'">'+$('#'+id).val()+'</Attribute>\r\n';
 return '';
}

この後のcreateXML()の中で使っている関数です。iGoogle Theme 用のXMLを作る際、ユーザが値をテキストフィールドに入力していれば、引数のデータを利用してXMLデータの一部を返します。

66~102行目:XMLを生成している部分です。思いっきりベタ書きです。

103~104行目:

var lang = $.urlParams('lang',$('#igteid')[0]);

ここで、先ほど紹介したURLを操作するプラグインを利用しています。このブックマークレットをappendしているscriptタグのsrc属性のURLから、GETパラメータに指定されているlang属性を取得しています。

105~141行目:ここで多言語のメッセージオブジェクトを保持しています。そう、このbookmarkletは無駄に多言語対応させているのです。

142~149行目:

function message(key,lang){
 try{
  var t = words[key];
  return (t[lang])?t[lang]:t['en'];
 }catch(e){
  return '';
 }
}

メッセージオブジェクトから、言語名とキー値を元に、メッセージを取得します。デフォルトは"en"の値です。

 

長くなったので、今日はここまで。続きはまた明日。

2008年1月21日

就職活動は「縁」です

なんか就職活動のことについて盛り上がっているので、僕も少し絡んでみます。

こういうとき、会社ばれしていると書きづらいね。まあ、あくまでここに書くことは、僕個人の考えであって、会社は関係ないということで。

就職活動を終えた先輩の皆さん。あなたは後輩に「こうすれば絶対内定取れるぞ!」と、どのようにアドバイスしますか?

そんなアドバイスしません。求められても断ります。

ものごとに「絶対」なんてことはないしね。そもそも会社によって採用担当者が違うんだから、こうすれば絶対、なんてことは言えないでしょ。

そんな優しさのない社会人の先輩である僕が、これから会社を受けるという学生さんにお話しできることは、就職に関する自分の経験しかないです。僕の話からどんな教訓や法則を感じ取るかは、学生さんにおまかせします。僕が話す内容は、相談してきた学生さんに合わせるので、「これを話す!」みたいなことは書けないかな(ずるいね)。

学生のみなさんは、なるべくたくさんの社会人の先輩に、就職活動の話じゃなくて会社生活のことを聞いて回ると良いと思うよ。日中どんなことしているのかとか、就職活動のときの社会人生活のイメージとどう違うかとか。

テクニックを駆使して、良い会社と思っていたところに入ったは良いけど、思い描いていた仕事じゃなくて、なんか話ちがくね?みたいになっている人、世の中には多いと思うよ。新卒3年以内に辞めていく人の中には、そう言う人も大勢いるんじゃないでしょうか。

 

ここで、昨年、一昨年と、グループ面接/ディスカッション(以下、グループ面接)の面接官として、新卒採用のお手伝いをさせてもらったときのことをちょっと書きます。

うちの会社では、現場の人間から活きの良いのがピックアップされて、グループ面接の面接官を担当するのが恒例になっています。

オリエンテーションがあって、グループ面接の方法とか、学生さんの評価の仕方とかを一通りレクチャーされます。

で、月に何回か会場に呼ばれて、面接官をするわけです。 

面接官を経験して、色々とおもしろいことに気づきました。

1つは、評価の仕方は人それぞれであるということ。

よく、「短所は長所の裏返し」みたいなことを、自己PRを作るときにアドバイスされますけど、まさしくあれ。

とある学生さんがやってきて、僕の目から見ると、ものすごく傍若無人だったわけです。言葉遣いも横柄だし、発言の端々になんか亀田家のビッグマウス的雰囲気を醸し出している。で、面接が終わった後、ペアを組んでいた面接官と学生さんの評価をすり合わせるんですが、そこでペアを組んだ彼は、僕が「こいつはちょっと」と思ったその学生さんを「大物感が漂っていて良いね」と評するわけですわ。評価が180度逆なの。へー、そういう風に見る人もいるんだなぁと思ったものです。

もう1つ、採用活動の中で分かったのは、「一緒に働きたいかどうか」が基準になるということ。

学生さんの評価が割れたり、グループの中で順位を付けるのに迷った場合は、「その学生さんが自分の後輩として職場に入ってきてやっていけそうかどうか」ってことで判断していきました。ものすごくファジーな基準だけど、意外と重要なことで。

Googleも、中途採用で面接に来た人は、職場のメンバーに顔通しして、一緒に働け想かどうかを判断するという話がどこかに書いてあったし。この辺は新卒だろうが中途だろうが関係ないところだと思う。

自分と合った採用担当者に出会えればラッキーだし、まったく合わない採用担当者であればその会社には縁がなかったと思うしかないんじゃないかな。

なかなか内定がもらえない人は、それで落ち込むんじゃなくて、まだこれから良い出会いがあると思って活動しましょう。就職活動で落ちまくると、自分の人格が否定されたみたいに感じて落ち込んじゃう人がいるらしいけど(僕もそうでしたわ)、それはまったくナンセンスですよ。縁です、縁。だから胸はって自信を持って活動に挑んでください。

 

採用担当者のファジーな感じで決まってしまうことに納得できない人は、経験したことのある何かの(例えばサークルとか)勧誘活動を思い出してください。

そのとき、あなたはどんなことを基準にして、その子を勧誘していましたか?

どんな子に「うちのグループに入って欲しいなぁ」と魅力を感じ、どんな子を「この子はちょっと・・・」と敬遠していましたか?

まったく同じではないにせよ、採用担当者も似たようなことをきっと感じるのだと思います。

 

他にも色々と気づいたことはあるのだけれど、長くなるので今日はここまで。

 

とまあ、これってやっぱりそこそこの大きな企業の採用だね。採用人数が少ないITベンチャーとかは、もっと違う採用基準が明確にあるのだと思うよ。

#読み返してみると超gdgdですな。

2008年1月20日

iGoogleのテーマXMLを作成するbookmarklet

先日公開されたiGoogle Theme API を便利に使うためのbookmarkletを作ってみました。

iGoogle のページで実行すると、テーマ変更用のエディタが表示されます。

iGoogle Theme Editor (←右クリックからお気に入りに追加できます)

javascript:var s = document.createElement('script');s.id="igteid";s.type="text/javascript";s.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/ige.js?lang=ja&"+new Date().getTime();document.body.appendChild(s);void(0);

例えば、↓こういうデザインにしているiGoogleの画面でbookmarkletを実行します。

igte_0001.png

すると、適用されているデザインがクリアされて(そう言う風に見せかけているだけですが)、↓こんな画面になります。

 

igte_0002.pngガジェットのエリアの左側に、iGoogleのテーマを編集するエリアが表示されます。それぞれのリンクをクリックすると、編集エリアが表示されます。

 

igte_0003.png「ヘッダ部分」をクリックすると、ヘッダエリアのデザインを変更することができます。画像のURLを指定するところには、サーバにアップロード済みの画像のアドレスを入力してください。画像を使用しない場合は空欄でかまいません。

 

igte_0004.png

以下、同様に「タブ部分」「ガジェット部分」「フッタ部分」を変更できます。

 

igte_0005.png

 

igte_0006.png

 

igte_0007.png入力した後、「XML生成 >>」をクリックすると、テキストエリアに現在適用されているテーマのためのXMLが表示されます。

 

igte_0008.pngこの内容を、テキストファイルにコピペして、適当な名前を付けてxmlとして保存してください。

保存したxmlをサーバにUP(サーバを持っていない人は、Google Codeにホスティングすることができます)して、↓以下のようにURLを指定すると、xmlのデザインを確認することができます。

ちなみに、超簡単ですが、↓僕が試しに作った白黒のデザインのxmlです。

http://www.google.com/ig?skin=http://www.chrisryu.com/data/igoogle_theme/blackandwhite.xml

作ったXMLを公開したり、コンテンツディレクトリに登録する際は、XMLの以下の部分を編集してください。

<ConfigMap type="Skin">
<Meta name="title">theme title</Meta>
<Meta name="description">theme description</Meta>
<Meta name="author">author</Meta>
<Meta name="author_email">email</Meta>
<Meta name="thumbnail">thumbnail url</Meta>
<Meta name="screenshot">screenshot url+</Meta>
</ConfigMap>

こんなツールは、もっと使い勝手が良くて便利なものをGoogleが提供してくれそうですが、jQueryの練習のために(jQuery読み込んでます)作ってみました。

内容の解説は、また別のエントリで。

2008.1.21 12:15追記 動作確認しているブラウザは、IE7 & FF2です。IE6だとデザイン崩れちゃいます。ごめんなさい。

2008年1月19日

2007年に人気伸びたのはPython、Ruby/Perlは微減

Pythonキター!(ってほど日本での人気は伸びてないけれど・・・)

2007年に人気伸びたのはPython、Ruby/Perlは微減 - builder by ZDNet Japan

この1年でPythonは2.04%の伸びを見せ、もっとも人気が伸びたプログラミング言語となった。ほかにはVBが1.84%、Javaが1.69%、C#が1.34%、PHPが1.25%、Delphiが1.00%、JavaScriptが0.36%人気を伸ばしている。

VB、C#とかも伸びてるんですね。そっち方面の言語には全くうといので・・・。

JavaScriptが以外と伸びていないのでちょっと驚き。jQueryの人も、海外ではJavaScriptの人気は今ひとつみたいなことを、WEB+DB PRESS のアルファギークに逢いたいで言ってたし、そうなのかな。

人気言語Pythonの技を身につけよう - builder by ZDNet Japan

上記リンク先は、builder 中のPythonに関する情報のリンク集になっているので、Pythonやるときに参考にしてみます。 

2008年1月18日

Google Maps の航空写真刷新

Google Maps とGoogle Earthで、都市部のマップタイルが刷新されました。

Google Japan Blog: Google Earth と Google マップの航空写真がさらに新しく、鮮明になりました

東京 23 区、名古屋市、大阪市の 3 地域の画像がこれまでよりも新しい画像に更新されています。さらに!今回の更新では画像の解像度をこれまでよりぐっと高め、かなり詳細なものにしました。 一段と綺麗になった画像で街の詳細をぜひ確認してみてください。初めての場所を訪れる際も、これで細かく周辺などもチェックできますね。

ってことで、マップを見てみると、確かに綺麗になってました。ビル群とかズームしてみると気持ち悪いくらいに綺麗ですね。

 

うちの近所(JR田端駅前)には、桜並木があって、春になるとそれはもう綺麗なんですが、その周辺の写真がちょうど桜が咲いているときに撮影されていました。

JR田端駅前の桜

なんか、上から見るともさもさして変な感じですね。

 

神宮球場では何かの試合をしているっぽいです。 

 

高解像度になっているので、こういう球場の写真を使ってゲームとか作れそうな気がします。

 

もっとあちこち見て遊んでみよ。

2008年1月17日

iGoogle Theme API

iGoogleのテーマをカスタマイズできるiGoogle Theme APIが公開されました。

iGoogle Theme API

使い方は簡単で、xml に色や画像のURLを指定して、コンテンツディレクトリに登録の申請をすれば良いだけです。

作成したxmlは↓以下のようなURLで確認することができます。(下のサンプルはGoogleが提供しているサンプル)

http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml

リファレンスは↓こちら。

http://code.google.com/apis/themes/docs/reference.html

ガジェットが開発者向けのカスタマイズ機能だとしたら、Theme APIはデザイナー向けのAPIと言えるのではないでしょうか。

xml の中で、TraitというタグにTimeOfDayとして、時間を指定することができます。なので、朝は明るいデザインで、夜は暗いデザインにする、といった切り分けが可能です。

このTraitに指定できるのは、今のところTimeOfDayだけですが、既存のテーマを見ていると、曜日に応じてデザインを分けたり、天気に応じてデザインを分けることが、近いうちに可能になるのではないでしょうか。

 

iGoogle のデザインで検索してみたら、↓こんなガジェットを見つけました。

Custom iGoogle Skins

このガジェットを登録すると、Theme APIよりもっと自由にデザインをカスタマイズできるみたいです。

iGoogle Version2.0用のSkinと書かれていますが、普通に使えるみたいですね。

(iGoogle Version 2.0 になると、各ウィンドウの「開く」「閉じる」等のメニューが「Menu」という文字リンクにまとめられるみたいです)この辺よく分かってないからとりあえず削除

コンテンツディレクトリに登録されているより多くのデザインが公開されていて、↓マリオとか、

20080118_02.png

↓FireFoxとかあります。(ロゴもFireFoxが入っているのが良い感じ)

20080118_01.png

おもしろいテーマがたくさん登場すると良いですね。

2008年1月16日

Apache Wicket

↓このエントリ読んでWicket 使いたくなっちゃいましたよ。

ウェブ・アプリケーションの革命がここにある - Apache Wicketユーザーグループを始めます - 矢野勉のはてな日記

そういやJavaのフレームワークって、がっつり使ったことあるのstrutsくらいだもんなぁ。

Tapestryは、2年くらい前にSNS作って(友達登録くらいまでしかできなかったけど)それっきりだし、Seaser2 もやりたいやりたいと思ってちゃんと触ってないし。

その発想の根底にあるのは、デザインとプログラムのほぼ完全な分離と、「JavaプログラマはJavaで書くのが一番楽なんだ」という考え方です。WicketはHTMLはHTMLのまま、HTMLエディタで編集できる形式のままテンプレートとして使用します。Wicketは各種設定をすべてJavaソース内で行います。Wicketはウェブ・ページをステートフルにし、デスクトップアプリケーションを作るときのように、普通にインスタンス変数を使えるようにします*1。Ajaxによる画面のコンポーネント更新を、JavaScriptではなくJavaソースから行うことが出来ます。

そうだよねー。やっぱ言語は1つの方が作りやすいよねー。

そういう意味では、サーバサイドJavaScriptにも興味があります。

Wicketおもしろそうなんだけど、Javaアプリは、作ったアプリを簡単に公開できない(スクリプト言語に比べて)という点でちょっと二の足を踏んじゃうんだよなぁ。

安くでJavaのアプリをホスティングしてくれるサーバはないものか。

自前サーバ立てちゃうか? それはそれで結構な決心が必要なんだよね。

2008年1月15日

jQuery1.2.2 Release

今日はjQueryの2才の誕生日。それに合わせてか、jQuery 1.2.2がリリースされました。

jQueryブログで紹介されているImportant Changesの内容をかいつまんで紹介します。

$(DOMElement) の速度の改善(300%)

$(this)のように、頻繁に使われている$(DOMElement)を改善して、かなりの速度改善が得られたようです。(といっても、もともと0.0x ms オーダーの処理なので、ループ処理の中で大量の$(DOMElement)を呼び出していなければ、効果のほどは感じられないかもしれません)

.ready() の見直し

IEでのメモリリークの問題が色々と解決しているみたいです。

$(document).ready(fn) も、$(document).bind("ready",fn)のように書けるようになりました。 

.bind("mouseenter") / .bind("mouseleave") の追加

新たに"mouseenter","mouseleave"というイベントが加わり、これまでの.hover(fn1,fn2)が別の書き方ができるようになりました。

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
}); 

独自のイベントを追加できるようになった

独自のイベントを追加できる plugin API が追加されました。

これで"mousewheel"のようなイベントをpluginの形で追加 できるようになっています。

セレクタ :not() の追加
:not()というセレクタが追加され、より複雑な処理を行えるようになりました。

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

その他、合計120個のBugも修正されています。

ダウンロードは↓こちらから。

ソース読み込まないと。 

2008年1月14日

John ResigさんのブログをGoogle Readerに登録

今年の目標は英語を使えるようになる、ってことで、英語のブログを書く/読むことを積極的にしていこうと思っています。

で、jQueryのJohn Resing さんのブログをGoogle Readerに登録しました。

Compact Calendar のDavidさんのブログはチェックしているので、英語ブログ第2弾になります。

さらっと見てみた感じ、結構頻繁に更新されているようで、かつ面白そうな記事が多そう。

技術系の英語のエントリを書くときの参考にしたいと思います。

 

 

2008年1月13日

Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その2

昨日のエントリの続き。

作ったPipeを使って、1年前のはてぶ人気エントリを表示するガジェットの作成に取りかかったのですが、Pipeを作る際に参考にさせてもらったてっく煮のにとよんさんから

「1年前のはてブを表示。1年に限らず、数年まとめて見れたら面白いかもしれん。」

と、はてぶコメントをいただきました。それもそうだなと思い、軌道修正。

N年前の人気エントリをタブで分けて表示するガジェットにしてみました。

↓とりあえず完成系。

表示件数は「設定」から10~50の間で選択可能です。

はてぶが始まったのが、2005年2月10日なので、2月10日を超えると、タブが3つになります。

ガジェットのソースは↓こんな感じ。

xml : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past_hagena.xml

js : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past-hatena.js

var retryNum = 0;
var retryMaxNum = 10;
function init(){
	for(var i =0,len = days.length;i<len;i++){
		tabs.addDynamicTab(getDispDate(days[i]), callbackGenerator(days[i]));
	}
}
function callbackGenerator(day) {
	return function(tabId) {
		callbackTab(tabId, day);
	}
}
function callbackTab(tabId,day){
	retryNum ++;
	var feed_url = getURL(day);
	_gel(tabId).innerHTML = '<div class="feed">Loading...</div>';
	_IG_FetchFeedAsJSON(feed_url,function(feed) {
		var html ='';
		try{
		html = '<div class="feed"><span class="subtitle">'+getDispDate(day)+'の人気エントリ</span><ul>';
		for (var i = 0; i < feed.Entry.length; i++) {
			html += '<li><a target="_blank" href="'+feed.Entry[i].Link+'">'+feed.Entry[i].Title+'</a>'+createBookmarkNum(feed.Entry[i].Link,feed.Entry[i].Summary)+'</li>';
		}
		html = html + '</ul></div>';
		$(_gel(tabId)).html(html);
		_IG_AdjustIFrameHeight();
		retryNum = 0;
		}catch(e){
			if(retryNum <= retryMaxNum){
				callbackTab(tabId,day)
			}else{
				_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
				retryNum = 0;
			}
		}
	}, prefs.getInt("num_feed"),true);
	_IG_AdjustIFrameHeight();
}
function getURL(d){
	var m = d.getMonth() + 1;
	((''+m).length == 2)? m = ''+m:m = '0' + m;
	var da = d.getDate();
	((''+da).length == 2)?da=''+da:da='0'+da;
	var ds = (d.getFullYear())+ m + da;
	return 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=rss';
}
function getDispDate(d){
	return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + '';
}
function createBookmarkNum(link,desc){
	var num = parseInt($(desc).text().split('/')[0]) ;
	var img = '<img src="http://b.hatena.ne.jp/entry/image/' + link + '" onload="_IG_AdjustIFrameHeight();">';
	return ' <a class="bookmarknum" target="_blank" href="http://b.hatena.ne.jp/entry/'+link+'">'+num+' users</a>';
}
_IG_RegisterOnloadHandler(init);

特殊なことをしているのは、

}catch(e){
	if(retryNum <= retryMaxNum){
		callbackTab(tabId,day)
	}else{
		_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
		retryNum = 0;
	}
}

の部分。

ガジェットからFeedを取得しに行くと、最初の取得でタイムアウトが発生してるっぽいんですね。一度アクセスすると、Google側のキャッシュが効いて大丈夫みたいなんですが。そういうわけで、最大10回までリトライするようにしています。

でもって、タイトルの「jQueryで」ってことだったんですが、ガジェットの関数とか使ってたらjQueryの使いどころがなくなっちゃいました。使っているのは以下の2箇所ですが、どちらも無理から感がありありですね。

$(_gel(tabId)).html(html);

これは、_gel(tabId).innerHTML = html でOKだし。

var num = parseInt($(desc).text().split('/')[0]) ;

この部分は、今回Pipeで取得しているDiscrition 部分が<a><strong> XXX / XXX users</strong></a>という文字列なので、$関数に渡してjQuery オブジェクトにして、text() と split()を使って、登録ユーザ数を取得しています。

なんかjQueryを使っている感がなくなっちゃったので、jQueryをふんだんに使ったガジェットは、また別途作ってみることにします。

 

できあがったガジェットを観られる、1年、2年前の人気エントリを眺めていると、流行ものあったり、今でもブクマされるような普遍的なものがあったりして楽しいです。是非、iGoogleのお供にどうぞ。

2008年1月12日

Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その1

昨年末にYahoo! Pipes で任意のページをスクレイピングできるようになったという記事があり、気になっていました。

ってことで、そのすごさを実感するためにガジェットを作ってみることに。

ガジェットは、「1年前のはてブホッテントリ(人気エントリ)を表示する」という内容。前からちょっと考えていたネタです。

クライアント側では、これまた最近お気に入りのjQueryを使ってみることにします。

手順は、以下の通り。

  1. Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成
  2. そのAPIを利用して、クライアント側で情報を表示

 

Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成

なるべく簡単に、ということで、てっく煮さんで作成されている「Shinya talkをRSS化」というPipeをコピーさせてもらいます。(※海外Yahoo!のIDが必要になるので、Yahoo! Pipes を利用したい方はIDを取得してください。)

リンク先で、「Clone」リンクをクリックすると、yp_hb_gd_0001.png

Shinya talkモジュールが自分のPipesとして登録されます。

 

yp_hb_gd_0002.pngここで「Edit Source」をクリックすると、Pipeの編集画面になります。

yp_hb_gd_0003.png

オリジナルのPipeの流れは、

http://www.fujiwarashinya.com/talk/index.phpをFetchPageモジュールで取得し、<div id="center">以降を、<a id= をdelimiterとして分割」→「item.content をitem.title / item.description にコピーし、item.content を item.linkにリネーム」→「各title / link / description を正規表現でそれぞれにマッチした値に変更」→「Feed から < が含まれたものを削除」

というものです。

僕が作ろうとしているのは、http://b.hatena.ne.jp/hotentry?mode=daily&date=20050210のような動的に変更するパラメータをもったURLにアクセスし、スクレイピングしたいので、ユーザ入力としてdateを受け取り、モジュールの中でURLを組み立てます。

 

yp_hb_gd_0004.png

あとは、ページの内容にしたがって、Regexモジュールの正規表現を書き換えればOKです。

正規表現を適当に書いてしまうと、モジュールの実行速度にも影響がでるので気を付けましょう。実際、僕も最初に作ったPipeは、1回の実行に24secほどかかっていましたが、正規表現を修正することで 3sec 程度まで短くなりました。

↓完成したPipeはこちらです。

Pipes: Past Hatebu API

ちなみに各モジュールでの実行時間は画面下のDebugger の右上に表示されます。実行時間が遅いときは、各モジュールをクリックして、ここの値をチェックし、ボトルネックを見つけます。

 

yp_hb_gd_0005.png

 

そのAPIを利用して、クライアント側で情報を表示

今度は、作成したAPIをJavaScriptから利用してみます。

ガジェットを作る前に、まずは普通のhtmlから呼び出すことにしてみました。

ってことで、jQueryのgetJSON を利用してJSONを取得しようとしたのですが、ここで問題が。

jQueryのgetJSONを利用すると、アクセスするURLに自動的にnew Date().getTime() の値が付加されちゃいます。そうすると、Yahoo! Pipes 側でのキャッシュが効かなくなってしまうんですね。

このAPI でスクレイピングする先のページの情報は、基本的に変わらないものなので、都度アクセスしてしまうと無駄が多いし、レスポンスも悪くなってしまいます。

で、今度は↓こんなコードにしてみました。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
$(document.body).append(s);

これで大丈夫だろうと思ったら、アクセスしているURLに変化がない(getTime()の値がついたまま)なんですね。なんでだろうと思ったら、$(document.body).append(s)で勝手にjQuery.ajaxが呼ばれていて、結果getJSONと同じ動きになっていました。

意味がなかったので、ソースを以下のように修正。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
document.body.appendChild(s);

かなりべたな感じですが、しょうがないですね。

ということで、今日はここまで。連休中にはガジェット作るところまでいけると良いな。 

2008年1月11日

Simple Calendar 2008 PDF & jQuery cheatsheet 別バージョン追加

コメント欄で要望がありましたので、Simple Calendar 2008 Ja にPDF版を追加しました。

ダウンロードはこちらのページからどうぞ。

PDF化はOpenOfficeを使ってやってます。

また、jQueryのcheatsheet 壁紙に、黒バージョン追加しました。

ダウンロードはこちらのページからどうぞ。

 

壁紙の方は、もう一つ思いついたデザインがあるのでそのうち公開します。

2008年1月10日

Gmailツールコンテストで優勝しました!

以前に、Gmail にショートカットの一覧を表示させるbookmarkletを作って、たまたま見つけたGmailのツールコンテストに応募したのですが、今朝、管理人の方から連絡がありまして、優勝することができたとのこと。

やった!やりましたよ!

年始早々縁起が良いです。

賞品のAmazonギフト券1万円分もGET!

 

って、実は応募者が僕しかいなかったというオチ。

 

『Gmailの使い方』管理人の方、律儀に賞品を贈呈していただきありがとうございました。

ツールの方は、Gmail2.0では、Shift + ? でショートカット一覧が表示される仕様になっているので、そのうち用なしになってしまうかと思います。

まあ隙間産業的なツールで、「そのうち普通に機能として実装するだろうなぁ」と思っていたら、案の定って感じですね。

ちょうどGmail GreaseMonkey APIなるものが公開されているようなので、これで何か作ってみようかな。

1万円のギフト券は、お勉強代に使わせていただきます。

ありがとうございました。

(Google好き必見のサイト&メルマガ) Gmailの使い方!

 

2008年1月 9日

Blu-Ray vs HD DVD

一時はHD DVD優勢とも伝えられていた次世代DVD規格は、Blu-Rayの勝利ということになりそうです。

「HD DVD陣営から20社離脱へ」とTIMES報道 - ITmedia News

記事は、HD DVDプロモーショングループに参加する約130社のうち、Paramount Picturesをはじめとした20社が離脱する方針と報道。ポニーキャニオンも離脱を検討していると伝えている。

Sonyすごいですねー。

まさか矢沢効果ってわけでもないでしょうし。裏ではものすごい政治があったような気もしますが、その辺のどろどろした話とか映画化してくれませんかね。

Sonyと言えば、昨日は↓こんなニュースも。

“かざす”だけで大容量データが転送可能--ソニーの新技術「TransferJet」:モバイルチャンネル - CNET Japan

J-CASTニュース : かざすだけで大容量ファイルをパソコンやテレビに高速転送 ソニー

これはすごそう。Microsoftのsurfaceみたいな奴との相性はばつぐんでしょうね。felicaみたいにぼろ儲けの予感。

こういう基礎技術的な部分を押さえておける会社はすごいと思います。

2008年1月 8日

jQueryのcheatsheet 壁紙

このサイトで紹介されているprototype.jsの壁紙を使っていたんですが、最近は何かとjQueryづいているので、jQueryの壁紙にしたいなぁと思って探してみたんですが、壁紙として使えそうなのがありませんでした。

jQuery Cheat Sheet - jQuery.info

Google ドキュメント - JQuery Cheat Sheet

じゃあ自分で作ってみるかってことで、ちまちま作業して完成。

とりあえず 1280x960 版を作ってみました。

サイズとか色とかフォントとか内容について希望がありましたらご連絡ください。善処します。 

1280x960 blue

1280x960 black (2008.1.9 追加)

2008年1月 7日

EclipseでFlex

去年から触ってみようとしていたFlexにようやく着手。

Flex Builderを買ってみようかとも思ったけど、まずはフリーのツールで環境構築してみようかなと。

ということで慣れ親しんだEclipseちゃんでFlexの開発環境と整えてみることにしました。

 

0.Eclipseがない人はまずEclipseをダウンロード

http://www.eclipse.org/downloads/ とか http://www.bea.com/distros/eclipse.html とかから。

Eclipseは解凍するだけでOKなので、解凍後Cドライブ直下とかに配置。
(ちなみに僕はC:\programming\eclipse の下にeclipse320 とか eclipse330とか複数バージョンが入ってます。)

 

1.AdobeのサイトからFlex3 SDKをダウンロード

http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html から。

" I have read the Adobe Flex Beta and Early Build Access License, and by downloading the software listed below I agree to the terms of the agreement. " にチェックを入れて、"Download Flex 3 SDK 3 beta 3 for all platforms" からダウンロード。

 

2.ダウンロードしたファイルを解凍して、都合の良い場所に移動。

僕は C:\flex3sdk に配置したので、以下の説明はすべてそのディレクトリで行います。適宜読み替えてください。

 

3.Eclipseを起動して、普通のプロジェクトを作成

ナビゲーターパースペクティブ上で、右クリック→「新規」→「プロジェクト」

flexoneclipse_000.png

ポップアップで表示されたウィンドウで、「一般」→「プロジェクト」

flexoneclipse_001.png

ここで、今回はHelloWorldという名称のプロジェクトを作成します。

 

4.作成したプロジェクト内に、以下の図の用にフォルダとファイルを作成

flexoneclipse_002.png

各ファイルの中身はとりあえず空っぽで。

 

5.build.properties と build.xmlを以下のように記述

build.properties (Flex sdkのbinディレクトリの絶対パスを指定)

FLEX3_HOME=C:/flex3sdk/bin

build.xml

<?xml version="1.0" encoding="UTF-8"?>
<project name="HelloWorld" default="build.swf" basedir=".">
    <property file="build.properties" />
    <property name="dist.dir" value="dist" />
    <property name="src.dir" value="src" />
    <property name="height" value="100" />
    <property name="width" value="200" />
    <property name="framerate" value="30" />
    <property name="bgcolor" value="0xFFFFFF" />
   
    <!-- create swf-->
    <target name="build.swf" depends="clean">
        <exec executable="${FLEX3_HOME}/amxmlc.bat" failonerror="true">
            <arg line="-default-size ${width} ${height}" />
            <arg line="-default-frame-rate ${framerate}" />
            <arg line="-default-background-color ${bgcolor}" />
            <arg line="-output ${dist.dir}/HelloWorld.swf" />
            <arg line="${src.dir}/HelloWorld.as" />
        </exec>
    </target>

    <!-- clean dist directory -->
    <target name="clean">
        <delete>
            <fileset dir="${dist.dir}" includes="HelloWorld.swf" />
        </delete>
    </target>

</project>

 

6.HelloWorld.as と index.htmlを以下のように記述

HelloWorld.as

package {
    import flash.display.*; 
    import flash.text.*; 
    public class HelloWorld extends Sprite {
        public function HelloWorld() {
            var textField:TextField=new TextField();
            textField.text="Hello World!";
            textField.autoSize=TextFieldAutoSize.CENTER;
            addChild(textField);
        }
    }
}

index.html

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<object width="100%" height="100%">
<param name="movie" value="HelloWorld.swf"></param>
<embed src="HelloWorld.swf" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</body>
</html>

 

7.Eclipse で Ant ビューを開く

「ツール」→「ビューの表示」→「その他」(ここで「Ant」があったらそれをクリック)

flexoneclipse_003.png

「Ant」→「Ant」を選択

flexoneclipse_004.png

 

8.Antビューにbuild.xmlのファイルをドラッグ&ドロップ

すると↓こんな感じでターゲットが表示される。

flexoneclipse_005.png

9.Antビューの中のbuild.swf ターゲットをダブルクリック

amxmlc.batが実行されて、distディレクトリの下にHelloWorld.swfが生成されるので、index.htmlをブラウザで開いてチェック。

flexoneclipse_006.png

↓今回のファイル一式 HelloWorld.zip

 

これで、Eclipse上でソースを編集して、9の「Antビューの中のbuild.swf ターゲットをダブルクリック」を繰り返して開発してみようかな。

ActionScript3の良いEclipse pluginがないのが残念。地道にテキストエディタで書かないと・・・。

AIRアプリのコンパイルもbuild.xmlに書くんだけど、続きはまた今度。

HelloWorld以外のアプリを作るときは、

  1. HelloWorld.as のファイル名およびクラス名を修正
  2. build.xml 中の以下の項目を修正
  • <property name="height" value="100" /> : 生成されるswfファイルの高さ
  • <property name="width" value="200" /> : 生成されるswfファイルの幅
  • <property name="framerate" value="30" /> : 生成されるswfファイルのフレームレート
  • <property name="bgcolor" value="0xFFFFFF" /> : 生成されるswfファイルの背景色
  • <arg line="-output ${dist.dir}/HelloWorld.swf" /> : 出力されるswfファイル名
  • <arg line="${src.dir}/HelloWorld.as" /> : ソースのasファイル名
  • <fileset dir="${dist.dir}" includes="HelloWorld.swf" /> : buildの度にdistディレクトリから削除するファイル名

これでOKです。

2008年1月 6日

jQuery in Action を買ってみた

manningのサイトで"jQuery in Action"を購入してみました。

Early Access Edition とのことで、PDF形式の本です。洋書なんで英語。2、3年前にTapestry in Actionを買ったのを思い出しましたよ。

ぱらぱらと見た感じ、大体知っていることが載っていそうでしたが、英語の勉強も兼ねて読んでみようかと思います。

PSPでPDFが見られたら良いのになぁ。

せっかくの大画面なんだから、そういう書籍Viewerとしても活躍して欲しいですわ。

 

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.07
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 28798

2008年1月 5日

jQueryの素敵なところ

軽量で簡単にプログラミングできることで注目されているjQueryの素敵だなぁと思うところをメモ。

 

グローバルに定義される変数が少ないのが素敵。

 :jQuery と $ だけ(かな)。prototype.jsと比べると全然少ないです。

$関数の衝突に気をつかっているのが素敵。

 :jQuery.noConflict();で、$関数をjQuery関数で代用できます。さらにj$ = jQuery;ってやるのが定番なのかな。

Nativeなクラスを汚染しないのが素敵。

 :Object クラスとか Array クラスのprototypeを拡張してないので、手組みの部分で想定外の動きをすることがありません。

プラグインのインターフェースが提供されているのが素敵。

 :簡単にプラグインの関数とかを作れちゃいます。ちゃんと引数、引数のデフォルト値も簡単に定義できるのが良い感じ。

 

↓今こんな本出てるんですね、洋書ですが。ManningのサイトでPDF版買ってみようかな。

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.05
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 26737

2008年1月 4日

スーツ・ギーク論争

最近、また過熱気味のスーツ・ギーク論争。

代表的なところをちょっとピックアップしてみます。

一般に「スーツ」と揶揄されることの多いSIerに勤めている僕ですが、「スーツ」とか「ギーク」とかの定義が曖昧だなぁと思っていて、ブログでも「スーツとは・・・」「ギークとは・・・」みたいな書き方はしたことがありません。

でもまあ、正月だし、ちょっと浮かれ気分で、この「スーツ」「ギーク」論について書いてみようかと思います。

まず最初に書いておきたいのが、「スーツ」とか「ギーク」とかの定義が人によってばらばら、十人十色で、同じことについてものごとを言っているように見えて、実は全然違うことを書いているということ。これが、スーツ・ギーク論争の面白いところでもあり、話が収束していかない理由だと思います。

スーツ・ギークについて書いてあるエントリを読むときは、文中の「スーツ」「ギーク」の定義は、自分の中にある定義じゃなくて、その文中で定義されている意味で読まないと議論がそもそもかみ合わないですよね。

id:gothedistanceさんのエントリに対するはてブコメントは、その辺の定義のくみ取りが難しいので、結構雑然としている感があります(それがまた面白いです)。

 

僕個人の意見としては、「スーツ」「ギーク」ってのは、相反するように見えて実は全然違うベクトルのものじゃないかと思っています。

080104_01.gif

じゃなくて、

 

080104_02.gif

こんな感じ。

「スーツ」ってのは、技術をお金に換えたり、プロジェクトを管理することができる人のことで、「ギーク」ってのは、持っている高度な技術力でシステムを作ることができる人のこと。服装は特に問わないですよ。カジュアルな「スーツ」がいても良いし、スーツ着ている「ギーク」がいても良いじゃないですか。

ただ、営業・管理職だからスーツとか、プログラマはギークとか、単純なものではなくて、そのベクトル上の極めちゃっている人のことだと思います。

だから、「仕事をろくにしない人」とか「技術に無関心」とかいう論調で「スーツ」という言葉が使われたり、普通のエンジニアやプログラマが「ギーク」と名乗ったりすることに、かなり違和感を覚えます。

「スーツ」で「ギーク」な人もいるじゃん、と。まあ、そう思ってないとSIerの中で頑張っていけない自分がいるのですが。

ま、これは僕の「スーツ・ギーク観」なので、これが正しいですよというつもりはなく、自分はこう考えてますという意思表示ですわ。

で、自分はどっちもできるようになりたいなと思っています。上の図でいったら、目指すのは、「スー・ギーの10,10」ですね。

今はそうなるためにはどうすれば良いんだろ受かってことを模索中ですわ。

最近思うのは、大事なのは「自分と価値観の違う人と如何に付き合っていくか」ってことじゃないかなと。

 

あと、id:habuakihiroさんのエントリの中の「スーツ」は、「仕事もろくにしないのに偉そうに他人をこき使って給料をもらってるやつ」と定義されてますが、これが多い会社はいい会社かって、んなわけないと思うのです。

そういう職場環境にいる人へのメッセージは、「小さい会社へ行け」とか「あきらめろ」とかだけじゃなくて、「自分が働きやすい職場環境にしていけ」っていう第3の選択肢も加えて欲しいなと。

職場環境は変えられますよ。

それこそかなりの根気と努力(アイデアでカバーできる)が必要だけど。

職場が暗いなぁと思ったら、自分から挨拶して声かけて回るとか、花でも買ってきて飾ってみるとか、ブラインド開けるとか、パーティション取り払うとか。今やっている業務が自分のやりたいことじゃなかったら、やりたいことができるだけの技術を身につけたり、上司や上司の上司と交渉したりすればいい。会社を辞める前に、色々できることはあるわけです。

逆に、この努力をしておかないと、どこにいっても一緒ですよ。

ただ、やりたいことがその会社ではできないのであれば話は別。

例えるなら、八百屋で働いているとして、魚が売りたいと思ったら魚屋に転職すれば良いし、八百屋の仕入ればかりじゃなくて店頭で接客したいとか、八百屋の販売をもっと効率よくしたいのであれば、その八百屋でできるだけのことをしてみれば良いと思います。

 

なんか話が途中からずれちゃいましたが、SIerの中でギークっぽく(あくまで「っぽく」)働くことは全然可能ですよ(というかそう思いたい)ってことです。

2008年1月 3日

Skype on PSP ?

PSPでいよいよSkypeが使えるようになるみたいです。

Skype for PSP、CESで発表? - Engadget Japanese

そろそろ来るらしい、と囁かれていたPSPの「新機能」はまもなく開催のCES 2008で正式発表となるようです。外付けマイク2個セットというVoIP以外考えられない周辺機器の発売予定からなんらかのタイミングで発表と考えられてきましたが、リンク先のソニー CESプロモサイトにははっきりと「Skype for PSP system」の文字が見つかります。

SonyのプロダクトではmyloでSkypeが使えて、これmash up award 2nd の賞品でもらって使っているんですが、myloを持っている友達がいたらかなり便利だろうなと思いました。残念ながら、僕にはそういう友達はいないので、Skype端末としては利用していないのが現状です。

記事では、「ちょっとショット」によるビデオチャット機能の可能性にも触れられていますね。

「ちょっとショット」買ってみようかな。あれって普通のWebカメラ的に使えるのかな。

PSPでustream.tvに接続して、「ちょっとショット」を使ってビデオ中継なんてできるんだろうか。できるんだとしたらかなり便利だと思うんだけど。

2008年1月 2日

WEB+DB PRESS Vol.42

 

年末に買っておいたWEB+DB PRESSを正月休みを使って読みました。

今回もおもしろい記事が多かったですが、その中でも「Alpha Geekに逢いたい」と「ニコニコ動画構築ノウハウ大公開」、

「最新版 Senna 対応 ゼロからはじめる検索プログラミング」は良かったです。

 

アルファ・ギークに逢いたいの方は、jQueryの開発者John Resig さんが登場。JavaScriptに対する想いとか語ってます。

良いなと思ったのが以下のくだり。

弾●ただのエンジニアとすごいエンジニアを分けるものは何でしょう?

Resig●あえて機能を追加しないことができる人がすごいエンジニアだと思います。すなわち具体的に何が重要であり、かつ何が重要でないかということを理解したうえで、その理解の上で最適化ができる人。

確かにそうだよなー。 「あえて」という言葉に重みを感じますね。jQueryがシンプルで軽量なライブラリになっているのは、開発者がこういうことを考えているからなんだろうなと思いました。

 

ニコニコ動画の方は、ニコニコ動画のシステムアーキテクチャや負荷対策、ニコニコシリーズのノウハウの話が面白かったです。

動画サイトの構築なんて仕事でもなかなかないので、こういう形で少しでも情報を提供してもらえるのはありがたいです。

 

検索プログラミングは、仕事でたぶん使うことがあるので、普通にためになりましたね。後、Senna 。オープンソースで開発されている検索エンジンで、注目のプロダクトです。

 

WEB+DB PRESS Vol.42
WEB+DB PRESS Vol.42
posted with amazlet on 08.01.03
WEB+DB PRESS編集部
技術評論社 (2007/12/22)
売り上げランキング: 900

2008年1月 1日

謹賀新年

あけましておめでとうございます。

年始なので、抱負的なことを書きます。

目標その1:何らかのオープンソースプロダクトに関わる。

→これは昨年末くらいから漠然と思っていたことで、使う側だけじゃなく作る側にも回ってみたいなぁと。僕のしょぼい技術力で何ができるのか分かりませんが、そういうコミュニティとかに積極的に関わっていければと思っています。

 

目標その2:オフ会へ積極的に参加する。

→もうすぐ2人目が生まれるので、どこまで実現できるか分かりませんが、勉強会とかオフ会とかに積極的に顔を出して行ければと思っています。第1弾は、2/2の197Xsの集まりかな。

 

目標その3:英語ブログを50エントリ以上書く。

→実はひっそり始めている英語ブログ。50エントリ以上なので、週に1度のペースで記事を書きたいです。

 

あんまりたくさん挙げても実現できないので、とりあえずこの3つだけにしておきます。

 

というわけで、今年もぼちぼち更新していきますので、よろしくお願いします。