レスポンシブWebデザインを実現する際のベースにしたい·Proto MOONGIFT
ProtoはレスポンシブWebデザインで構築するためのWebデザインフレームワークです。 レスポンシブWebデザインを使ってWebサイトを構築していくならベースとして使ってみたいのがProtoです。Sassを使ったレスポンシブWebデザイン用のデザインフレームワークです。 サンプルです。 ブロックを追加しました。 Protoの基本要素はブロック、センター、グリッドとなっていて、デスクトップ/タブレット/スマホでクラスを指定します。さらにnot-phoneなどと指定するとスマホの場合だけ非表示にできる要素を指定できます。 ProtoはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る レスポンシブWebデザインに対して批判的な意見もありますが、個人的には今後のWebサービス開発の主軸として欠かせなくなるだろうと考えていま
ダッシュボード構築用UIライブラリ·Dashing MOONGIFT
Dashingはダッシュボード用ライブラリで、グラフを表示したり並び替えが自由にできます。 システムには必ず管理インタフェースがあります。表向き華やかでも、裏のシステムは中の人用とあって粗雑なUIであるケースが多いようです。そこで使ってみたいのがDashingです。 なんと奇麗なダッシュボード。 ドラッグアンドドロップによる配置換えも可能です。 自分の見やすいように配置を変更できます。 Dashingは数値やデータのリストを確認するのにぴったりなモダンなUIとなっています。細かなデータ管理ができる訳ではありませんが、ステータスをチェックしたりするのにぴったりです。APIが公開されているので、それにあわせてデータを配信すればDashingが華麗なUIにしてくれるはずです。 DashingはRuby製のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webサイトの表のUIが整っ
BootstrapのUIをWindows8のModern UI Style風に·BootMetro MOONGIFT
BootMetroはBootstrapをベースにWindows8のModern UI Style風にしたソフトウェアです。 ついにWindows8が発売になりました。機能的なことはもちろん、注目を集めているのはModern UI Style（旧Metro UI）でしょう。そんなUIをWeb上でBoostrapをベースに作られたのがBootMetroです。 デモサイトです。確かにWindows8 UI風です。 設定は右側に表示される仕組みです。 テーマを変更できます。 メニューは左側。 グリッド表示。 正方形のタイル表示。 テーブル。 Bootstrapの各種JavaScriptライブラリにも対応しています。 タブ表示。 追加機能は下に表示されます。 アイコンは多数用意されています。 BootMetroはBootstrapの機能性、汎用性の高さとModern UI Styleのシンプルな表示
テキストベースのシンプルなプロジェクト管理·Projector MOONGIFT
Projectorはテキストファイルベース、HTMLファイルの存在有無でタスクのステータスを管理するプロジェクト管理です。 プロジェクト管理の肝はタスク管理にあります。タスクのステータスさえ適切に管理できれば問題はないとさえ言えます。 プライオリティの優先度によって3つのタブに分かれて表示されています。 クリックで指定されたURLが開きます。 他のプライオリティにもアクセスできます。 こちらが設定ファイル。 ファイルの有無によってプライオリティが変わっているようです。デザイン状況などを管理するのに良さそうです。設定ファイルには単にタスクを並べておくだけなので簡単に使えます。更新はファイルベースなので手間もなくすぐに使えるようになるでしょう。 ProjectorはHTML/JavaScript製のオープンソース・ソフトウェア（Apache License 2.0）です。 MOONGIFTはこ
多数のプログラミング言語に対応したエラー管理システム·Sentry MOONGIFT
Sentryはシステムのエラーを集約して管理するソフトウェアです。 システムで問題が起こった時にどのように対応すればいいでしょうか。まずそのデータを収集し、管理できる状態する必要があります。そのためのライブラリがSentryです。 サイトのトップです。 新規プロジェクトを作成します。 そうするとURLが生成されます。これが重要です。 後はRuby/Python/PHP/JavaScriptなどでAPIをコールします。 プロジェクトの詳細画面です。 プロジェクトのダッシュボードです。ここにアクションのログが出ます。 こちらは公式サイトのスクリーンショット。 グラフです。 Sentryは様々なプログラミング言語向けにライブラリを提供しています。Web APIもあるので任意のプログラミング言語で組み込むこともできるでしょう。エラーをトレースして飛ばせば良いだけです。後はその回数によって優先順位が
静的なサイトにも使えるコメントシステム·talkatv MOONGIFT
talkatvは任意のWebサイトにコメント機能を提供するソフトウェアです。 Webサイトを作る場合、データベースを必要とするケースが増えています。しかし工夫すれば静的なHTMLの中に動的な部分を組み込むことだって難しくありません。もしコメント機能が欲しければtalkatvを使ってみましょう。 埋め込んだ例です。右側にあるのがtalkatvです。 ログインするとコメント入力欄が出ます。 コメントしました。日本語が使えます。 返信をするとインデントされていきます。 talkatvはログイン必須のコメントシステムを動的に提供します。ログインはID/パスワードの他、OpenIDを使うことも可能です。コメントは一番上に追加され、返信するとインデントされてスレッドとして管理されます。コメントは何段にも返信できます。 talkatvはPython製のオープンソース・ソフトウェア（GNU Affero
品質高いJavaScriptアニメーションライブラリ·BonsaiJS MOONGIFT
BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。
タスクのステータスを見える化·かんばんりすと MOONGIFT
かんばんりすとはカンバン方式におけるカンバンボードをオンラインで実現するソフトウェアです。 トヨタの生産方式として名高いカンバン。様々なプロジェクト管理、生産管理などでその名が聞かれます。今回紹介するかんばんりすともまた、カンバン方式（のカンバンボード）をオンラインで実現するためのソフトウェアになります。 メイン画面です。Todo、Doing、Waiting、Doneの4つの枠があります。 Booksはカテゴリとして使えます。 Booksを選ぶとリストがフィルタリングされます。 編集はその場でできます。 プライオリティの変更や状況の変更はドラッグアンドドロップで行います。 タスクの実行履歴です。 かんばんりすとではタスクリストに枠を設けてそのステータスに従って状況を見える化しています。誰がどのタスクを行っているか、何が終わって何が終わっていないかが一元管理できるのが便利です。 かんばんりす
大型プロジェクトにも対応する時間管理機能付きプロジェクト管理·todoyu MOONGIFT
todoyuはタスク、時間管理、カレンダーといった機能が備わったWebベースのプロジェクト管理ソフトウェアです。 企業においては複数のプロジェクトが同時に進行するなんてのはざらです。そして一人が複数のプロジェクトにまたがって活動しているケースも多々あります。そこで使ってみたいのが大型なプロジェクト管理、todoyuです。 管理者としてログインしています。 プロジェクト詳細です。 カレンダー（月表示）です。 連絡先です。 帳票管理です。 こちらはメンバーとしてログインしています。Todoやタイムトラッキングが表示されているのが特徴です。 タイムトラッキングはその場で修正できます。 フィードバックの一覧です。 主な機能はプロジェクト管理、タイムトラッキング、カレンダー、レポート、請求書、タスク管理、コンタクト管理となっています。UIが特徴的なので最初に慣れるまでは時間がかかるかも知れません。管
凄い。JavaScript上で動作するLisp·Javathcript MOONGIFT
JavathcriptはJavaScript上で簡単なLispを実行するプロジェクトです。 最近、Webブラウザ上でJavaScript以外の言語を動かそうとするプロジェクトが熱くなっています。DartやCoffeeScript、Ruby、PHPなどがありますがそこに新しい仲間の登場です。JavathcriptはJavaScriptで実装されたLispエンジンです。 デモコードです。 実行結果です。 Canvasを使うデモです。 Emacsに慣れ親しんでいる人であればしょっちゅう目にする言語と思われますが、括弧が多く特徴的なので最初はとっつきが悪く感じるかも知れません。関数、スコープ、文字列、数字、オブジェクト、Lisp in Lisp、グラフィックスの描画といった機能があります。 JavathcriptはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明
シンプルで格好いい。親切なコードレビューシステム·Barkeep MOONGIFT
BarkeepはGitリポジトリに対応したユーザビリティ高いコードレビューシステムです。 会社でプログラミングを行っているとそのコードの品質はばらつきが出てきます。そうするとバグが多くなったり、予期しない問題に直面したりします。それを防ぐのに有効なのがコードレビューです。Barkeepはユーザフレンドリーなコードレビューシステムになっています。 メイン画面です。コミットログが並んでいます。 詳細です。差分が表示されています。 サイドバイサイド。アニメーションしながら表示されて格好いいです。 コードをダブルクリックするとコメントできます。 コメントしました。 一つにまとまっている場合もコメントできます。 レビュー依頼もできます。 ステータスです。レビューされている、されていないといった情報が一目で分かります。 検索結果です。 こちらはプロフィール。 Barkeepは検索における入力補完やフィ
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
すっきりとしたデザインが特徴。高機能なWYSIWYGエディタ·Redactor MOONGIFT
RedactorはjQuery製のWYSIWYGエディターです。 Web上でテキストコンテンツを記述する際には素のテキストエリアではなくWYSIWYGエディタを使いたいのではないでしょうか。そこで試したいのがRedactorです。jQueryを使ったすっきりしたデザインのWYSIWYGエディタです。 一行のツールバー、画像埋め込みにも対応していてすっきりとしています。関係ありませんがアナ・トーヴ（フリンジの主役で写真の方）は好きな女優さんです。 画像はプロパティを編集できます。 右側に寄せました。右でも左でもアナ・トーヴは映えますね。 全画面表示。大きくしてもやはりアナ・トーヴは格好いいです。 動画の埋め込みはEmbedタグのペーストで行えます。 コード表示モードです。 スクロールした時にツールバーを上に貼付けた状態で維持できます。 独自のCSSを追加できます。 テキストエリアがなかったと
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
ホットなコードはどっち？·Gistlicious MOONGIFT
Gistliciousはプログラミングコードのどちらが格好いいか選択していくWebサービスです。 Facebookの物語を映画にしたソーシャル・ネットワークではFacemashというどちらの女性がホットかを選択していくサービスが登場しました。しかしプログラマーなら人の顔に興味をもっても意味がありません。大事なのはデジタル、コードです。プログラマー向けのFacemash、それがGistliciousです。 トップページです。どっちをフォークしたい？なんて美しいコードを選ばざるを得ません。 トップリストです。つまり美しいコードが並んでいるということです。うっとり。 GistliciousではGist.GitHubのデータを使って比較を行っています。長いもの、短いものなど、言語も様々、自分が得意としている言語は何か…そういった諸々を含めた上でどちらがクールかを選択してみましょう。 Gistlic
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
試してみよう。Webベースのドローアプリケーション·Stylo MOONGIFT
StyloはWebベースのドローアプリケーションです。データの保存はできませんが、多機能です。 ドローという技術は応用範囲がとても広いです。IllustratorやFireworks、さらにVisioなどもドローソフトウェアと言えます。そんなドローをWebベースで再現するソフトウェアがStyloです。 四角を配置してみました。 日本語も問題ありません。 テキスト枠を追加。 枠の形を変えてみました。半径を入れるだけの簡単操作です。 色の変更はプロパティから。透明度も設定できます。 半透明のもの同士を重ねると重なった部分の色合いが変わります。 Styloはまるでローカルソフトウェアのような使い勝手を提供します。特にオブジェクトをドラッグした時に自動で補助線が出てスナップできるのは便利です。さらにキーボードショートカットやコンテクストメニューを使った重なり順の指定ができます。データの保存は今のと
インストーラーで簡単セットアップのWebベースPostgreSQL管理·TeamPostgreSQL MOONGIFT
TeamPostgreSQLはWebベースのPostgreSQLマネージャです。 企業でのシステム開発にPostgreSQLを利用されている方々にお勧めなのがTeamPostgreSQLです。セットアップが簡単ですぐに使えるWebベースのPostgreSQL管理ソフトウェアです。 インストーラーが付属しています。 接続しました。 テーブルデータを閲覧しています。 リレーションデータはクリックでたどれるようになっています。 編集機能です。この場合もリレーションがあればデータは選択式になります。 カラムを非表示にして必要な部分だけを見やすく出来ます。 ファンクションの一覧です。 新しいファンクションを作成できます。 トリガーの一覧です。 トリガーも新規作成できます。 ユーザを作成できます。 プロセスの一覧です。 SQLファイルをインポートできます。 新しいテーブルを作成する画面です。 他のデー
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
自社に立てよう。クールでモダンなGitリポジトリビューワー·GitList MOONGIFT
GitListはGithubライクなGitリポジトリビューワーです。 Githubのリポジトリビューワーは日々進化しており、かなり格好いいと思うのですが、Githubにリポジトリがないと見られません（当たり前ですが）。しかしGitListを使えばあれに似たUIでリポジトリを閲覧できるようになります。 インデックスです。 リポジトリの中に入りました。ディレクトリブラウザになっています。 テキストコンテンツは内容が閲覧できます。 バイナリの場合はRawをクリックします。 コミット一覧です。 コミット詳細です。Diffも奇麗です。 解析結果です。拡張子ごとのファイル数も見られます。 フィード機能があります。 GitListは複数のリポジトリ、ブランチ、タグのサポート、コミットログ、差分表示、拡張子ごとのシンタックスハイライト表示、リポジトリ解析、フィード配信と言った機能があります。GitHubラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
