Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
GLSlideshow.js·WebGLを使ったスライドショー MOONGIFT
Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。 今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のスライドショーなどにぴったりです。 GLSlideshow.jsの使い方 GLSlideshow.jsのデモです。 実際にスライドが切り替わるところです。 こんなズームするエフェクトも指定できます。 WebGLを使いこなすことで高度なエフェクトが実現できるようになります。これもまたHTML5を使いこなす上で大事な要素でしょう。 GLSlideshow.jsはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
レガシーなWebブラウザでもsessionStorageを·sessionStorage MOONGIFT
sessionStorageはHTML5非対応のWebブラウザでもsessionStorageを使えるようにするライブラリです。 HTML5の機能の一つ、Web Storage。その一つであるsessionStorageをレガシーなWebブラウザでも使えるようにするソフトウェアがsessionStorage（名称が紛らわしいですが…）です。 最初の画面です。この時点でセッションが開始しています。 26秒経過しています。 別なタブです。こちらでは8秒。タブごとにセッション情報が管理されています。 IE8でも動きます。もちろんタブごとに情報が違います。 使い方は簡単で、sessionStorageオブジェクトに対してsetItem(key, value)でデータの保存、getItem(key)でデータの取得になります。テキストのみ保存できるようですが、データをシリアライズすればサーバとの連携も
元画像群からSprite画像とCSSを生成·Sprite Factory MOONGIFT
小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。 インストールします。Rubygemsでインストール可能です。 実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。 生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。 生成されたCSSです。img.pngのSprite指定になっています。 生成された画像です。全て横につながった画像になっています。 生成された画像と元ディレクトリです。 オプションです。パスやSass形式での出力などに対応しています。 Sprite Factoryはクラス名に元のファイル名がつけられるので、Sprite画像は見ずともクラス名の指定がしやす
小さなアイコン画像のSVG化に·pixel2svg MOONGIFT
pixel2svgは画像をSVGへ変換するPythonスクリプトです。 pixel2svgはその名の通り、ピクセル画像をSVGファイルへ変換できるソフトウェアです。Pythonスクリプトで、ターミナルベースで動作します。 処理を実行した所。解析処理が開始されます。 対応している画像はPNG、JPEGの他PIL（Python Imaging Library）で対応している画像なら何でもSVG画像に変換できるようです。 解析が終わると同じファイル名で拡張子がsvgのファイルが生成されます。 今回の変換元になった画像。PNGファイルで33KBです。 変換が終わったファイルはSVGなのでWebブラウザで開いたり、IllustratorやInkscapeで編集できます。なお変換後のサイズは999KBで、かなり大きくなっています。 SVG画像。忠実に再現されています。 その代わり、相当拡大することもで
HTML5 + Canvas + JavaScriptによるWebベースの顔認識「ccv」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
オンラインでドロー＆SVG保存·Closure Draw MOONGIFT
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。 プロジェクトサイトで試せる 元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。 配置の変更やオブジェクトの移動ができる 描いたオブジェクト
オンラインでドロー＆SVG保存·Closure Draw MOONGIFT
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。 プロジェクトサイトで試せる 元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。 配置の変更やオブジェクトの移動ができる 描いたオブジェクト
複数ブラウザに対応したWeb開発支援ツール·Pirka'r MOONGIFT
Pirka'rはWindows/Mac OSX/Linux向けのフリーウェア（ソースコードは公開されている）。ここ数年でブラウザのシェアは大きく変わってきている。それまでIEが主流だったのがFirefoxが大きくシェアを取り、さらにSafariやGoogle Chromeといったブラウザが続いている。特にCSSやJavaScriptの互換性の問題もあってIE系ブラウザが嫌われる状況になっている。 検証もできる ユーザにとって選択肢が増えるのは良いことだが、開発者やデザイナーにとっては辛い。JavaScriptの動作やレンダリング結果にブラウザによる差異があるとなっては確認作業も大変になる。その手助けをしてくれるツールがPirka'r（ピリカル）だ。 Pirka'rはEclipseベースの開発支援ソフトウェアで、HTMLファイルやJavaScript、CSSファイルのメンテナンスを行うことが
これでデザイナも安心？DreamWeaver向けRails拡張·RubyWeaver MOONGIFT
Ruby on Railsは開発者にとっては便利なフレームワークだ。だが、規模が大きくなるとデザイナーの方との協業が欠かせない。そうなるとデザイナーの立場になるとrhtmlやerbといったファイルはあまり都合が良くない。 入力補完機能が使える その点、PHPとDreamweaverの親和性は高く、作業がしやすい。その壁を乗り越えるためのソフトウェアがRubyWeaverだ。 今回紹介するオープンソース・ソフトウェアはRubyWeaver、DreamWeaver向けのRuby on Rails拡張だ。 恐らくデザイナーの方が最も使っているであろうDreamWeaverをRuby on Railsに対応させるのがRubyWeaverだ。DreamWeaverの機能拡張として提供され、インストールすればRuby on Railsのファイルが開けるようになる。 デザインモードでビューを編集 コント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
