Closure Stylesheets で CSS を最適化する (2) - WebOS Goodies
前回に続いて、本日も Google Closure Stylesheets （以下 GSS）についてです。前回は GSS を単体で使用した時の機能をひと通り説明したので、今回は Closure Compiler, Closure Templates, Closure Library といった他の Closure Tools と組み合わせて、 CSS のクラス名を短縮する方法をご紹介します。 Google+ などの CSS ファイルを覗いたことがある方はご存知かと思いますが、それらの CSS クラス名は「a-j」とか「c-i-j-ua」なんていう数文字のアルファベットをハイフンで繋いだものになっています。これがまさに GSS によるクラス名短縮の結果です。 GSS を使えば、我々もこうした CSS クラス名の短縮を簡単に利用できます。 また、多少の工夫は必要になるものの、他のフレームワーク（
Closure Stylesheets で CSS を最適化する (1) - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 これまで Closure Library を使っていろいろと開発をしてきましたが、 CSS の扱いについてはいつも不満でした。 JavaScript コードについては Closure Compiler との組み合わせで極限まで最適化できるのに、 CSS についてはほとんどサポートがなく、仕方がないので自作の Rakefile と YUI Compressor を使
Closure Library で HTML から UI を生成する - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 非常に久しぶりの記事投稿となってしまいましたが orz 本日は Closure Library ネタを書いてみようと思います。最近は、 Closure Library もだいぶ知られるようになってきたみたいで、 Closure Library についての日本語のつぶやきもだいぶ増えてきて嬉しい限りです。 Closure Library で UI を構築する場合、も
Closure Library が使える Web ベースの IDE「Closure Kitchen」を作りました！ - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日発売された Closure Library 本、思っていたよりご好評いただいていて、嬉しい限りです。 Closure Library 自体がまだあまり知られていないので、見向きもされないんじゃないかと心配していたのですが・・・ (^^; Closure Library は素晴らしいライブラリですが、普及の最大の障壁となっているのが、使い始めるためのハードルの多
日本初の Closure Library 本「Google API Expert が解説する Closure Library プログラミングガイド」発売です！ - WebOS Goodies
日本初の Closure Library 本「Google API Expert が解説する Closure Library プログラミングガイド」発売です！ 数カ月にわたって執筆してた Closure Library 本「Google API Expert が解説する Closure Library プログラミングガイド」が、インプレスジャパンさんより 12/10 に発売になります！既に書店によっては並んでいるようですね。残念ながらオライリーに先をこされて世界初の Closure Library 本にはなりませんでしたが（笑）、間違いなく日本初の Closure Library 解説書です。 また、私としても初めて一人で書き上げた書籍なので、かなり気合を入れて執筆しました。単に Closure Library の使い方を解説するだけでなく、実際に下の画像のような文書編集アプリケーション（
Closure Draw を更新し、カスタマイズ性を高めました - WebOS Goodies
Web アプリケーションに手軽に図形描画機能を組み込むことができる Closure Library ベースの作図ウィジェット Closure Draw をアップデートしました。細かい改善点はいろいろあるのですが、最も大きいのは UI を完全にカスタマイズ可能にしたことです。ツールバーを作図ウィジェット本体から完全に分離し、まったく別の UI に差し替えることができます。また、ウィジェットを外部のスクリプトから制御するためのインターフェースも用意しました。 今回の改善で、 Web アプリケーション本体の UI に違和感のない形で Closure Draw を組み込めるようになりました。以下で仕様をご紹介しますので、ぜひご活用ください。 新しい Closure Draw のアーキテクチャ 今回の最も大きな変更点は、従来 closuredraw.Widget というひとつのコンポーネントで実装さ
Closure Library 向けの ATOM パーサーを作りました - WebOS Goodies
ちょっとした理由で ATOM フィードを解析する Closure Library ベースのクラスを作ってみましたので、本日はそれをご紹介したいと思います。 まあ、あまり需要があるとも思えませんが、 GData API のアクセスなんかにも使えるので、 Closure Library で Google (OpenSocial) ガジェットや Chrome 拡張なんかを作るときは便利だと思います。 ソースコード まずはソースコードです。 Google Code Project Hosting にアップロードしてあります。 http://webos-goodies.googlecode.com/svn/trunk/prod... このファイルを Closure Library アプリケーションのソースツリーの中（depswriter.py が走査するディレクトリの中）にコピーして deps.js
Closure Library でローカルファイルのドラッグ＆ドロップを実装する - WebOS Goodies
簡単なサンプルを作ってみましたので、ファイルのドラッグ＆ドロップをサポートしたブラウザ（現時点では Google Chrome, Safari, Firefox のいずれか）で試してみてください。灰色の部分に適当なファイルをドラッグ＆ドロップすると、そのファイル名を表示します。複数のファイルをドロップすることも可能です。 ソースコードは以下のような感じです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ファイルのドラッグ＆ドロップのテスト</title> </head> <body style="margin:0; padding:0;"> <div id="droptarget" style="width:100%; height:200px; background-color:#eee;"> ここにドラッグして
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 とか勉強会の Closure Library の資料を公開します - WebOS Goodies