CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ

StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。 Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。 インストールします。 デモです。右側にスタイルシート、左側にその説明が表示されています。 HTMLのコーディング方法と、その結果とかが上下に並んで表示されます。 リスト表示などもあります。 スマートフォンの幅に指定することもできます。 レスポンシブWebデザインの場合は便利そうです。 Bootstrapで作られたデモもあります。 ボタンのデザイン。こうやって表示されると分かりやすいですね。 StyleDoccoを使うとCSSファイル中に書いた設定の使い方をそのままドキュメントにできるようになります。書き方と実際に適用した結果が分かれば、Webデザイナーの

HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応

don-gabachoはGAE/Jによるオープンソース・ソフトウェア。基幹システムにおける最大の目的は帳票の出力にある。なのでシステムを開発する際には帳票へ出力する項目や他システムへ受け渡す項目から考えると分かりやすい（個人的な経験として）。 出力された帳票 しかし帳票を出力するシステムを考えるとなると話は違う。特にWebシステムは帳票出力が苦手だ。通常のHTMLやテキストファイルを出力するのに比べると異なるライブラリが必要になったりする。そこで試したいのがdon-gabachoだ。 don-gabachoは名前はユニークだが、その実態は有益な帳票出力システムとなっている。自分で帳票の設計が可能で、さらに項目を設定することで出力される値を任意に変更ができる。生成された帳票はExcelファイルとしてダウンロードができる。 入力画面 PDFではないが、Excelの方が細かな調整もできるので便利

業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと

完成形を見てしまった気がする。それくらいできが良い。 これまでWikiエンジンを幾つも紹介してきた。もちろん、機能面ではもの凄く充実しているものも数多い。だが、使い勝手や初期状態での機能等を考えると、これがまさに完成系と言えるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはMindTouch Deki Wiki、エンタープライズ向けのWikiエンジンだ。 欠点がなさすぎる。日本語はもちろんOK、Ajaxを使って遷移の少ない作り、履歴管理＋差分表示にももちろん対応している。編集はWYSIWYGなテキストエリアでできる。 ヘッダを作れば、その中だけで編集できる。画像をアップロードして、埋め込むのも簡単。ページの階層管理もできて、タグも使える。ウォッチリストに登録、コメントをする、RSS配信など何でもござれだ。 さらに多言語対応、Google Analyticsを埋め込めるなどな

※ 画像は公式サイトより これは面白い！ Amazonの強さは物流システムやECサイトの使い勝手などもあるが、完全なコンピュータベースでのリコメンデーションにもその一因がある。ユーザの行動履歴を全て補足し、そのユーザにあった商品を提案することで購入につなげるシステムだ。 デモアプリケーション。記事を選択すると、別な記事を提案する これは何もECサイトに限らず、最近でははてなブックマークでも関連記事を載せるようになっている。ニーズの連結をはかることで、さらにユーザをつなぎ止めておくことができるようになる。 今回紹介するオープンソース・ソフトウェアはRichContext、オープンソースのリコメンデーションエンジンだ。なおライセンスはApacheライセンスをベースにしているが、修正して独自のライセンスになっているのでご注意いただきたい。 RichContextは専用のアプリケーションサーバを介

画像編集と言えばPhotoshopが真っ先に挙がるだろう。高度な編集も容易にこなす、素晴らしいソフトウェアだ。だが高い、個人レベルではとても購入して使おうという気になれない。そこで代替えとして挙げられるのがGIMPだ。 GIMPを使い勝手よく！ GIMPはオープンソースであり、無償で利用できる。だがインタフェースがこなれていない（玄人向け？）なので、一般ユーザには取っ付きが悪かった。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはGimPhoto、GIMPをPhotoshop風にして使い勝手を良くしたソフトウェアだ。 GimPhotoはGimPadというソフトウェアと組み合わせて利用する。GimPadはGIMP for WindowsをMIDウィンドウ対応にするソフトウェアだ。これだけでも随分使い勝手が良くなる。また、Windows風やVista風とい

いくらバージョン管理のシステムを導入していたとしても、多人数で開発を行っていると意図しない更新や修正によってバグを埋め込んでしまうと言ったケースがある。そのためソースコードのレビューを定期的に行うのが重要だ。 修正したファイル一覧 作業中のソースにおいて何が変わっているのか、それを皆で確認できるのがこちらのシステムだ。 今回紹介するオープンソース・ソフトウェアはReviewMonk、ソースコードレビューシステムだ。 ReviewMonkはRuby on Rails製のソフトウェアで、WebベースのSubversionフロントエンドとも言えるソフトウェアだ。ワーキングコピーのあるディレクトリの一つ上のディレクトリを指定することで複数のワーキングコピーを扱うことができる。 差分表示。任意のリビジョンを比較できる そしてコードの修正されたものを一覧し、Diffを表示することができる。内部のワーキ

出かけるとき、旅行に行くとき、現地の情報を知りたいとき…様々な場面で地図が利用される。インターネットを使って地図を見る際に良く利用されるのがGoogleマップだと思うが、これの印刷機能はあまり性能がよくない。ちょうど良い場所がうまく印刷範囲にならず、縮小すると細かい道や建物が消えてしまう。 設定画面 そこで使ってみたいのがこれだ。一気に大きな範囲を一つの画像にして保存してしまうのだ。 今回紹介するオープンソース・ソフトウェアはMap Grabber、Googleマップ用ユーティリティだ。 Map Grabberはマウスを自動操作して、指定した範囲（Googleマップ上の左上から右下まで）を連続してスクリーンショットを撮るソフトウェアだ。Googleマップ自体は分割された写真が組み合わさったものなので、この方法が有効なのだ。 地図を自動スクロールしてスクリーンショットを撮っていく はじめに画

大きな事業を行っている訳でもないので、一ヶ月に出す請求書はそれほど多くない。小〜中規模な開発会社でも実際に請求書を出す先というのは多くないことが殆どで、そのためにシステム化されていない会社も多い（他社のためにはシステムを構築しておきながら…）。 ダッシュボード 筆者自身も同様で、そのために使い勝手の良い請求書システムはないものかと思っていた。日本語はうまく扱えないが、これは未来が期待できそうなソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはSimple Invoices、Webベースの請求書作成システムだ。 Simple Invoicesを使えば各国に対応した請求書を作成できるようになる。税金の入力にも対応し、請求書のフォーマットを細かに制御することもできる。UTF-8なので日本語の入力は可能だが、PDFを生成すると文字化けてしまった。これはフォントを適当に設定すれば対応できる

※ 画像は公式サイトより グループウェアと言うと、少なくとも数十名くらいからの情報共有ツールになるだろう。だが中小企業はもちろん、数名からなるプロジェクトチームでは大げさになってしまう。 ダッシュボード そこで小さなグループでも活用できるコラボレーションツールを紹介しよう。 今回紹介するオープンソース・ソフトウェアはJoyent Connector、同名Webサービスのシステムだ。 Joyent Connectorはスモールビジネスにおける情報共有、コラボレーションをコンセプトに開発されているソフトウェアで、カレンダー、メール、アドレス帳、ファイル、ブックマーク、タスクと言った機能が揃っている。 カレンダー いずれの機能もアイコンとサイドバーを組み合わせて容易に操作できるようになっている。バージョン管理（Subversion）やLDAPとの連携機能もあり、既存のシステムと連携させるのも可能

アクセス解析からは様々な情報が読み取れる。これを無視してサイト改善はあり得ない。だが、取れる情報は断片的なものだけで、実際にユーザがどういったアクションを起こしているのかは仮説を立てて検証していくしかない。 MOONGIFTのヒートマップ その仮説に役立てるのに便利なソフトウェアがこれだ。 今回紹介するオープンソース・ソフトウェアはClickHeat、クリックされた場所をビジュアル化するアクセス解析ソフトウェアだ。 これは面白い。ClickHeatから生成されるJavaScriptのコードをサイトに埋め込んでおき、しばらくするとサイトのスクリーンショットをバックグラウンドに、クリックされた場所がポイントとして表示される。 JavaScript生成画面 何度もクリックされる場所があると、そこがさらに色濃くなっていく。青から赤へと、まるで炎の温度やサーモグラフィのようだ（なのでヒートマップなの