Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ MOONGIFT
管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。 そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。 morris.jsの使い方 morris.jsはまずJavaScript/スタイルシートを読み込みます。 <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-m
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
Yahoo Pipesのような表現やマインドマップにも·jsPlumb MOONGIFT
jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。 情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。 Yahoo! Pipesに似た連結です。 アニメーションもできます。 マウスでドラッグして接続もできます。 複雑に結びつけました。 一つのオブジェクトから複数のオブジェクトに派生するデモ。 jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。 jsPlumbはJavaScript製、
その場で編集。Webベースのガントチャートエディター·jQuery Gantt editor MOONGIFT
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
もしvi/Vim使いがExcelを使ったら·Vimxls MOONGIFT
VimxlsはExcel上でvi/Vim風のキーバインドを実現するソフトウェアです。 Excelは日本のオフィスにおいて最も利用率の高いソフトウェアの一つかと思います。だからこそその操作性を向上させられれば日本全体の生産性が高まるはずです。vi/Vimをこよいなく愛する人はVimxlsを使わなければなりません。 セキュリティに関するダイアログが出ます。マクロを有効にします。 Ctrl+Mを押すとvimモードになります。 メニューへのアクセスも数字を押して出来ます。 ヘルプです。多数のキーが定義されています。 英語モードもあります。 Excel操作が極まってくると、その殆どの操作をキーボードから行うようになっていきます。とは言え一部の操作においてマウスを伴っていたのですが、Vimxlsを導入すればさらにキーボード率が高まりそうです。ハイパーExcelタイムを目指してVimxlsを導入しましょ
自前のDropboxを実現する1ファイルのシェルスクリプト·vbox MOONGIFT
vboxはシェルスクリプトで作られたDropboxライクなソフトウェア。 vboxはシェルスクリプト製のオープンソース・ソフトウェア。みんな大好きDropbox。指定されたフォルダを自動的に同期してくれて、別なPCともファイルが共有できる上にバージョン管理までしてくれる。普段は何もしないというのが良い所だ。 動作中 しかしそんなDropboxが便利だと感じる反面、自分だけのDropboxサーバを立てたいと感じている人も少なからず存在する。そんな方はvboxを使ってみるといいだろう。 vboxは何とたった一つのシェルスクリプトファイルでできている。技術的に言うと、自分でサーバを立てて、そこにある特定のディレクトリとローカルのディレクトリをrsyncで同期する。それでは単なるバックアップであり、vboxはリモートではGitを使ってバージョン管理を行っている。 複数のコンピュータで同期することも
Gitを使って誰でもDropboxを作れる·RubyDrop MOONGIFT
RubyDropはRuby製のオープンソース・ソフトウェア。個人的にDropboxはとても便利に使っている。これなしの生活は考えられないくらい便利だ。有料であれば50GBまで使えるが、無料版の2GBでは物足りないと感じる人も多いだろう。だがお金は払いたくないという人もいるだろう。 サーバ起動中 そこで考えたいのが自分だけのDropbox構築だ。重要なのは自動的に同期されるシステムであること、バージョン管理されること、複数のコンピュータ間でデータが同じ状態に保てることだろう。それらを実現するのがRubyDropだ。 RubyDropはRuby1.9系で動作するソフトウェアだ。簡単に言えば、特定のフォルダに関してRubyDropが監視を行う。そして変更があると内容をリモートのGitリポジトリにアップデートする。Gitリポジトリ側で変更があれば、Pullする仕組みだ。 自動的に同期されている G
学習はやる気次第。NHKラジオを聴いて語学学習をはじめよう·NHK ラジオ語学番組キャプチャツール MOONGIFT
NHK ラジオ語学番組キャプチャツールはNHKラジオ語学番組のストリーミングを受信、MP3に変換するソフトウェア。 NHK ラジオ語学番組キャプチャツールはWindows用のオープンソース・ソフトウェア。オンライン上には学習コンテンツが多数存在する。そうしたコンテンツを上手に使うことで学習にかかるコストを大幅に軽減することが可能だ。後はやる気次第だ。 キャプチャ中 NHKラジオもその一つだ。英語やフランス語など様々な言語に関するレッスンを放送している。ラジオは持っていなくともオンラインでも情報は得られる。それを取得するツールとしてNHK ラジオ語学番組キャプチャツールを紹介しよう。 NHK ラジオ語学番組キャプチャツールはNHKラジオ語学番組で放送されている英会話、中国語、フランス語、イタリア語など14番組の取得に対応したソフトウェアだ。ストリーミングを取得してMP3ファイルにして保存して
高性能、Windowsにマッチしたマインドマッピング·Telerik Bookvar MOONGIFT
Telerik BookvarはWindows用のオープンソース・ソフトウェア。考えを整理する時、マインドマッピング（いわゆるマインドマップ）はとても便利な存在だ。思いつくままにトピックを広げていき、関連する情報を見いだしたり、新しい見方ができるようになる。 快適なインタフェース 幾つかのマインドマッピング作成用ソフトウェアがあるが、Telerik Bookvarは非常に優秀でユニークなソフトウェアだ。Windowsユーザでマインドマッピングに興味のある方はぜひチェックしてみてほしい。 Telerik BookvarはWindowsのインタフェースにマッチしたデザインで、リボンバーを使っていて分かりやすいUIになっている。ノードをドラッグすると他のノードも関連して動作したりして面白い。サブトピック、フローティングトピックの作成も可能だ。 パブリッシング処理中 ノードには画像や動画、リンク、
テキスト＋グラフィックの構造化エディタ·Argumentative MOONGIFT
ArgumentativeはWindows用のオープンソース・ソフトウェア。頭の中で抱えているもやもやした事柄を整理するのに使えるのが構造化エディタだ。アウトラインエディタやマインドマッピングも使えるだろう。順番に書き下すことで頭の中が整理されていく。 左にテキストツリー、右にグラフィカルな表示 マインドマッピングは中央のノードから縦横無尽に広がっていくので、慣れていないと書くのに必至になってしまったり、拡散してうまくまとまらない結果になってしまうことがある。そこでテキストベースのArgumentativeを使ってみよう。 Argumentativeは左側にツリービュー、右側にグラフィカルビューを持ったソフトウェアだ。ツリービューを使って事柄をアウトライン化していく。ノードは「前提」「原因」「異議」「ヘルパー」の4つを使って組み立てていく。そしてその内容は自動的にグラフィカルビューに構造化
iPhone/Android向けに動画を変換する·Miro Video Converter MOONGIFT
Miro Video ConverterはWindows/Mac OSX用のオープンソース・ソフトウェア。iPhoneやAndroidをはじめとして、スマートフォンやポータブル機器で動画を見たいというニーズは強い。素材はネット上を含めれば多数あれど、面倒なのは各機器に合わせた変換作業だ。 デバイスを選べば最適な設定になる 多様なフォーマットに対応した動画変換ソフトウェアとして知られるFFMPEGではあるが、オプションが多すぎて初めての方には使い勝手が悪く感じられてしまう。それらをラッピングしたMiro Video Converterは使い勝手が良い。 Miro Video Converterはドラッグアンドドロップで動画ファイルを登録し、後は出力先デバイスを選べば変換処理を行ってくれるソフトウェアだ。デバイスはDroid、Nexus OneといったAndroid系やiPhone/iPod
Windows用のフォルダ同期ツール·SyncSharp MOONGIFT
SyncSharpはWindows用のオープンソース・ソフトウェア。複数のPC間でデータを同期したいと言った時に便利なのがDropboxだ。だがインターネット上にファイルをアップロードしてしまうことにセキュリティ的な懸念を感じる人は決して少なくない。 少なくとも企業では導入が難しいかもしれない。だがローカル同士の同期であれば問題にはならないはずだ。そこで使えるのがSyncSharpになる。指定したフォルダ間を同期してくれるシンプルなソフトウェアだ。 SyncSharpはソースフォルダとターゲットフォルダを指定するだけのシンプルなソフトウェアで、ソースフォルダのファイルを真として、更新したファイルをターゲットフォルダにコピーする。また二つのフォルダ間の同期も可能だ。例えばターゲットフォルダはUSBメモリなどが考えられるだろう。 設定画面 設定は複数指定できるので、複数のフォルダを同期設定する
マインドマッピング的にデータを視覚化する·Visual Understanding Environment MOONGIFT
Visual Understanding EnvironmentはWindows/Mac OSX/Linux向けのオープンソース・ソフトウェア。プロジェクトを企画する際、頭の中で考えていることをまとめる時には、それに特化したツールを使うとうまくいく。例えばマインドマッピングだ。 情報整理、視覚化に だが必ずしもノードがつながっているとは限らない。それ以外にも可視化したい情報はたくさんある。地図や写真に付加情報をつけたいなんてニーズもあるかも知れない。そんなあらゆるデータを視覚化、まとめあげるツールがVisual Understanding Environmentだ。 Visual Understanding Environmentはいわゆるマインドマッピングではない。ノードを配置して、線でつなぐこともできるというだけだ。ノードは写真やファイル、リンク、メモをつけることができる。キーワードを
NodeJS用IDE·Nodify MOONGIFT
NodifyはJavaScript製のオープンソース・ソフトウェア。最近、サーバサイドのJavaScriptフレームワークであるNodeJSが熱い。多数のソフトウェア、ライブラリが開発されており、Herokuでもサポートが開始されるなど本格的になってきている。 NodeJSを遊ぶのにぴったり そんなNodeJSを使って色々遊んでいる人たちに使ってみてもらいたいのがNodifyだ。Webブラウザ上でNodeJS向けのコードを書き、その場でテスト実行できるいわばIDEだ、 Nodifyを立ち上げるとWebブラウザが表示される。後は自由にコードを書き、その場で実行できる。NodeJSのサーバをNodify上から立ち上げることも可能だ。console.logを使えばデバッグメッセージを出力することもできる。Google Chromeを使えばデバッグも可能だ。 Nodify上からNodeJSを実行で
node.js用MySQLドライバ·node-mysql MOONGIFT
node-mysqlはJavaScript製のオープンソース・ソフトウェア。 サーバサイドJavaScriptが徐々に現実化してきている。大規模なシステムと言うよりも、小規模なシステムを手早く作る上でクライアントサイドとサーバサイドを統一した言語で作れるのは魅力的だ。 JavaScriptからMySQLに接続する その代表例が最近登場したnode.jsだ。Google製のJavaScriptエンジンであるv8を用いて開発されており、高速なサーバサイドJavaScriptを実現する。そしてWebアプリケーションを開発する上では必須とも言えるデータベース接続を実現するのがnode-mysqlだ。 node-mysqlはその名の通り、JavaScriptによるMySQLドライバだ。Ruby製のMySQLドライバのコードを参考にしている。node-mysqlという名前ではあるが、読み込み部分などを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
