WebKit サーバーというものを作ってみた - IT戦記
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
hCalendar を使って予定を公開しよう！ - IT戦記
はじめに みなさん、こんばんわ！ さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです！ ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！ この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
Y コンビネータって何？ - IT戦記
このエントリの 親友へ。ブログを書こう。 - IT戦記 y がブログを始めたみたいなので、読んでみた。 で、最新のエントリを読んでみたら、 Y コンビネータというものについて書いてあったので、 Y Combinatorが凄すぎる！ - yuji1982の日記 Y コンビネータって何ってところから、自分でもいろいろ考えてみた。 結局なんなのかさっぱり分からなかったんですが、自分が考えたことをまとめておく まず、フィボナッチ数を求める fib を定義する var fib = function(n){ return (n <= 2) ? 1 : (arguments.callee(n-1) + arguments.callee(n-2)); }; fib(10); おお！ JS すげー！名前は n しか使ってねーよ！ めでたし、めでたし。。。。じゃなくて！ JS が素晴らし過ぎて話が終わってしま
はじめての mixi アプリ - IT戦記
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <
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(); // こ
for 文と無名関数のイディオム - IT戦記
id:cho45 がチョロっと書いたコードが話題になっている 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech このような書き方は、自分もたまにする。 というわけで、この書き方をする利点を以下の順に解説して見る。 単純な for 文の問題点 with 文を使った解決方法と、その微妙な問題点 無名関数を使った解決方法 単純な for 文の問題点 まずは、以下の HTML に対して <ul> <li>hoge</li> <li>fuga</li> <li>piyo</li> </ul> 以下の JavaScript を実行して var list = document.querySelectorAll('ul > li'); for (var i = 0, len = list.length; i < len; i++) { var node = list[i]; v
id:otsune さんと id:otsnue さんを間違えないようにする Greasemonkey - IT戦記
最近、はてなユーザーも多様化してきて 似た名前のユーザーって多いですよね＞＜！ たとえば、以下のように名前を間違えるというようなこともままあります。 id:otsune id:kajuntkさん。そのidは私じゃありません。 2009/01/12 id:kajuntk id:otsune その辺は考慮して書いてると思うよ/ホントだ！今気がついた。 2009/01/12 id:otsnue amachangはアイドルであり身内だからな。身内が叩かれるとプッツンしてさらに過激にdis返しをするのが奴らの恒例行事。トコロテンさんが気の毒です。 2009/01/12 はてなブックマーク - なんかブコメで叩かれまくってる - Automatons Hacking Guide これは困ってしまいました＞＜ なんと、かの id:TAKESAKO 氏ですら見間違えてしまうほどです！ というわけで 間違え
Google Chrome の JavaScript エンジン V8 を試す - IT戦記
（基本だらだら進行で、過程を追記していきます） Google Chrome が出ました Google Chrome で JavaScript エンジンが刷新されたということで、その JavaScript エンジン V8 についていろいろ調べてみようと思います。 Issues - v8 - V8 JavaScript Engine - Monorail ビルドしてみる まず、 svn からソースを持ってくる $ svn co http://v8.googlecode.com/svn/trunk/ v8おおお。以外と少ない で、 trunk の中に入って $ cd v8scons でビルド（scons が入ってない人は、 port や apt-get で入れる） $ scons scons: Reading SConscript files ... scons: done reading SC
動的ローディング雑感 - IT戦記
以下のエントリを読んで if(typeof external_script_onload=='function')external_script_onload("loaded"); こんな1行を追加します。もちろん、external_script_onloadって名前は任意です。 読み込む側はexternal_script_onloadにcallback関数を定義してあげればOKです。これで、Scriptが読み込まれて 実行された最後に、external_script_onloadが呼ばれることになります。 外部JavaScriptの動的ロード - os0x.blog これはかなりありなんじゃないかと思いました 例えば、以下のようなコードを // ... main code var ss = document.getElementsByTagName('script'); try { ss
文章を書く仕事を楽しく勧めるには - IT戦記
フランスで得られたもう一つのことを書いておこうかと思う フランスで得られたもの それは、日本語の文章を楽しく書く方法。 ただ、この方法には、編集者に非常な負担を掛けることになる。編集者がそれを了承してくれる関係、前提が必要。 文章を書くのが苦手だった理由 書きたいことが箇条書き的になってしまう その箇条書きをストーリーに乗せられない 日本語は、合理的でない 段落中で、同じ語尾が続くと不自然とか 意味は通じるけど、言い回しが変とか 推敲すると、全体が見えなくなる（ゲシュタルト崩壊） 無意味に不安になる 文章を楽しく書く方法 大事なことは二つ 著者と編集者と一緒に書くということ「文章の共有」「感動の共有」「ビジョンの共有」 作業の分担 著者は、情報のクオリティを担当。文の局所を見る。 編集者は、文章のクオリティを担当。文章の全体を見る。 実際の作業の流れは、以下のような感じ 編集者と一緒に同じ
Google Gears の機能のおさらいと HTML5「Client-side DB」の相互運用を考える。Client-side DB に未来はあるか？ - IT戦記
さきほど Client-side database storage について書きましたが そこで、 Client-side database storage は今は Safari からしか使うことができません しかし、 Google Gears を使ってすべてのブラウザに実装することは可能だと思います。（すでにある？） その辺りも少し調べてみたいです。 Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記 と書いてから、少しだけ Google Gears が持っているクライアントサイドデータベースについて調べてみました。 Google Gears とは まず、 Google Gears について少し触れておきます。 Google Gears はブラウザの機能を拡張するためのもので、以下の機能を提供します。
Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
はじめに Safari 3.1 には Client-side database storage （SQL API とも呼ばれています。）という新しい仕様が実装されました。 というわけで、この新しい API について色々調べたことを簡単にまとめておきます。 Client-side database storage が使えるブラウザ 2008 年 03 月 27 日現在では、 Safari 系のブラウザのみです。 Safari 3.1 WebKit Nightly Client-side database storage とは Selectors API とは HTML5 で定義された仕様です。詳細に関してはこちらをどうぞ。 簡単に説明すると JavaScript 内でリレーショナルデータベースを使えるということです。 もっと簡単にイメージするために、実際のコードを示すとこんな感じです。 va
IE8 速攻徹底レビュー - IT戦記
こ、この日記、徐々に増えている・・・ というわけで IE8 の新機能、発見したら即更新 window.sessionStorage window.globalStorage キター！！！！！ See Also HTML Standard See Also DOM Storage - DOM | MDN hashchange イベントに対応（HTML5 のメーリングリストで名前を揉めてた気がするけど） online offline イベントに対応 XDomainRequest （なぜ、 XMLHttpRequest level 2 にしなかったのかと（ry window.postMessage（cross-document messaging） キター！！ See Also HTML Standard Selectors API キタキタキタキタキタキターーーーーーーーーーーーーーーーーーー
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
(function(){})() と function(){}() - IT戦記
自分用メモ // JavaScript でクロージャを書くときこう書く事が多い (function() {})() // 何故なら // function() {}() // と書くと // function() {} が式ではなく、文として解釈されてしまうからだ。 // 文として解釈されないためには、文の途中（最初以外）に function と書いてやる必要がある // なので、まず開きカッコを書いてやる。 ( // の後に function() {} // と書いてやると function は式になる ) // 正確には、カッコの対は The Grouping Operator という演算子である。 // カッコ以外にも var a = // のように代入演算子のあとでもいい function() {} // つまり、以下のような記述も可能である。 var b = function()
JavaScript でこんなパッケージ管理はどうか？ - IT戦記
まず、以下のような package 関数を作る。 function package(name) { package.__hash__ = package.__hash__ || {}; if (!package.__hash__.hasOwnProperty(name)) { package.__hash__[name] = { def: function(name, value) { return this[name] = value; } } } return package.__hash__[name] } で、こんな感じで使う // ここは hoge の名前空間 with (package('hoge')) { def('var0', 1); // 変数は def 関数で定義 def('var2', 2); alert(var0); // 1 alert(var2); // 2 }
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
