Kawa.net xp - Ajax＆Perl技術情報（川崎有亮）
Copyright 1995-2010 Yusuke Kawasaki. All rights reserved.
川崎有亮の制作したプログラムのご紹介・技術情報など。ajax/JavaScript/Perl/CGI/...
100円で作れる「スマート赤外線リモコン」プロトタイプを発表＠台北 OSDC.TW 2013
kawanet
台北に来ています。オープンソース開発者イベント 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
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 さん。
Xmas クリスマス気分になれるブックマークレット
クリスマスシーズンがやって来ました。街中は赤と緑のクリスマスカラーばかりなのに、 こうしていつものように PC 作業しているあなたに贈るクリスマスプレゼント、 「Xmas ブックマークレット」です。試しに、↓のボタンをポチッと押してみて下さい。 <a style="font-size: 200%; font-weight: bold; padding: 4px 8px; border: 1px solid #000099; background-color: #ccccff;" href="javascript:(function(){var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);var buf = [/* null */];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 span = document.createElement('span');cls = (cnt ++ % 2) ? 'xmas-red' : 'xmas-green';span.setAttribute('class', cls);span.appendChild(tn);fg.appendChild(span);}}src.parentNode.replaceChild(fg, src);}setTimeout(loop, 1);};var rule = "span.xmas-red, span.xmas-green { display: inline ! important; font-weight: bold; margin: 0 ! important; padding: 0 ! important; }\n";rule += "li { font-weight: bold; }\n";rule += "span.xmas-red, li:nth-child(even) { color: #F00000 ! important; }\n";rule += "span.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);})()">Xmas このボタンをブックマークバー等にドラッグ＆ドロップしておけば、 どこのサイトにいるときでも使えるブックマークレットになります。 普通にブラウザを見ているだけで、街中のようなクリスマス気分を味わえる！ 例えば、ヤフーのトップページはもともとクリスマスなのに、もっとクリスマスぽくなる。 いつもと変わらないグーグルの検索結果だって、クリスマス気分で楽しめます。 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年 #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
unescape - ページ中の&#xHHHH;や\uHHHHのエスケープを展開するブックマークレット
特に海外の API のレスポンスで、2バイト文字が &#xHHHH; とか \uHHHH といった形式にエスケープされていて、中身が読めずに面倒なことって、ありますよね。それをブラウザ上で展開してくれるブックマークレットを書いてみた。 \<\&\"\']/;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;}})()">unescape 上記のリンクを、リンクバー等にドラッグ＆ドロップしてから使います。 とりあえず↑をクリックするだけでも、↓で動作を試せます。 利用例（１）XML 等で使われる &#xHHHH; や &#DDDDD; 等に対応 &#24536;&#24180;&#20250;&#12398;&#21442;&#21152;&#32773;&#24773;&#22577; ↓ 忘年会の参加者情報 利用例（２）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 しか考慮しない人・環境には、エスケープした方が安全なのだろうけど。。。
『愛のあるユニークで豊かな書体』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 でも大丈夫だったから、これは使えそう。
リクルートを退職しました
昨日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 では毎年数千社のスタートアップが誕生しています。ぶっちゃけバブルな投資環境の中、 （たくさんの企業が失敗しつつも生き残った数％は）大きなビジネスとして成長を続けています。 こちらで毎週（毎日？）のように開催されているハッカソンにもいくつか参加しました。 無数のスタートアップを見てきました。ソーシャル→モバイルでブイブイ言いたいハスラーもいれば、このバブルを冷静に見て次の場所を狙っているハッカーもいました。 この１年間は、毎月のように東京とサンフランシスコを往復して慌ただしい日々でした。 次の挑戦に向けて、私もムズムズしています。 お世話になった皆さんのお名前はとても書ききれません。 この６年間、多くの出会いを得ることができました。 リクルートに、皆さんに、本当に感謝しています。 本当にありがとうございました。
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 シリコンバレー挑戦日記 を参照下さい。 すみません、タイトルは釣りです。 来週いっぱいシリコンバレーにおります。
9/28 YAPC::Asia 2012（前夜祭〜１日目）#yapcasia
秋は YAPC::Asia の季節。今回の YAPC::Asia Tokyo 2012 は、会場を東工大（大岡山）から東大（本郷）に移して開催されています。過去最大規模とのこと。つまり、世界一の規模の YAPC です。 メイン会場は、400名入る伊藤謝恩ホールです。（イトーヨーカドーの伊藤さんらしい） ボランティアスタッフの数も多いらしく、受付の体制も何だか今までの YAPC::Asia よりもずっとしっかりこなれている気がしました。運営ありがとうございます！ 9/27 前夜祭 昨日は前夜祭があり、ケータリングで食事・ドリンクが出ていました。スポンサーさまさまです。でも、食事はすぐなくなってしまったー。会場の雰囲気も含めて、なんだかいつもの YAPC::Asia より豪華な感じがします。 前夜祭の後は、本郷三丁目のさくら水産で二次会。（写真なし） 久しぶりに会った Perl 仲間で終電まで飲んでました。楽しかった。 YAPC スポンサー 今回は、協賛のスポンサーの規模も最大とのこと。 YAPC のウェブサイトにも30社以上のロゴが並んでいます。 リクルートからも（今年はメディアテクノロジーラボでなくて）CodeIQ の方でスポンサーしています。 スポンサーの目的の１つにエンジニア採用を挙げる企業が多いと思いますが、参加者と話していると、実際にスポンサーしている会社に転職している人も結構多いです。認知度・好感度が高まるので、スポンサーは効果ありそうですよ！＞企業の方 （転職した先の会社を動かして、スポンサーしている例もありそうだけど！？） どの Perl ハッカーがどの Perl 企業に転職したかの一覧表・グラフとか見てみたい。 9/28 懇親会 / Social 今年は全員参加可能で、かつ無料で懇親会が開催されました。 （一昨年までは有料で、人数限定でした） 1F の椿山荘からのケータリング？ 豪華な食事が出ました。美味しかった。 9/28 LTソン 多目的ホールでは、ライトニングトークが続く「LTソン」が開催されていました。 YAPC 本編の大ホールで発表するのは結構緊張しますが、これなら初めての方にもやりやすそうで、発表できる人が増えそうで、いいアイデアですね！ 過去の YAPC の記事（リンク） Asia（東京）・NA（北米）・Europe（欧州）合わせて、今回で９回目の YAPC の参加になります。過去のブログ記事を並べておきます。 YAPC::Europe 2011 Riga（１日目）今年も始まりました！ YAPC::Asia 2010 前夜祭～本編～ハッカソンに参加しました YAPC::Europe 2009 レポート(1) 注目セッション紹介編 YAPC::Europe 2008（コペンハーゲン）で発表してきました YAPC::NA 2008（シカゴ）参加レポートまとめ YAPC::Asia 2008 で「Wiiリモコン→DOM操作」をトークしてきた YAPC::Asia 2007 Tokyo＋懇親会＋ハッカソン YAPC::Asia 2006 始まりました！ YAPC::Asia 2006 主なセッション 昨年の YAPC::Asia は残念ながら参加できませんでした。（海外出張中） 今年も、来週からまたサンフランシスコです。 つづき （9/29 追記：写真・トピックスを追加しました） YAPC::Asia Tokyo 2012（2日目）発表しました #yapcasia
9/29 YAPC::Asia 2012（2日目）発表しました #yapcasia
YAPC の2日目（最終日）は、晴れて良かった。（明日から台風が来そう） 午後は「シリコンバレーと世界のPerlエンジニア」というタイトルで発表しました。 海外の Perl Mongers に参加するためのアプローチ oDesk（クラウドソーシング）を使ってみた話 書籍「１０年後に食える仕事、食えない仕事」の４象限 シリコンバレーで開催されるハッカソンの雰囲気 シリコンバレーで開催されるイベントの探し方 などを紹介させて頂きました。 立ち見も出て、たくさんの方に参加頂きました。ありがとうございました。 質問も続いて、海外への関心の高さが伺えました。 私も海外で得た感覚をどう活かしていくのか、引き続き頑張っていかないと！ 発表資料は、SlideShare にアップしました。 シリコンバレーと世界のPerlエンジニア from Yusuke Kawasaki USのイベントはここで探す 発表では駆け足になってしまいましたが、最後で紹介していたシリコンバレーでイベントを探す場合の URL は以下の通りです。 http://www.eventbrite.com/directory?loc=San+Francisco → Eventbrite ＝ ざっくり ATND みたいなもの http://www.meetup.com/cities/us/ca/san_francisco/ → Meetup ＝ グループに参加登録できる（例：SF.pm） http://lanyrd.com/places/san-francisco/ → Lanyrd ＝ 各種イベント情報のアグリゲーションサイト ちなみに、San Francisco と Bay Area と Silicon Valley といった地名は、正確にはそれぞれ範囲が違うけど、日本からサンフランシスコ周辺に行ってイベントに参加する身からすると、まあ同じ圏内です。（車で１時間） 余談 スライドに入れてなかったけど、サンフランシスコでスタートアップ系のイベントに参加していたら、会場で @sugyan さんに遭遇したことがあった。WWDC とか GDC とか日本人が多い大規模カンファンレンスならともかく、そんなに大きくないマイナーなイベントだったので驚きました。 海外旅行や出張時についでに夜のイベントを見に行ったり、特に週末の余裕があれば、ハッカソンに参加するのはオススメです。 リンク YAPC::Asia Tokyo 2012（１日目）#yapcasia
9/8 HTML5 ConferenceでBlue Light Filterを発表 #html5j
9月8日（土）は、慶應義塾大学の日吉キャンパスで開催された HTML5 Conference に参加し、最後のスペシャルセッション内のライトニングトークで発表させて頂きました。 大きな会場。500人は入るらしい。全体でも1,000名近い来場者があった模様。 ほかの技術系のカンファレンスとは少し客層が違う感じがしました。デザイン系とかゲーム系の人もいたっぽい。入れ替え時間には各ホールの前に列を作って並んだり、発表内容を詳しくメモを取ったり、皆さん真面目に参加されている印象でした。 川崎は、ライトニングトークのトップバッターでした。 HTML5 恐怖の真実から始まり、いくつかの真実を紹介させて頂きました。（全てネタに走っています） 発表資料は、SlideShare に上げました。 HTML5 Conference [LT] Blue Light Filter 50% Off from Yusuke Kawasaki 最後は、檀上にスタッフ・スピーカーが登って記念撮影。 当日は激しい体調不良のため、残念ながら他のトークも参加できず（Ust で見てました）、懇親会にも顔も出せずに帰宅してしまい、失礼しました。
8/4 #LLDecade で LT 発表しました
8月4日（土）は銀座ブロッサムで、10回目となる Lightweight Language イベント LL Decade が開催され、ライトニングトークのスピーカーとしてご招待いただきました。 今年は、東京とサンフランシスコを毎月のように往復していますが、ちょうど7月末で帰国するスケジュールだったので、LLDecade にも参加することができました。 LT では、今年の US での活動を通して少し感じていること、oDesk などクラウドソーシングでプログラマがどうなるのか考えました。10回目の節目イベントとはいえ、そんな真面目な話だけでも LT らしくないので、後半はデモを紹介しました。 銀座ブロッサムの大きな会場。午前の部は、Miyagawa さんの基調講演でスタート。 この LT のツワモノの皆さんと並んで発表するのも、緊張します。 馴染みの顔の和気あいあいとした中でも、他のスピーカーがどんなネタをどれだけ仕込んでくるのか、関係者控え室でも発表が始まった舞台袖でも、熾烈なせめぎ合いが続いていました。（誇張気味） 後半のデモは、本邦初公開の新テーマ Blue Light Filter です。 LT 発表資料は、（SlideShare でなくて）今回は SpeakerDeck に上げました。 SpeakerDeck の embed 機能は、iframe でなくて script タグなので、はてなブログに貼るのは面倒ですね。次回からは SlideShare にします。
はてなブログに引っ越してきました。
2005年から使っていた BIGLOBE ウェブリブログ から、はてなブログ に引っ越してきました。 よろしくお願いします。 前のブログ：Kawanet Tech Blog II - http://kawa.at.webry.info/ お手軽お気楽ブログツールといえば最近は Tumblr をよく使うので、はじめは引越し先として Tumblr を試してみたものの、Tumblr で javascript: スキームのリンクを貼るのは面倒だったので、今回の用途では使いづらく、撤退。問題なくリンクを貼れた、はてなブログを使うことにしました。 はてなブログは「みたまま編集」モードでも、吐かれる HTML ソースは素直でいいですね！ タグが綺麗に並んで、余計なタグやスタイルが入らない。 <a href="javascript:alert('Hello,%20world!')">Hello みたいなソースコードを本文中に貼るのも、はてななら、きっと楽でしょ！？と思ったんだけど、そうでもないか。 タグは自分で書かないといけないのかな。まあ許容範囲。 とかも。 Flickr にある横幅 640px の写真を張りたいので、CSS は少しカスタマイズしてみた。 #main { width: 640px; } #wrapper { width: 700px; } #container { width: 940px; } .date { left: 0; position: relative; float: right; margin-bottom: 10px; border-right: none; text-align: right; } .entry-title { border-bottom: 2px solid #ddd; } .entry-content h1, .entry-content h2, .entry-content h3 { border-bottom: 1px solid #ddd; } pre { font-family: Osaka-mono, monospace; line-height: 133%; } 本文の横幅をデフォルトより 80px 広げた状態で、日付欄が左側にあると横幅が1000pxを超えてしまい、iPad でイマイチなので、日付欄は右側に移動してみた。
インターネット FAX サービス比較（初期費用無料キャンペーン限定）
Kawanet Blog II
IP電話
Skype
Fax
今でもまだ、FAX のやりとりがどうしても必要になることが、ときどきあります。自宅の FAX 専用機は受信はできるものの、スキャナ部が壊れてて送信ができず、Windows の FAX 機能から送信してるけど、PC 用モデムを調達するのが大変だった。FAX が送信できるコンビニに行くのも面倒です。
ドコモOptimus brightに1円乗り換え（L-07C/SIMロック解除対応）
SIM
docomo
Android
iPhone 3GS の契約から2年経って更新月になったので、docomo に乗り換えました。SIM フリー端末＋テザリング利用を前提するなら、Xi（クロッシィ）契約するのが良いみたいですが、Xi は次回にして、今回は FOMA 契約にしました。
MacBook Pro メモリ交換（4GB→8GB）13inch mid-2009 MB990J/A
Mac
（続報）メモリを入れ替えたところ、どうも 30分～4時間おきくらいに Mac がシステムエラーで停止してしまう事例が発症。手元の MacBook Pro のメモリ仕様は PC3-8500 1066MHz であり、店員さんに聞くと『今回購入した PC3-10600 1333MHz のメモリとは相性が悪いかも？』とのこと。メモリが多いと快適だけど、このエラー頻度だと仕事にならないので、いったん外してます。。。
《これはすごい》ATH-ANC23 ノイズキャンセリングヘッドホン（イヤホン）QuietPoint
飛行機の機内とか、騒音の波形を打ち消す「ノイズキャンセリング」のヘッドホンは関心があったけど、３～５万円くらいで高いイメージがありました。今は安いイヤホンタイプのものも出ているんですね。衝動買いしてしまいました。 ヨドバシカメラ AKIBA のアクティブノイズキャンセリングヘッドホンのコーナーで各製品を試して、audio-technica（オーディオテクニカ）ATH-ANC23 を購入。これ、いいです。
MacBook Pro HDD 換装（2.5インチ9.5mm厚）
HDD
2009年に買った 13インチ MacBook Pro (MB990J/mid 2009) の内蔵 HDD は 160GB。Adobe 製品を入れて、Xcode を入れて・・・とやっていると容量が足りなくなります。今回 Mac OS X 10.7 Lion にアップグレードするのに合わせて、HDD を交換してみました。
今年の #yjica Creative Hack賞は『tweetree』おめでとうございます！
Yahoo
今日11月25日（金）は、東京ミッドタウンの Billboard Live TOKYO で開催中の Yahoo! JAPAN インターネットクリエイティブアワード 2011 (Yahoo! Japan Internet Creative Award 2011) の贈賞式に参加しています。今年も、カヤック柳澤さんとCreative Hack賞の特別賞審査員として参加させて頂きました。
[Mac] [Perl] MySQL 5.5.17＋DBD::mysql インストール手順メモ
Perl
MySQL
Mac OS X 10.6 (Leopard) のローカル環境に MySQL サーバとPerl の DBD::mysql モジュールをインストールしてみたメモ。
#MA7 締切直前36時間耐久ハッカソン（11/6夜まで）開催中！
MA7 の〆切が、来週11月7日（月）夜24時に迫って来ました。皆さん、作品の応募はもうお済みでしょうか？
形態素解析 MeCab を Perl モジュール Text::MeCab から使う
形態素解析
MeCab
久しぶりに MeCab をインストールしてみた手順メモ。Perl バインディングは、前回（2006年!）は標準の MeCab.pm モジュールを利用しましたが、今なら牧さんの Text::MeCab の方がいいらしい。環境は、Mac OS X 10.6.8 と Amazon EC2 Amazon Linux で試しました。
米国T-MobileのSIMで、unlocked Android携帯で定額データ通信（テザリング）
今月は出張でボストンとサンフランシスコ・シリコンバレーに行ってきました。先月の出張は短期だったので、SoftBank の海外パケットし放題（2,980円／日）で済ませたけど、今回は期間も少し長いので、現地の SIM カードを入手してパケ放題してきました。携帯電話会社（キャリア）は T-Mobile にしました。
Tieroid - Android Marketのアプリ販売価格を揃えるBookmarklet
iOS
ブックマークレット
少し前から日本でも Android Market でのアプリ価格を販売地域ごとに設定できるようになりました。各国ごとに「1.99」みたいな値付けができて、より魅力的にみえる値段設定ができる半面、30地域くらいあるので、それぞれに値を入れるのは、結構、面倒な作業です。
9/15『IT 飲み会 in サンフランシスコ』に参加してます #itnomikai
IT 飲み会 in サンフランシスコ に参加してます。ジャパンタウンに来たのは初めてかも。New Poeple という会場です。TechCrunch Disrupt 参加のために日本から来て SF 滞在中の日本人の方、こちらに在住されている日本人の方が集まっています。日本からの US 進出をテーマに、トーク＋パネルディスカッションがありました。
TechCrunch Disrupt Hackathon ハッカソン開発者の食事 #tcdisrup
tcdisrupt
Hackathon
MTL ブログに TechCrunch Disrupt Hackathon ハッカソンに参加・発表してきました。 をポストしたので、こちらにはオマケで、会場で開発しているハッカーの食糧事情を紹介します。あまり開発作業に集中していると、ついついご飯を食べずに何時間も開発しちゃうことって、ありますよね？このイベントでは、常に食事が提供されて、空腹を知らずに、開発作業に没頭できる環境が提供されていました。
San Francisco の TechCrunch Hackathon に来ています
今朝到着の飛行機で、サンフランシスコにやってきました。時差ボケです。現在、TechCrunch SF 2011 のハッカソン に参加しています。広い会場に数百人のハッカーが集まって、ワシャワシャと開発していっています。
配列内の値の合計値をワンライナーで書く (sum of array) #perl
Moscow
Perl と言えばタマネギ、タマネギといえばロシアはモスクワ。Moscow.pm のメーリングリスト の話題が面白かった。Perl には、map や grep みたいに美しく配列処理できる強力な関数があるのに、sum とか avg みたいな集約系の関数は用意されておらず、自前で書く必要がある。
[Perl] XML::FeedPP - RSS・RDF・Atomフィードの解析・生成・変換・結合
XML::FeedPP モジュールは、 RSS 2.0、RSS 1.0 (RDF)、Atom 0.3（および1.0）フィードの XML ファイルを解析・生成・変換・結合するための Perl モジュールです。 RSS ベースの1種類の共通 API で RSS・RDF・Atom の各フォーマットの処理に対応しているため、 手軽に扱えます。 フィードの読み出し・書き込みはもちろん、 RSSからRDFへ、RDFからAtomへといった各フォーマット間の相互変換も可能です。 他サイトからダウンロードした複数のファイルを結合して、 まとめて1つのファイルとして出力することもできます。 公開版アーカイブ： XML-FeedPP-0.43.tar.gz TARGZ CPAN ←通常パッケージ 最新版ソースファイル： lib/XML/FeedPP.pm PM Subversion レポジトリ： http://xml-treepp.googlecode.com/svn/trunk/XML-FeedPP/ SVN ※ XML::FeedPP バージョン 0.30 から、Atom 1.0 に対応しました。（デフォルトは Atom 0.3 です）
openFrameworks ワークショップでバージョン 0.07 を使ってみた
openFrameworks
openFrameworks の作者ザッカリー・リバーマン（Zachary Lieberman）さんの来日に合わせて開催されたワークショップ『Flying Tokyo #5 Special: openFrameworks Workshop』で、実際に作ってみたデモを紹介します。イベントについては、MTL ブログ にも書きました。（書き換えたソースコードは、どうやって公開するのがいいかなあ…）
staticMaplet - Google Mapsの静的地図画像HTMLが取れるブックマークレット
Google Maps
Google Static Maps API を利用して、Google Maps で表示している地図の静的地図を取得するブックマークレットを作成しました。ブログに静的地図を貼るのに便利です。下記のリンクをブラウザのブックマークバーにドラッグ＆ドロップしてご利用下さい。
AIR for Android・iOS で、ASからソフトウェアキーボードを扱う
ActionScript
ActionScript のリファレンス で公開されていますが、AIR 2.6 (Flash Player 10.2) からはAndroid・iOS のソフトウェアキーボード関連の API が追加されています。needsSoftKeyboard など、使いそうなものをピックアップしてみます。
Capabilities.os で AIR for Android＆iOS の OS バージョン判定
AIR 2.6 for Android が公開されました。稼働している OS バージョンを返す ActionScript の Capabilities.os プロパティ は、AIR for Android や AIR for iOS でも利用できます。
iPhone・iPadの搭載CPU・メモリ容量・GPU・OSバージョンまとめ
iPad
iPhone
iPhone・iPod touch・iPad 各機種に搭載されている CPU・周波数・メモリ容量、GPU（OpenGL-ES バージョン）をまとめました。
iPhone・iPad のソフトウェアキーボードのサイズ・縦横比まとめ
iPhone・iPad のソフトウェアキーボードのサイズは機種ごとに固定で、どの言語でも同じサイズ・縦横比になります。表にまとめておきます。
Flash 製 iPad アプリをリリースしました（Asia Alphabets HD シリーズ）
昨年2～9月にリリースした iPhone アプリに続けて、iPad 版アプリをリリースしました。Asian Alphabet シリーズ5本とも、App Store からダウンロードできるようになりました。iPhone 版と iPad 版は、同じ ActionScript のソースコードを完全に共有しています。次期バージョンの AIR for iOS を使っています。GPU を活用し、快適に動作します。
KDrawSprite: AIR for iOSでcacheAsBitmap不要の高速GPU描画
Flash
Packager for iPhone 改め次期 AIR for iOS 向けアプリや、AIR for Android 向けアプリの開発時に、デバイスの GPU 性能を引き出す ActionScript ライブラリ KDrawSprite をリリースしました。
電源要らずでラジオが聴ける！鉱石ラジオを作ってみた
ラジオ
ピュルピュル
先日、愛宕山にある NHK 放送博物館 で見た「さぐり式鉱石ラジオ」に触発されて、秋葉原でゲルマニウムダイオードを買ってきて、鉱石ラジオ を作ってみました。なんと電源不要でラジオが聴けるという謎の仕組み。戦前は結構使われたらしい。
Androidアプリ用にシティバンクの銀行口座を登録してみた Google Checkout
Google
Citibank
Android Market でアプリを販売するために、Google Checkout で販売アカウントの入金先の銀行口座情報（Bank information）を登録してみました。口座登録してなくても、有料アプリの販売は開始できますが、入金されません。今回は、シティバンクの口座を使ってみました。
openFrameworks＋ofxiPhoneでiPhone・iPad用Hello, world!
Xcode
openFrameworks では、Windows・Mac 向けアプリに限らず、ofxiPhone アドオンでiPhone・iPod touch・iPad 上で稼働するアプリケーションを開発することができます。OpenCV など openFrameworks のライブラリを手軽に iPhone 上で使えるらしい。
openFrameworks＋ofxKinect アドオンで Kinect の深度センサーを試す
Kinect
Xbox
前回のポスト で、Mac OS X の openFrameworks の開発環境ができました。今度は、マイクロソフトの Kinect を使ってみます。Kinect は、距離が測れる深度センサーが付いています。単品で買うと USB 接続のアダプタが付いてくるので、Mac・Windows からも使えます。
openFrameworks で Hello, world! してみる (Mac OS X)
C++
openFrameworks http://www.openframeworks.cc/ が格好いいらしい。プログラムのコードをあんまり書かなくてもネイティブアプリが簡単に作れて、TrueType フォントを表示したり、Arduino を操ったり、音声再生したり、ビデオ再生したり、Web カメラを使ったり、OpenCV で画像認識するためのライブラリがセットになって配布されていて、しかも手軽に使える。
ImageMagickでAndroidアプリ用にiPhone風の角丸アイコン画像を生成する
ImageMagick
PNG
iPhone アプリのアイコンは、アプリ内の PNG に対して iOS が角丸を付けて表示しますが、Android アプリのアイコンは、アプリ内の PNG ファイルがそのまま表示されます。Android アプリ用に、iPhone アプリみたいな角丸アイコンを作成する手順をまとめました。ImageMagick の convert コマンドを使うので、無料で作れます。角丸は、αチャンネルを使っているので、ジャギーが目立たずに、スムーズに表示されます。
次世代テレビ勉強会（第1回）に参加。Google TVでウェブコンテンツも16:9時代
六本木ヒルズのテレビ朝日の会議室で開催された 次世代テレビ勉強会 に行ってきました。会場には、SONY 製の米国販売の Google TV が３台も並んでます。メディアテクノロジーラボ のオフィスで STB は見ましたが、TV 本体は初めてです。Wi-Fi は電波法の問題があるので使わず、今回は e-mobile 経由の有線 LAN を使いました。すぐに定員になって、参加できなかった方も多数。また次回も開催されるそうです。
BackType APIでURL毎のTwitterのツイート数を取得する
BackType
Twitter
API
Twitter で、そのページが何回言及されたかツイート数を取得する API の使い方を紹介します。このブログにも導入 している DISQUS COMMENTS は、コメント機能を提供するだけでなくて、「Reactions」として Twitter でそのページが言及されたツイートも合わせて表示してくれます。BackType という別サービスと連携して実現されている機能です。この BackType の API を使うと、Twitter APIを使わずに URL ごとのツイート...
[Perl] XML::TreePP - Pure Perl実装によるXMLファイル展開モジュール
XML::TreePP モジュールは、 XML ファイルを解析してツリー構造の多次元変数（ハッシュ／配列）に展開します。 XML テキストと Perl オブジェクト（ハッシュ＆配列）間の相互変換が可能です。 コンパイル不要の Pure Perl 実装モジュールなので、 プロバイダのレンタルサーバ環境でも .pm ファイル単体のコピーのみで手軽に利用できます。 （Ajax で利用する JavaScript の XMLHttpRequest オブジェクトのように） サーバからの XML ファイルのダウンロード処理にも対応しています。 安定版アーカイブ： XML-TreePP-0.41.tar.gz TARGZ CPAN ←通常パッケージ 最新版ソースファイル： lib/XML/TreePP.pm PM ←.pmファイルのみ必要な場合 Subversion レポジトリ： http://xml-treepp.googlecode.com/svn/trunk/XML-TreePP/ SVN
ミッドタウンで Ars Electronica と新 MacBook Air にタッチ！
タッチ
ミッドタウンで Tokyo Midtown DESIGN TOUCH というのをやっていたので、タッチしてきました。10月28日～11月3日まで、ミッドタウン内で複数のデザイン系イベントが同時開催されています。そのメインコンテンツとなる DESIGN TOUCH Exhibition は、オーストリアのリンツにある「アルスエレクトロニカ」Ars Electronica とのコラボ企画です。
日経ソフトウエア（2010年12月号）に JavaScript のコラムを寄稿
JavaScript
HTML5
今月23日に発売された 日経ソフトウエア（2010年12月号） に2ページの短い記事を寄稿させて頂きました。特集１『HTML5 時代が目前！本気で学ぶ JavaScript』の中で、『HTML5 は JavaScript プログラムをスマートにする』というコラムです。
YAPC::Asia 2010 前夜祭～本編～ハッカソンに参加しました
YAPC
2010年10月15～16日に開催された YAPC::Asia 2010 に参加しました。今年も大岡山の東工大の会場です。発表資料と写真を交えてレポートします。
Encode::JP::Emoji の携帯絵文字コード変換マッピングまとめ
絵文字
Unicode
Encode::JP::Emoji モジュールは、多数のエンコーディングを提供しています。ここでも解説しています が、ちょっと複雑なので改めて紹介します。
Unicode 6.0絵文字対応Encode::JP::Emoji 0.60をリリース(Perl)
今月10月11日 に Unicode Version 6.0 がリリースされたのに対応して、川崎がメンテしている Perl モジュール Encode::JP::Emoji もバージョンアップして、Unicode 6.0 で追加された絵文字を正式サポートしました。
Bookmarklet Maker - JavaScriptからブックマークレットHTMLタグ生成
JavaScript のソースコードをフォームに記入すると、ブックマークレットの a 要素からなるHTML コードを生成してくれるページ Bookmarklet Maker を作りました。
img2html - 写真をブログに貼るためのHTMLソースを生成するブックマークレット
picasa
flickr
先日の flickr の写真をブログに貼り付ける際に便利なブックマークレット では、flickr の写真ページを表示させた状態でブックマークレットを起動すると写真ページへの a タグ＋写真の img タグからなる HTML ソースを生成するものでした。今回の img2html は、flickr 以外のどのサイトでも使える汎用版です。
Vox → TypePad → Blogger とブログを移行した（Twitter ログ置き場）
OAuth
Blogger
Six Apart の無料ブログサービス Vox が2010年10月1日にサービス終了してしまいます。僕も 2006年にアカウントを作って、http://kawanet.vox.com/ を使わせてもらっていました。実際には、いわゆるブログ としては使わずに、Twitter のツイートのログ置き場にしてました。
Cantonese Alphabet - 広東語に香港方式のローマ字ルビを振るiPhoneアプリ
香港
iPhone アプリ Cantonese Alphabet（カントニーズ・アルファベット） をリリースしました。香港などで使われる広東語の読み方・発音をローマ字のルビとして表示するアプリケーションです。
Japanese Alphabet - 日本語の読み方をローマ字表示するiPhoneアプリを公開
iPhone アプリ Japanese Alphabet（ジャパニーズ・アルファベット） をリリースしました。日本語の読み方・発音をローマ字のルビとして表示するアプリケーションです。漢字・ひらがな・カタカナを含む、漢字仮名交じり文に対応しています。（9月9日発売開始）
Mashup Camp で「MAP★THE★RAPPER」を５時間で開発してみた。#MA6
MA6
地図
今年も、Mashup Awards のシーズンがやってきました。MA6 では、開発者向けイベント の新企画として、『Mashup Camp』を始めました。9月11日（土）にその第１回 Maps Day を開催しました。開発者が同じ会場に集まって時間と場所を共有し、チームごとに協力して、あるいは個人個人で、と思い思いに集中して開発に取り組む日帰り開発合宿形式のイベントです。「ハッカソン」ともいいます。もちろん、自称ハッカーでない方も参加歓迎です。 今回の Mash...
祝！共著『ソーシャルストリーム・ビジネス』重版決定♪ 好評発売中！
ソーシャルストリーム
リクルート
川崎がリクルートの メディアテクノロジーラボ が執筆した書籍『ソーシャルストリーム・ビジネスTwitter、Facebook、iPhone時代の消費者を巻き込むビジネスの新ルール』の増刷が決定しました！8888!
ウェブリブログに、はてなスターを貼る手順
ウェブリブログ
はてな
ウェブリブログに、はてなスター を貼ってみた手順メモ。はてなスターは、最近話題の『いいね！』『Like！』みたいなレイティング・投票機能の一種です。はてなダイヤリーに限らず、他のサイトにも 簡単な JavaScript だけで手軽に★機能を追加できます。
DISQUS CommentsのTwitterコメント投稿・表示欄を掲載する手順
TechCrunch でも使われている DISQUS COMMETNS が便利です。JavaScript のコードを貼るだけで、自分のブログやウェブサイトにコメント欄を追加できます。コメントを投稿する人は、Twitter アカウントで認証できるのでラク。（OpenIDも可）投稿されたコメントは、そのまま Twitter で流れる。Twitter 上でその URL について言及された他のツイートも、コメントとして表示してくれる。Twitter のリアルタイム検索ではツイー...
ウェブリブログでトラックバックの表示を削除するスクリプト
trackback
トラックバックは死んだ と言われて久しいですが、ウェブリブログは「ブログ」サービスなので、今もトラックバック機能が付いています。表示エリアも結構大きい。ときどきは便利なんですが、最近は滅多に使われないので、『トラックバック （0件）』の表示エリアをまるごと削除してしまうスクリプトを書いてみました。ウェブリブログの表示が少しスッキリします。
8/21『Google Wave追悼会』に参列させて頂きました #googlewave
googlewave
Google からの突然の開発中止の発表 で、久しぶりにその存在を思い出させてくれた Google Wave。GDD で初めて聞いたときは、JS のみでブラウザ間でリアルタイムに相互通信する技術面については、こりゃスゴいのが出た、と思ったものの、実際に試すと使い道がイマイチ分からなかった。 正式サービス開始後、たった2ヶ月で開発中止が発表されたこの不運なサービスを追悼するため、ATND で告知されていた Google Wave追悼会 に参加してきました。
Google Mapsで短めのパーマリンクURLを取得するブックマークレット
Google Maps（Google マップ）の検索結果画面から cid と ftid を取得して、短めのパーマリンク(URL)を生成するブックマークレットを書きました。
Google Mapsはワイルドーカード『*』で付近の全店舗検索ができる
iPad で Google Maps を見ると本当に便利ですね。紙（地図帳をめくる）よりもむしろ直感的な操作？3G 回線経由だとタイル表示が少し遅いけど、ブロードバンド＋Wi-Fi なら快適。
非公式retweet形式『RT @kawanet:』でツイートを引用するブックマークレット
他人のツイート tweet に対して、リツイート retweet するときに、『RT @元の発言者名: 元の発言内容』の形式で元ツイートを引用してくれるブックマークレットを書いてみました。
[ajax] JKL.ParseXML／ajax通信処理ライブラリ
ajax
JKL.ParseXML クラスは、サーバ上の XML 形式ファイルをダウンロード〜解析して、 JavaScript オブジェクト（配列やマップ）に変換するライブラリです。 複雑な DOM 操作なく簡単なスクリプトで XML 形式ファイルを扱えるため、 Amazon など XML を出力する既存の Web サービスや、 CGI と連携することで ajax ページを手軽に構築できます。 IE・Firefox・Opera・Safari のクロスブラウザに対応しています。 XML を JSONのように手軽に扱える他、 JSON／CSV／LoadVars 形式ファイルなどのテキストファイルも利用可能です。
HTML5 GeoLocation APIで現在地住所の自動入力（ジオデコード）
以下の「現在地の取得」ボタンをクリックすると、 HTML5 GeoLocation API を利用して現在地の緯度経度を取得し、 Google Maps API の Reverse Geocoding（逆ジオコーディング、ジオデコード）により住所文字列に変換します。
HTML5 GeoLocation API + Maps Demo（地図表示）
以下をクリックすると、HTML5 GeoLocation API を利用して現在地の緯度経度を取得して、 Google Maps API の Static Map により地図を表示します。 （地図をクリックすると、Google Maps に飛びます）
AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）
AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQuery にも対応しました！
[Perl] Lingua::*::Romanize::* 日中韓／ローマ字変換モジュール
Lingua::*::Romanize::* は、日本語・中国語・韓国語の UTF-8 文字列の各国語の読みを ローマ字化するPerlモジュール群です。 Lingua::JA::Romanize::Japanese は、 日本語（漢字かな混じり文） をローマ字化します。→詳細 Japanese 付属の Juman・MeCab モジュールで、形態素解析を利用した読み下しにも対応します。 Lingua::ZH::Romanize::Pinyin は、 中国語（標準語読み） をローマ字（ピンイン）化します。→詳細 Pinyin 付属の Cantonese モジュールで、香港などの広東語読みをサポートします。 Lingua::KO::Romanize::Hangul は、 韓国語（ハングル文字） をローマ字化します。→詳細
マイページ URL 備忘録
各サービスのマイページの URL を忘れると探すのが面倒なので、並べておきます。
[Perl] KCatch.pm／CGI エラーメッセージをブラウザに表示
KCatch.pm は Perl CGI で発生する Internal Server Error を補足して、 エラー内容を HTML としてブラウザ画面に表示してくれるモジュールです。 エラーの発生した行番号なども表示されるので、サーバ上での開発に最適です。
[JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス
JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。
ajaxな住所入力フォーム
いっけんすると普通の住所入力フォームですが、郵便番号7桁を入力すると・・・。
[ajax] AjaxTB／トラックバック機能を静的HTMLページに追加するJavaScript
本サイト(kawa.net)が最初にトラックバックに対応したのは、2004年11月でした。 その後、ソーシャルブックマークの普及や SPAM の増加によって トラックバックは死んだは とまで言われて地位はだいぶ下がっていますが、 今ごろになって、また本サイトのトラックバック機能を実装し直してみました。 本サイトは CMS／ブログ等を使ってない静的な HTML ファイルばかりなのですが、 旧バージョンでは、トラックバックpingの届いたページの HTML ファイルを 自動的に書き換える仕組みで実装していました。 ただし、nobody 権限で HTML ファイルを書き換えるのは嫌いなので、cron で回しています。 新バージョンは ajax を利用して実装しています(正確にはresponseTextを使用)。 CGI 呼び出しはトラックバック到着時のみで、ページの表示時には静的テキストファイルを 使用して CGI は起動しないため、サーバへの負荷も軽いです。 もちろん、ページ自体も静的 HTML ファイルのままです。 トラックバックが増えても（見た目はともかく）ページ本体の HTML コードには影響がないので、 トラックバックの当初の繁栄理由の1つだった Google ページランクのアップは期待できません。 しかしその分トラックバック SPAM の意欲をいくらか削ぐことは出来るかも？ 新着コメントは、 RSS形式 および JSON形式 でも 参照できます。 この RSS ファイル・JSON ファイルは、 ajaxtb.cgi?__mode=rss にアクセスすると、強制更新できます。
[ajax] AjaxCom／静的HTMLページに1行コメントを書き込める掲示板
AjaxCom は、静的HTMLページに1行コメントを書き込める掲示板機能を追加できます。 このページも単なるHTMLファイルですが、 【コメントはこちらへ】のエリアにメッセージを書き込めます。 サーバ側の CGI を起動するのはコメント書き込み時のみで、毎回のコメント表示時は CGI 不要のため、サーバ負荷も軽いです。 新着コメントは、 RSS形式 および JSON形式 でも 参照できます。 この RSS ファイル・JSON ファイルは、 ajaxcom.cgi?__mode=rss にアクセスすると、強制更新できます。 コメントの送信・表示には ajax（responseText）を利用しています。 お試し投稿・練習・フリートーク用のページを作成しました。 ⇒こちらへ
[JSAN] XML.ObjTree - XML〜JavaScriptオブジェクト変換クラス
JSAN
XML.ObjTree クラスは、Perl 用の XML::TreePP モジュールの JavaScript 版です。 XML ファイルと JavaScript オブジェクト（連想配列）間の相互変換を行います。 prototype.js または JSAN の HTTP.Request クラスと併用することで、 JKL.ParseXML の 後継 としても利用できます。 ECMA-357 の普及を待たずに、 ECMAScript for XML (E4X) 風のXMLのオブジェクト利用が可能になります。 Intel Mac 版の Safari で、 DOMParser オブジェクトの async プロパティが read-only となる点にも対応しています。 IE で（サーバ上でなく）ローカルのXMLファイルを開きやすくなりました。（2006/08/14）
[JavaScript] Animation.Raster - ラスタスクロールだ！
Animation.Raster クラスは、 JavaScript で 擬似ラスタースクロール するためのライブラリです。 10年以上前のゲームみたいに、「うねうね」するエフェクトを楽しめます。 CPU の速いマシンでも遅いマシンでも、同じ実時間内でアニメ表示します。 速いマシンの方がスムーズに表示されます。（GHzクラスのCPUが必要です） Internet Explorer 7.0、Firefox 1.5、Opera 8.5、Safari 2.0.3、OmniWeb 5.1.3 で 動作確認しています。 ただし、IE は『ページを表示するごとに確認する』にはしないでください。
[JavaScript] Animation.Cube - サイコロ回転エフェクト (rotating cube animation)
Animation.Cube クラスは、JavaScript のみでサイコロ回転風の アニメーションエフェクト(rotating cube animation)を実現するライブラリです。 事前に画像ファイルを加工(拡大縮小や分割処理)せず、JavaScript のみで リアルタイムにアニメーション処理を行います。 2画像の切替えエフェクト処理用、または、 サイコロの4面に貼り付けた画像をループで回転させるような処理に利用できます。 画像の拡大縮小処理が入っているため、 ラスタスクロール よりもマシン負荷が高いようです。 Opera だと少しスムーズなようです。 画像サイズを抑えれば、Celeron 2.4GHz 機でも十分に回転してくれます。 英語版ページが diggされました。（2006/04/22）
�����̗����p�X���[�h�������������� JavaScript
JavaScript ことはじめ
JavaScript の基本をまとめておきます。
JKL.Dumper - JSONデータダンプクラス
JSON形式テキストに変数の内容をダンプするクラスです。 JavaScript の開発時にデータ構造を確認するのに使えます。
KAWA.NET 2001