サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
Effective Java 読書会 14 日目 「シリアライズ！シリアライズ！」 - IT戦記
お前をシリアルにしてやろうか！ this photo is licensed by Horia Varlan はじめに いよいよ最後のページになりました！！！ はりきっていきましょう！！ 今回の範囲 279 ページ 〜 305 ページ 前回はこちら Effective Java 読書会 13 日目 「Java の例外めんどくさい」 - IT戦記 シリアライズって何？ シリアライズとは、構造を持ったデータ（Java では、オブジェクトやプリミティブ）を、バイト列にすること。 たとえば、 オブジェクトをファイルに保存したい！ 通信先にこのオブジェクトを送りたい！ （具体的には、）ゲームデータをセーブしたい！（とか） などなどの用途で使えます。 Java のシリアライズ ObjectOutputStream にオブジェクトを書き込むと、 ObjectOutputStream がラップしているオブ
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
ニコニコ動画のまとめサイトを色々調べてみた - IT戦記
週末といえば だらだら、動画サイトを見て過ごすってことも多いんじゃないでしょうか。 という訳で、 Pathtraq を使って「ニコニコ動画のハブとなっているサイト」を調べてみました。 Pathtraq を使って調べた結果はこちら こうやってみるといろいろなサイトがありますね。 予想外に知らないサイトが多かったので、軽くまとめてみます。 あまり中身は吟味していません。 以下、リンク http://b.hatena.ne.jp/video http://b.hatena.ne.jp/video http://www.nicochart.jp/ http://www.nicochart.jp/ http://nicorankmonth.web.fc2.com/ http://nicorankmonth.web.fc2.com/ このURLのページは表示することが出来ませんでした。 IP分散サーバ
JavaScript 的な考え方で C++ Template に入門してみた - IT戦記
はじめに id:kazuhooku さんが Kazuho@Cybozu Labs: なんとなくリフレクション in C++ という記事を書いていて、なんか凄そう！ わくわく！ でも、読めません＞＜ Template 怖い＞＜ という訳で C++ Template の勉強をしてみよう！ そいえば、ちょっと前に 1000speakers で上野氏に C++ Template はチューリング完全、関数型言語というようなことを聞いたきがする！ じゃあ、いろんなことが出来るはず！ という訳で JavaScript で出来ることが C++ で出来るかを試してみよう！ まず 関数テンプレートと構造体テンプレートどっちで JavaScript の関数を表現するべきかを考えた。 C++ の文法を考える // これはできない＞＜ void foo() { void bar() { void baz() { }
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
駄文 - 株式会社 Dino の新人研修がすごい - IT戦記
この前紹介した 駄文 - 4 月からプログラマになったあなたへ - IT戦記 スタートアップ研修記 Dino という会社の新人研修ですが、すごいです。 何がすごいか 講義を動画で公開しているのです。 zoome.jp そして、新人はプログラミング未経験者 新人の方はプログラミング経験のない方なので、当然以下のような質問が飛びます。 IP ってなんですか？ インタフェースってなんですか？ ディレクトリってなんですか？ などです。 この質問に対して、なるべく正しく、そして、イメージが湧くような説明をするってすごく難しいと思うんです。 逆に、生半可な知識で説明すると誤解を与えてしまうことになります。 でも、この動画の講師はすごく丁寧な説明で言い切るところは言い切って的確に教えているなあと思いました。 すごいです。 講師、新人両方に良い さっきも言ったように、基本的な説明ってすごく難しくて、すぐに
IE6 と IE7 と IE8 を同じマシンで共存させる方法 - IT戦記
追記： 現在は IETester というソフトウェアを使うのがベストだと思います＞＜ 結論から言うと Jeremy Smith's blog: Success! IE 6, 7, and 8 Running on Same Machine (Plus 5.5 and 5.01) に書いてある通りで IE8 をインストール http://tredosoft.com/IE7_standalone の IE7 Standalone をインストール http://tredosoft.com/Multiple_IE の Multiple IE をインストール の順で、共存させることができました。 IE8 を入れるのを戸惑っている人は 入れてみたらいかがでしょうか。 ちなみに 以下のサイトからダウンロードできる Standalone IE6 は IE8 と共存できませんでした。 browsers.ev
JavaScript1.7 の yield を使って、非同期処理を同期処理のように書く方法 - IT戦記
経緯 id:kazuhooku さんが一年前にやってたことですが Kazuho@Cybozu Labs: JavaScript/1.7 で協調的マルチスレッド 今日やっと挙動が理解できたのと、 Weave のソースを読んでいたらこのテクニックをバリバリ使っていて「ちょwwおまwww」ってなったので、自分でも作ってみようと思いました。 ほとんど id:kazuhooku さんのと同じものなので、既出です＞＜本当にありがとうございました＞＜ まず、 yield とは何か yield とは、 JavaScript 1.7 から導入された機能です。 以下に yield の細かい挙動を示しておきます。 function f() { // なんかの処理 yield; // ... (1) // なんかの処理 yield; // ... (2) // なんかの処理 } var g = f(); // こ
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
IT戦記 - JavaScript の this について
WEB+DB PRESS 編集の R たんから、僕の連載記事に読者様から質問が来ていると教えていただいたので、その内容を教えていただきました。 以下、内容を転載 「JavaScriptわくわく開発道」の記事に関して質問です。 今回の内容で特に興味を持ったのはthisキーワードの振る舞いでした。 thisキーワードの説明には、オブジェクト型の変数を別の変数にコピーしてから初期化すると、コピーした変数からメソッドを実行できなくなるという例が紹介されていました。 そこには「（1）の時点でobj0には{}が入っているため、hogeは未定義となってしまう」という説明があるのですが、誌面の都合上省略があるためか、thisキーワードを用いることで問題を回避できるという理由がなかなか理解できないでいます。 自分なりに考えてみたところ、内部的には以下のようなことが起きているのではないかと思いました。 (1)
IT戦記 - ActionScript の Object.prototype を拡張する実用的な例
このエントリの続きです。 d:id:amachang:20061220:1166630932 ActionScript では Object.prototype を書き換えていいので・・・、 実際に便利な関数を作ってみた _def 関数 この関数は、 DontEnum な(for in で繰り返されない)プロバティを作る Object.prototype._def = function(p, o) { this[p] = o; this.setPropertyIsEnumerable(p, false); }; Object.prototype.setPropertyIsEnumerable('_def', false); _merge 関数 この関数は、this に別のオブジェクトをマージする。上の _def 関数を使って作っています。 Object.prototype._def('_me
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
関数一発でプロトタイプチェーンに繋げて、オブジェクトをクローンする。 - IT戦記
最近、プロトタイプ的継承の話しが盛り上がっています。 http://blog.livedoor.jp/dankogai/archives/50662064.html http://labs.cybozu.co.jp/blog/kazuho/archives/2006/10/javascript_string.php http://blog.livedoor.jp/dankogai/archives/50662606.html 最終形がやたら複雑になっています でも、実際はあそこまで複雑に書かなくても、できると思います ^^; そう思う理由 P 関数は object 関数の中でローカルのものである。コンストラクタとして使える必要はない。なので、 Atomic な場合でも P は function(){} でいい。 method 関数では P.prototype のプロパティに関数が代入されて
IT戦記 - FireBug の新しいバージョンが便利すぎる件について
FireFox の拡張機能 FireBug を更新したらすごいことになっていたので共有します。 まずこれを見てください http://Sample.ECMAScript.jp/20060331.html ぱっと見の機能 HTML のソースを見ながら、属性値を直接編集できる。 影響のある CSS を即時に表示 レイアウト情報を即時に表示 インスペクト中の要素に浮上したイベントをキャプチャ インスペクト中の要素の JavaScript オブジェクトを表示 Ajax レスポンスのヘッダも確認できるようになった。 FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843
Prototype.js を使った JavaScript OOP 講座 #01
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
