はてなブックマーク

気圧センサで光るボールをつくってみました ユニバでは今期から新領域チームを設け、これまでの仕事にとらわれず、かつそれらを更に押し広げるような技術の開拓にチャレンジしています。 最初の活動の成果となったこの”Uniball”(ゆにぼーる)では、「押す」「抱く」といった人間の自然な動作、またそういった「感触」をどうインタラクションやサービスに結びつけるか、という点を模索しています。 球体には気圧センサとLEDが内蔵されており、無線によって外部からのパラメータのコントロールが可能となっています。 体験者が強く抱きしめれば抱きしめるほど、球体は光を増し、それはさながら何がしかの感情の発露であるかのような、不思議な印象を抱かせます。 技術的な点は本当に簡単なもので、それよりも「素早く作って感覚を掴む」ことを重視して制作した感があります。 ラピッドプロトタイピングの定番であるArduinoを使用し、M

Express にて JSONP をレスポンスする時、今まではこんなふうにやっていました。 app.get('/awesome/your/api', function(req, res) { var response = { sugar: "sweet", salt: "spicy" } , callback = req.query.callback; if (callback) { // コールバックが指定されていたら JSONP をレスポンス res.send(callback + '(' + JSON.stringify(response) + ');'); } else { // コールバックが指定されていなければ JSON をレスポンス res.send(response); } }); マニュアルにはありませんが、実はフレームワーク側で JSONP のレスポンスがサポートされて

昨日から、自分の Lion 環境上で rmagick を使う Rails プロダクトの Bundle install 時に、 /Users/xxx/.rvm/rubies/ruby-1.9.2-p290/bin/ruby extconf.rb checking for Ruby version >= 1.8.5... yes checking for /usr/bin/gcc-4.2... yes checking for Magick-config... yes checking for ImageMagick version >= 6.4.9... yes checking for HDRI disabled version of ImageMagick... yes checking for stdint.h... *** extconf.rb failed *** Could no

最近、3Dになったユニバ社のロゴ。 3Dの描画機能だけを切り出してみたので、皆さん使ってね。 ユニバの新ロゴはcanvas+Processing.jsで作られていますが、Processingの3D系の命令は使っていません(WebGLに対応しているブラウザがまだ少ないので…)。3Dのオブジェクトをスクリーン(canvas)に投影する計算を行って、2D系の命令だけで描画しています。 その描画系を切り出したのが以下の関数です。 使い方 draw3DLine(x1, y1, z1, x2, y2, z2, xRotate, yRotate, zRotate) 6つの引数(XYZ座標を2つと、XYZ軸の回転角度)を渡すと、canvasに2座標を結ぶ線を描画します。原点は画面の中央です。 カメラはZ軸上に固定です。カメラの視野角(radS)、カメラの位置(camZ)、スクリーン位置(scZ)だけ、変更

会社に転がってた、↓ の本をつらつらと眺めていて 今まで、よくわかっていなかった NoSQL という物に興味が湧いてきました。 上記の本は、そろそろ出揃った感のある NoSQL 系のデータストアエンジンを一通り並列に紹介してくれる本で、見て、軽くわかった気になるには最適です。 ただ、結局のところ、いつも使っている SQL と何が違うのかまでは読んだだけでは充分に理解できないよね、やっぱり試してみなくちゃね、という事で、使ってみました。 NoSQL と言えども、データストア！データを保存しなくては。入れるデータの元ネタに困りましたが、困った時は他人のふんどしを借りようと Twitter から適宜引っ張ってくる事にしました。キャズムを越えたらしいという噂の Twitter から URL を含んだツイートを引っ張りだして集計したら、世間で話題になっているネタが拾えそうかなと。誰かが勝手にデータを

どうもこんにちは！みなさま iPhone アプリしてますか？！僕は未だにガラケーユーザです (涙) iPhone 5 が出たら本気をだそうかと思ってます。 そんなわけで 2/25 に行われた株式会社コンテンツワンさん主催の勉強会 Titanium Mobileで始めるiPhone / Androidアプリ開発 に参加してきました。 下書きのまま放置してしまい今更感もあるのですが、会場で取ったメモにちょっと加筆したものを公開します。 講師 masuidrive (blog) Appcelarator Inc. プラットフォームエバンジェリスト お風呂でプログラミング (フログラミング) しているというのは本当 Titanium Mobie の実績 WikiWalker (iPhone) 位置情報からゆかりの地を Wikipedia から検索してくれる なごや乗換ブラウザ (iPhone) 乗

Ruby で Excel を弄る 趣味です。 VBA の書き方はわからないけど、Ruby の書き方ならわかるんです。 Ruby で書いたって、win32ole 挟んだ状態で使ったら、そんなに VBA 書くのと変わんないコードになるんだけどね。 今回は、日毎に時間帯別の統計情報が記載されたテキストファイルをもとに整形された Excel ファイルを出力するのが目標。 テキストファイルは、こういう感じの内容。 集計対象名1 —– 2010/02/21 0 15 2010/02/21 1 8 (中略) 2010/02/21 22 21 2010/02/21 23 18 集計対象名2 —– 2010/02/22 0 15 2010/02/22 1 8 (中略) 2010/02/22 22 21 2010/02/22 23 18 (以下略) 最初に、 集計対象名(スペース)ハイフンx5 のヘッダが来て

ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js) はいこんにちは！今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です！ Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。 動作デモ 画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。 実際のデモサイトはこちら 特徴 簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能

皆さまご機嫌いかがでしょうか。 今日はプレゼンの時に使って欲しいPhotoshopテンプレートのご紹介です。 プレゼンでは、各チームにアプリのイメージをデザイン画として起こしてもらうことになると思います。 その際に、iPhone標準のフォント、ボタン、キーボード、ラベルスタイルなどが必ず必要になります。デザイン画に入っている見慣れた標準のボタンが「うそくさい」と、それだけでアプリとして未完成な印象を与えてしまいますから、別に面白い部分ではないのですが、侮れません。 ただ、それらをイチから作っていては、それだけでひと仕事になってしまいますから、ウェブサイトで配っているテンプレートのお世話になりましょう。 まずはこちら。 iPhone GUI PSD http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ 私もいろいろ試しましたが

jQuery の animate() メソッドをアニメーション以外に応用する方法 前回と同じようなネタですが、今度は逆転の発想で jQuery.animate() をアニメーション以外にも応用する方法をご紹介します。時間の経過が伴う処理の場合は今回の方法を使ったほうが直感的です。 謝辞 今回のサンプルは Steven Wittens 氏の canvas 要素に対して jQuery.animate() 関数を利用する方法を参考にさせていただきました。 http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon 上記ページのデモの空中をベーコンが飛び交うさまは一見の価値ありです。(笑) jQuery.animate() で音声のフェードイン・フェードアウトを実装する Live Demo (requires G

Ethna で綺麗な URL (Ethna_UrlHandler を使わない方法) はいどうもー。 Ethna ってデフォルトのままだと URL がイケてないですよね。Ethna_UrlHandler を使う方法もありますがアクション毎に mapping を書く必要があって若干面倒です。 というわけで Ethna で URL を綺麗にする簡単な方法をご紹介します。フォーム値がそのままなのでちょっとダサいですが、一度設定してしまえばアクション毎にマッピングを書く必要もないのでとても楽です。 使用前: http://example.org/?action_hogehoge_fugafuga=true&id=10 使用後: http://example.org/hogehoge/fugagufa/?id=10 1. 以下の .htaccess ファイルをエントリポイントと同じ場所に設置する <I

jQuery Easing Plugin のイージング関数を直接利用する方法 はいどうも。ここのところ JavaScript に熱中してます。ということで今回は jQuery の Easing 関数を直接利用する方法をご紹介します。 Easing (イージング) 関数って？ イージング関数とは加速・減速を数式で表したもので、滑らかなアニメーションを表現する際に使われる関数です。jQuery においては jQuery.animate() メソッドの内部で利用されています。標準では linear と swing しか用意されていませんが、jQuery Easing Plugin にて 30 種類ものイージング関数を追加することができます。それぞれの効果についてはこちらのサイトの解説が詳しいです。 そんな素敵なイージング関数ですが jQuery.animate() 以外の処理に応用できたら夢が広

PHP + JavaScript で Tumblr の Twitter 互換 API を叩いて Dashboard リーダを作ってみたよ はいこんにちは！ 今回は PHP + JavaScript (jQuery) で Tumblr の Dashboard リーダを作ってみました。 R&D メンバーがクリッピングしている記事を社内のグループウェアに掲示してみようかと思っていたのですが、お手軽にダッシュボードを公開するすべが無かったので自分で Twitter 互換 API を使って実装してみました。 デモ ディレクトリ構造はこんな感じ。 index.html: 本体 proxy.php: JSON 取得用 lib/: ライブラリ colorbox/ JSON 取得用の PHP のコード (proxy.php) はこんな感じ。 <?php require_once "HTTP/Request.

CentOS 5 に Ruby 1.8.7 をセットアップする(ために checkinstall をセットアップする) 先日、弊社内の開発サーバがハードディスクトラブルにより起動不能になりました。 すぐさま別のサーバに環境を構築して引き継ぎを行なったのですが、短期間で行なった応急処置で100%完全に引き継げるはずもなく、ささいなトラブルはいくつか生じているようです。 例えば、先日のFlash Lite の中身を動的に変更するという記事に貼ってあった、サンプルの CGI が出力されなくなってしまいました。当該記事の中で入れた諸々のライブラリが、移転先サーバには入っていないせいですね。 今回はこれらをセットアップしようと思います。とはいえ、以前書いた内容をそのままやるだけだと思っていたんですが…。 まず、移転先サーバには、Ruby や RubyGems のインストールに用いた checkins

iPad の Safari で動作するマルチタッチ対応お絵描きソフトを作ってみた はいこんにちはー。お久しぶりです。珍しくフロントエンド側のネタで記事を書いてみます。 今回は革新的で魔法のようなデバイスであるところの iPad を使って、マルチタッチ対応お絵描きソフトを作ってみました。 iPad を持っていない人でも見れるように YouTube にビデオをアップロードしてみました。 実際のデモ (PC ブラウザでは動作しません。 Android でも動くかも？) ソースコード <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=n

Dreamweaver から Subversion を利用する Dreamweaver は CS4 から Subversion によるバージョン管理に対応しています。 社内のデザイナさん達に、Subversion 管理を布教したいので、まずは評価してみる事にしました。 とはいえ、結構めんどくさかったです…。 社内にある Subversion は、SVN+SSH 以外のアクセス方法を提供していません。 数年前までは WebDAV もあったのですが、諸般の事情で無くなったままです。 Dreamweaver で SVN+SSH を利用するには、割と手がかかります。 以下のような情報を教科書にして設定を行ないました。 Subversioning in Adobe Dreamweaver CS4 Dreamweaver CS4でのSubversionの使用 – パート１: Subversionの紹介