YubinBango - 郵便番号検索の決定版
郵便番号検索は多くのWebサイトで実装されています。しかし使い勝手の良いところは限られます。ポップアップが出たり、画面全体を再読込したりするものは、とても使い勝手が良いとは言えません。 今回紹介するYubinBangoは郵便番号検索のユーザビリティを極めたソフトウェアです。 YubinBangoの使い方 デモです。郵便番号を入力するとすぐに住所が反映されます。コードは1行も書きません。 分割することもできます。こちらもまた、コードは不要です。 YubinBangoはJavaScriptファイルを読み込むだけ、後はクラス名を指定して反映される内容を決めるだけで使えます。データは郵便局の提供するデータを自動で反映しているとのことで、市区町村の統廃合も問題ありません。 YubinBangoはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 YubinBango
Vertical Timeline - 縦型年表を作成するjQueryプラグイン
情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。 そんな縦型年表を容易に作成できるのがVertical Timelineになります。 Vertical Timelineの使い方 デフォルトの表示です。 日付を表示するデモ。 開始を右側からに。 左寄せ。吹き出しなし。 レスポンシブデザインも対応しています。 Vertical Timelineを使えばサービスの遍歴など、過去の歴史を振り返るような表示が簡単に作れるようになります。普段から使うようなデザインではないので、メモリアル的な部分に用いると良さそうです。 Vertical TimelineはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）で
clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT
Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに
Bootstrap Material - Material Designを適用したBootstrapテーマ
Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。 Bootstrap Materialの使い方 Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。 Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア（ライセンスは独自
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
サーバサイドの開発不要。Webブラウザを使ったデジタルサイネージ·WINT MOONGIFT
WINTはJavaScriptを使うデジタルサイネージシステムです。 駅やビル内にある大型スクリーンに映し出される広告、いわゆるデジタルサイネージはシステム化もその配信システムも複雑なものに感じられますがWINTを使うとサーバとブラウザだけで簡単に組み上げることができます。 読み込み中。コンテンツ部とニュース部の二つに分かれているのが特徴です。 HTMLコンテンツを表示している例。 画像を表示している例。 WINTは予め用意してあるJSONファイルを読み込み、指定した時間ごとにコンテンツを切り替えながら表示します。Webブラウザだけあれば動くのに加えて、JavaScriptだけで作られているのでサーバサイドの複雑な仕組みは一切不要で動かせるのが利点です。 WINTはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザ
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
CakePHPをベースにしたCMS·Croogo MOONGIFT
CroogoはPHP/CakePHP製のオープンソース・ソフトウェア。Railsライクな開発ができるという特徴で日本でも人気が高いPHPフレームワークがCakePHPだ。フレームワークを用いることで、余計な設定や開発者ごとの癖をある程度吸収できる。何より開発が素早くなる。 ユーザ画面 さらにその特徴を際立たせてくれそうなのがCroogoだ。CroogoはCakePHPを使って構築されているCMSだ。そのまま使うのはもちろんのこと、CakePHPを習得されている方であればカスタマイズも容易だろう。つまりCroogoをベースにさらに開発を素早くすることができるのだ。 Croogoはユーザ画面と管理画面に分かれて提供される。コンテンツ、メニュー、ブロック、メディア、コンタクトフォーム、ユーザ、テーマ、システム設定が主な機能になる。後は自分で自由に機能を追加すれば良い。もちろんCroogoの書き方
MOONGIFT: » Mac OSX向けの洗練されたSubversionフロントエンド「Versions」:オープンソースを毎日紹介
開発時にバージョン管理システムを導入することによるメリットは言うに及ばないが、それはプログラマのみならずデザイナーにとっても同様だ。だが、バージョン管理をデザイナーまで普及させるのは非常に困難だ。 メイン画面 やはりインタフェースが鍵を握っている。使い勝手の良い、分かりやすいインタフェースのバージョン管理システムがあれば利用してくれる可能性はありそうだ。 今回紹介するフリーウェアはVersions、Mac OSX向けのSubversionフロントエンドだ。 Versionsは既存のワーキングコピーも簡単に登録でき、HTTP/SSH/SVNプロトコルに対応してリポジトリを登録することができる。何よりファイルの一覧やログの閲覧などが分かりやすいインタフェースでできる点が便利だ。 比較の確認画面 また、ファイルを選択してDiffを表示したり（DiffはFileMergeを利用）、履歴をするのがボ
MOONGIFT: » 必見！怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
これまで多数のCMSを見てきたが、ここまで完成度が高いと言えるものに出会ったことはなかった…そう言えるくらい凄い。このどきどき感はDekiWikiに触れた時に感じたものに近い。 見たまま編集できるCMS CMSと言えば、ユーザ画面と管理画面に分かれていて、管理画面はモジュールやテーマの設定、各項目の並びを指定するのが通常だ。実際の出力結果はシステム任せで、その点が柔軟性に欠ける点でもあった。 しかしこれは違う。見たまま編集でき、さらに高い柔軟性を維持している。 今回紹介するオープンソース・ソフトウェアはconcrete5、デザイン、管理、コンテンツ作成全てが高度なCMSだ。 相当個人的な感情が入ってしまっているのは、同じようなシステムを構築する予定があったからだ。だがconcrete5は完成度も高く、多少の改造さえ施せば十分な気がする。やはり下手に開発コストをかけるよりもオープンソースで探
MOONGIFT: » Webサービスを手軽に高速化「PHP SPEEDY」:オープンソースを毎日紹介
Webサービスを高速化する方法は各種存在する。例えばコネクションをできるだけなくしたり、キャッシュを有効にしたりと言った具合だ。様々な手法を順番に施していって、最も自分のサービスにあったものを選択していくのが筋なのだが、それは時間と根気のいる作業だ。 まず、一般的な手法を適用したときにどれだけ効率化されるのか、またはどれだけ手軽に高速化できるのか試せるソフトウェアがこれだ。 今回紹介するフリーウェアはPHP SPEEDY、PHPで作られたWebサービスを高速化するソフトウェアだ。PHPとあって、ソースは公開されているが特にライセンスは明記されていないのでご注意いただきたい。 PHP SPEEDYでは出力される内容を取得し、最適化してから出力するソフトウェアになる。例えば複数のJavaScriptファイルは全て連結して出力したり、CSSファイルの改行をなくしてキャッシュ情報を埋め込んで出力し
MOONGIFT: � WordPressをフォーラムに「bbPress」:オープンソースを毎日紹介
ブログソフトウェアは本来、ブログのみ可能なシステムと言う位置づけだった。が、その柔軟性や書きやすさ、プラグインによる拡張などが伴って、徐々にその利用範囲を拡大していった。 今ではブログでEコマースなんてサービスもある。そしてこちらはブログでフォーラムだ。 今回紹介するオープンソース・ソフトウェアはbbPress、WordPressをフォーラムに特化させたソフトウェアだ。 もはや殆どWordPressの面影はない。ポストによってフォーラムが作られ、そこにコメントする形になっている。確かにベースがブログになっていると言えなくともない。 管理画面はWordPressのものに近い。が、不要な機能は表示されていない。まさにフォーラムに特化している。 ブログシステムがCMSと同列に扱われるのと同じように、ブログシステムがフレームワークとして活用されている。システムの柔軟性を考えると、これはこれで面白い
MOONGIFT: » 文句なしのWiki「MindTouch Deki Wiki」:オープンソースを毎日紹介
完成形を見てしまった気がする。それくらいできが良い。 これまでWikiエンジンを幾つも紹介してきた。もちろん、機能面ではもの凄く充実しているものも数多い。だが、使い勝手や初期状態での機能等を考えると、これがまさに完成系と言えるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはMindTouch Deki Wiki、エンタープライズ向けのWikiエンジンだ。 欠点がなさすぎる。日本語はもちろんOK、Ajaxを使って遷移の少ない作り、履歴管理＋差分表示にももちろん対応している。編集はWYSIWYGなテキストエリアでできる。 ヘッダを作れば、その中だけで編集できる。画像をアップロードして、埋め込むのも簡単。ページの階層管理もできて、タグも使える。ウォッチリストに登録、コメントをする、RSS配信など何でもござれだ。 さらに多言語対応、Google Analyticsを埋め込めるなどな
Radiantを元にしたPHPのCMS·Frog MOONGIFT
Ruby on Railsで作られたCMS、Radiant。洗練されたフォームで、シンプルながら使い勝手が良いのが特徴だ。使ってみたいと思った人も多いのではないだろうか。 だが、カスタマイズを行おうと思うとRubyの習得が必須になる。それが障壁になってしまっているならば、RadiantのPHP版とも言えるこちらはどうだろう。 今回紹介するオープンソース・ソフトウェアはFrog、Radiantを元にしたCMSだ。 Frogは元の名前をphpRadiantと付けられていた。その名の通り、RadiantのPHP版を目指したソフトウェアだ。実際、操作性は非常に良い。 シンプルながらAjaxやJavaScriptを多用して使い勝手が良い。項目の移動はドラッグアンドドロップで可能だ。ユーザ管理もシンプルに仕上がっている。 ページの構成はレイアウト、スニペット（テンプレート）、コンテンツに分かれている。
MOONGIFT: » GUIのようなWebアプリケーションを構築「Rialto」:オープンソースを毎日紹介
最近の流行はやはりWebアプリケーションだ。特にWeb OSをはじめとして、まるでGUIアプリケーションのようなインタフェースを実現したものが増えている。 あのようなアプリケーションを作るのは非常に手間がかかることだろう。だが、そのためのツールキットも登場している。これを使えば簡単に優れたインタフェース、操作性を実現できる。 今回紹介するオープンソース・ソフトウェアはRialto、各種言語に対応したWeb用GUIツールキットだ。 RialtoはまるでGUIアプリケーションさながらのコンポーネントが提供している。ツリーメニュー、ドラッグで動かせるウィンドウ、フレーム、タブメニュー、グリッド、カレンダー等だ。 ウィンドウ一つにしても、平行、垂直にしか動かせないようにしたり、グリッドを表示したりと細かく制御できる。これらのライブラリがPHP、.NET、Python、JSF、Taglib、GWT向
MOONGIFT: » XHTMLにも対応したWYSIWYGエディタ「Whizzywig」:オープンソースを毎日紹介
※ 画像は公式サイトデモより。 テキストエリアをHTMLオーサリングツール風にするソフトウェアは各種存在する。有名なものとしてはFCKEditorやSPAW Editor、Xinhaなどがある。 この手のソフトウェアの難点として、HTML構造は汚い事が多かった。XHTML Validなサイトを作っている場合はこれを使ってみる事をお勧めする。 今回紹介するフリーウェアはWhizzywig、Webベースのリッチテキストエディタだ。 Whizzywigは各種文字装飾をボタンを押すだけで簡単にできる。画像挿入（アップロードには未対応）、テーブル組もできる。日本語はまだだが、多言語対応も想定されている。 そして最大の特徴とも言えるのがXHTML Validなソースを作成できる点だろう。イメージタグも<img 〜 />のようになる。また、独自のCSSを認識させる事もできるので、見栄えと照らし合わせなが
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
