リクルート WEBサービス UI Library でお手軽マッシュアップ開発
fuss-free mashup with Recruit WebService UI Library
( PDF document 2.9MB)
※オリジナルの powerpoint 版はこちら (12.3MB)
photo by takesako さん via Flickr
そっぽ向いているツレない m 氏
もっと見たい方はこちら - see more photos here]]>
これでレポーティングは終了っと。
]]>
そこで、Leopard登場から数ヶ月経過後、今更ながら簡単な使い方ガイダンスをご紹介。
]]> 目次WebページやPDF / テキストファイル等を表示中、調べたい単語の上にマウスカーソルを乗せた状態で、キーボードの以下の3つのキーを同時に押す事で...
command + control + D
辞書での検索結果がポップアップ表示されます:
キー3つで手軽に辞書で調べられる、しかもOS標準搭載の機能なんて素敵すぎ。
この後、キーは押しっぱなしのまま、マウスでポップアップ左下のプルダウンを開く事で「和訳を表示」「国語辞典で表示」「英英辞書で表示」といったように辞書を切り替える事ができる模様。
また、ポップアップ右下の「詳細...」ボタンを押すとより見やすい全画面表示になります:
押すキーを3つも覚えられるわけ無いでしょ、という方に。調べたい単語の上にマウスを持っていき、そこで
1. control キーを押しながらクリック 2. 出てきたメニューの中から「辞書で調べる」を選択
これで辞書が全画面表示で開きます。これならまだ覚えやすいかと。
自分で単語を入力したい場合にお手軽なのが Spotlight を使う方法。Spotlight は入力された単語で辞書も検索してくれるみたいです。すばやく Spotlight に単語を入力するには、Finderだろうが他のアプリ使用中だろうが関係なく、おもむろに
1. control + スペースバーを押す 2. 単語を入力
とこれだけで検索結果がズラズラ表示されます。その中で「定義」カテゴリに表示されている項目をマウスオーバーするとポップアップで意味が表示され、クリックで全画面表示になります。お手軽。
Mac OS X のバージョン 10.5.2 ではデフォルトで
が検索対象ONになっていますが、メニューバー > 辞書 > 環境設定... ウィンドウにて項目にチェックを入れる事で、以下の辞書を追加する事もできるようです:
ついでに、このウィンドウで辞書リストをドラッグする事で並び順を変えられ、一番上にある辞書が command + control + D でポップアップさせた時に使用される辞書になります。
タブバーに表示されている辞書名をクリックする事で使う辞書を切り替えられますが、これはキーボードショートカット:
command + shift + ] で次の辞書を選択 command + shift + [ で前の辞書を選択
でラクチン操作が可能です。
ついでに shift を押さずに command + ] または [ だと、単語検索履歴の next / back になりますので混同注意。
OS標準のテキストエディットやSafari等、cocoaアプリは問題無く command + control + D でポップアップ辞書引きが出来ますが、Mozilla Firefox等の一部のアプリではポップアップ辞書も、control + クリック > 「辞書で調べる」も共に使えません orz
対応策は以下の方々の記事を参照の事:
UsingMac.com - Leopard Tricks : Dictionaryより。Safari または Firefox のURLバーに
dict://第二次世界大戦
なんて入力して return キーを押せば、全画面で辞書が表示されるようです。Firefox の場合、初めて実行した際にダイアログが出ますが「今後同様の処理をする」にチェックを入れておけば2回目以降はOK。Firefox で辞書を使う最短策はこれでしょうか。
※ちなみにブラウズ中にURLバーにカーソルを移動させるショートカットは command + L です。併用するとイイ感じです。
windows でも同じように英語サイト読んでる際に単語の和訳を調べる方法は、同僚の寺井くんが素敵にまとめたこちらの記事をどうぞ
trick7.com - 英辞郎第三版と"Mouseover Dictionary"アドオンで海外サイトを読みまくる
* Mac いいわー。某 major OS には無い軽快なUIレスポンスとかも含めて。
]]>
うちのオフィスのタタミ部屋にて。CNETに顔掲載。やったー！。ちなみにひざ枕は女性社員の私物。
]]>$.getJSON( 'http://.../api', { callback: '?' }, function (){} );]]>
一方、第一引数のURL文字列に callback 指定をする方式だと今までどおり問題なく動作する模様:
$.getJSON( 'http://.../api?callback=?', function (){} );
引数の書式で動作が異なるのでトリッキーすね。僕の環境 Windows x Mozilla Firefox 2.0.0.12 にてバグ確認できています。検証用のデモページはこちら。
リクルートWEBサービスなんてのを作って、JSONP利用を推進したい気満々な自分からしたら、このバグは痛いので慌てて jQuery コード読み漁ってなんとなく原因特定した次第。本家 jQuery な方々にはバグレポートを投げてみたので、そのうち解消される(といいな)はずですが、とりあえず今すぐ JSONP な v1.2.3 を使いたい方のために、僕の稚拙なコード修正を加えた解消版をここに晒しておきます。ご利用は自己責任で...
download jQuery 1.2.3 - with JSONP bug fix
ちなみに改修箇所はこれです(diff patch)。
オマエそれ既出だっつーの、なんて本家 Resig さん達に突っ込まれたらかっこ悪いなあ...
2008/02/20 追記
やっぱり既出でした。
http://dev.jquery.com/ticket/2020
$.getJSON() 第二引数の param hash に文字列として '?' が混在した際に、jQuery が勝手に jsonp callback だと認識してしまって困る！という事象が過去にあって、件の param hash を使った jsonp 指定は depricate (機能削除) したそうです。
なるほどー！
developer メーリングリストに一声かけずに、いきなり trac ticket 登録しちゃって恥ずかしすぎ orz
]]>自分のsvnクライアントがSSL対応しているかどうかを調べる方法:
$ svn --version ... * ra_dav : Module for accessing ... - handles 'http' schema - handles 'https' schema // この記述があればOK ...
CentOS4.xの yum 使って入れた subversion (subversion.i386 1.1.4-2.ent) にはきちんとSSLオプションがついていたので、ディストリビューション提供モノは心配無用なのかも。今回は自前で make したやつを使っていたので再インストールして対処。以下、SSL対応させる為の configure オプション:
1. neon (必要ライブラリ):
$ cd neon-0.26.1/
$ ./configure --with-ssl
$ make install
2. subversion
$ cd subversion-1.4.4/
$ ./configure --with-apxs --with-ssl
$ make install
※職場の先輩曰く以前に同サービスを試した際は、普通に http:// なURLで svn import できていたそうな。
]]>There's nothing I have to have, there's nothing I have to do, and there's nothing I have to be, except exactly what I am being right now. That does not mean that "having" and "doing" will be eliminated from your life. It means that what you experience yourself having or doing will spring from your being - not lead you to it.
When you come from "happiness", you do certain things because you are happy - as opposed to the old paradigm in which you did things that you hoped would make you happy. When you come from "wisdom", you do certain things because you are wise, not because you are trying to get to wisdom. When you come from "love", you do certain things because you are love, not because you want to have love.
Everything changes; everything turns around, when you come from "being", rather than seeking to "be." You cannot "do" your way to "being". Whether you are trying to "be" happy, be wise, be love - or be God - you cannot "get there" by doing. And yet, it is true that you will be doing wonderful things once you "get there."
Here is the Divine Dichotomy. The way to "get there" is to "be there." Just be where you choose to get! It's that simply. There's nothing you have to do. You want to be happy? Be happy. You want to be wise? Be wise. You want to be love?
Be love.
That is Who You Are in any event.
- Neale Donald Walsch -
Thanks for sharing, Francesca.
得なければならない物なんて無く、
やらなければならない事なんて無く、
成らなければならない姿だって無い。
今の自分で在る事で、すべてが満ち足りています。
でもそれは" 何かを得る" 事や "何かをやる" 事を抑制するわけではありません。それらの体験は、あくまであなたが "在る" 事の結果であり、過程では無いというだけの事。
満ち足りた心が在ると、あなたは幸せと思うがゆえに行動を起こす。従来の考え方: 幸せを感じられるだろうと思い行動を起こすのとは反対に。
英知が在ると、あなたは賢いがゆえに行動を起こす。英知を習得すべく行動するわけでは無く。
愛が在ると、あなたはその愛情のゆえに行動を起こす。愛が欲しくて行動するわけでは無く。
すべてが変わります。
"成りたい" では無く "在る" を郷とする事で、すべてが逆転します。何かを成した末の "在る" はありません。幸せも、英知も、愛も、成ろうとしても辿り着けません。神に成る事もできません。でも、そこに辿り着く事で、あなたが素晴らしい行動を起こすであろう事は間違いありません。
神の二分法はここなんです。]]>
そこに辿り着く方法とは、そこに "在る" 事。
選んで、後はただそう在れば良い。
それほど簡単な事。何かしなければならない事は何も無い。
幸せになりたい？ならば幸せで在ればいい。
賢くなりたい？ならば賢く在ればいい。
愛を表したい？
愛で在ればいい。
何が起きようとも、あなたはそういう存在なのです。
- ニール・ドナルド・ウォルシュ -
これらをいかに少ない手間で実現できるか。hacker諸氏ならばちょろっと頭使えばできるのでしょうが、自分はウダウダ時間かけて悩んでしまいました orz。以下3通りの解決策です。
目次
Thousand Yearsさんの記事 JavaScript継承パターンまとめ にて紹介されていたエクステンドなる関数を使った手法が一番お手軽な模様:
function extend( s, c ){
function f(){};
f.prototype = s.prototype;
c.prototype = new f();
c.prototype.__super__ = s.prototype;
c.prototype.__super__.initialize = s;
c.prototype.initialize = c;
return c;
};
// 親クラス
Animal = extend( Object, function ( arg ){
this.name = arg.name || 'unknown';
this.voice = 'grunt';
});
Animal.prototype.bark = function (){
return this.voice;
};
// 子クラス
Dog = extend( Animal, function ( arg ){
this.__super__.initialize( arg );
this.voice = 'bow wow';
});
// 孫クラス
Chiwawa = extend( Dog, function ( arg ){
this.__super__.initialize( arg );
this.voice = 'pow pow';
});
子/孫クラスのコンストラクタ内にて this.__super__.initialize() を実行することで、親のコンストラクタが呼び出される仕組み。Chiwawa の中では this.__super__ == Dog.prototype を、 Dog の中では this.__super__ == Animal.prototype をきちんと指し示す辺りが無名Function + prototype プロパティの妙技かと。Thousand Yearsさんに感謝。正直まだ把握しきれていません orz
ある程度きっちりと親・子・孫クラスの実装をした上で、一通りのテストコードを走らせてみたところ問題は無い模様。以下ソースです:
v1.5.x までの prototype.js で提供されていた Class.create() は特に何をしてくれるわけでは無かったのに対し、v1.6.0 ではググッと機能が充実して、今回の目的にぴったりなモノに仕上がっていました。こら使わない手は無い。
新 Class.create() の追加機能:
簡単なコードで表すとこんな感じになります:
// 親クラス
Animal = Class.create({
initialize: function ( arg ){
this.name = arg.name || 'unknown';
this.voice = "hi i'm animal";
},
bark: function {
return this.voice;
}
});
// 子クラス
Dog = Class.create( Animal, {
initialize: function ( $super, arg ){
$super( arg );
this.voice = 'bow wow';
}
});
Dogクラスを定義する際、Class.create() の第一引数に Animal を渡す事で親クラスを指定。これでメソッドの継承はOK。さらに、Dogクラスのコンストラクタ - initialize() - の第一引数名を $super にしておくと、$super に親クラスの同名メソッドが typeof $super == 'function' な形で渡ってくる。これを実行すると Animal.initialize.apply( this, arguments ) と同じように、this スコープは Dog なままに親の initialize を実行することができます。まあ便利。
親・子・孫クラスまで用意して、一通りのテストコードを書いてみたところすんなり通ったので、特にイレギュラーな問題は無い模様。以下ソースです:
Class.create() の為に prototype.js ファイルをまるごと読み込むのは気が進まない...。v1.6.0 の prototype.js は通常サイズで122KB、改行等を除去したミニ版で90KBと、それなりのファイルサイズを毎回ブラウザにて読み込む事が必要になってきます。まぁユーザ的には大して気にならないのかもしれませんが、Class.create() 使いたいだけなのに、代償が100KB前後のファイル読み込みと言われると・・・開発者としてはちょっと気が進まないので、prototype.js のコードから Class.create() に必要な部分だけを抽出して単独ファイルを作ってみました。
Class.create() だけを抽出した単独ファイル:
もとの122KBに比べると5.4KBと劇的なサイズ減。これなら心的不安は一気に解消！かと。あるいは自身の js ファイルの冒頭辺りに上記ファイル中のコードをまるっとコピペして使うのもOKですね。イイと思って貰えるならば、どうぞご活用くださいませ。
※ついでに packer で圧縮したバージョンはこちら (3.0KB)
※抽出の副産物として、Class.create() の他にも Object.extend() と $A() が利用可能になっています。それと変数 $ には一切触れていません。
あるいは Class.create() とか、自作した専用の俺 class_extend() 関数とかには一切頼らず、クラス定義の書き方を工夫するだけで実現する方法はこちら:
// 親クラス
Animal = function (){
this.init.apply( this, arguments );
};
Animal.prototype.init = function ( arg ){
this.name = arg.name || 'unknown';
this.voice = 'grunt';
};
Animal.prototype.bark = function (){
return this.voice;
};
// 子クラス
Dog = function (){
this.init.apply( this, arguments );
};
for ( var k in Animal.prototype ){ // メソッド継承
Dog.prototype[ k ] = Animal.prototype[ k ];
}
Dog.prototype.init = function ( arg ){
Animal.prototype.init.apply( this, arguments );
this.voice = 'bow wow';
};
Class.create()の時と同様、親・子・孫クラスを用意したうえで同じようなテストコードを流しても問題は無い模様。以下ソースです:
書こうと思えば *.prototype は使わずにコンストラクタやらメソッドやらをまとめて定義する事も可能ですが:
// NGパターン
Animal = function ( arg ){
this.init = function ( arg ){
this.name = arg.name;
this.voice = 'hello';
};
this.bark = function (){
return this.voice;
};
this.init( arg ); // コンストラクタ実行
};
↑こう書いてしまうと、後で子クラス側でこれらメソッドを Animal.init() のように、インスタンス化せずに引っ張ってこれなくなってしまうのでNG。特にコンストラクタ init() は子クラスから呼び出す事が必須なので *.prototype オブジェクトの中で定義したうえで、apply() を使って実行すべし。
Animal = function ( arg ){
this.init.apply( this, arguments );
};
Animal.prototype.init = function ( arg ){
this.name = arg.name;
this.voice = 'hello';
};
Animal.prototype.bark = function (){
return this.voice;
};
apply()は本来関数の this スコープを一時的に変更させる為の機能(いわゆるdelegate)ですが、ここでは単に「引数をそのまま init() に渡しなおす」為に使っています。
コンストラクタが Animal.prototype.init の形で引っ張ってこれる状態であれば、子クラス Dog のコンストラクタにてこれを実行させることができるようになります。よっしゃ。
Dog.prototype.init = function ( arg ){
Animal.prototype.init.apply( this, arguments );
this.voice = 'bow wow';
};
this.super.init.apply() みたいにカッコよく呼べないのが難ですが。巧いやり方思いつかなかった orz
こっちの apply() こそ、this スコープを Dog として親の init() を実行するという本来の使い方ですね。
よく見かける継承の記述:
Dog.prototype = new Animal();
はお手軽な反面、Animal のコンストラクタでやれることが限られてしまうのでNG。たとえば Animal コンストラクタの中で、引数で渡されたID値のエレメントの存在をチェックする... なんて実装:
Animal.prototype.init = function ( id ){
if( !document.getElementById( id ) ){
alert( '指定された要素は存在しません' );
}
};
を書いてしまうと、前述の継承記述のタイミングで id == undefined な状態で init() が実行されて alert が出てしまいます。あるいは継承時の実行を示す何かを引数に渡すように書けば解決しますが:
Animal.prototype.init = function ( arg ){
if( arg.is_extends ){
return; // 継承時なら何もしない
}
// 以降、通常の処理
};
Dog.prototype = new Animal({ is_extends: true });
これもやや面倒くさい気が。なのでこれらを避ける為にも、継承の記述は:
for ( var k in Animal.prototype ){
Dog.prototype[ k ] = Animal.prototype[ k ];
}
と、for ループで親のメソッドやらプロパティやらをコピーしてあげるべし。
※継承関係を設定するのに Animal インスタンスを作るって、なんか気持ち悪るいかな、なんて。
※ただしこの方法はすべてのメソッド・プロパティを *.prototype として定義しておく前提のお話。
この amachang with danさんな記事を読んでいて、以下の簡略的な書き方でもいけるか？と思ったけど
Dog.prototype = Animal.prototype;
これだとプロパティコピーでは無く、両方とも同じオブジェクトを指す形ゆえ、Dog.prototype.init = function (){ ... } と書き換えた時点で Animal.prototype.init も書き換わってしまう為、孫クラスの init() の中で Dog.prototype.init.apply() しようとすると deep recursion が起きちゃってNG。テストコードはこちら。む、残念。
以上、現時点で僕が調べた限りの情報をうだうだ書き連ねてみました。まだ javascript の事を良くわかっていないので、間違いやら勘違いやらを見つけた際には、こっそりコメント欄にて指摘していただけると幸いです m(_ _)m
prototype.jsのミニ(改行除去)版やらpack版を本家サイトで見かけなかったので、別途作成したものをここでついでに共有しておきます。さらに記事では触れなかったjQueryも。ついでにww
3,500g のでっかい息子でした。名前は
悠 月
ゆ づ き
です。ウサギのエッセンス (月) と、悠々・悠久 辺りのイメージをあわせつつ、呼びやすい名前 (yuzu) という事で。
生まれてはや3ヶ月、毎日チビ中心の生活を送ってます。料理を覚えて、ヨメの代わりに夕飯なんぞ作ってみたり。朝早起きするようになったり。いろいろな変化を楽しみつつ。
なにより、子供なんて興味無かった自分がすっかりデレデレオヤジと化していることが一番の驚き。コレは本能から込み上げて来るものみたいです。ああ、愛しのゆづたん・・・。
というわけで息子をどうぞよろしくです。
このデモページのように、テキスト等にマウスを乗せると噴出しを表示させる事が出来るようになる便利プラグイン。配布元のサイトにもドキュメンテーションはあるものの、すぐに使い始めてみたいヒトや頻繁に再利用したいヒト (自分) の為に最低限必要な要素をまとめたサンプルページをここに置いておきます。
]]> jQuery Tooltip プラグイン サンプルページ以下の css 設定にする事で、カスタマイズが容易な基本レイアウトになります:
#tooltip {
position: absolute;
width: 12em;
background: #999;
padding: 10px;
}
#tooltip h3, #tooltip div {
font-size: 1em;
font-weight: normal;
margin: 0;
}
#tooltip > width で噴出しの横幅を設定できるので、お好みで。
title属性にテキストを格納しておく事で、tooltip pluginがそれを噴出しにして表示してくれます。
<a href="hoge.html" title="my tooltip text">link</a>
<span class="memo" title="some text">メモ書き</span>
今のところ、噴出しで表示可能なのはテキストのみっぽい。
$().Tooltip() メソッドを実行する事により、マウスオーバー時に噴出しが表示されるようになります。
$( 'a' ).Tooltip(); $( 'span.memo' ).Tooltip();
引数にいろいろ渡す事で、噴出しごとに挙動を変える事も可能な模様。詳しくはドキュメントを参照。
その他の Tooltip/噴出し系 jQuery Plugin:
]]>もともとコレを書いてくれていたページがどこだったか忘れた。作者さん申し訳ない m(_ _)m
]]>10-fast-fingers.com - speedtest
何回か試してみて大体この辺りが限界でした：
中学生の頃は誰よりもブッチぎりで速かったんだけどなぁ・・・はてブ見るともっとブッチぎりな方々がいらっしゃる。リスペクト++。
]]>
僕の所属している会社がめずらしく、というか初めて、真剣に「WEB技術およびWEBサイト構築・運用に詳しいエンジニアまたはディレクター」の人材募集をしています。この会社には、クリエイティブディレクターと呼ばれる「広告プロモーションの企画屋さん」がたくさん居て、多くの企業の採用コンテンツ(リクナビ含む)を作っています。その多くはFLASHやら動画やらを駆使したイカしたコンテンツなんですが、そんな彼らはぶっちゃけ「今の世の中にどんなWEB技術があって、それぞれ実装・活用がどの程度難しいのか、よーわからん」という悩みを抱えています。簡単なCGMサイトを作りたくて、パートナーの開発会社さんに見積もりをお願いしたら一千万級の金額が返ってきてヘコんだりもしています。相場観が判らない。気軽に試せない。
]]> 彼らの仕事例：今回募集しているのは、そんな彼らのすぐ隣で、随時「そのアイディアだったら、これら技術の組み合わせでいけるんじゃね？」「それだったら、こんなサーバ構成でお手軽に実装できますよ」「じゃあ来週までにプロトタイプ作ってみますね」なんて役回りで、共にイカしたサイト／コンテンツをバシバシ作っていけるような人みたいです。技術オリエンテッドなディレクター職？
詳しくはこちらのリクナビ募集詳細ページを見てみてくださいませ。大きな会社ですので、給与・待遇うんぬんは良いと思います。今がチャンス！っつーことで、ぜひ。