Zurb FoundationはWebデザインテンプレートです。記法に則ってデザインすることで様々なデバイスに対応したWebサイトが作成できます。 一定の記法に則って書くだけで様々なデバイスに対応したWebデザインを行ってくれるのがZurb Foundationです。Zurb Foundationを使って格好いいWebサイトを量産しましょう！ ボタンです。ただ普通に書くだけでこんなデザインに。 フォームです。エラー時も含めて格好いいです。 ブロックです。細かく制御できます。 メッセージ系もちゃんとカバーされています。 タブ表示も可能です。 上にラインを引いたNice Tabも。 もちろんページネーションもあります。 スライドで画像を差し替えるコンポーネントも用意されています。 上からスライドで下りてくるダイアログ。ログインやメッセージに使えます。 Rails3.1向けにRubygemsも用

ThinReportsはマルチプラットフォームで動作するエディタを含んだPDF出力の帳票作成ソフトウェアです。 Webシステムで帳票周りに悩まれている方に朗報です。ThinReportsは日本製、かつGUIのエディタまで含めた帳票ソフトウェアになります。 エディタです。Windows/Mac OSX/Linux版があります。 新しい帳票を作成します。 テキストボックスを配置してプログラムから入力内容を変更できます。 一覧表系も追加できます。自動改ページもあります。 定義をHTML保存することもできます。 HTMLの定義書です。 こういう情報は受託開発などで役立ちそうです。 コードのサンプルです。作成したレイアウトファイルを読み込んで、値を変更しつつ最後にPDFファイルを指定して保存しています。 Rubygemsを使ってThinReportsをインストールします。 先ほどのコードを実行すると

JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保

Siruca Pictogramsはアイコンをフォント化しています。多数のアイコンが用意されておりユーザの認知を助けます。 Webサイトにも良くあるアイコン。しかし真のアイコンとは色がなくとも、造形がシンプルであってもそれと分かるくらいに分かりやすくあるべきです。Siruca Pictogramsはまさにそんなアイコンの詰まったフォントになっています。 これがSiruca Pictogramsのオープンソース版になります。 他にも色々なアイコンがあります。 例えばこんな使い方が（文字は付属しません）。 Siruca Pictogramsというフォントは例えばゴミ箱や看板などに文字をプリントして、さらにそのためのアイコン（ゴミ箱アイコンなど）をつけるのに適したフォントになっています。そのため、区切りができていて大きく印刷して印刷部分を切り抜いて、上からスプレーするといった利用法を提案していま

GhostEditはリボン風UIをもったWebベースのWYSIWYGエディタです。 GhostEditは新規性あるWebベースのWYSIWYGエディターです。ボタンなどが大きくデザインされており、リボン風UIが使い勝手が良いです。 デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。 画像の配置換えです。画像の上に矢印が出るので押すだけです。これが格好いい。 テキスト変更だけでなく、画像やリンクの挿入もできます。 リンクの上にマウスを置くと削除のフローティングが出ます。 保存機能もあります。 GhostEditに関する説明です。 GhostEditは周囲のコンテンツに馴染む形で作られており、これまでのWYSIWYGエディタとは一線を画しているように見えます。機能は他のエディタに比べると決して多くはありませんが必要最低限は用意されています。対応ブラウザはIE 6以

BootswatchはTwitterのBootstrapテーマエディターです。 BootswatchはTwitterの開発したBootstrapをLESSにし、それらを容易にカスタマイズできるようにしたソフトウェアです。テーマのように色合いを変えて様々なWebサイトに適用できるようにします。 Bootswatchのトップページ。これもまたBootstrapで作られています。 作成されたテーマの一つ、Slate。 Cerulean。 Cyborg。 Journal。 Simplex。 Spacelab。 2階層のメニューになっています。 United。 Bootswatchの手順としては、Bootstrapのソースコードをダウンロードして設置します。次にvariables.lessとbootswatch.lessを修正します。もしLESSがない場合はインストールします。修正が終わったらmak

Bootstrap-wysihtml5はTwitter Bootstrapで使えるWYSIWYGエディタです。 最近よく目にするようになったTwitter Bootstrapを使ったWebサイト。そんなWebサイトでWYSIWYGエディタを使うならば導入したいのがBootstrap-wysihtml5です。 Bootstrapらしい、すっきりとしたUIです。 漢字を変換した後の動きがちょっと妙です。 テキストのヘッダー変換があります。 リストや装飾もあります。 Bootstrap-wysihtml5は現時点では日本語を入力する際の変換処理を行った後、表示がずれてしまうことがあります。しかしそれさえ修正すればBootstrapとマッチしたデザインで利用できる場面が多いのではないでしょうか。 Bootstrap-wysihtml5はHTML5/JavaScript製、GPLのオープンソース・ソ

DaDaBIKはPHPを使ったDBアプリケーション作成ソフトウェアです。 DaDaBIKはPHP+MySQLまたはPostgreSQLで簡単にWebデータベースアプリケーションが開発できるソフトウェアです。 ログインします。 ドロップダウンにテーブル名、その下にデータが表示されています。 データは一行単位で編集できます。 データ追加も同じ画面です。 検索機能もあります。 ファイルを保存することもできます。 ファイルがついている場合は編集画面にアップロードが追加されます。 デモ動画 DaDaBIKでは管理画面を使ってテーブルを定義したり、入力方法の設定を行うようになっています。サブクエリーなどはできませんが、データのシンプルな蓄積には使えそうです。 DaDaBIKはPHP製、GPLのオープンソース・ソフトウェアです。 MOONGIFTはこう見る データベースのメンテナンスで言えばphpMyA

KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML

envisionはHTML5/JavaScriptによるグラフライブラリです。ファイナンス系グラフ、フラクタルグラフを描けます。 HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウスで幅を広げたりできます。 ファイナンス。株価、出来高といった指標を表示するのに使えます。 こちらも幅を変更できます。 中央をドラッグすれば左右への移動も可能です。 マウスでポイントにおける数値を表示できます。Ajaxによるデータ変更もサポートしています。 幅の変更ももちろん可能です。 フラクタル画像です。 マウスで範囲を指定して拡大できます。 envisionはHTML5のラ

Bookytはドイツ製の会計システムです。入金、支払を基本としたデータ管理ができます。 日本で会計システムというと弥生会計やスマイルαなどが思い当たりますが、もっとシンプルに単に売掛、支払が管理できれば良いというのであれば試してほしいのがBookytです。ドイツ製の会計システムです。 ログイン画面です。 ログインしました。こちらがダッシュボードになります。 メンバーの一覧です。 予約登録画面です。 時間などを登録した後、さらに詳細を入力します。 給与の一覧です。 プロジェクト登録画面です。 Bookytでは支払、入金の管理はもちろん、クライアント管理、ベンダー管理、給与管理、シンプルな時間管理機能が備わっています。その他、検索や予約システム、請求書や給与明細のカスタマイズテンプレートによる出力に対応しています。 BookytはRuby/Ruby on Rails製、GNU Affero G

OnzenはJava製のリポジトリ管理ソフトウェアです。CVS/SVN/HG/GITに対応しています。 最近ではGitの企業利用も進んでいますが、既存のリポジトリまでは動かさずにそのままという所も多いのではないでしょうか。そこで混在するリポジトリのフロントエンドにOnzenを使ってみてはいかがでしょう。 最初にリポジトリを設定します。 CVS/SVN/HG/GITに対応しています。新規作成の他、既存のリポジトリを指定することもできます。 GITリポジトリを表示しています。 コミットログです。 DIFF機能もありますが日本語は文字化けてしまうようです。 設定画面です。 Onzenはファイルの追加、削除、更新などはもちろん、差分表示にも対応しています。またMimeTypeごとの編集ソフトウェアを指定できるのでプログラミングエディタなどとの連携も容易です。変更したファイルだけの一覧も出せます。