コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。 そんなファミコン風のUIをWeb上で再現できるのがNES.cssです。懐かしさの中に楽しさを感じる、スタイルシートです。 NES.cssの使い方 ボタンやコンテナの表示。それっぽいデザインですね。 ラジオ。まるで戦うや逃げるといった選択肢を選ぶような…。 チェックボックス。ごつごつしたドット絵風の表示がいいですね。 入力系。主人公の名前を入れるやつですね。 メッセージ。ノスタルジックなチャットが作れそうです。 テーブル。何の装飾もないのがいいですね。 アイコン。まさにドット

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe

Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。 Bootstrap Materialの使い方 Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。 Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア（ライセンスは独自

PixasticはJavaScriptによる画像編集エンジンです。 画像のちょっとした加工であればわざわざ高価なソフトウェアを使うことなくオンラインで実現できるようになってきました。今回紹介するPixasticもその一つ、多彩なイフェクトを画像に対してダイナミックに適用するライブラリです。 元の写真です。 白黒加工を施しました。 画像を重ねる処理です。 色彩を変更しました。 エッジ検出。 垂直反転。 ネガ加工。 ノイズを乗せています。 セピア加工。 ぼかし。 カラーヒストグラム。 明るさを調整。 丸を使ったモザイク。 シャープ。 切り抜き。 ポスタリゼーション。 モザイク加工。 PixasticはPhotoshopでいうフィルター的な機能を数多く実装しています。その処理の殆どは画像全体にかかるものになっていますが、カスタマイズすれば指定範囲にだけイフェクトを行うこともできるでしょう。またオ

Ham CutletはRuby/Sinatra製のフリーウェア（ソースコードは公開されている）。時々見かけるのだが、インデントが全く無視されたソースコードはとても見がたいものだ。Pythonだったら動きようもないが、他の言語の場合無視しようと思えばできてしまうので、とても辛い。 こんなに汚いソースコードが… プログラミング言語の場合、それでも統一はある程度できているのではないだろうか。問題はHTMLだ。時々ものすごいソースコードに出くわしたりすることがある。そんな時に使いたいのがHam Cutletだ。 Ham Cutletは既存のHTMLソースコードを貼付けて実行し、インデントを綺麗にして表示してくれるソフトウェアだ。インデントがきちんとすれば、タグの関連性が分かりやすくなりデザインの問題も発見しやすくなる。完了したソースはそのままコピーして利用できる。 こんな綺麗なHTMLに！ 最近は

ArgumentativeはWindows用のオープンソース・ソフトウェア。頭の中で抱えているもやもやした事柄を整理するのに使えるのが構造化エディタだ。アウトラインエディタやマインドマッピングも使えるだろう。順番に書き下すことで頭の中が整理されていく。 左にテキストツリー、右にグラフィカルな表示 マインドマッピングは中央のノードから縦横無尽に広がっていくので、慣れていないと書くのに必至になってしまったり、拡散してうまくまとまらない結果になってしまうことがある。そこでテキストベースのArgumentativeを使ってみよう。 Argumentativeは左側にツリービュー、右側にグラフィカルビューを持ったソフトウェアだ。ツリービューを使って事柄をアウトライン化していく。ノードは「前提」「原因」「異議」「ヘルパー」の4つを使って組み立てていく。そしてその内容は自動的にグラフィカルビューに構造化

moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが

SoniaはRuby製のオープンソース・ソフトウェア。企業のポータルシステムとしてはグループウェアが最も有名だ。さらにコンテンツを追加してCMSをポータルとして使っている企業もある。だが徐々に部署間、従業員間で必要な情報の差が出始めている。 天気やフィードと言ったガジェットを表示 iGoogleでは個々人に情報の選択が可能で、様々な情報をガジェットとして配置すれば個人に最適化されたポータルページが作られる。企業のシステムでも同様の要素を取り入れたいと思うならばSoniaをベースにしてみると良さそうだ。 SoniaはRuby製のシステムで、Webブラウザでアクセスするとガジェットが表示される。フィードを表示、天気を表示、そして地下鉄の運行状況が表示される。いずれもドラッグ&ドロップで移動が可能なガジェットとしっている。設定で内容を変更すれば、オリジナルのポータルになる。ウィジェットはCamp

HTML5 AsteroidsはHTML5製のオープンソース・ソフトウェア。HTML5とFlashを巡る攻防が続いている。AppleのFlash締め出しについては独禁法の調査次第だが、だからといって方針が180度変わるとは思いがたい。今後もこの戦いは続くだろう。 現状ではFlashが使えないのは不便きわまりないものの、モバイルへインターネットデバイスが移り変わっている現在、将来性はHTML5のがポテンシャルは高そうだ。そのHTML5で何ができるのか、その一端をかいま見れるのがHTML5 Asteroidsだ。 HTML5 Asteroidsは懐かしのゲームアステロイドをHTML5で実装したWebアプリケーションだ。敵は隕石で、ミサイルを発射して隕石を破壊する。ミサイルが当たるごとに細かく分かれていき、小さな隕石にミサイルを当てると消滅する。 細かな破片が襲い来る 全て消滅させればクリアだが

iroha NoteはAdobe AIR製のフリーウェア。構造的にノートを書くときにはアウトラインエディタやマインドマッピングがよく使われる。一度に長文を書こうと思うとなかなか筆が進まなかったり、メンテナンスするのも大変だが、小さく分割することで可視化され、整理されるのだ。 ノートとリースでメモをする マインドマッピングソフトウェアは数多く存在し、高機能なものも多数存在する。だが多機能であると逆に操作に混乱してしまい、元々の目的だったノート作成がおぼつかなくなってしまう。そこで使ってみたいのがiroha Noteだ。 iroha Noteは日本製のAdobe AIRアプリで、Windows/Mac OSX/Linuxで動作する。左側にノートリストがあり、その右側にノートのコンテンツを作成する。付箋紙のようなリーフと呼ぶメモを貼り付け、各リーフをリンクさせてノートを作成する。 リーフ同士は線

SouptoysはWindows用のフリーウェア。今の世の中は10年前とは大きく変わり、コンピュータがあるのが当たり前になっている。そう言う時代に育つデジタルネイティブな世代は、今の大人には想像もできないコンピュータの使い方を行うかも知れない。 動き始めるとどうなるのか… 時代に遅れず、これからの時代を成長して行くには早い段階からコンピュータに触れるのが大事かも知れない。既に小学校でもコンピュータの授業がある中、さらにコンピュータの楽しさを知るのに最適なソフトウェアがSouptoysだ。 Souptoysはとてもユニークなソフトウェアで、サッカーボールやバスケットボール、ゴール、棒などを配置して動かせる物理エンジンになっている。ぬいぐるみや大砲などもあって、そうしたオブジェクトを配置した後、動かせるようになっている。マウスを使って動かすことも可能だ。 こんなど派手なサンプルも。動きがまった

ModestLangBarはWindows用のフリーウェア（ソースコードは公開されている）。WindowsのIMEには言語バーというフローティングウィンドウがある。これをデフォルトのまま表示していると、ちょうど全画面表示した時の上下スクロールと重なったり、右下の部分が見づらくて不便に感じる。 ウィンドウの右上に言語バーが張り付く そこで都度動かしたりするかと言えば、そんな面倒なことはしないだろう。その結果、最小化してタスクバーに入れてしまうのが常だ。だがそれが逆に不便に感じることもあるだろう。そこで使ってみたいのがModestLangBarだ。 ModestLangBarが秀逸なのは、アクティブウィンドウの状態を監視して、その状態に合わせて言語バーを自動的に移動してくれる点だ。移動する場所はウィンドウの右上付近となっている。タイトルバーの右側か、ウィンドウの右肩のいずれかが選択できる。 設

Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。 オンラインでデザイン修正 そこでFirefoxであればFirebugを使ってその場でデザインを変更してみて確かめることもできる。だがブラウザが限定される。ブラウザの壁を乗り越え、オンラインでCSSの修正を行えるのがBrosho Pluginだ。 Brosho PluginはjQueryプラグインとして提供されるソフトウェアで、Webサイトを表示すると四角い枠が表示される。そしてWebサイト上のエレメントを選択（赤い枠で囲まれる）し、新しいCSSプロパティを入力するとそれがオンラインで適用されるのだ。 修正したCSSの内容を生成する

Live CommerceはPHP製/Webベースのオープンソース・ソフトウェア。Eコマースシステムは一から構築する必要がなくなっているのが実感できる。すでに多数存在するEコマースシステムの中から選べば良いだけだ。とは言え海外製をそのまま持ち込んでも通貨や商習慣、配送システムの問題がある。 ショップサイト そこで注目したいのは日本製のEコマースシステムだ。こちらもすでに幾つかのソフトウェアがあるが、新たに登場したのがLive Commerceだ。Live CommerceはZend Frameworkを用いて開発されているオープンソース・ソフトウェアだ。 Live Commerceは実に多彩な機能を提供している。ショッピングサイトと管理画面はもとより、売り上げランキング、関連商品、ポイントシステム、値下げ表示、キーワード登録、ウィッシュリスト、レビュー、お勧め商品などの機能がある。 管理画

MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。 こんな感じのデザインも容易に Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。 例えばフォントをArialの12ポイントにしたい時にはクラスに“A s12”と書く。レイアウトを幅900pxにしたい時にはw900と書く。同様に高さはh500といった具合に定義する。Markercssの規定する方式に沿っ