Google Analyticsをパワーアップ！·Google Analytics on Steroids MOONGIFT
Google Analytics on SteroidsはGoogle Analyticsのデータ取得をより詳細に、より多彩にしてくれるライブラリです。 Webサービスを運営する中でユーザがどう行動しているのかを把握するのはとても大事です。Google Analyticsでもある程度取得できますが、より詳細にトラッキングしたいならば使ってみたいのがGoogle Analytics on Steroidsです。 埋め込みのサンプルです。多彩なデータがトラッキングできます。 提供される機能はフォーム入力トラッキング、マックススクロール、外部リンク、ダウンロード、mailto、動画閲覧（vimeo/YouTube）などができます。さらにメタデータの追加、コマーストラッキング、HTMLの要素にトラッキング内容の追加ができます。 Google Analytics on SteroidsはJavaSc
開発環境を一気に整えるための魔法のスクリプトを生成·SoloWizard MOONGIFT
SoloWizardは開発周りで使える様々なソフトウェアをインストールするスクリプトを生成するソフトウェアです。 開発環境を整える際には様々なソフトウェアをインストールする必要があります。何度も行うと疲れてしまうでしょう。そこで選択式でインストールするソフトウェアをまとめて決められるSoloWizardを使ってみましょう。 トップページです。ここで作成できます。 ImageMagicやJavaといった開発関係のインストールもできます。 もちろんGit、Subversionも選択できます。 FirefoxやDropboxも。 OSXに関連した設定も選択できます。 .bash_profileの選択まであります。 その他色々な設定が提供されます。 こんな感じのスクリプトが生成されます。 デモ動画です。 カテゴリーとしては開発用ソフトウェア、データベース、コマンドラインツール、バージョン管理、テキ
ウィンドウサイズに合わせて自在にJavaScriptを実行する·Response MOONGIFT
ResponseはレスポンシブWebデザインを実現するのに必要な情報を取得できるJavaScriptライブラリです。 レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 テストの画面です。ウィンドウや画面のサイズが出ています。 ウィンドウサイズを縮めると値がリアルタイムに変化します。 縦のスクロール値も出ます。 各種判定値が用意されています。 ウィンドウサイズによる簡易的な判定も可能です。 もちろんこのページ自体がレスポンシブです。 Responseを使えば現状のウィンドウサイズやスクロール位置などレスポンシブWebデザインを実現するのに必要な情報が一気に取得できます。さらにリサイズなどのコールバックにも対応しているので、表示し
RESTfulなAPIのドキュメントを管理·ApiDocco MOONGIFT
ApiDoccoはRESTfulなWeb APIのドキュメントを作成できるWebサービスです。 Web APIを使ってWebサービスを作る、またはWebサービスを作ったらWeb APIを提供するというのは当たり前になってきました。その際に必要になるのがドキュメントです。一から作るのは大変ですが、ApiDoccoを使えばある程度手軽に作れるようになりそうです。 トップページです。APIは独自で追加もできます。 APIDoccoのAPIを見ています。RESTfulなメソッドが並んでいます。 GETアクセスの一覧系です。必須パラメータやそのレスポンスが確認できます。 POSTアクセスでも同じように表示されています。 切り替えはスムーズで内容も見やすいです。 ApiDoccoは左側にメソッドの一覧、右側に実行の際のパラメータとレスポンスを記します。その場で実行が出来る訳ではないようですが（将来的に
JavaScriptで処理を同期的に行いたいと考えている人向け·JSDeferred MOONGIFT
JSDeferredはJavaScriptの非同期処理を扱うライブラリです。 JavaScriptの魅力は非同期処理にあると思いますが、これまでのコーディングスタイルと異なるのでやりづらいと感じる人も多いのではないでしょうか。そこでJavaScriptで同期処理的な実行を可能にするライブラリJSDeferredを使ってみましょう。 サンプルコードです。wait(3)で3秒間処理を停止しています。 サンプルのコードです。 ステップ実行のデモコードです。クリックアクションを受けて処理が実行されます。 Beforeです。ネストが深くなって非常に見づらい、汚いコードです。 Afterです。パラレルを使って平行にデータを読み込みつつ、全てが終わった段階でresultsに結果をまとめて次のメソッドを実行しています。 JSDeferredを使わずに書いている場合に比べて、コードがとても見やすいのが分かる
ガントチャートやWBSを備えたWebベースプロジェクト管理·LibrePlan MOONGIFT
LibrePlanは中〜大規模開発において有効なWebベースのプロジェクト管理です。 LibrePlanはまるでローカルアプリケーションのようなリッチなUIをもったWebベースのプロジェクト管理システムです。 ログインします。 ダッシュボードです。格好いいガントチャートが表示されています。 タスク同士の関連性も表現されています。 WBSです。 タスクの詳細です。 ワーカー一覧です。 どの機能もメニューから素早くアクセスできます。 ワーカーレポートです。他にも多様なレポートが揃っています。 主な機能としてはリソースマネジメント、WBS/ガントチャートを用いた計画表、各タスクのモニタリング、進捗度合いのトラッキング、APIを使ったデータ共有などとなっています。十数名くらいのプロジェクト規模であれば使いやすいのではないでしょうか。 LibrePlanはJava製のオープンソース・ソフトウェア（G
これは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
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
JavaScriptによるバイナリハックの世界へようこそ·jDataView MOONGIFT
jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M
顧客ロイヤリティ向上を目指す。PHP製サポートシステム·OpenSupports MOONGIFT
OpenSupportsはPHP製、Webベースのクライアントサポートソフトウェアです。 商品やサービスのヘルプシステムを提供するのに使えそうなのがOpenSupportsです。PHP製で、どこにでも配置して使えることでしょう。 まずはサポートを受ける人がログインします。 質問を記入します。 次にサポートを行う人としてログインします。 ログインしました。 寄せられている質問です。 質問の詳細です。 回答を送りました。 次は管理者の画面です。ここはマスタメンテナンスが殆どです。 全ての質問を確認することもできます。 管理者宛の質問に答えられます。 スタッフの一覧です。パスワードが丸見えなのがちょっと怖い…。 新しいスタッフを追加します。担当部署や権限を設定します。 記事を作成します。これはユーザ向けの画面に掲載されます。 部署管理です。 ユーザ向けの記事一覧です。セルフサポート用です。 記事
JQGridを使ったAjax対応のPHPグリッド表示ライブラリ·JQgrid PHP Grid Control MOONGIFT
JQgrid PHP Grid ControlはAjaxで編集可能なグリッドを表示するPHPスクリプトです。 PHPで作られた業務システムなどでデータを表で一覧表示する際に使ってみたいのがJQgrid PHP Grid Controlです。ごくシンプルなPHPコードだけで高度なグリッド表示を行ってくれます。 データが整然とグリッド表示されています。 データの追加もここでできます。 日本語が???になってしまいました…。一応UTF-8に対応となっています。 行を選択します。 編集します。 ヘッダー部でフィルタリングできます。 グリッドの高さをドラッグで変更できます。 行のインラインで編集もできます。 カラムの幅を変更できます。 右上のボタンを押すと隠せます。 検索にも対応しています。 JQgrid PHP Grid Controlではテーブル名を与えるだけ（またはSELECT文を指定）で後は
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
Vim初級者にお勧め。ショートカットキーをまとめた壁紙·Vim Shortcut Wallpaper MOONGIFT
Vim Shortcut WallpaperはVimのショートカットをまとめたチートシート兼壁紙です。 Vimは慣れると手放せないテキストエディタですが、最初はキーバインドを覚えるのに苦労するでしょう。そこで使ってみたいのがVim Shortcut Wallpaperです。Vimのショートカットキーが載ったチートシート兼壁紙です。 配布内容です。背景色がダークまたはホワイト系で選択できます。サイズは2パターン用意されています。 グレー系はこんな感じです。 ちょっとサイズが合わないのですがデスクトップの壁紙に設定してみました。 MacVimの背景の透明度を設定するといい感じにチートシートが見えるようになります。 Vim Shortcut Wallpaperをすぐ見られるところに配置しておけば、いざ忘れてしまった時にもすぐアクセスできて便利です。 Vim Shortcut Wallpaperは
30分で開発マシンに変身させる魔法のスクリプト·Laptop MOONGIFT
LaptopはUbuntu、Mac OSXのRuby on Rails開発環境をまとめてセットアップします。 これからRailsの勝発をはじめてみたい、そう思ったMac OSX/Ubuntu利用者にお勧めなのがLaptopです。30分であなたのマシンが開発マシンに様変わりします。 例えばこれがMac OSX用。 こちらはUbuntu用。 インストールされるソフトウェアです。 Laptopはたった一行のコードを実行するだけで多種多様なソフトウェアが一気にインストールされます。Homebrew（Mac OSXの場合のみ）/QT/Ack/Tmux/Postgres/Redis/ImageMagick/RVM/Ruby 1.9.2/Rails/Heroku/Tapsなどがインストールされます。ネットワーク状況によりますが、だいたい30分はかかるとのことです。 LaptopはBashスクリプト製、M
データをダウンロードして詳細、地図表示という流れを習得できるTitaniumモックアプリ·Single-Context MOONGIFT
iPhone/iPadアプリでネットワークは必須とさえ言えます。インターネット上からデータをダウンロードして表示する、そんなアプリを作る際に参考になりそうなのがSingle-Contextです。 起動します。Titanium Developerを使っています。 起動すると位置情報の確認が入ります。 まず認証を行います。一度エラーになると分かりますが、IDはtest、パスワードはtest12345です。 認証を通るとデータが一覧で表示されます。 行をタップすると詳細が表示されます。 マップ上にマーカーも立つようです（今は立っていませんが）。 同じホテルを撮った別な写真も一覧されます。 設定画面です。デバッグ関係のオン/オフが出ます。 検索も使えます。 Single-ContextはAmazon S3上にあるJSONファイルを使って認証し、さらにデータをダウンロードして一覧表示するようになって
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
社内でも立てられるGitHubクローン·GitLab MOONGIFT
GitLabはRuby/Ruby on Railsで作られたGitHubクローンです。 GitHubは有料でプライベートリポジトリが持てますが、それでもセキュリティ上の理由でリポジトリを外だしできないケースはあるかと思います。そんなときに使ってみたいのがGitLab、GitHubクローンです。 ログイン必須になります。 ログインした後の画面です。登録済のプロジェクトが一覧表示されます。 一つのプロジェクトを閲覧しています。ソースツリーが出ます。ソースツリーは右へ右へスライドして表示されます。GitHubに似ています。 ソースコードハイライターも内蔵されています。rawでファイルをダウンロードできます。 タグやブランチを切り替えることもできます。 コミット履歴一覧です。 コミット詳細ではDiffが確認できます。 コミットに対するコメントも確認できます。 チーム設定です。複数人でのコラボレーシ
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
PHPのさらなる利用者増を目指し再定義する·PHP.reboot MOONGIFT
PHP.rebootはJVM上で動作するPHPを再定義したプログラミング言語です。 PHPは恐らくWebサイトにおいて最も良く使われている言語でしょう。習得も容易で、手軽に色々なWebアプリケーションが作れる、そんな利便性の裏で言語仕様などについて毛嫌いされる声も聞かれます。そこで注目したいのがPHPを再定義するPHP.rebootです。 PHP.rebootの書き方です。< ?phpではなく、{}を使ってコードを埋め込みます。まさにテンプレート的です。ファイルの拡張子はphprになります。 実行結果はもちろん普通に表示されます。 サーバ、GET/POSTも使えます。面白いのは変数名に$をつけず、JavaScriptのように定義することでしょう。;も使いません。 実行結果はこのようになります。 基本的な文法はPHPと似ています。SQLとの親和性を高くしており、コードの中にSQLをそのまま埋
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
