Dashboards by Keen IO – グラフを多用したBootstrap管理画面テンプレート
Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。 そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化を特に想定しているDashboards by Keen IOを紹介します。 Dashboards by Keen IOの使い方 まずはデザインを見てみましょう。 Dashboards by Keen IOはBootstrap 3.2に対応しています。Bootstrapのバージョンアップは早いのでこの辺りの対応バージョンのチェックも忘れないようにしましょう。 Dashboards by Keen IOはHTML5/JavaScript製、MIT Licenseのオープンソース
Fabric.js·Canvasで2Dオブジェクトを自在に描画/操作 MOONGIFT
HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。 Fabric.jsの使い方 デモです。様々な描画が行われています。 SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。 影をつけるデモです。アニメーションもします。 データをJSONで出力できます。 こちらはSVGでの出力結果。 Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるよ
shaky - 意外と難しい。正確に書かないドローライブラリ MOONGIFT
コンピュータは正確な図形を描くのは得意です。逆に人は正確な線をフリーハンドでは引けませんが、それがかえって味があったりして柔らかな印象を与えます。コンピュータの描く線は冷たい印象を受けるでしょう。 そこで使ってみたいのがshakyです。Canvasを使ってドローするのですが、その描く図形が手書き風でいい感じなのです。 shakyの使い方 デモの編んだ図形。右側に行くほど乱れているのが分かるかと思います。 マウスに連動して動く線。ちょっとした乱れがいい感じです。 こちらは四角。並んではいつつも線がぶれています。 直線。 四角。これはぶれて動きます。 円。とはいっても完全な円にはなっていません。 こちらはちゃんとした円。ですが崩れています。 楕円。かなり乱れています。 右下にいくほど崩れる図形。 正確に書かないというのは面白いテクニックと言えます。フリーハンド風に描くことで、プロトタイプをスク
今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」:phpspot開発日誌
Discourse 今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」。 ユーザインタフェースが今時の物になっており、Likeボタンやお気に入り、Ajaxによる次ページ読込機能等、使いやすく、必要な物が揃ってる感じです。 社内のディスカッションボードなんかに使ってみるとよさそうです。 GitHubでソースコードが入手出来ます 関連エントリ コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 Excelそっくりな表計算モジュールを実装可能なオープンソースモジュール「Gelsheet」
多機能さが売りのダイナミックスライド·jmpress.js MOONGIFT
jmpress.jsはImpress.jsライクなダイナミックプレゼンテーションを実現するjQueryライブラリです。 一つのWebページ上でダイナミックなスライドを展開するimpress.jsを先日紹介しましたが、さらにすごいプレゼンテーションを展開できるかもしれないスライドライブラリがjmpress.jsです。 トップページです。 Impress.jsライクにぐるぐる動き回ります。 画像も表示できます。 プレゼンノートも出せます。 ズーム対応です。 スライド内でのアニメーションも可能です。 こちらはボックス。立体のボックスが回転します。 自動的にレイアウトを調整してくれるサンプル。 動的にスライドを生成するサンプル。 上に並んだサムネイルが回転しながら順番にスライド表示されます。 画像をメインコンテンツにしたスライドサンプル。 写真のサムネイルが並んでいます。 こんな感じでサークルにな
お試しを！クールなUIの掲示板·esoTalk MOONGIFT
esoTalkは格好いいUIの掲示板ソフトウェアです。 Webコミュニティの基本と言えば掲示板です。２ちゃんねるからphpBBをはじめ、多数の掲示板ソフトウェアが存在しますが今回紹介するのは最近のスタイルを活かしたesoTalkです。 スレッド一覧です。 スレッド詳細です。 新規登録します。 登録すると既読管理ができるようになります。 タグで絞り込んだりできます。 返信用ボックスです。 esoTalkはスタイリッシュな見栄えに加えて、JavaScriptを使った各種アニメーションが特徴となっています。実際使ってみると、その使い勝手の良さが分かるはずです。 esoTalkはPHP製のオープンソース・ソフトウェア（GPL v2）です。 MOONGIFTはこう見る インターネット上のサービスは流行り廃りがありますが、それでも２ちゃんねるは根強く生き残っています。コミュニティサイトは一度形成される
Bootstrap、Hogan.js、Finagleなど注目のTwitter系オープンソース - ＠IT
Bootstrap、Hogan.js、Finagleなど 注目のTwitter系オープンソース Twitter Tokyo Open Houseまとめレポート 山本裕介 2012/5/15 「Twitter Open House」はTwitter社のエンジニアと直接情報交換ができるオフラインイベントで、すでにサンフランシスコの本社では何度か開催している。 先日、日本では初めてとなる「Twitter Tokyo Open House」がTwitter Japanのオフィスで開催された。季節外れの大型低気圧により天候は荒れ、開催すら危ぶまれたが、結果としては多くのエンジニアが集まり盛況なイベントとなった。 OpenJDKにも参加するTwitterのアーキテクチャ 最初に講演を行ったのはTwitterのアーキテクチャのディレクターであるロブ・ベンソン氏。なでしこジャパンや天空の城ラピュタを例に挙
Webサイトのサムネイル生成に。RubyでGeckoエンジンを操作する·MozShot MOONGIFT
MozShotはRubyでGeckoエンジンによるWebサイトのサムネイル画像を保存するソフトウェア。 MozShotはRuby製のオープンソース・ソフトウェア。WebサイトのURLを指定してスクリーンショットを撮影するサービスはニーズが多い。やはり単なるタイトルやURLといったテキストの羅列に比べて、サムネイルが表示されることによるインパクトの大きさがある。 MOONGIFT 一般的な手法としては、Webブラウザをリモートで操作してその画面を画像として保存する方法をとる。レンダリングをGeckoエンジンで行うならばMozShotを使うのが良いだろう。 MozShotはLinuxでXサーバを使い、gtkmozembedを使ってWebサイトをレンダリングし、そのキャプチャを画像として保存する。デモのCGIインタフェースも用意されており、Apache + mod_ssiを使って三パターンのスク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobeから初めてとなるオープンソースのフォントがリリース -Source Sans Pro