JSONを使った開発のお供にどうぞ·jq MOONGIFT
jqはターミナル上で使えるJSONパーサーです。 JavaScriptの台頭に伴ってJSONを共通のファイルフォーマットに使うことが増えてきました。システムから取得したJSONファイルの内容を調べる時に使いたいコマンドがjqです。 元のJSONです。 resultsの1つ目だけを出力。 2つ目だけ。 一つ目、さらに項目を指定して出力。 全ての結果、ただし項目を指定して出力。 さらに情報を追加して出力もできます。 jqはMac OSXやLinux向けのコマンドであり、標準出力されたJSONファイルを読み込み、加工した上で出力できます。かつインデントを含めて成形してくれるのでデータの見やすさが格段にあがるはずです。プログラミング言語のライブラリから扱うよりも手軽ではないでしょうか。 jqはC製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web AP
シューティングゲームなどに使えるHTML5ゲームフレームワーク·Chem MOONGIFT
ChemはHTML5製のゲームを開発するためのフレームワークです。 オープンソース界隈ではHTML5でゲーム作成を行うプロジェクトが増えてきました。今後Facebookがスマートフォンに本気になれば、よりその流れが強まるでしょう。そこで今回はChemを紹介します。JavaScript/HTML5を使ったゲームを開発するためのフレームワークです。 こちらはchemを使ったデモ。上下左右への動きとスペースキーによる自爆が実装されています。 デモのゲームです。上下左右に動いて隕石を避けます。 結構当たり判定が細かいのが難しい所。 最高得点は1,194点。 Chemはnpmでインストールするコマンドであり、作成したJavaScript（CoffeeScriptやLiveScript、Cocoも利用可能）ファイルをWebベースで動くように変換してくれます。一定の作法を覚える必要がありますが、一旦覚え
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
ゲームに使える。オブジェクトと光源によって生まれる影を描画·Illuminated.js MOONGIFT
Illuminated.jsは光とオブジェクトの影を自動計算するJavaScriptライブラリです。RPGゲームやアクションゲームで効果的です。 光があるところには必ず影がある、どこかの大魔王もそういってやられていきました。ということでJavaScriptを使ってオブジェクトと光、そして影を計算するライブラリIlluminated.jsを紹介します。 デモです。オブジェクトやライトを配置していきます。 まずライトを配置してみました。 次にオブジェクトを配置します。ライトとオブジェクトの配置によって光と影が変化しています。 別な光源を配置しました。さらに複雑な計算になっているはずです。 オブジェクトを動かすと自動で影が変化します。 色を変更した場合です。光源の強さも変更できます。 Illuminated.jsではオブジェクトや光源をドラッグで移動すると、それに合わせて影も自動的に変化します。
作ろう！HTML5用Webアプリケーションフレームワーク·Brunch MOONGIFT
BrunchはHTML5によるWebアプリケーション開発を支援するnode.jsフレームワークです。 HTML5をビジネス向けに率先して使っていくのは難しいと思いますが、それでも試してみたいと考えている人は多いはずです。そこでBrunchを活用してみると良いでしょう。HTML5ベースのWebアプリケーションを開発するための仕組みをまとめて提供してくれます。 Twitterのデモアプリです。 Todoアプリのデモです。 コードの記述に際してはJavaScript/CoffeeScript/IcedCoffeeScript/Royが使えます。CSSはSassやLESSを使うこともできます。ベースを作ってくれるコマンドがあるので、それを使いつつ後は既存のデモアプリを参考に作っていくとWebアプリケーションを素早く作ることができます。 Brunchはnode.js/JavaScript製、MIT
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
Ruby/Redisを使った高速、シンプルなレコメンドエンジン·Recommendify MOONGIFT
RecommendifyはRuby/Redisによるリコメンデーションエンジンです。 RecommendifyはRubyとRedisを使ったレコメンドエンジンです。シンプルなメソッドで使うことができます。 インストールはRubygemsで簡単に。 まずRecommendifyのモデルを作成します。 例です。注文情報を設定します。 情報を確定します。 65番の商品を買おうとした時にポイントごとにお勧め情報をリストアップできます。 Recommendifyは何かのアクションに対してデータを紐づけて登録していきます。注文に対する商品、ユーザに対する選択した写真といった具合です。そしてそれらを点数付けして、その後同じ商品を選択した人に対して統計上、似たようなデータを点数とともに返してくれます。Redisなので高速にデータが取得できるのが魅力です。 RecommendifyはRuby製のオープンソー
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
折れ線、エリアグラフに対応したJavaScriptグラフライブラリ·Rickshaw MOONGIFT
Rickshawは折れ線グラフ、エリアグラフに対応したJavaScript製のグラフライブラリです。 RickshawはJavaScriptのグラフライブラリです。 棒の積み上げグラフです。 カラーも色々用意されています。 表示はダイナミックに変更できます。 グラフの種類変更のダイナミックです。 スムーズさを変更できます。 曲線のグラフです。 ウェーブのようなグラフも描けます。 最もシンプルなグラフです。 そのコードです。シリーズをJSONであてるのみです。 Rickshawは主に折れ線グラフに関連するグラフを描くのに向いています。表示がリアルタイムにデータを受信しながら変更できるのも利点です。対応グラフパターンは多くありませんが、ぴたりとくる場面もありそうです。 RickshawはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
要チェック！Webベース、Ajaxを使った表計算ソフトウェア·dhtmlxSpreadsheet MOONGIFT
dhtmlxSpreadsheetは多数のWebブラウザに対応したWebベース表計算ソフトウェアです。 WebベースでもExcelのような編集がしたい、そんなニーズに応えるのがdhtmlxSpreadsheetです。PDFやExcelでのエクスポートにも対応した、すごいソフトウェアです。 まさに表計算といった感じの画面です。 計算式の埋め込みももちろんできます。 値を更新すれば計算式の入ったセルも更新されます。 セルの背景、文字色の変更もできます。 右寄せ、中央寄せも可能です。 計算式も多数用意されています。 マウスのドラッグで範囲選択可能です。 PDFエクスポート（実際には外部サービス利用）できます。日本語は表示されません。 同様にExcelでの出力にも対応しています。こちらは日本語に対応しています。 設定です。 セルの幅は変更できますが、カラムをクリックして全体選択といったことはできま
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
そろそろ本格化。node.js用Webアプリケーションフレームワーク·flatiron MOONGIFT
flatironはルーティング、ミドルウェア、テンプレートエンジン、ODM、プラグイン拡張を備えたnode.js用Webアプリケーションフレームワークです。 Herokuがサポートしたり、着実に安定性を増した開発が継続されているnode.js。そろそろ使ってみたいと思い始めているのではないでしょうか。フレームワークを使って開発してみたい方は今回紹介するflatironをお試しください。 ルーティングです。まとめて設定するのがいい感じです。 unionという最低限のミドルウェアも付属しています。 テンプレートエンジンがあります。IDを指定してその中の値を変更するようです。 ODM（オブジェクトドキュメントマッピング）です。いわゆるO/Rマッパーに近いです。Mongo/CouchDB/Redisに対応しています。 プラグインによる拡張もできます。 flatironはWebアプリケーションを開発
要チェック！中小企業向け、国産ERP·LOCALIZE MOONGIFT
LOCALIZEは国産、中小企業向けのERPです。会計機能を提供しています。 ERP（基幹統合システム）は各企業のビジネスモデルに合わせて構築されることが多く、それゆえにオリジナルシステムを利用するケースが殆どです。これは日本企業に特に多いと言われていますが、より安価にERPを導入したいならばシステムに合わせて業務を変更すべきです。その可能性を感じさせてくれるのが国産オープンソースERPのLOCALIZEです。 ログイン画面です。対応ブラウザはChrome、Safari、Firefox、IE8などとなっています。 会計モジュール利用中。かなり特徴的なUIです。 仕訳をクリックすると詳細が見られます。 検索条件はダイナミックに項目が変化します。格好いいUIです。 複数のウィンドウを開いて作業できます。 新しい仕訳をおこしています。エンターやタブで移動しながら高速入力はできません。ということで
node.js開発者必携。異なるバージョンのnode.jsをインストール、管理する·nave MOONGIFT
naveは複数バージョンのnode.jsを管理、切り替えるためのソフトウェア。 naveはBash製のフリーウェア（ソースコードは公開されている）。今、node.jsが熱い。動作も高速で、その先進性もあってHTML5やWebSocketなどの新しい技術を率先的に試されている。今はまだマイナーかもしれないが、今から取り組んでおいて損はないはずだ。 リモートのバージョン一覧 そんなnode.jsは開発がとても盛んであるためにどんどんバージョンアップが続いている。そのため最新版をインストールしようと思うとソースからしかできず、そのために異なるバージョンが使えなくなったりする。それを防ぐためにもnaveを使おう。 naveはRubyでいうrvm、Pythonでいうvirtualenvのように異なるバージョンのnode.jsを一つのPC上で使えるようにする。リモートにあるバージョンを一覧し、そこから
これは凄いぞ。node.jsにRailsの力を「Express on railway」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
Express on railwayはnode.js用のRails風Webアプリケーションフレームワーク。 Express on railwayはJavaScritp/node.js製のフリーウェア（ソースコードは公開されている）。Rubyは元々優秀な言語であったが、ここ数年の爆発的な普及にはRuby on Railsの存在があったというのは間違いないだろう。 プロジェクト開始 どんなにプログラミング言語が優れていても、キラーアプリケーションになるものが必要なのだ。それはnode.jsについても同じかも知れない。node.jsにおけるRails的存在、その可能性を感じさせるのがExpress on railwayだ。 Express on railwayはRuby on Railsを真似たnode.js用Webフレームワークだ。まずプロジェクトを生成する機能を使うと、app/config/
シンプルながらユーザビリティに大きな貢献。郵便番号から住所を入力補完する·js-zip2address MOONGIFT
js-zip2addressはGoogle日本語入力APIを使い、Webブラウザ上での郵便番号から住所を入力補完する。 [/s2If] zip2address.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトをはじめとして個人情報の入力フォームでは一般的になってきている郵便番号から住所を引く機能。実装方法は様々だか、この郵便番号と住所の変更は意外と回数が多い。 サンプル 回数が多いということはメンテナンスコストが大きいことを意味している。都度アップデートされるだけでなく、削除されるデータも多い。そこでメンテナンスフリーで使える手法を紹介しよう。それがzip2address.jsになる。 zip2address.jsの特徴は大きく分けて二つある。一つはデータ元としてGoogle日本語入力APIを利用しているという点だ。確かにGoogle日本語入力では郵便番号を入れると住
IE6非対応サイトになるならば告知をしよう·ie6alert-js MOONGIFT
ie6alert-jsはWebサイト上部を使ってIE6向けにメッセージを表示する。 [/s2If] ie6alert-jsはJavaScript製のオープンソース・ソフトウェア。YoutubeやYahoo! Japanなど有名どころのWebサイトでIE6への非対応を掲げ始めている。もちろんすぐに影響が出る訳ではないが、近い将来認証やデザイン面で影響が出てくる可能性はある。 IE6の場合に表示されるメッセージ もし自社のサービスにおいてもIE6への対応を打ち切るのであれば、何らかの告知が必要になるだろう。その場合にはIE6の場合だけ表示を出したいはずだ。ie6alert-jsはまさにそのためのソフトウェアになる。 使い方は簡単だ。ie6alert-jsをヘッダーで読み込み、ie6Alert()という関数を実行すれば良い。後はブラウザの判別を自動で行って、IE6であれば画面上部に指定されたメッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
