こんにちはhohtaです。オフィスが新しくなってからはや1ヶ月、移動したばかりの時はひろびろーとした感じでしたが採用活動が順調らしく、人口密度が上がってきました。 さて、提題の件ですが今回は技術的な話からちょっと離れて弊社にある壁を紹介したいと思います。一口に壁と言っても言語の壁、文化の壁、人生の壁、ぬりかべなど概念的なものから建物の壁面といった物理的なものまで様々ですが、この記事で扱うのは物理的な壁、新オフィスに作られているクライミング（ボルダリング）用の壁を紹介します。 どんな壁？ こんな壁です。全長7m、高さ2.2mで手前が垂壁（90度）、奥が110度と角度がついています。建物の構造上高さが少し物足りないですが、そこは課題をトラバース（横移動）メインにしてカバーです。ちなみに、マットは埋込式ではなくボルダリング用のクラッシュパッドを登るときに敷いて使っています。埋込式と違ってスペース

こんにちは、五十川です。 RjDjというiPhoneアプリをご存知でしょうか。既によく知られたアプリですが、音声入力やタッチパネル、加速度センサーなど、iPhoneのデバイスインタフェースを使って、ユニークな音響をインタラクティブに作り出すことができるアプリです。と言っても、RjDj自体はその上で動作するアプリケーションのプラットフォームであり、さまざまなアプリケーションをインストールすることで、それぞれに異なるサウンドが体験できます。 RjDj上で動作するアプリケーションは「シーン」と呼ばれます。 以下のビデオの冒頭で流れる映像の音声は、Eargasmというシーンによる録音で、緩やかに流れる背景音に、深いエコーがかかった子供の声が重なり、なんだか夢の中にでも迷い込んだかのような雰囲気が醸し出されます。このシーンは、iPhoneのマイクが拾った音をリアルタイムに加工しており、それを加速度セ

Keitaです。 バレンタインデーも近づいてきた今日この頃皆様どうお過ごしでしょうか。 例年、僕はとても憂鬱なのですですが、今年は、ImageMagickがあるのでとてもハッピーになれそうです。 そんなどうでもいいことはおいておいて、たまに、Webサービスで正方形でサムネイルを出しているサイトがあると思います。 具体的にいうとこんな感じの画像が sample posted by (C)フォト蔵 こんな感じの画像になるイメージです。 sample_imagick posted by (C)フォト蔵 こういう画像をPHPで作る場合には、imagickを使うと簡単に作れます。 <?php $width = 200; $height = 200; //Imagick $image = new imagick(); $image->readImage('sample.jpg');

尾藤正人(a.k.a BTO)です 僕の偏見かもしれませんが、Webプログラマの方の多くはコマンドラインをうまく活用できてないように感じます。 コマンドラインを使いこなすには最初にある程度の勉強が必要で、その敷居の高さのせいであまり便利さが感じられないのかも。 そこで、今更ながらコマンドラインの便利さを高らかに主張してみます。 ワイルドカード ワイルドカードという特殊文字を使うと特定パターンのファイル名を簡単にしてできます。 これは知ってる人も多いので、詳細は割愛。 ワイルドカードでうまくいかない場合は後述するfindコマンドを使います。 zshのワイルドカード zshのワイルドカードを使うと、ちょっとしたfindコマンドのようなファイル名のマッチができます。 簡単に紹介すると次のようなことができます。 echo **/foo # 再帰的に 'foo' にマッチ echo *(/)

stoplightで最大化したターミナル上でzshとscreenとEmacsを立ち上げ、 明朝体フォントでプログラミングするbokkoです。 今回はバージョン管理システムの1つであるMercurialについて紹介します。 ウノウではSubversionとTracを組み合わせて開発を行っていますが、 僕個人では今年の春ぐらいからEmacsやzsh、screenなどの各種設定ファイルをMercurialでバージョン管理しています。 Mercurialとは？ Mercurialは分散型のバージョン管理システムです。 これに対して、CVSやSubversion(以下SVN)は集中型のバージョン管理システムにあたります。 分散型と聞くと難しそうなイメージがわくかもしれませんが、 CVSやSVNに比べてると、より手軽にバージョン管理を行うことができるというのが、 Mercurialに対する僕の印象です

ウノウでは少数派なEmacsユーザのbokkoです。 今回は自分でEmacsLisp(以下、elisp)を書いてEmacsを拡張する際のTipsについて紹介します。 拡張する際に気に留めておくこと Emacsを拡張する上で覚えておくべきなのはEmacs上で行える対話的な動作は「M-x 関数名」で実現できるということです。例えば、C-bはカーソルを1文字分左へ戻しますが、これは「M-x backward-char」とタイプすることと同じです。もしC-bが押しにくい(多分私だけです)のであれば、以下のようなelispを評価してキーバインドを変更することができます。 (global-set-key "\C-l" 'backward-char) Emacsではこのようなキーバインドに限らず、あらゆる操作をelispを使って変更したり、新たに定義することができます。関数名もしくはキーバインドの一方し

週末に眼鏡と財布が壊れて踏んだり蹴ったりなbokkoです。 最近、週末に他の人が書いたソースコードを解析したりして遊んでいるのですが、 今回はその際によく使っているツールについて紹介したいと思います。 moccur-edit.el これはソースコードを全体を検索する際によく使っています。 findとgrepをパイプでつなぐだけでも十分な気がしますが、 moccur-grep-findとmoccur-grep-gotoを組み合わせて使うと、 すぐさま該当箇所にジャンプできたりするので、楽々検索できます。 また、moccur-edit.elにはほかにも複数のファイルに散らばっているキーワードを 1つのバッファ上で編集できるなど非常に強力な機能が備わっているので、 Emacsを使うなら必ず入れておくのがオススメです。(tramp経由でmoccur-grep-findを実行するとすご

yamaokaです。 Ajaxの普及に伴い、JavaScriptで扱いやすいJSON形式で サーバーからのレスポンスを返すことが増えてきているように思います。 PHPでJSONを扱う方法についていくつか紹介します。 JSON関数 もともとPECLの拡張モジュールとして提供されていましたが、 PHP 5.2.0以降、デフォルトでPHPに組み込まれるようになっています。 そのため、最も利用しやすい形式なのではないかと思います。 利用方法は以下のとおりです。json_decodeの戻り値はオブジェクトになります（第2引数にtrueを指定すると連想配列になります）。 $values = array('company' => 'ウノウ', 'name' => 'yamaoka'); $json = json_encode($values); // string '{"company":"\u30a6

こんにちは、山下です。 今回は、jQueryのパフォーマンス最適化について説明したいと思います。 軽量と言われているjQueryですが、いろいろな機能を実現しようとして複数のプラグインを導入すると、だんだんと動作が重くなってきます。サーバ側をいくらチューニングしたところで、ブラウザ側での処理に時間がかかっていたら、せっかく訪問してくれたユーザに重いサイトとして認識されてしまいます。以下に、ウノウで運営している「映画生活」で実際に行っている方法を紹介します。 1. Packed版ではなくMinified版を使う jQuery1.1まではPacked版のみだったのですが、jQuery1.2からMinified版もダウンロードできるようになりました。Packed版よりもMinified版を使うことをお勧めします。どう違うのかというと、Packed版はファイルサイズを極限まで削減するために静的辞

shimookaです。 皆さんはPHPでデータの暗号化・復号をする必要に迫られた場合、どのようにしているでしょうか？今回は、PHPで利用可能なモジュールやパッケージとそれらのサンプルを3つほど挙げてみました。 mcrypt拡張モジュールを使った暗号化 libmcryptを利用したPHP拡張モジュールです。DES、3DES、Blowfish、RIJNDAEL（ラインダール：AES暗号とも呼ばれる）、Blowfishなどのブロック暗号をサポートしています。利用可能な暗号モードはCBC、OFB、CFB、ECBです。 PHPで利用するには、libmcryptをインストールし、configureオプションに「--with-mcrypt」を付ける必要があります。また、PHP5以降、libmcrypt 2.5.6以降が必要です。 以下は、SSHやファイル暗号化ソフトウェアなどに広く利用されているBlow

bokkoです。 Webアプリケーションではページングの処理を行うことがよくありますが、実際にこの仕組みを作るには少々手間がかかるので、この処理を肩代わりしてくれるライブラリがほしいところです。 この手のライブラリは、PHPではPEAR::Pagerが有名かと思います。 簡単な例 とりあえず、使ってみましょう。(動作確認したVersionは2.4.4です) require_once('Pager/Pager.php'); $params = array( 'mode' => 'sliding', 'delta' => 5, 'perPage' => 5, 'prevImg' => '<<', 'nextImg' => '>>', 'totalItems' => '1000' ); $pager =& Pager::factory($params); echo $pager->links;

auとSoftBankの絵文字については、下記のページに公式の情報が掲載されています。しかし、情報がPDFであったり、HTMLであったりと、プログラムから使うのが難しいという問題があります。 EZFactory 絵文字 EZWeb絵文字一覧【タイプD】(リンク先はPDF) ソフトバンク 絵文字一覧 そこでこのPDFとHTMLをYAMLにしてみました。 諸般の事情により公開を停止しました。代わりに、同様の情報の取得方法に関する記事へのリンクを紹介いたします。 Ruby: http://d.hatena.ne.jp/tokuhirom/20070706/1183707279 Ruby: http://moriq.tdiary.net/20070211.html#p01 Ruby: http://d.hatena.ne.jp/urekat/20070927/1190905959 Perl: ht

Extは、ウェブアプリケーションを構築するための、クライアントサイドのJavaScriptフレームワーク（公式サイトのFAQより）です。日本ではまだ実際の利用例はあまり多くないようですが、たぶんに日本語のドキュメントがまだそれほど多くはないからではないかと思われ、今後利用事例は増えていくだろうと思われます。 Extの真骨頂は高機能でデザインの洗練された、（直ちに利用可能な）レディメイドのユーザインタフェースウィジェット群です。Extは「アダプタ」として、prototype.jsやjQuery、Yahoo! UIといったJavaScript拡張ライブラリを利用する設計ですが、現在は独自のアダプタも用意され、サードパーティのライブラリに依存しない実装も可能です。 現時点での安定版はバージョン1.1ですが、既に、大幅な機能強化が図られたバージョン2.0のアルファ版が公開されており、以下のページで

yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo

harukiです。 ケータイユーザも検索エンジンから来るユーザも増えています。 そのため、携帯サイトも検索エンジンのクローラへ対応する必要があります。 ・Mobile Link Discoveryの記述を追加する PC用のページのheadタグ内に <link rel="alternate" media="handheld" href="(ケータイURL)" /> の記述を追加するだけです。 Mobile Link Discoveryに対応しているサイトでは、ケータイからのアクセス時に直接アクセスしてもらえるようになります。 Mobile Link Discovery 仕様 http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html 検索エンジンでは、Googleモバイルのgoogle mobile proxy http

Keitaです。 携帯画像で待ち受け画像などで、ダウンロードはできるけどメールに添付できないタイプの画像があるとおもいます。 ここらへんどうやるか、気になって調べてみると、 Docomoと、AUは画像のコメント部分に、それぞれ、特定の文字列を入れれればいいようで、 Docomoの場合「copy="NO"」、KDDIの場合「kddi_copyright=on」を追加することでで、携帯でダウンロードできるが、メールなどで転送できない画像が作れました。 具体的に、MagickWand For PHPを使う場合には以下のような感じでヘッダを埋め込みます。 <?php $image = NewMagickWand(); MagickReadImage($image, 'Keita_s.jpg'); MagickCommentImage($image, 'kddi_copyright=on,

yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？

harukiです。 メールを送信するサイトの場合、メールアドレスのクリーニングは定期的に行うべきです。 そのためにはエラーメールを解析しなければなりません。 そこで、エラーメールの種類をまとめてみました。 SMTPエラー 存在しないメールアドレスや、正しい形式でないメールアドレスの場合は、 DoCoMo,au,SoftBankの3キャリアともSMTPエラーになります。 例として、以下の条件でメールを送信したとします。 From: sender@example.com Return-Path: bounce@example.com To: アドレス＠docomo.ne.jp MTAにより異なりますので、ここではPostfixを例にします。 Postfixではmultipart/reportのメールがbounce@example.comに届きます (※ 必要な情報のみに省略しています

こんにちわ。山下です。 最近、私の周りではJavaScriptライブラリといえば、jQuery の名前がまず最初に挙がってくるようになってきました。今回は、jQueryって何が便利なの？っていう人向けに、ポイントを掻い摘んで説明します。 1.名前空間を汚さない 他のJavaScriptライブラリとかだとStringとかArrayを直接拡張してたりしますが、jQueryはグローバルな名前空間を汚しません。eachとかmapのような便利な関数もすべてjQueryオブジェクトの属性として定義されています。 jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge, jQuery.trim, etc. また、標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで proto

Keitaです。最近、モテるためにがんばっていますが、周りの女性は誰一人として振り向いてくれません。 さて、そんなわけで、世間では、いろいろな角を丸めると、モテるといううわさを聞いてとりあえず角を丸めることにしてみました。 でも、CSSの角を丸める方法は、わりと論争の的でこれがいいよ！と人に勧める知識もないので、とりあえず、画像を丸めてみることにしました。 今回も、Webアプリケーションに関する面倒な問題を簡単に解決するツール、PHPを利用します。 画像を加工するのに何使うは、結構、選択肢があるのですが、そのものずばりの関数があるimagick 2.0を使いたいと思います。 コードはこんな感じです。 <?php $image =& new Imagick(); $image->readImage('test2.jpg'); // ファイルを読み込む $image->roundC