はてなブックマーク

HTML5関連イベントを3日連続で行う、って言うかなりムチャめなイベント「HTML5 3Days」がなんとか終了しました。 イベント自体がよかったか、悪かったかについては、参加者の皆さんがどれくらい満足したか次第ですが、主催者の一人としては「なんとか成功？」くらいの手応えを感じてます。 何より、参加者の熱さを肌で感じられたのが良かった。 ぶっちゃけ、キャンセル率がここまで低いイベントと言うのは、僕が関わったことのあるイベントではほとんど記憶にありません。 僕がつたない講演をしている間も、こちらを見ている方々の目は真剣そのもの。質問も的確なものばかりで、相当集中して聞いていないと出てこないようなものばかり。久しぶりに緊張しました・・・ Hackathonも、HTML5をテーマにしたものは初めての開催だったにもかかわらず、信じられないようなレベルのアプリがばんばん登場。ほんとみんなすごいなー・

出ましたね！ http://code.google.com/chrome/chromeframe/ Google Chrome FrameはInternet Explorer6/7/8に対応したプラグインで、インストールするとこれらのブラウザが「HTML5に対応」するとされています。 また、Chrome Frameを使うよう指示されたページに対しては、レンダリングエンジンやJavaScriptエンジンもChrome Frameのものが使われるようになるため、かなりの高速化が見込めるとのこと。現在はearly access版です。 と言う訳で、早速触ってみました。 使い方 すごく簡単。 Webページに以下のmetaタグを記述しておくと、Chrome FrameがインストールされたIEでこのHTMLを閲覧したとき、Chrome FrameがレンダリングやJSの実行を肩代わりしてくれます。 <m

JavaScriptには、日時を表すフォーマットとして標準的なISO-8601互換のフォーマットを扱う関数がありません。 （ECMAScript5th/JavaScript2には、Date.prototype.toISOString()として含まれますが、使えるブラウザが限られます） ISO-8601と言うのは、「2009-09-09T11:32:23.123Z」のような形式です。 なので、ISO-8601をフォーマット／パースできるライブラリ、ISO8601.jsを書きました。 初めてのGithubです。 http://github.com/shumpei/iso8601.js/tree/master セットアップ セットアップは簡単で、ここからISO8601.jsのソースファイルをダウンロードし、scriptタグで読み込むだけです。 <script type="javascript"

以前、「Safari4でDateオブジェクトをJSON.stringify()すると、ミリ秒の情報が落ちてしまう」と言うお話をお伝えしました。 が、Webkitにバグ報告をしたら、アップルの人が直してくれたようです。 なんで、ミリ秒を扱う必要のあるアプリでも、JSON.stringify()を使いやすくなりました。 以下のコードは、Firefox3.5とWebkitのどちらでも同じ結果を返します。 alert(JSON.stringify(new Date())); //-> "2009-09-10T10:19:23.123Z"、とか。 めでたし、めでたし・・・と、言いたいところですが。。。 実はまだ落とし穴があります。と言うのは、IE8のJSON.stringify()もミリ秒の情報が抜けちゃうからなんですね。。 なーんでー？？仕様書(ECMAScript 5th)に明記してあるのにー！

JavaScriptのオブジェクトをJSONに変換する際、必ずと言っていいほど使われるのがjson2.js。 ECMAScript5(JavaScript2)では、json2.jsの実装をほぼ忠実に仕様として再現しており、Firefox3.5やSafari4ではネイティブの実装が利用できます。 例えば、JSオブジェクトをJSON文字列にしたい場合は、JSON.stringify(value, replacer, space)を利用できます。 valueはJSオブジェクト。 replacerは省略可能で、function(key, value)と言うシグネチャの関数オブジェクトを渡します。JS→文字列の変換ルーチンを独自に提供できます。 spaceは、結果の文字列を人間が読みやすくするための、インデントの数を指定します。 その逆に、JSON文字列をJSオブジェクトに復元したい場合は、JSON

WHATWGのメーリングリストで、<input type="email">に入力できる文字列の形式について議論がされている中で、メールアドレスの正規表現についての話が出てたのでメモ。 まだ議論は続いているみたいだけど、以下のような正規表現で落ち着く可能性が高そう。 まずはXと言う変数を仮定して、 X = [-a-zA-Z0-9!#$%&\'*+/=?^_`{|}~]+ このXを用いて、メールアドレスの正規表現を以下のように表してます。 ^X(\.X)*@X(\.X)*$ メールアドレスの正規表現っていつもどうすれば良いか、ググって調べるのですが、超長大なPerlの正規表現とかがよくヒットして、「これはちょっとオーバースペック過ぎるな・・・」といつも簡易なチェックで済ませてました。 上の正規表現で済むなら、楽だなあ（厳密に正しいのかどうかは知らないですが・・・） これから使おう。

マイコミジャーナルでHTML5特集を書く際、作ったサンプルをまとめて公開しました。会社の業務時間を使って作ったので、会社のHPからもリンクしてます。 http://ayuta.co.jp/html5-samples/index.html 前からやろうとは思っていたのですが、なかなか時間がなくて・・・ マイコミって、記事で書いたサンプルをダウンロードするような仕組みがないので、コピペで試すか読んで流すかしかできないんですよね。 なので、サンプルをまとめてWebで見れるようにすれば、少しは皆様のお役に立てるのではないかと。 ってことで、HTML5の以下の機能を試すサンプルをご利用になれます。 アプリケーションキャッシュ Canvas Web Database ドラッグ＆ドロップAPI 強化されたフォーム要素 Video要素 クロスドキュメントメッセージング Web Storage Web Wo

タイトルの通り、HTML5 Web Workersを、eval()とsetTimeout()で実装したライブラリ、「fakeworker.js」をリリースしました。 これが何の役に立つかと言うと、Web Workersのデバッグです。 というのも、Web Workersのデバッグは非常に大変だからです。 現時点では実行中のワーカをソースコードレベルでデバッグできるブラウザが存在しない ワーカはDOMにアクセスできないため、ロギングも困難 fakeworker.js は、こうした状況を少しでも改善するために作成された、Web Workersの簡単な実装系です。 fakeworker.jsは単純なeval()を用いてワーカを生成し、setTimeout()を用いて非同期メッセージングを行うため、現在のブラウザが備えるデバッガ（Webkitの開発者用コンソールやFirebugなど）を用いてワーカ

まずは、Web Storageの簡単な説明から。 HTML5 Web Storageは、簡単なキー／バリューのデータ構造を持つ永続ストレージです。 現在、LocalStorageとSessionStorageの二種類が仕様に盛り込まれています。 LocalStorageは、サイト（オリジン）ごとに一意の永続領域で、同じサイト内の全てのWebページ／ウィンドウ間で共有され、永続化される期間は無制限です。 SessionStorageは、ブラウザウィンドウごとの永続領域で、ウィンドウを閉じると消えてしまいます。 で、SessionStorageが「ブラウザウィンドウごと」と言うのは具体的にどういう事なのか、仕様書と実際のブラウザによる実装をいろいろ試して調べてみました。 試すのに使用したのは以下のWebアプリ（僕が自分で試すために作っただけなので、超使いづらいですが）です。 http://ge

dasaiと思いつつも、1年以上放置していた会社HPですが、やっと刷新する事が出来ました。 あ、僕「あゆた」って会社やってるんです。今のところ二人で。 Ajax多用してるのでSEO度外視、デザイン重視、内容スカスカなHPですが、唯一ウリがあるとすればHTML5でマークアップした事です・・・HP作ってる最中で、目的と手段を取り違えてしまった気がしますが・・・ で、sectionだのarticleだのheaderだのfooterだのnavだのを使ってマークアップした感想。 こいつら（タグ）、いいですね。 こいつらを使って一通りマークアップした後に、あくまでCSS目的でdivを使用する、と言う流れで進めたのですが、ほんとスタイル目的のdivと意味のあるセクションを一見して識別できるので、出来上がったマークアップはだいぶ分かりやすいです。 いろいろ批判を受けているこれらの新要素ですが、ぼくは導入に

HTML5 Web Workersを超簡単に使えるようにするフレームワーク、AlexServiceを公開しました。 AlexServiceは、普通のJavaScript関数定義と呼び出しを行うだけで、Web Workersを使用したバックグラウンド処理を行うことができるようになります。試作して使ってみたところ、「これは使える」と言う手応えを得ましたので、機能を追加してテストも割としっかりやり、公開するに至りました。現在のバージョンを0.5としたのは、割と完成度高いよ、と言う気持ちの現れです。 AlexServiceとは何か、を説明する前に、そもそもWeb Workersについてご存じない方も多いと思うので、簡単に説明します。 Web Workersは、JavaScriptでバックグラウンド処理を実現するための非常にシンプルで強力なAPIです。 バックグラウンドで動作するスレッド（ワーカスレ

詳しいドキュメントとダウンロードはこちらから。 オンラインデモはこちらから（要WebDatabase・・・つまりSafari4で見てください） AlexRecordってプロダクトをリリースしました。 HTML5 Web DatabaseをベースとしたO/R Mappingフレームワークです。 コーディングに要した作業時間は1.5日くらいなんで、テストは甘甘で、ソースは汚いです。。 が、一応いろいろできるようにはしてあります。 テーブルの作成／削除 レコードの保存／削除 ActiveRecordパターンの実現 参照先テーブルもプロパティとして取得できる（現在のところ、one-to-many関連や遅延フェッチには対応してません） クエリの抽象化と流れるようなインターフェース イベントハンドリング AlexRecordを用いると、文字列操作をガリガリ行ってSQLを組み立てる手間が必要なくなり、オ

あくまで現状の実装では、と言う話ですけども。 Firefox3.5とSafari4で、イベントの発生順序を調べてみました。 試したのは以下のコードです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <script type="text/javascript"> function init() { var video = document.getElementById("video1"); // 仕様に規定されている全イベントを監視 ["loadstart", "progress", "suspend", "load", "abort", "error", "emptied", "stalled", "play", "pause", "loadedmetadata", "loadeddata", "waiting",

ふと興味がわいたので、タグの実装状況に引き続き、こちらも調べてみました。 Canvasを実装しているブラウザが、HTML5仕様にあるCanvasRenderingContext2Dインターフェースの属性やメソッドのうち、どれくらい利用可能にしているかどうかをざっくり調べてみました。 例によってテスト方法はあまり厳密ではなく、「メソッドや属性がオブジェクトに定義されているかどうか（undefinedかどうか）」と言うものです。個々のメソッドが仕様通りに動作するかどうかまではテストしてないです。なので、この表で保証するのは「これらの属性・メソッドにアクセスしても『XXX is undefined』と言われる事はない」というところまでです。 最後の方の「drawImage(Canvas|Image|Video)」とか「createPattern(Canvas|Image|Video)」とかは、引

John Resigさんの日記で、「あなたが使っているJSフレームワークは？」と言うアンケートが行われてました。 恥ずかしながら僕のJS人生、まだまともなユニットテストを行った事がないんですが、次こそは使ってやろうと思っていた矢先。 こんなに選択肢が有るのか・・・とちょっと腰が引けてしまいました(^^; 以下、自分用の備忘録として引用。 JSUnit Selenium Core QUnit (jQuery) UnitTestJS (Prototype) JSSpec (MooTools) DOH Unit Testing (Dojo) YUITest 2 (YUI) YUITest 3 (YUI) Mochitest (MochiKit) ScrewUnit JsUnitTest jsUnity JsTestDriver Crosscheck Env.js FireUnit 自分が使うJS

最近調査を行ってわかったのですが、IE上ではwindow.openで 開いた子ウィンドウでXMLHttpRequestを使用する際には注意が必要です。 (というより使うべきではない) ウィンドウを開く、閉じるの操作を数回以上行うとブラウザが高確率で フリーズします。 この問題は、 １．XMLHttpRequestによるHTTPリクエスト発信 ２．サーバがHTTPレスポンスを戻す という一連の流れの中で、サーバがレスポンスを戻す前に子ウィンドウを 閉じると発生します。 その理由は、IEはじめ近年のブラウザはHTTPの同時接続数が2に制限されていま すが、前述の操作を行うと、子ウィンドウが閉じられているにも関わらず IEは同時接続数のカウントを減らしません。 よって、子ウィンドウを開く⇒閉じるを繰り返しているうちに同時接続数 の上限に達し、IEはもうHTTPのリクエストを行わなくなります。 (

一つ前ののエントリを書いたついでに、FAQをちょっと訳してみました。30分くらいのやっつけ仕事なんで、誤訳があったらコメントください。 ちなみにこのFAQは、Google Chromeのオープンソースプロジェクトである「Chromium」に掲載されている物です。Chromiumで開発が続けられ、Googleからバイナリがリリースされると言う形になるんでしょう、たぶん。 一般 Q. ソースはどんなライセンスのもとでリリースされていますか？ A. Chromeは様々なライセンスからなる多数のソフトウェアの集まりです、しかしGoogleが寄与したコードについてはBSDです。より詳しい情報が知りたければ、完全なリストを見てください。 WebKit Q. どうやってWebKitのバージョンを追いかけているのですか？ A. Chromiumのソースコードは、WebKitソースのコピーを含んでいます。私

Javaからシリアルポートを触るためのAPI、Java Communication APIに少し触りました。 API自体は簡単なのですが、実装されているライブラリにはいろいろ問題が。 使う人がそれほど多いとは思えませんが、同様の問題にぶつかる人がいるかもしれないので、ログしておきます。 あと、シリアル通信のテストをVMWareを利用してやってみました。外部機器一切無しにシリアル通信のテストが出来るので、こりゃ便利。 基礎知識 Java Communication APIは、JavaからOSのシリアルポートにアクセスするためのAPIです。古い（1997年）APIなのでJSRなどは存在せず、実装コードのみが存在します。パッケージはjavax.commです。 現在のバージョンは3.0で、実装コードはSolaris版とWindows版が存在します。つまり、Windows版はない、と。 で、上のリン

バグトラッキングシステムを導入するか、と思い立ち、Mac OS X 10.5 LeopardにTrac0.11を入れて、Apacheから見られるようにしようとしたら、思いもかけずトラブったので自分用に備忘録。とはいえ、他の方が編み出した解決策にリンクするだけだけど。 Trac0.11インストール ダウンロードしてきてインストールし、Subversionと繋ぐまでは、INSTALLファイル見たりこちらのページ見たりで、全然問題なく完了。 Apacheと繋ぐ SubversionをApacheのWebDAVで公開する これは余裕。以下の記述を/etc/apache2/httpd.confに追加。 LoadModule dav_svn_module libexec/apache2/mod_dav_svn.so mod_pythonのインストールにつまづく PythonとApacheを繋ぐにはmo

書きたい事を溜め込んでいたので、今日は長文エントリをもう一発です。 こないだ、GoogleのProtocol Bufferについて、マイコミジャーナルで記事を書きました。 で、その記事中でProtocol BufferのRPCサポートについて言及しているのですが、その際作ったサンプルがあまりに冗長な実装なので、さすがに掲載は控えておきました。Javaによるソケットプログラミングを直接行っており、説明には不適だったもので・・・ でもせっかく作ったサンプルなので、一応貼付けておきます。このサンプルを動かすには、以下の順序で作業してください。 Person2.protoを作業フォルダに保存 mkdir java 「protoc --java_out java Person2.proto」で、Javaソースコード生成 作成したjavaディレクトリに、下のコード（HelloRpcServer.jav