2013-04-21

100円で作れる「スマート赤外線リモコン」プロトタイプを発表＠台北 OSDC.TW 2013

台北に来ています。オープンソース開発者イベント OSDC.TW に参加しました。3年ぶりに4回目。カンファレンスは無事に終了して、今日は恒例のハッカソンに参戦中。台北市内にもコワーキングスペースがいくつもできていて、最近オープンしたばかりの慶隆商務俱樂部にお邪魔しています。

週末はコワーキングスペースも空いているから、こうやってカンファレンス後のハッカソンに会場を提供するのは、いいアイデアですね。

OSDC.TW のカンファレンス本体の話に戻ると、今年も会場は中央研究院 Academia Sinica でした。大中小のホール全てが全席電源付・有線 LAN ポート付きという、素晴らしい会場です。参加者は500人くらい。

川崎は『IR light vs HEV light: 紅外線 vs 高能量可見光』と題して、赤外線 LED を使った 2013 年の新テーマのプロトタイプ版を発表しました。日本出発前日にようやく動くようになったばかりの、できたてホヤホヤでした。今後、日本国内のカンファレンスでも発表していく予定なので詳細は内緒。お楽しみに。

2013 年は、Maker でクラウドでスマート家電ですよ！

参加者みなさんの笑顔が嬉しい！

今年のキーノート・スピーカー Selena さんもツイートしてくれてた。

LOL! control camera with TWO iPhones, Node.JS, two LEDs, a stereo plug and Sguru. thank you @kawanet for amazing #osdctw2013 presentation
— Selena Deckelmannさん (@selenamarie) 2013年4月19日

OSDC.TW のその他のトークでは、個人的には、Jesse が発表した DIY キーボードの話がイチバン響きました。この１月から開発に取り組んでいるらしい。

以下は試作品のバレンタイン用のキーボード。DIY なのでキー配列も独自に決められます。http://keyboard.io で販売していく計画もあるみたい。

今日のハッカソンでは、赤外線の受信機を制作しました。

「台北の秋葉原」と呼ばれる光華商場にある千石電商みたいなお店で足りない部材を調達。ハッカソンでは、Jesse に半田ゴテの当て方ノウハウなど教えてもらいました。 2人とも、元々 Perl の開発者なのに、素人ながら半田ゴテ頑張ってる様子。（笑）

OSDC ですから、近日中にソースコードも公開します。

ハッカソンでそうこうしている間に、発表本番で諦めていた一部のデモのバグの原因が判明！単純なことだった。これが動いたら、もっと分かりやすいデモにできたのに…残念！日本でリベンジするわ。

しかし、いつも台湾の方はみんな優しくてありがたい。OSDC.TW は春に開催されているので、毎回、その年の新しい開発テーマのプロトタイプ版を発表させてもらっています。2008年から始まって、今年が４回目になりました。

（参考）過去の OSDC.TW での発表
OSDC.TW 2008 DOM manipulation by Wiimote/Gainer over HTTP
OSDC.TW 2009 JSARToolKit ＆ Air Xiaolongbao
OSDC.TW 2010 Live Pointers ＆ CSS3 3D Presentation

2013-01-12

JavaScript プロパティ lazy build 遅延初期化 getter メソッド

JavaScript で getter メソッド経由でプロパティの値を lazy build（lazy initialization／遅延初期化）する方法について。

handlebars とかのテンプレートエンジンに渡すオブジェクトで、テンプレート側で使う場合のみ必要に応じて lazy build したかった。予め getter を作っておけば、プロパティとしてテンプレートからアクセスできる。

var seq = 0;
var Foo = function () {
    this.seq = ++ seq;
};
var Bar = function () {
    this.fooB = new Foo();
};
Bar.prototype = {
    fooA: new Foo(), // shared
    get fooC() {
        return this._fooC = this._fooC || new Foo(); // lazy build
    }
};

var bar1 = new Bar();
var bar2 = new Bar();
var bar3 = new Bar();

console.log('bar1', bar1.fooA.seq, bar1.fooB.seq, bar1.fooC.seq); // 1 2 5
console.log('bar3', bar3.fooA.seq, bar3.fooB.seq, bar3.fooC.seq); // 1 4 6
console.log('bar2', bar2.fooA.seq, bar2.fooB.seq, bar2.fooC.seq); // 1 3 7

Foo の seq プロパティは、Foo インスタンスを生成したシリアル番号。
Bar の fooA・fooB・fooC プロパティは、いずれも Foo のインスタンスを持つ。

（prototype にインスタンスを持たせる場合）

fooA プロパティは、Bar.prototype 定義時に Foo インスタンスができていて、
全ての Bar インスタンスで共有されるので、bar1/bar2/bar3 いずれも 1 となる。

（通常のプロパティ値にインスタンスを持たせる場合）

fooB プロパティは、Bar インスタンス作成時に Foo インスタンスができるので、
Bar インスタンスの生成順から、bar1=2→bar3=4→bar2=3 という結果になる。

（プロパティ値を lazy build する場合）※今回の主旨

fooC プロパティは、fooB プロパティを呼び出した際に Foo インスタンスができるので、
fooC プロパティのアクセス順から、bar1=5→bar3=6→bar2=7 という結果になる。
実際の Foo インスタンスは _fooC というプライベート風味プロパティに置いた。

get fooC() のゲッター定義が使えない古い環境では以下を使う。

Bar.prototype.__defineGetter__('fooC', function(){
    return this._foo = this._foo || new Foo();
});

（参考記事）
http://news.mynavi.jp/articles/2010/09/09/ie9-ie8-getter-setter-javascript/index.html
http://d.hatena.ne.jp/amachang/20090115/1231989477
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter

サンクス！＞@mitsumitsu123

CC BY-SA 3.0 の下駄は Haragayato さん。

2012-12-22

Xmas クリスマス気分になれるブックマークレット

クリスマスシーズンがやって来ました。街中は赤と緑のクリスマスカラーばかりなのに、
こうしていつものように PC 作業しているあなたに贈るクリスマスプレゼント、
「Xmas ブックマークレット」です。試しに、↓のボタンをポチッと押してみて下さい。

Xmas

このボタンをブックマークバー等にドラッグ＆ドロップしておけば、
どこのサイトにいるときでも使えるブックマークレットになります。
普通にブラウザを見ているだけで、街中のようなクリスマス気分を味わえる！

例えば、ヤフーのトップページはもともとクリスマスなのに、もっとクリスマスぽくなる。

f:id:kawanet:20121222234222j:plain

いつもと変わらないグーグルの検索結果だって、クリスマス気分で楽しめます。

f:id:kawanet:20121222234214p:plain

Gmail でも Facebook でも、どこでも動きます。

Safari・Chrome・Firefox で動作確認済です。IE では動かないや。

JavaScript のソースコードは以下の通り。

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
var buf = [];
while(walker.nextNode()) {
    var src = walker.currentNode;
    if (! src) continue;
    var text = src.data;
    if (! text.length) continue;
    text = text.replace(/[\s\r\n\t]+/g, '');
    if (text.length < 1) continue;
    if (! src.parentNode) continue;
    var tag = src.parentNode.tagName;
    if (tag.toUpperCase() == 'SCRIPT') continue;
    if (tag.toUpperCase() == 'STYLE') continue;
    var cls = src.parentNode.getAttribute('class');
    if (cls == 'xmas-red') continue;
    if (cls == 'xmas-green') continue;
    buf.push(src);
}

var cnt = 0;
var loop;
loop = function () {
    for(var j=0; j<10; j++) {
        var src = buf.shift();
        if (! src) return;
        var fg = document.createDocumentFragment();
        var list = src.data.split('');
        var len = list.length;
        for(var i=0; i<len; i++){
            var chr = list[i];
            if (chr.match(/[\s\r\n\t]/)) {
                var space = document.createTextNode(chr);
                fg.appendChild(space);
            } else {
                var tn = document.createTextNode(chr);
                var font = document.createElement('font');
                cls = (cnt ++ % 2) ? 'xmas-red' : 'xmas-green';
                font.setAttribute('class', cls);
                font.appendChild(tn);
                fg.appendChild(font);
            }
        }
        src.parentNode.replaceChild(fg, src);
    }
    setTimeout(loop, 1);
};

var rule = "font.xmas-red, font.xmas-green { font-weight: bold; display: inline !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; }\n";
rule += "li { font-weight: bold; }\n";
rule += "font.xmas-red, li:nth-child(even) { color: #F00000 !important; }\n";
rule += "font.xmas-green, li:nth-child(odd) { color: #008000 !important; }\n";
var style = document.createElement('style');
var sn = document.createTextNode(rule);
style.appendChild(sn);
document.body.appendChild(style);

setTimeout(loop, 1);

span タグには CSS が設定されて何かの用途で使われてしまうことが多いので、
数年ぶりに font タグを使ってみました。HTML5 には入っていないけど。

このブックマークレットは、12/22 開催のおばかアプリ選手権で Blue Light Filter と合わせて
発表しました。28ページ目くらいからです。

Blue Light Filter 〜おばかアプリ選手権 from Yusuke Kawasaki

2012-11-30

2012年 #yjica Creative Hack賞は『チュッチュTune』！グランプリは AIR 作品

昨日 11/29 は、Yahoo! JAPAN インターネットクリエイティブアワードの贈賞式でした。今年も特別賞審査員として参加させて頂きました。今回の Creative Hack 賞の受賞作品は、iPhone アプリの『音楽で相性診断！？チュッチュTune』でした。おめでとうございます！

Creative Hack 賞は2009年に始まり、今回で4年目になります。
例年、カヤックの柳澤さんとともに、審査を担当させてもらっています。

今年のヤフーは新体制となって、「スマホファースト」を掲げています。
それに伴い今回の Award はすべての部門で、対象がスマホ作品に絞られています。

スマートデバイスでは、Bluetooth・NFC あるいは音声を使った通信方式や、
GPS・加速度・ジャイロ・可視光（カメラ）といった各種のセンサー類が、
標準的に使えるようになってきて、アプリ開発者のチャレンジの幅を広げています。
従来の PC では一般ユーザ向けでは容易には利用できなかった機能を使うことで、
今までなかった新しいユーザ体験を手軽に提供できるようになりました。

『音楽で相性診断！？チュッチュTune』はスマホならではの機能と、
それをうまく演出したクリエイティブも大変、優れています。
柳澤さんと一致で Creative Hack 賞として選出させて頂きました。

AIR for iPhone 作品がグランプリ！

一般部門のグランプリ作品は、『いろぴこ』でした。とっても素敵な作品です。
Adobe AIR で開発されているため、iPhone・Android の両方に対応しています。
一般部門のブロンズを受賞した @sakusan393 さんの『Live with the Wind.』も AIR 製です。

CS6 になって、AIR 3.5 なら特殊なテクニックを使わなくても、かなり速く動くし、
Xcode の iPhone シミュレーターも使えて、快適に開発できるようになりました。
もちろん、iPhone 5 対応アプリも開発できます。（Default-568h@2x.png を追加するだけ）
Native Extension で、iOS 専用機能も使える。
僕が CS5β時代の Packager for iPhone を試していた頃は相当に苦労しましたし、
AppStore から Ban された際もかなり焦ったけど、最近は意外なほど使えます。

昨日の贈賞式の審査コメントでも「神は細部に宿る」という話がありました。
Flash なら微妙な表現まで作りこみやすいし、それを使いこなせるクリエイターの層も厚い。
AIR 作品がこう受賞しているのは、やはり一日の長があるということですね。

（参考リンク）

Yahoo! JAPAN Internet Creative Award 過去の Creative Hack 賞

2011年度：Creative Hack 賞『tweetree』
http://kawa.at.webry.info/201111/article_3.html

2010年度：Creative Hack 賞『ナガサキ・アーカイブ』
http://creative-award.yahoo.co.jp/prize/2010/g16.html →あれブログ書いてなかった…。

2009年度：Creative Hack 賞『ToriSat』
http://kawa.at.webry.info/200911/article_10.html

2012-11-20

unescape - ページ中の&#xHHHH;や\uHHHHのエスケープを展開するブックマークレット

特に海外の API のレスポンスで、2バイト文字が &#xHHHH; とか \uHHHH といった形式にエスケープされていて、中身が読めずに面倒なことって、ありますよね。それをブラウザ上で展開してくれるブックマークレットを書いてみた。

unescape

上記のリンクを、リンクバー等にドラッグ＆ドロップしてから使います。
とりあえず↑をクリックするだけでも、↓で動作を試せます。

利用例（１）XML 等で使われる &#xHHHH; や &#DDDDD; 等に対応

<title>&#24536;&#24180;&#20250;&#12398;&#21442;&#21152;&#32773;&#24773;&#22577;</title>
↓
<title>忘年会の参加者情報</title>

利用例（２）JSON 等で使われる \uHHHH に対応

"message": "\u4eca\u65e5\u8a95\u751f\u65e5(*^_^*)\n22\u6b73\u304b\u3041\u301c(>_\u003C)\n",
↓
"message": "今日誕生日(*^_^*)\n22歳かぁ〜(>_\u003C)\n",

ただし、< > " ' などは念の為にエスケープされたまま残します。
%HH の URL エンコードのデコードには対応していません。
ソースコードは以下の通り。

var cache = {};
var regex = /\\u[0-9a-f]{4}|\&(\w+|\#([0-9]+|x[0-9a-f]+))\;/g;
var ignore = /[\x00-\x20\>\<\&\"\']/;
var func = function (match) {
  var ret = cache[match];
  if (! ret) {
    var head = match.charAt(0);
    if (head == "&") {
      var p = document.createElement("p");
      p.innerHTML = match;
      ret = p.firstChild ? p.firstChild.data : match;
    } else {
      var src = match.substr(2, 4);
      var cd = parseInt(src, 16);
      ret = String.fromCharCode(cd);
    }
    if (ret.match(ignore)) ret = match;
    cache[match] = ret;
  }
  return ret;
};

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
while(walker.nextNode()) {
  var src = walker.currentNode.data;
  if (! src) continue;
  var dst = src.replace(regex, func);
  if (src != dst) walker.currentNode.data = dst;
}

未だに US-ASCII しか考慮しない人・環境には、エスケープした方が安全なのだろうけど。。。

2012-11-20

『愛のあるユニークで豊かな書体』TypeSquare ￥0キャンペーン

愛のあるユニークで豊かな書体

モリサワの Web フォントが12月いっぱいまで無料で使える TypeSquare ￥0キャンペーンが実施中。試してみました。Web フォントが適用されるまで、少しだけ表示にタイムラグがあるけど、JavaScript を１行入れるだけで、簡単に使うことができました。

↑はテキストデータなので、コピー＆ペーストできます。非対応のブラウザだと、普通のフォントで表示されちゃっていると思いますが、対応ブラウザでは以下のように表示されます。（↓は画像です）

ちなみにここで使っているフォント名は以下のとおりです。

font-family: Ryumin Bold KL
font-family: Shin Go Regular
font-family: Haruhi Gakuen
font-family: Kanteiryu

JS 実行時にページ中で使われている文字のフォントデータのみをダウンロードするようでその後でダイナミックにテキストを追加しても新しい文字はデフォルトのフォントで表示されてしまいます。（ただし、既に本文中で使われている文字については、ダウンロード済のフォントがそのまま適用されるので、ダイナミックに追加しても問題なく表示される）

iPhone でも大丈夫だったから、これは使えそう。

2012-11-02

Plug and Play Tech Center で活動開始［釣り］

今日は、Sunnyvale の Plug and Play Tech Center で作業中。
この夏にシリコンバレーオフィスを開設した ChatWork 社に 今日だけゲスト でお邪魔しています。

世界各国から集まった300社のスタートアップ企業がこの１つのビルにひしめいています。
（今日は曇っていて残念な感じなので、この写真は１年くらいに撮影したものです…）
Plug and Play Tech Center については、MTL ブログの記事でもご紹介しました。

ご案内いただいた ChatWork Inc の COO 井伊さん。
昨年の MA7 でもお世話になりました。ありがとうございました。
US だと、オフィスで立って仕事している人もままいます。集中できるらしい。

昨年9月にサンフランシスコで開催された日本人 IT 飲み会（↑）で ChatWork の社長の山本さんにお会いした際に『アメリカ法人設立！』と『マウンテンビューの物件決定！』と発表されて、その前のめりな積極姿勢に驚いたのですが、その後 US で、アジアでと、着実に活動を広げられているようです。

ChatWork 社の US での活動については Facebook の ChatWork シリコンバレー挑戦日記を参照下さい。

すみません、タイトルは釣りです。
来週いっぱいシリコンバレーにおります。

2012-11-01

リクルートを退職しました

昨日10月31日付で、株式会社リクルート HD を『卒業』しました。
リクルートに在籍したこの６年間、社内外の皆様から多大なるご協力を賜りながら、
様々なことにチャレンジすることができました。本当にありがとうございました。

今はサンフランシスコにおります。
時差の関係で、こちらは今日が最終日 10月31日でした。
来週いっぱいまで、US におります。
今後は、しばらく充電期間を頂いてから、再起動する予定です。

リクルートでは、たくさんの出会いがありました。

2006年に入社した当時は、ローカルサーチの新規事業のドコイク？を担当しました。
工藤くん（今はアドテクのベンチャーとして急成長注目されているジーニーの社長）や、
けんすう（今は nanapi 社長）が新卒社員として頑張っていたのを始めとして、
とても優秀なメンバーに囲まれました。明るく前向きなメンバーが多いのに驚きました。
「すごい地図」を作ってグッドデザイン賞を受賞したすどけんも、今は須藤室長に出世。
マネージャだった橋場さんは、今は角川のブックウォーカーの CTO になられてます。

翌年には、メディアテクノロジーラボ (MTL) が設立されて、ラボでの活動を開始。
紙（雑誌）から Net に大きくビジネスを転換しているリクルート社の中で
「オープンイノベーション」を掲げて、社内外と協働した活動に挑戦しました。
OIT メンバーの熊沢くん・鈴木くさん・大悟さんとは夜遅くまで議論を重ねました。
Paul Bakaus さん（その後 Zynga Germany CTO）の来日に合わせて企画したイベント
The JUI - JavaScript User Interface カンファレンスを開催したのを皮切りに、
ATND を使って多数のイベントを開催し、多くの方とお会いすることができました。
初代 MTL 所長だった稔さん（今は NIJIBOX）には、アグレッシブに、広範な活動を
認めてもらいつつ、時には大変厳しく指導いただき、胃が痛い夜も多々ありました。

６年間の活動の中でも思い入れの強い Web アプリ開発コンテスト Mashup Awards では、
社外のたくさんの方と出会い、また多くの感動をもらいました。
Web 開発者とのネットワークを強化する多くの API 提供企業にご協力いただきました。
アワードの運営側でも、藤井さん（当時は Sun Microsystems で今はグーグル）、
奥田さん（今は『女帝』と呼ばれる）を始め、お名前を書ききれません。
MA を契機の１つとして、起業・転職など人生の転機を迎える開発者の方を多く見ました。
毎年、表彰式では受賞者の皆さんの壇上での笑顔を見て（主催者なのに）こっそり涙していました。
ちょうど昨日が、今年の MA8 の〆切でしたが、毎年、多くの作品を応募いただきました。
今年も、新しいドラマが始まっていると思います。楽しみです。

2008 年からは個人的な活動として、AR や 3D といったインターフェース系技術を中心に
毎年１つずつ新作テーマを決めて、カンファレンス・ドリブンで開発を行いました。
Trick7 こと寺井先生からの直伝で、ActionScript を習えた環境はとてもラッキーでした。
YAPC（日米欧）や OSDC.TW（台湾）など国内外のカンファレンスに参加・発表していく中で、
海外の開発者コミュニティの進んだ点を日本の開発者コミュニティに伝えつつ、
日本の開発者はもっともっと海外でも活躍できるはず！という思いを強くしました。

YAPC::NA 出張でシリコンバレーに立ち寄った際は、リクルートの US 投資子会社として
Recruit Strategic Partners を立ち上げた堤さん（今は GREE Ventures のパートナー）に会い
リクルートのグローバル化について、ワインを片手に熱く語り合ったのをよく覚えています。
その堤さんが卒業された後のタイミングで、川崎が同社に参加し始めることになりました。

2010年から、国内の活動と並行して、念願の US プロジェクトの検討を開始しました。
リクルートは『自ら機会を創り出し、機会によって自らを変えよ』ができる有難い環境です。
昨年2011年には、Mashup Awards 7 に合わせてシリコンバレーで初の海外イベント
MA7 Ninja Challenge Palo Alto を開催しました。何もかもが手探りで大変でしたが、
これも日本と US の皆さんのご協力で何とか無事に開催できました。
MA7 では、初めて海外からの受賞者を表彰式に迎えることができました。

2012年に入り、シリコンバレーにオフィスを開設して、US での活動を本格化しました。
オフィスの契約から細かな文房具の調達まで、渋谷さんと2人で試行錯誤のスタートでした。
US では毎年数千社のスタートアップが誕生しています。ぶっちゃけバブルな投資環境の中、
（たくさんの企業が失敗しつつも生き残った数％は）大きなビジネスとして成長を続けています。
こちらで毎週（毎日？）のように開催されているハッカソンにもいくつか参加しました。
無数のスタートアップを見てきました。ソーシャル→モバイルでブイブイ言いたいハスラーもいれば、このバブルを冷静に見て次の場所を狙っているハッカーもいました。
この１年間は、毎月のように東京とサンフランシスコを往復して慌ただしい日々でした。
次の挑戦に向けて、私もムズムズしています。

お世話になった皆さんのお名前はとても書ききれません。
この６年間、多くの出会いを得ることができました。
リクルートに、皆さんに、本当に感謝しています。
本当にありがとうございました。