jQuery editTable - その場で編集できるテーブルを生成するjQueryライブラリ MOONGIFT
Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
何に使えるかな。シンプルなWebベースの年表ライブラリ·Chronoline.js MOONGIFT
Chronoline.jsは左右に展開するシンプルな年表ライブラリです。 万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。 日ごとの年表。左右への移動はスムーズです。 今日の日付部分が四角く囲まれています。 こちらは月ごと。メモリが大きくなっています。 Chronoline.jsは月、四半期、年といった単位で表示できるようになっています。プロットしたデータにはフローティングを使って情報を追加できます。イベントは日付とタイトルという形でハッシュを作り、それを配列としてJSONデータにするだけです。複雑な情報は表示できませんが、時間軸に沿って何が起きたのかといった表現に良さそうです。 Chronoline.js
Gitリポジトリに蓄積された歴史を可視化、グラフ化する·GitStats MOONGIFT
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
pure Rubyで実装されたJavaScript実行環境·Twostroke MOONGIFT
Twostrokeはpure Rubyで実装されたJavaScript実行環境およびコンパイラです。 Twostrokeはpure Rubyで実装されたJavaScript環境です。Ruby、JavaScriptともに愛する方はぜひ見てください。 インストールです。Rubygemsを使って簡単にできます。 一通りJavaScriptの評価ができます。無名関数を作ったりもできます。 Objectを作ることもできます。そのままJavaScriptです。 Twostrokeはインタプリタの他に、コンパイラーも用意されています。*.tsというファイルが生成されるのですが、ここからの実行がよく分かりませんでした…。TwostrokeではUnderscore.jsのテストは通過しているとのことです。 TwostrokeはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
そろそろ本格化。node.js用Webアプリケーションフレームワーク·flatiron MOONGIFT
flatironはルーティング、ミドルウェア、テンプレートエンジン、ODM、プラグイン拡張を備えたnode.js用Webアプリケーションフレームワークです。 Herokuがサポートしたり、着実に安定性を増した開発が継続されているnode.js。そろそろ使ってみたいと思い始めているのではないでしょうか。フレームワークを使って開発してみたい方は今回紹介するflatironをお試しください。 ルーティングです。まとめて設定するのがいい感じです。 unionという最低限のミドルウェアも付属しています。 テンプレートエンジンがあります。IDを指定してその中の値を変更するようです。 ODM（オブジェクトドキュメントマッピング）です。いわゆるO/Rマッパーに近いです。Mongo/CouchDB/Redisに対応しています。 プラグインによる拡張もできます。 flatironはWebアプリケーションを開発
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
Gitを使った複数人での開発に役立つリポジトリ更新通知·git-dude MOONGIFT
git-dudeはGitリポジトリの更新通知を受け取るBashスクリプトです。Mac OSX/Linuxで使えます。 git-dudeを使うとGitリポジトリの更新通知を受け取れるようになります。Gitを開発に使っている企業で入れておけば無意味な衝突を防げるかも知れません。 インストールは簡単です。スクリプトファイルを取ってきて、実行権限を与えるだけです。 使い方としてまずは監視したいリポジトリを~/.git-dudeディレクトリに入れます。シンボリックリンクでも大丈夫です。 監視を開始するにはgit dudeコマンドを実行します。後はリモートのリポジトリが更新されてローカルのリポジトリと差ができた時に通知が表示されます。 Mac OSXでの通知例です。Mac OSXの場合は通知にGrowlを使っているので別途growlnotifyをインストールします。Linuxの場合はnotify-se
ゲームでも使えそうなJavaScriptで作られた物理エンジン·box2dweb MOONGIFT
box2dwebはJavaScriptで作られた物理エンジンライブラリ。Box2DFlashをJavaScriptへポートしたソフトウェア。 box2dwebはJavaScript製のオープンソース・ソフトウェア。ゲームを作る際に欠かせない要素が物理エンジンだ。オブジェクトの落下や重力の作用、オブジェクト同士の作用反作用、慣性の法則など様々な要素がそこには絡んでくる。スーパーマリオも物理エンジンあってこそのゲームだ。 デモ 最近であればAngry Birdsも物理エンジンを用いた処理によってあの動きが実現する。Webブラウザで動作するゲームを作る時に採用を考えたいのがbox2dwebだ。 box2dwebはBox2DFlashというFlash製の物理エンジンをJavaScriptに移行させたソフトウェアだ。デモでは多数の四角または丸のオブジェクトが落下し、それぞれが作用しながら動き回るよう
音声認識を活用。Rubyから文章を指定して音声認識&処理実行·James MOONGIFT
JamesはMac OSXの音声認識をRubyから操作できるライブラリ。 JamesはRuby製/Mac OSX用のオープンソース・ソフトウェア。近未来の世界において（映画の中で）たびたび登場するのが音声認識によるコンピュータの操作だ。テレビをつけたり照明を消したり、必要な情報を音声によってやり取りする。 実行中 今のコンピュータでも実際には音声認識は可能だ。だがあまり使われていないイメージがある。そこでもっと使いやすくしてくれるのがJamesだ。 Jamesはコンピュータの中の人の名前だ。そしてMac OSXに標準で搭載されている音声認識機能を使って指令を受け取り、それをRuby上で実行してメッセージを返却する。処理を実行して終わることも、逆に音声を読み上げて完了を知らせることもできる。 コマンド例 時刻を言う、Twitterを取得する、iTunesを立ち上げた後に再生操作を行うなど様々
AtomPubによるデータ管理。Ruby/Sinatra製のブログエンジン·Atomos MOONGIFT
AtomosはRuby/Sinatraで作られたAtomPubによるデータ管理を行うブログエンジン。 AtomosはRuby/Sinatra製のオープンソース・ソフトウェア。ブログを書く際に、管理画面にログインして文章を作成するというのはとても面倒だ。MOONGIFTではWordPressが基盤になっているが、管理画面で文章を作成することはほぼない。テキストファイルが書いてスクリプトでアップロードしている。 エントリー一覧 ブログで使われているWeb APIは大きく分けて二つある。一つはXML-RPCでもう一つはAtomPubだ。今はAtomPubが主流になりつつある。そのAtomPubを使って作られたブログエンジンがAtomosだ。 Atomosは管理画面を持たないブログシステムだ。その時点でかなりマニアックかもしれない。操作は全てAtomPubを使って行う。エントリーとページ、タグ、年
jQuery製のコードハイライト表示·Snippet MOONGIFT
SnippetはjQuery/JavaScript製のオープンソース・ソフトウェア。ブログやWebサービスでプログラミングコードを扱っているのを見ることは多い。そう、ソースコードはコンテンツなのだ。Tips、関数、オブジェクトなど様々なコードがコンテンツになり得る。 ハイライト例と実際の使い方 そんなプログラミングコードを表示する際にJavaScriptのライブラリを利用することがよくある。幾つかあるが、ポイントは対応しているプログラミング言語と表示方法の多様さだ。その二つに重点を置くならSnippetは注目したいライブラリだ。 Snippetが対応するプログラミング言語は実に15種類もある。C/C++からはじまって、各種スクリプト言語、SQL、XML、Java、HTML、CSSなどに対応している。さらに拡張することでMakefileやLDAPファイル、Diff、Changelogといった
どんなデータでもdata URIでパックする·Knapsack MOONGIFT
Knapsackはdata URIを使ってオンラインリソースをパックする。 [/s2If] KnapsackはRuby/Sinatra製のフリーウェア（ライセンスはDo What The Fuck You Want To Public License）。個人的にWebアーカイブは便利な技術だと思っている。Webページをアーカイブにまとめ、後でいつでも閲覧することができる。画像などのファイルがまとまっているので移動したりするのも楽だ。 任意のデータをパック サイト内で使われている画像であれば、data URIを使えばページ内に埋め込むことができる。これは何も画像に限ったものではない。どんなデータでもパックすることができるのだ。それを実現するWebアプリケーションがKnapsackだ。 KnapsackはシンプルなWebアプリケーションで、URLを指定して実行すると外部コンテンツを取得し、da
Web API/Mashup開発者に必須！オフラインでも外部アクセスをテストできる·FakeWeb MOONGIFT
今はネットワークを使ったWeb APIを提供するサービスが増え、それを利用したMashupも増えてきている。様々なデータを容易にとれ、Webシステムを開発できるのは魅力だが、開発中にもネットワークが必須というのが大きな足かせになる。 Mashupのテストがしやすくなる便利なライブラリ また、アクセス自体に料金がかかる場合、開発中の利用を躊躇してしまう。そのような経験がある方はFakeWebを使うべきだ。 今回紹介するオープンソース・ソフトウェアはFakeWeb、Webアクセスを偽装する便利なライブラリだ。 この手のものは一時期考えなくもなかったが、自分でサーバを立てる方法がいいかと思っていた。だがFakeWebの場合は違う。指定したURLへのHTTP（恐らくHTTPSも）接続を横取りし、予め指定した結果を返すライブラリだ。 複数アクセスによって返却値を変えられる 予め返却されるデータと、接
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
