Sass linear-gradient() Mixin 2012 Autumn

クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ

上記の記事を参考に、linear-gradient() の Sass mixin を書いてみました。

linear-gradient Sass Mixin — Gist

参考記事中の “2012 年の秋冬に待ち受ける事態 - IE10 での linear-gradient” の例にあたる書式で出力できるようにしています。一応 Windows 8 Release Preview に載っている IE10 で、 vendor-prefix を持たず to キーワードありの記述が有効であることも、ごく簡単に確認済み。

side-or-corner の指定は従来通りの top でも to キーワードのついた to bottom でも、 vendor-prefix のそれぞれ(といっても今は有りか無しかで分かれていますが)に対応した記述に変換します。45deg みたいな angle による指定もそれぞれ同様に変換しますが、従来通りの、x 軸正方向から反時計回りで数える指定方法を期待する作りになっています。今はまだ、こっちの方が慣れてるかなーと思って。けど、どっちがよいのだろ。

color-stop は Sass 3.2.0 から対応した可変長引数を利用しているので、複数の color と position の指定が自由に行えます。単純に @incluce linear-gradient(top, black, white); にしても、複数色で linear-gradient("to bottom", #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); みたいにしても OK。

Chrome で試せる Shadow DOM

Chrome の about:flags に “Shadow DOM を有効にする” という項目が出来ている。たぶん、バージョン 19 くらいから。

Shadow DOM というのは W3C WebApps Working Group の方で提案されている Web Components と呼ばれる、 HTML をうまく部品化する仕組みを構成する要素の一つで(言葉使いとかあってるか微妙。)ブラウザを通じて Web サイトのレンダリングを行った際に現れる見かけ上の文書ツリー。

あくまで見かけ上であり、実際には Shadow DOM はそれを保持している文書ツリーとは別の空間に存在していて、Shadow DOM には Shadow DOM のルート要素的なものがある。そのため文書ツリー側で定義したスタイルは適用されないし、Shadow DOM 内で定義したスタイルも文書ツリーには影響しないなどの特徴がある。document.querySelectorAll() とかも効かなくて、[Shadow DOM のルート].querySelectorAll() という風にアクセスする。

それで冒頭の通り、Shadow DOM の機能が少しだけ使えるようになってきている。 というわけで Shadow DOM の挙動がちょっとわかるかもしれない簡単なデモを書いてみた。

Shadow DOM Sample — Gist
https://gist.github.com/3027432

ほとんど、W3C の下記の文書に載っていたサンプルを参考にしている。
ここの例では new ShadowRoot() で ShadowRoot オブジェクトを生成しているけど、現状 new WebkitShadowRoot() と、プレフィクスが必要だった。

Shadow DOM
http://www.w3.org/TR/shadow-dom/#shadow-dom-example

それで、必要な設定を行なった Chrome で上記のデモを開くと JavaScript を通じて生成した Shadow DOM のレンダリング結果が得られる。文書ツリー側で定義したスタイルが効いていないことや、document.querySelectorAll('h1') とかコンソールで打っても取得対象にならないことが確認出来ると思う。

Chrome で必要な設定は以下の通り。

about:flags から上記のオプションを有効にする。
style scoped 属性も使っているのでこちらも有効化。

Chrome Developer Tools の Web インスペクタで Shadow DOM を表示出来るようにする設定。…を、Chrome Developer Tools に表示するための設定。

それから Chrome Developer Tools 右下の歯車ボタンを押すと現れる設定パネルの中に、Web インスペクタで Shadow DOM を表示するか否かの設定が現れるのでこれも有効化。

すると Shadow DOM が有効になってさらに、Web インスペクタにも Shadow DOM が表示されるようになる。見かけ上の DOM ツリーというものがどういうことか、実際の挙動もこれで確認出来る。

参考

Introduction to Web Components
http://www.w3.org/TR/2012/WD-components-intro-20120522/
Web Components に関する W3C の文書

Introduction to Web Components - DOM ECMAScripting
http://domes.lingua.heliohost.org/webapi/intro-webcomponents1.html
Introduction to Web Components の翻訳

Shadow DOM
http://www.w3.org/TR/shadow-dom/
Shadow DOM に関する W3C の文書

Web Components - Google+
https://plus.google.com/103330502635338602217/posts
Web Components に関する Google+ ページ

Jekyll はじめました

Jekyll を使ってこのブログを建ててみました。
ローカルの PC で静的なサイトをブログっぽく生成する Ruby で書かれたツールで、公開するには生成されたファイル群をアップロードするだけ。これまで触っているところでは結構気に入っています。

セットアップ 〜 テスト投稿

まずは gem コマンドでインストール。

gem install jekyll

そして以下の記事に沿って、設定準備やレイアウトと呼ばれるテンプレートの作成とテスト投稿までを試してみました。

Big Sky :: Jekyllで始める簡単ブログ
http://mattn.kaoriya.net/software/lang/ruby/20090409185248.htm

レイアウトファイルを作っていく

挙動がなんとなくわかったら、自分好みのレイアウトファイルを作っていきます。
よく使う要素があるようなら、_include ディレクトリを作成してその中にファイルを置いておけばレイアウトファイル内でこのように呼び出せます。

{% include global-header.html %}

これを含め、様々な使い方・設定が Github の Jekyll プロジェクトページに載っているので、大体ここを見て作り進めていました。 Configuration や Template Data のページはとりわけよく見ていたと思います。そのほか、記事一覧のページ送りについては Pagination の作例も参考にしました。

Pages · mojombo/jekyll Wiki
https://github.com/mojombo/jekyll/wiki/_pages

関連ポストの表示

関連ポストの表示も出来るそうなので、記事の個別ページの一番下へ表示するようにしてみました。関連ポストを集計をするためには --lsi オプションをつけて jekyll コマンドを実行します。_config.yml に lsi: true と記述してもよし。

この処理には少し時間がかかります。 Classfier という gem が使われているそうなのですが、gsl という gem も入れると相当に早くなります。以下の記事を参考に homebrew で gsl をインストールして gem の gsl もインストールしました。

Jekyllで関連ポストを表示する | tech.portalshit.net
http://tech.portalshit.net/2011/04/17/related-post-in-jekyll/

自分の場合はどうも gem gsl のインストールで失敗するようで、調べているとこちらのフォーラム記事 RubyForge: Ruby/GSL: が引っかかり、そこで見つけたパッチ Fix for "matrix_complex.c:1525: error: conflicting types for ‘gsl_matrix_complex_equal’" — Gist を、ここから RubyForge: Ruby/GSL: ファイルリスト 直接ダウンロードしたファイルに当ててようやくインストールに成功しました。

レイアウトファイルにはこのように記述して関連ポストを呼び出しています。

<ul>
{% for post in site.related_posts limit:5 %}
<li>
{{ post.date | date_to_string }}
-
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>

そのほか

Markdown を使って書いたテキストがそのまま記事になるのですごく楽であることとか、レイアウトファイルも記事も全部まとめてバージョン管理出来ることなどが気に入っています。

これまで Wordpress だったのですが、前者は以前なら手元で HTML に変換した Markdown のテキストを投稿画面の入力欄にコピペとかしていましたし、後者についても、ブログテーマとブログの設定がお互い依存している部分もあるのにテーマファイル と DB とに分かれてしまっているなど個人的に気になっていたことが解消されて良い感じです。

Raphaël を使った SVG による地図表示

Raphaël に path() メソッドというのがあって、SVG 仕様のパスデータを文字列として渡すとそれに従って図形を描画してくれます。(path 要素の d 属性として扱ってくれます。)これを使って日本地図の SVG データを出力してみました。

Raphaël Sample - Map of Japan
http://ykhs.github.com/raphaelMapSample/

画が出るだけなら SVG をそのまま貼りつけてもいいのだけど、Raphaël オブジェクトとして SVG を生成すると click() メソッドを始めとしたユーザー側で起こるイベントのハンドリングや、座標計算、アニメーションなどの機能をJavaScript から利用出来るといった恩恵が受けられるので、JavaScript 側から色の設定やイベントハンドリング、アニメーションをさせたりっていうのを試しています。

最初、各都道府県の要素をクリックしたときに Raphaël のアニメーション機能を使って .animate({x: 100}) のような書き方で移動させようとして動かないなーとか思っていたのですが、SVG の path 要素にそもそも x 属性などが存在しないことに気づいて、.animate({transform: "t100,0"}) のような書き方に変更をしました。

Raphaël の transform には変換用文字列を渡せばいいようです。-> Raphaël Reference

使用素材

日本地図のパスデータとしてこちらのデータを使用しています。
http://www.kabipan.com/geography/whitemap/index.html

都道府県名のフォントはこちらのはんなり明朝です。
http://typingart.net/index.html

jQuery UI Widget について

jQuery UI Widget について簡単に書いておいてみたくなった。

まず jQuery UI という jQuery 公式の UI 作成拡張キットみたいなものがあって、それの基板となっているモジュールが jQuery UI Widget。いわゆる jQuery プラグインと呼ばれるものを作るにあたってより多くの機能の恩恵が受けられる。この jquery.ui.widget.js だけ使うなら minify されたもので一桁 KB と、サイズも小さい。

jQuery プラグインというものを普通に作ろうとするとたぶん、なにか初期処理を行なったら、あとはイベントに応じて勝手に動くというものが出来上がると思う。

簡単なスライドショーとかはそれで十分なんだけど、例えば jQuery プラグイン同士が連携しあって動くとか、別に jQuery なんとかではなく何でも、自分で書いたコードからこのタイミングでプラグイン内のこのメソッドにアクセスしたいとか。あとは一時的に機能を無効化しておきたいとかもあったりして、そういう辺りのことをサポートしてくれる。

上述の、普通に作る、というのをやるとたぶんパブリックメソッドすら定義出来なくて、やりたかったら結構トリッキーなことをしないといけない。この辺は jqueryboilerplate.com にある例がわかりやすいと思った。 $.fn[pluginName] に定義した関数内で、受け取った要素に対して $.data(); を使って生成したインスタンスを埋め込んでいる。プラグイン内のメソッドとかにアクセスしたかったら、$.data() に埋まってるインスタンス経由で行けばいい。

jQuery Boilerplate
http://jqueryboilerplate.com/

例えば jQuery Boilerplate のやり方で作ったプラグインに、 hello() メソッドがあってそれにアクセスしたい場合はこのような感じになる。

$('#great-element').greatPlugin();
$('#great-element').data('greatPlugin').hello();

これが jQuery UI Widget だとこうなる。実際、こちらも $.data() でインスタンスを埋め込んでいるのだけど、いくらか判りやすい方法を提供している。

$('#great-element').greatPlugin();
$('#great-element').greatPlugin('hello');

この辺りの話はほんの一部で、他にも、「便利にしといてやったからこう書いておけ。」というようなガイドラインが示されている。設定の初期値は options プロパティに書くこと。コンストラクタは _create() に定義すること。(一応、パブリック・プライベートメソッドの区別もサポートしてる。)カスタムイベントの発行と、対するコールバックの定義方法。(this._trigger('event') とする。 bind('event') してもよいし、プラグインの初期化時に渡す引数オブジェクトで event: function() {} としてもよい。)

その他便利機能、登録したイベントの無効化と復帰も disable(), enable() で行える(CSS の class 属性値まで変えてくれる。)とかがあったりして色々と気が利いている。

初期化しっぱなしでなく、状態が変化して、オブジェクト同士相互に協調するような UI を提供するときにはこのくらいのものが入用になってくるし、積み重なった知恵や工夫をフレームワークとしてまとめて jQuery の使用感で扱えるようにしてくれている辺り有益と感じてる。

jQuery UI Development & Planning Wiki / Widget factory http://wiki.jqueryui.com/w/page/12138135/Widget-factory

ドキュメントはここ。

demos/widget/default.html at master from jquery/jquery-ui – GitHub
https://github.com/jquery/jquery-ui/blob/master/demos/widget/default.html

ダウンロードしたファイルの中に、Widget のデモも含まれている。