NinjaKit ver0.7

NinjaKit

Safari5.0.1に更新したらスクリプトをインストールできなくなっていた(拡張のパスが微妙に変わっていた)ので修正しました。
あと、ついでなのでGM_listValues、GM_deleteValueに対応しつつ、Safari版とChrome版を完全にマージしてバージョンも揃えました。
他にも直さないといけないところは色々ありますが、追々ということで…。(他の拡張も色々溜まってる…、そういえばSafariのギャラリーにも登録してなかった。)
NinjaKit - 0xFF

SVG特集最終回

SVG JavaScript

特集：スタートアップ SVG｜gihyo.jp … 技術評論社の最終回が公開されました。
なるべく実用的で且つ面白そうなネタを考えていたんですが、結局無難なグラフにしました。
SVGの場合大きく描画しても重くないので、その辺は活かせるように拡大モードを追加してみたり。
今回の記事の前半ちょろっと書いたtext/htmlなページへのSVGの取り込みはhttp://ss-o.net/test/svg/svg_load.htmlにcreateLSParserとかdocument.loadとかのパターンも含めたサンプルを置きました。
ついでなの少し紹介すると、OperaはcreateLSParserをサポートしているので、こんな感じで動きます。あ、createLSParserというのはDOM Level 3 Load and Saveで定義されているAPIです。

var parser = document.implementation.createLSParser(DOMImplementationLS.MODE_SYNCHRONOUS, null);
var svgdom = parser.parseURI(src);
root.appendChild(document.adoptNode(svgdom.documentElement));

ただ、Web Technologies for Opera Web Applications - Dev.Operaの方法ではなぜか動かない…。まあ、深く突っ込まないことにします。

var parser = document.implementation.createLSParser(DOMImplementationLS.MODE_ASYNCHRONOUS, null);
parser.onload = function(evt){//Operaでも動かない…
	var svgdom = evt.newDocument;
	root.appendChild(document.adoptNode(svgdom.documentElement));
};
parser.parseURI(src);

ついでに、OperaとFirefoxがサポートするdocument.loadだとこんな感じに。

var xmldom = document.implementation.createDocument('', 'svg', null);
xmldom.onload = function(){
	root.appendChild(document.adoptNode(xmldom.documentElement));
};
xmldom.load(src);

document.loadはChromeもサポートする気はありそうだし、ちょうど(b:id:vantguardeより)Reluctantly define document.loadが。
まあ、XMLHttpRequestで良いような気もしますが。
IE9pp3さんはinnerHTMLに突っ込むくらいしかsvgを取り込む方法を見つけられませんでした。まあ、ある意味将来的には標準になると思われるんですが…。まあ、まだベータでもないので今後に期待しています。
と思ってたら、IE9beta(pp5)でDOMParserとXMLSerializerがサポートされていました。

オレ標準JavaScript勉強会を開催しました

JavaScript orejs

Twitterでこっそりと募集して、オレ標準JavaScript勉強会というイベントを開催しました。
id:edvakfさんが来日されるということで、「会いましょう→何かやりましょう→勉強会とかどうでしょう」というTwitter上の軽いノリで企画され、みんなで短いネタを披露し合う一品持ち寄りの少人数勉強会をやってみよう、ということになりました。で、そのままTwitter上で参加者を呼びかけてみたところ、半日もたたずに15名集まって、しかもそうそうたる顔ぶれに！

当日

色々と反省があったので、少し書き出しておきます。
まず、会場*1には有線LANしかないので、自前のルータで無線LANをやろうとしたんですが、設定がなかなかうまくいかず、だいぶ手間取ってしまいました。やはり、安物のLANは駄目ですね…。大人数で繋ぐと安定しないし、有線をいっぱい用意したほうが良かったです。
で、Ustreamに挑戦してみたんですが、音声がちゃんと出てませんでした。しかも、ハッシュタグを設定しないと自分のユーザー名になってしまうらしく、#orejsと#os0xの2つが使われてしまうことに。さらに、前述の無線LANに手間取ってた都合でその辺の状況を把握するのが遅れてしまいました*2。
というわけで、なんかもう色々とごめんなさい。録画はありますが、前半1時間は音声が切れてしまっています(あと録画の限界で最後も切れてました)。

発表について

資料などは適宜追記していきます。

懇親会とか

みなさん色々ネタをお持ちで、かなり盛り上がりました。ネタの1つ→ javascript:function::['alert'](1) は何故動く？ - Togetter(わかる人がいなかったので、JavaScriptに詳しい人はいなかったという結論に)。あと、id:Constellation先生が持ちネタ(？)を披露して大活躍でした。

最後に

どうなるのか色々と不安でしたが、なんとか上手くいって良かったです。いや、拙い幹事で恐縮(かなりedvakfさんに振ってましたし)だったんですが…。
こういう短い発表だと一人当たりの負担が小さいので、割と気軽にできるかなという感触はありました。飲み会での裏話など、お楽しみな要素も一杯あるので今回の反省と良かったところを踏まえて、次(あるのか？)はもう少し上手くやりたいと思います(特にUstは)。
最後に、会場の準備やら片づけやらを色々と手伝ってくれたALBERTのお三方、本当にありがとうございました。

*1:会場は前職の[http://www.albert2005.co.jp/:title=株式会社ALBERT]さんの会議室をお借りしました。

*2:[http://twitter.com/altnight/status/19409562844:title=@altnightさんにアドバイス貰ってた]のに

SVG特集第2回・第3回

SVG JavaScript

特集：スタートアップ SVG｜gihyo.jp … 技術評論社の第2回と第3回が公開されています(第2回は1週間前ですが)。
ここまででIE9pp3やRaphaëlがサポートしている機能は一通り紹介しました。
次回で最終回なので、具体的な利用ケースとか、チップスとかを詰め込んでみようと思っています。

JavaScript連載第10回

JavaScript

これでできる！ クロスブラウザJavaScript入門の第10回はJavaScriptとCSSです。
styleプロパティの操作に関するアレコレから、動的なルール操作やスタイルシート自体の追加方法など、JavaScriptからスタイルシートを扱う際のチップスを一通り詰め込んでみました。2回に分けるほどではなく、1回としてはやや大盛り気味になりました。
ベンダー接頭辞にも軽く触れていますが、ベンダー接頭辞は使ってもよいか | Web標準Blog | ミツエーリンクスというタイムリーな記事も出ているのであわせてどうぞ。個人的な意見を一言で書くと「ベンダー接頭辞は仕様が確定するまでの間に仕方なく試用する」です。そういえば、本の虫: QuirksBlog: CSSベンダープレフィクスは邪悪だもオススメです。
それにしても、DOM Level 2 StyleとIE実装のStyleを比べるとDOM Level 2 Styleのイマイチさが際立ちますね。createCSSStyleSheetとか…。

ブラウザー勉強会でWebKitの拡張について話してきました

WebKit Chrome Extension

ブラウザー勉強会というのは、hebikuzureさん主催のウェブブラウザについての勉強会です。「ウェブブラウザについて」と一口にいっても割と範囲が広くて、特に今日の参加者を見ても、ウェブブラウザを実装してる人から、拡張を作ってる人、ウェブサイトを作っている人、企業の社内インフラ管理をしている人、そしてウェブブラウザの利用者とかとか、多種多様なんですよね。そういった色んな立場のウェブブラウザに強い関心のある方が集まった面白い勉強会でした。
で、WebKitの拡張(WebKitの拡張というのは微妙な表現なんだけど、Chromeの拡張とSafariの拡張といちいち書くのも面倒なので…。他に良い名称があれば教えてください…。)についてお話してきたんですが、折角のウェブブラウザ勉強会のなのでWebKitの裏話的なものを取り上げてみました*1。
というわけで、発表資料です。
WebKit拡張教室 at ブラウザー勉強会
例によってHTML Slideをベースに、gimiteさんとpaqさんによるタッチ対応のForkを取り入れて少し改良を加えたものになっています。あとでjsdo.itにフィードバックしようと思います。

そういえば、「CSSのベンダープリフィクスについて、WebKitは-webkitが知られていますが、実は-khtmlもしくは-appleと書いても(今は)OKだったり」というネタはあんまり知られてなさそうなので取り上げてみたんですが、やっぱり全然知られてないみたいです。Safari2以前は-khtmlが普通だったみたいです。
-khtmlは本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはクソだで衝撃を受けて、この前のW3C Widgetsのイベントのときに-apple-dashboard-regionをOperaがサポートしているのにも衝撃を受け、そこでふと-khtmlもプリフィクスなんだーと気が付きました。まあ、今となってはプリフィクスじゃなかったらなんなんだという感じなんですが…。
ちなみに、JavaScriptからも各プリフィクスに対応しています。

document.body.style.KhtmlOpacity=.4
document.body.style.opacity // '0.4'
document.body.style.KhtmlOpacity === document.body.style.opacity // true

あ、資料にも書きましたが-khtml、-appleのサポートは切られる予定なので、今後は(今までも使ってる人はそうそういないと思うけど)使わないように注意しましょう。

*1:id:shinichiro_hさんの[http://d.hatena.ne.jp/shinichiro_h/20100109#1263025326:title=WebKitネタ]を参考にしてたんですが、そのshinichiro_hさんが本人が発表後に登場するという個人的サプライズも

SVGの特集記事

SVG JavaScript

gihyo.jpにて、SVGについての全4回の集中連載を始めました。
特集：スタートアップ SVG｜gihyo.jp … 技術評論社
第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。
SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。
ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。
他には

などなど。

にしても、An SVG Primer for Today's Browsersのサンプルはシュールですね。