Excel同等とは言わないけれど十分高機能なWebベースのテーブル表示ライブラリ·KoGrid MOONGIFT
KoGridはハイレベルなWebベーステーブル表示ライブラリです。フィルタ、ソート、ページネーションなどがあります。 業務システムではよくあるWeb上でのデータの一覧表示。得てしてExcelと同等レベルの機能が求められて大変な思いをしますが、そのベースにできそうなハイレベルなグリッド表示を行うのがKoGridです。 ソートができます。範囲外は中でスクロールして表示させられます。 チェックボックスをつけるとハイライト表示します。 カラムに色をつけたり、セルごとに色を設定できます。 数値は桁数を意識したソートができます。 フィルターを表示できます。 サーバサイドのページネーションもあります。 10,000行のデータも軽快に操作できます。 テーブルで選択したデータの詳細を右側に表示するデモです。 KoGridはカラム幅の変更やカラムの移動はできないものの、大抵のニーズには応えられると思われます。
JavaScriptによるバイナリハックの世界へようこそ·jDataView MOONGIFT
jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M
Closure Toolsを使った折れ線グラフライブラリ·Closure Charts MOONGIFT
Closure ChartsはGoogle Closure Toolsを使って構築されたグラフライブラリです。 GoogleがリリースしているJavaScriptツール群がClosure Toolsです。そんなツールを使って作られたチャートライブラリがClosure Chartsになります。 主に折れ線グラフ用です。 色を変えたり、多数の要素をグラフに配置できます。 マウスを当てるとその部分にポインタが表示されます。 縦に並んだ例。 猫の画像の上に線を引くと、その内容（？）がグラフに表示されます。 グラフの表示はリアルタイムに変化、かつ高速です。 Closure Chartsはごく小さいものではスパークラインのグラフも可能です。リアルタイムの秒が変化にも対応しているので、株価や為替の変化グラフにも使えるでしょう。 Closure ChartsはJavaScript製のオープンソース・ソフト
リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター·JS Bin MOONGIFT
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
JSONデータの授受があるWebアプリケーション開発に·JSONpad MOONGIFT
JSONpadはJSONデータのビューワー/エディター。WebベースまたはAdobe AIR版がある。 JSONpadはJavaScript/PHP製のオープンソース・ソフトウェア。最近のWeb APIはRESTfulなものが多くなった。URLとメソッドを組み合わせてデータのCRUD操作ができる。使っているプロトコルがHTTPなので、JavaScriptとの親和性が高いのも魅力だ。 エディタ画面 そんなRESTfulのデータやり取りの際に使われるフォーマットはJSONが多い。こちらもJavaScriptとの親和性がもちろん高い。受け取った、または送信するJSONデータの構造を確認したい時に使うのがJSONpadだ。 JSONpadはWebアプリケーション風のUIで作られたソフトウェアで、JSONデータをツリー構造で確認したり、さらにデータのメンテナンスができるようになっている。データタイプ
400人規模まで対応するJabberを使ったWebベースのチャットシステム·Candy MOONGIFT
CandyはJavaScriptとJabberを組み合わせたマルチユーザ対応のチャットシステム。 CandyはJavaScript製のオープンソース・ソフトウェア。インターネット上でのコミュニケーションツールは幾つかあるが、その中でもチャットは最も素早く意見が交換できるのではないだろうか。メールと違って面倒な挨拶もなく、必要なメッセージだけ短く交わせる。 チャット中 Skype、MSNメッセンジャーのようなIMやIRCのようなチャット用プロトコルもある。今回紹介するのはJavaScriptを使ったWebベースのグループチャットシステムであるCandyだ。 CandyはWebベースのチャットシステムで、プロトコルはJabberを使っている。JabberのHTTPバインディングを使って通信を行う仕組みだ。チャットはリアルタイムで可能で、400人以上が同時に接続できる性能をもっている。 絵文字対
WindowsのJSONを使った開発のお供に。JSONをツリービューに展開する·JSON Viewer, MOONGIFT
JSON ViewerはVisual Studioとの連携も可能なJSONビューワー。 JSON ViewerはWindows用のオープンソース・ソフトウェア。XMLを面倒なものに感じていたのはタグの仕組みによって記述が冗長的になってしまうからだった。ライブラリがあるので利用はさほど難しくないが、自分で作成するのは面倒だった。 貼付け そこで登場したのがJSONだ。XMLほど複雑な表記に対応できる訳ではないが、その代わりにとてもシンプルに記述できる。また、大抵の場合はそこまで複雑な定義は必要としないだろう。JSONは元々Web向けの技術だったが、最近は変わってきている。そこで登場したのがJSON Viewerだ。 JSON ViewerはWindows用のソフトウェアで、JSONフォーマットの文書を貼付けると、ツリー状に展開してくれるソフトウェアだ。JSONは改行などをなくして送受信される
まるでペイント。再現率の高いWebベースペイントソフトウェア·CanvasPaint MOONGIFT
CanvasPaintはWebブラウザ上でWindows標準アプリのペイントを再現するソフトウェア。 CanvasPaintはJavaScript製のオープンソース・ソフトウェア。画像編集を行うWebアプリケーションが増えている。各プログラミング言語向けに画像加工ライブラリがあるので、それをビジュアル的に呼び出す形になっている。 デモ そしてベクター、ドロー系のWebアプリケーションも増えている。こちらはSVGやCanvasといった今流行の技術をいち早く取り入れる技術的挑戦でトライしている人が多い。そしてもう一つの画像系分野、ペイント系として知っておきたいのがCanvasPaintだ。 CanvasPaintのデモアプリ、これはどう見てもWindows標準のペイントだ。左に並んだアイコンは全てが動作している訳ではなく、使えないものも数多い。それ以外の機能も使えないものもあるが、半分以上の機
解析データの、グラフ化に。JavaScript製統計解析ライブラリ·jStat MOONGIFT
jStatはJavaScriptで作られた統計解析ライブラリ。Canvasタグにデータをプロットする。 jStatはJavaScript/jQuery製のオープンソース・ソフトウェア。単純に一覧化された数値では分からない情報も、データをビジュアル化すると見えているものがある。トレンドや偏差が見えると、次の手や分析する上でのきっかけが掴めるようになる。 二つのデータを描画 統計のビジュアル化をする解析言語としてはMATLABやRが有名だ。しかしそうした言語を覚えないとデータのビジュアル化ができないのは面倒だ。Webブラウザ上でもっと手軽にグラフを描くソフトウェアとしてjStatを紹介しよう。 jStatでは多様な統計解析を行うライブラリだ。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっている。またjQueryを使っている。線で描画すること
JavaScriptでSinatra風？RESTfulをサポートしたフレームワーク·Sammy.js MOONGIFT
Sammy.jsはJavaScriptによるRESTfulをサポートしたWebフレームワーク。 Sammy.jsはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを開発する際には、サーバサイドとクライアントサイドの二つを開発する必要がある。クライアントサイドにはJavaScriptやFlash、HTMLなどが使われているだろう。 フォームのハンドリングも可 しかしJavaScriptはどんどん高度化し、機能が増している。JavaScriptだけで解決できることは日々増えているのだ。もはやサーバサイドを必要とせず、Webアプリケーションを構築できてしまう。そのためのフレームワークがSammy.jsだ。 Sammy.jsはごく小さなWebフレームワークで、ルーティングを備えている。クライアントサイド内でRESTfulをルーティングで定義し、アクションを受け取ることが
JavaScriptによる開発が大規模化したらドキュメントを生成「Dox」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
DoxはJSDocに対応したソースファイルからドキュメントを生成するライブラリ。 DoxはJavaScript/node.js製のオープンソース・ソフトウェア。JavaScriptがWebアプリケーション構築の際のメイン言語として使われるようになっている。その結果起こっているのがJavaScriptのコードの大規模化だ。 トップページ 大規模になれば当然、複数人での開発体制になる。そうなれば情報の共有やコーディングスタイルの統一などが必須になる。その一端を担うのがAPIドキュメントだ。ソースコードからドキュメントを生成するソフトウェアがDoxだ。 DoxはJSDocもサポートしたソフトウェアで、コンソールからコマンドを実行するだけでHTMLベースのドキュメントを生成する。ドキュメントにはMarkdownの記法が利用できる。システムとしてはnode.jsを使っており、npmを使ってインストー
HTML/CSS/JavaScriptを改善してWebサイトのパフォーマンスを向上しよう·DOM Monster MOONGIFT
DOM MonsterはDOMやテキストノードをチェックし、Webサイトのパフォーマンス改善を提示するブックマークレット。 [/s2If] DOM MonsterはJavaScript製のオープンソース・ソフトウェア。JavaScriptを活用したWebサイトが増えている。インタラクティブなWebサイト構築にあたって、JavaScriptを使っていくのは良いが、やたらと使うと重たくなってしまう。 実行した所 さらにdivやspanタグを使って細かなCSS設定を行っていると、多数のタグが使われることでレンダリングに影響を及ぼすようになる。そうしたWebサイトの問題点をJavaScriptを使って指摘してくれるのがDOM Monsterだ。 DOM Monsterはブックマークレット型のソフトウェアだ。公式サイトにあるブックマークレットをWebブラウザに登録するだけで利用できる。任意のWebサ
HTML5だからこそ。Canvasタグを使って幾何学模様を描く·Turtle Wax MOONGIFT
Turtle WaxはCanvasタグを使ってJavaScriptで幾何学模様を描くライブラリ。 [/s2If] Turtle WaxはJavaScript製のオープンソース・ソフトウェア。HTML5が本格化する中で、見逃せない機能の一つがCanvasタグだ。実験的な試みが色々行われているが、これまでFlashで行っていたような操作がJavaScriptだけで実現できるようにさえなっている。 デモ1 これまでグラフィックスを描こうと思うとFlashを使うか、画像を作成するかのどちらかしか選択肢がなかった。だがCanvasを使えばクライアントサイドでレンダリングができるようになる。幾何学模様を描くならばTurtle Waxに注目したい。 Turtle WaxはJavaScriptを使って幾何学模様を簡単に描くことができるライブラリだ。デモとして四角やその四角を回転させて描く図形が紹介されてい
要チェック！iOS/WebKit向けHTML5による最適化サイトJavaScriptフレームワーク「DHTMLX Touch」
DHTMLX TouchはiOS/WebKit向けにWebアプリケーションを構築するJavaScriptフレームワーク。 [/s2If] DHTMLX TouchはiOS/Android向けのオープンソース・ソフトウェア。iPhoneではPC向けのWebサイトがほぼ（FlashやJavaアプレットなどはのぞく）そのまま閲覧できるようになっている。とは言え全く問題ないかと言われるとそうでもない。 デモアプリ。多彩なウィジェットが特徴 やはり表示が最適化されているか否かで情報の得やすさは全く変わってくる。それはiPadでも同様だろう。特にWebアプリケーションのような情報だけでなく機能を提供する場合はそうだ。そこで使われるのがDHTMLX Touchのような最適化フレームワークだ。 DHTMLX TouchはiPhone、iPad、iPod TouchといったiOSやAndroidのようなWe
これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する·CssUserAgent MOONGIFT
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。 [/s2If] CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。 このようなクラスが定義される レンダリングエンジンで考えても数多く、さらにバージョンによってレンダリング結果が異なるとなると発狂しそうになってしまうほどだ。そんな苦しむWebデザイナーの方々を救うかもしれないのがCssUserAgentだ。 CssUserAgentはua-*というクラス名を自動的に定義するJavaScriptファイルだ。「ua-（ブラウザ名）」「ua-（ブラウザ名）-（メジャー番号）」「ua-
オンラインでHTMLプレゼンを作成、公開する·Swinger MOONGIFT
SwingerはWeb上でプレゼンテーションを作成、公開するサービス/ソフトウェア。 [/s2If] SwingerはJavaScript/Couchapp製のオープンソース・ソフトウェア。数年前にドキュメント共有サイトが流行った。ScribdやSlideshareといったサービスが立ち上がり、Webベースでプレゼンテーションなどが閲覧でき、人気を集めた。 だが今ではオフィスファイルを変換する必要はなくなってきている。HTMLベースのプレゼンテーションが増えており、プレゼンテーションが終わったらそのまま公開なんて当たり前になっている。それをサービス化したのがSwingerだ。 SwingerはWebベースのプレゼンテーション作成、公開ソフトウェアだ。プレゼンテーション作成ソフトウェアほどではないものの、Web上でテキストを入力してその場でプレゼンテーションを作成できる。画像やリンクの埋め込
JavaScript製のOAuthライブラリ·jsOAuth MOONGIFT
jsOAuthはJavaScript製のOAuthライブラリ。 [/s2If] jsOAuthはJavaScript製のオープンソース・ソフトウェア。今ではWeb APIを公開しているサービスは珍しくない。そして従来は配信系ばかりだったが、今ではWeb APIを通じたデータ登録や更新も可能になっている。そんな時の認証の仕組みに使われているのがOAuthだ。 テスト用コード（ここままでは動かないが…） OAuthはTwitterで最も知られるようになったが、元々はFlickrやGoogle、Facebookなどでも使われている機能ベースの認証技術だ。そしてそれをJavaScriptベースで実現したのがjsOAuthになる。 jsOAuthはJavaScriptによる実装なので、ソースコードが見えてしまう。OAuthではシークレットキーを使うので、それが丸見えというのは考えものだ。だがWebブ
jQuery製のコードハイライト表示·Snippet MOONGIFT
SnippetはjQuery/JavaScript製のオープンソース・ソフトウェア。ブログやWebサービスでプログラミングコードを扱っているのを見ることは多い。そう、ソースコードはコンテンツなのだ。Tips、関数、オブジェクトなど様々なコードがコンテンツになり得る。 ハイライト例と実際の使い方 そんなプログラミングコードを表示する際にJavaScriptのライブラリを利用することがよくある。幾つかあるが、ポイントは対応しているプログラミング言語と表示方法の多様さだ。その二つに重点を置くならSnippetは注目したいライブラリだ。 Snippetが対応するプログラミング言語は実に15種類もある。C/C++からはじまって、各種スクリプト言語、SQL、XML、Java、HTML、CSSなどに対応している。さらに拡張することでMakefileやLDAPファイル、Diff、Changelogといった
JavaScript製のMVVMフレームワーク·Knockout MOONGIFT
KnockoutはMVVM（Model-View-View Model）を実現するJavaScriptライブラリ。 MOONGIFTはこう見る MVVMの概念についてはこちらの記事を参照のこと。それをJavaScriptで実現したのがKnockoutと言える。WebアプリケーションとMVVMを組み合わせると非常にデータ操作が便利に使いやすくなりそうだ。data-bindの書き方は最初は慣れないかも知れないが、見た目の理解はしやすいと思う。 ショッピンカートのようなシステムの他、Twitterクライアントのサンプルもある。何よりデータの追加、削除がリアルタイムに反映されるのが便利で良い。 KnockoutはJavaScript製のオープンソース・ソフトウェア。MVVMとはModel-View-View Modelの略で、ViewとModelの間にView Modelというものを挟み込む。Vi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
