SchemaRD - RailsのER図を生成 MOONGIFT
Ruby on Railsではデータベースのスキーマをコードを使って自在に作成できます。テーブル同士の関連性もコードで記述できるので、殆どデータベースを意識せずに作り込んでいけます。しかし、時にER図が必要になるケースもあるでしょう。 そうした時に使ってみたいのがSchemaRDです。Ruby on Railsのスキーマファイルを読み込んでER図に展開してくれます。 SchemaRDの使い方 最初の表示です。テーブルはただ並んでいるだけです。 テーブルの配置はマウスで変更できます。さらにちゃんと記憶しておいてくれます。 リレーションのファイルを生成すればテーブル同士のつながりも可視化されます。 SchemaRDを使えば現在のテーブル構造を可視化できるようになります。さらにi18nにも対応しており、日本語で表示も可能です。システム開発をRuby on Railsで行っており、そのER図を随時
GithubScouter·あなたのGitHub戦闘力は？ MOONGIFT
ソーシャルの活動はその蓄積をビジュアル化することによって精神的な報酬を得られます。金銭的な報酬ではない分、より高いエンゲージメントが実現できるようになります。 GitHubで積極的に活動している方に使ってみて欲しいのがGithubScouterです。GitHubでの活動を戦闘力という形にしてくれるスカウターです。 GithubScouterの使い方 インストールはRubygemsで簡単です。 $ gem install github_scouter 後はGitHubのユーザ名を指定するだけです。 $ github_scouter moongift 戦闘力: 156 攻撃力: 112 知力: 42 すばやさ: 2 # repositories (50) 1. Ruby 13 2. JavaScript 13 3. Python 4 4. CoffeeScript 2 5. Objective
Responsive Dashboard - Bootstrapベース、レスポンシブな管理画面テンプレート MOONGIFT
Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst
Concise.CSS·軽量でSASSベース、絞り込まれた機能だけを提供するフロントエンドフレームワーク MOONGIFT
ここ数年フロントエンドフレームワークが熱いです。Bootstrap、Zurb Foundationをはじめ、多種多様なフロントエンドフレームワークが登場しています。プログラマにとっては便利な反面、意外とデザイナーには好まれていないのではないでしょうか。 作法に則って記述している分には良いのですが、ちょっとでも逸脱しようとするととたんに面倒になるものが多い印象があります。その半分も機能は使われないフロントエンドフレームワークを止めて、Concise.CSSを使ってみてはいかがでしょう。 Concise.CSSの使い方 まずはConcise.CSSで作られたサイトのサンプルから。 テキストベースでもちゃんと作り込めるのが良いですね。 スクロール系のページ構成です。 ここから画面要素についてみていきます。 グリッド。 ヘッダー。 小さい文字や斜体。 引用。 住所。 文字寄せ。 背景色。 階層対応
Bootflat - フラットUIで格好いいBootstrapテーマ！ MOONGIFT
創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Ink - スマホ/タブレット対応のレスポンシブHTMLメールテンプレート MOONGIFT
これは使い勝手良さそうですよ！ ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした（Outlook ExpressがよくHTMLメールでセキュリティインシデントを起こしていたのも大きいと思いますが）。しかし海外でのサービスではHTMLメールが当たり前ですし、より多くのコンバージョンを求めるならHTMLメールを使わない手はありません。 しかしHTMLメールというと通常のHTMLと異なる作法が必要で、作成においても若干のコツがいります。それがPCメーラー、Gmail、スマートフォンとそれぞれのデバイスで適切に見られるように考えるとなるとレスポンシブWebデザイン以上に大変なことです。 そこで紹介したいのがInkです。Zurb Foundation開発元が作成した新しいレスポンシブHTMLメールテンプレートです。 サンプルです。ヘッダー、見出し、リストなどで構成されていま
Ifvisible.js - 色々な場面で役立ちそう。JavaScriptでアイドル状態、タブの状態を管理 MOONGIFT
Facebookをはじめチャット系のソフトウェアで良くあるのですが、現在のタブでチャットしていると特に何も通知は出ないのに別タブを開いていると音を出したりタイトルを変化させたりする機能があります。 あれはどうやっているのかなと思っていたのですが、Ifvisible.jsを簡単に実現できそうです。ついでに（？）操作せずに放置した場合の感知も可能です。 使い方は簡単で、ifvisible.jsを読み込むだけで良いようです。 <script src="ifvisible.js"></script> デモ。何も操作をしないとタイマーがどんどん進んでいきます。 後は指定時間（デフォルトでは60秒）放置したタイミングでidleがコールされます。 ifvisible.idle(function(){ // 何か処理 }); アイドルになりました。 アイドル状態になった後マウスを動かしたり、キー入力を行う
スマートフォン、タブレットの判別情報をHTMLに追加·Device.js MOONGIFT
Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。 iPhoneで縦の場合。デバイスの種別やOS、向きが判別できています。 横向きにすれば判定が変わります。 タブレットの場合も同様です。 HTMLソースです。htmlのクラスに追加されています。 向きを変えればhtmlのクラスがリアルタイムに変わっています。 Device.jsではOS（iOS/Android/Blackberry）、向き（縦または横）、種別（スマートフォンまたはタブレット）といった情報をHTMLタグに対して定義してくれます。これを基準にすれば処理判定がとても簡単になるでし
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
高度なファイルアップロード機能を提供·Fine Uploader MOONGIFT
Fine UploaderはJavaScript製、GPL v3のオープンソース・ソフトウェアです。 HTML5になってファイルのアップロード処理は大幅に改善されました。特にドラッグ&ドロップによるファイルアップロードは便利です。そんな機能をさらに便利にしてくれるライブラリがFine Uploaderです。 デモです。ファイルの選択またはドラッグ&ドロップでリストに追加できます。追加後、即アップデートが開始されます。 デザインの拡張性は高いです。 エラーのキャッチもできます。 拡張子によるテストにも対応しています。 画像のサムネイルビューもあります。 アップロード上限の制限に対応しています。 Fine Uploaderを使えばファイルアップロードにおける大抵のニーズには対応できるのではないでしょうか。JavaScriptで細かくカスタマイズしたり、コールバックを使って独自の仕組みを組み込む
BootsrapをGoogle+風に·Bootplus MOONGIFT
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
node.jsがなくとも使えるように。node.js製ソフトウェアをバイナリ化·nexe MOONGIFT
nexeはnode.js/JavaScript製のソフトウェア（）です。 node.jsで開発したソフトウェアを配布する際には相手にもnode.jsをインストールしてもらわなければなりません。今時点ではこれは相当な面倒な作業に感じられるでしょう。そこで使ってみたいのがネイティブソフトウェア化してくれるnexeです。 実行中です。指定したnode.jsをダウンロードしてコンパイル、そしてラッピングまでを行ってくれます。 実行結果です。約10MBのバイナリができあがります。 Webサーバであればそのまま実行するだけでサーバが立ち上がります。 もちろんブラウザからもアクセス可能です。 ソースコードです。必要なライブラリもちゃんとラッピングしてバイナリ化されます。 nexeは今のところWindows向けのバイナリ生成はできません。しかしMac OSXであれば後は簡易的なGUIを付けてアプリ化するの
クライアントサイドの全文検索エンジン·lunr.js MOONGIFT
lunr.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webサイトを運営していて、煩雑な仕組みになりがちながらも実装を考えなければならないのが全文検索エンジンです。もし作ろうとしているのがWebアプリケーションであれば、いっそのことクライアントサイドで提供してみるのはいかがでしょう。lunr.jsを使えば手軽に実現できます。 デモアプリケーションです。左上に検索ボックスがあるのが分かるかと思います。 検索はインクリメンタルに行われます。ただし全文と言ってもタグとして指定された文字だけに限定されるようです。 インデックスの作り方です。まずindexとしてフィールドを作り、その後addメソッドを使ってオブジェクトを追加していきます。 lunr.jsではテキスト処理部分を別で設ける事ができますので非英語圏では別途分かち書きを行ってインデックス化でき
Facebook製。プログラマー向けのプロジェクト管理·Phabricator MOONGIFT
PhabricatorはFacebookが開発しているプロジェクト管理です。ソースコードレビュー、バグトラッキングなど開発者フレンドリーな機能が数多くあります。 企業においてGitHubをソースコードリポジトリ/プロジェクト管理に使っているケースも増えてきていますが、大規模な企業では難しいケースも多いでしょう。そこで紹介したいのがFacebookで開発されているPhabricatorです。 最初にログインを求められます。 ついでユーザ名を入力します。 ダッシュボードです。 チケットの詳細画面です。 ソースコードレビュー。 もちろんコードハイライター付き。 リポジトリビューワー。 コミットログ。 画像付きでディスカッションもできます。 Wiki。 IRCのチャンネルリスト。 PhabricatorではGit/Subversion/Mercurialをサポートしています。また、OSはWindo
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
Google Chromeの画面をクリック一つで共有·Dead Simple Screen Sharing MOONGIFT
Dead Simple Screen SharingはGoogle Chrome機能拡張とnode.jsを組み合わせた画面共有ソフトウェアです。 画面共有を行うソフトウェア、サービスは幾つかありますがよりシンプルにWebブラウザの画面を共有できるのがDead Simple Screen Sharingです。 インストールします。 クリックするとURLが出ますので、これを共有します。 別なPCから見た場合。画像として表示されます。 しばらく待つと画面が更新されます。 Dead Simple Screen SharingはGoogle Chrome機能拡張で提供されており、Webブラウザウィンドウのスクリーンショットを随時node.js製のサーバに送信します。それを別なブラウザで受信する仕組みです。表示が重たいのが難点ですが独自サーバであれば幾分解決するかも知れません。 Dead Simple
デザインモックアップ作業で役立つ機能が詰まった·RoughDraft.js MOONGIFT
RoughDraft.jsはモックアップ構築中のデザインを高速化するためのライブラリです。 Webサイトのデザインをしていて、同じ表現を繰り返し入力するのはとても面倒です。そこでRoughDraft.jsを使って楽をしましょう。 例です。繰り返し部分の処理が簡単になります。 JavaScriptの記述もいらず簡単に使えます。 data-draft-repeatで繰り返す回数が指定できます。さらにdata-draft-imageでplacehold.itの画像を埋め込めます。その他data-draft-textで適当な文字、data-draft-dateで適当な日付を埋め込んでくれます。一つのブロックを作れば良いだけなので変更も簡単で便利に使えるでしょう。 RoughDraft.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。 MOONGIFT
ログの閲覧にWebブラウザを使える·Pupergrep MOONGIFT
PupergrepはWebブラウザ上でリアルタイムにログデータを閲覧したりGrepで検索できるソフトウェアです。 開発を行っている際にログファイルをtailして眺めているといった人は多いかと思います。しかし複数のファイルを同時に監視したり、その中から必要なものだけを抽出したり…というのは面倒です。そこでPupergrepを使ってみましょう。 Webブラウザ上でtail風にリアルタイムにログが確認できます。 ハイライト指定もできます。 機能としてはGrepによるマッチした行だけの表示、ログファイルの表示切り替え、テキスト/HTMLのサポート、ANSIカラー対応、コードを変更してのカスタマイズとなっています。Pupergrep単体で動く訳ではなく別途server.jsを記述（といってもサンプルコードあり）するので自由にカスタマイズできるのが魅力と言えそうです。 Pupergrepはnode.j
Web APIの開発に使えるモックサーバ·EasyMock Server MOONGIFT
EasyMock Serverはnode.jsで作られたWeb APIのテスト用サーバです。 最近はWeb APIを使うシステム開発が増えています。しかし常にサーバにアクセスするのは面倒なのでモックサーバを立ててみましょう。そのために使えるのがEasyMock Serverです。 立ち上げました。3000番でポートが立ち上がります。 /user/1というURLにアクセスしました。結果も返ってきます。 APIドキュメントも生成されます。 実際の裏側。指定されたURL以下にあるJSONファイルを読み込んでいます。 EasyMock Serverは予め設定ファイルを使ってルーティングの設定をします。そしてリクエストされたURLに従ってJSONファイルを受け取って、リクエストされた内容を反映しながら返却するという仕組みです。GET/POSTなどもテストでき、ドキュメントも整備されるので便利そうです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
