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

よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。 今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。 jquery-rsSlideItの使い方 2Dの場合です。回転の伴うスライドが作れます。 3Dです。よりダイナミックに回転しながら表示されます。 jquery-rsSlideItは回転しながらダイナミックにコンテンツの表示が切り替わります。プレゼンテーションのスライドはもちろん、写真などを印象強く表示するのにも使えそうです。jQueryプラグインなので使いやすいのも魅力です。 jquery-rsSlideItはjQuery/JavaScript製のオープンソース・ソフトウェ

HTMLタグにはそれぞれに意味があります。その意味を活かしたデザインを行うことで、SEOのようにコンピュータはもちろんスクリーンリーダーなどでも使いやすいコンテンツに仕上がります。 しかし多くの場合、デザイン上の理由で全く関係のないタグが使われることがあります。そこで使ってみたいのがawsm.cssです。 awsm.cssの使い方 awsm.cssはクラスの指定もない、準ず否HTMLタグだけをデザインするフレームワークです。 まずはトップページ。 リスト。 テーブル。 インラインの装飾。 メディア。 フォーム。 awsm.cssはタグに余計な設定はいりませんので、プロトタイプなどを作る際に重宝しそうです。デフォルトのタグに設定が追加されてしまうので、細かいカスタマイズをしようとすると予定していなかった設定が入ってきてしまうかも知れません。 awsm.cssはCSS製のオープンソース・ソフト

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGはHTML5になって標準化されているメディアフォーマットですが、まだあまり広く活用はされていません。ただし、現在の高解像度化であったり、幅広い画面幅に対応していこうと考えるとSVGのようなベクター画像はとても大事になっていくでしょう。 今回はそんなSVGを使って各種サービス、ソフトウェアのロゴを描いたSVG PORNを紹介します。 SVG PORNの使い方 SVG PORNはとても数多くのサービスに対応しています。一覧でお見せします。まずはAngular、Ansible、Apache、Arduino、Atom、Auth0、Autoprefixer、AWS。 続いてBabel、Backbone、Bash、Bem、Bitbucket、Blocs、Bootstrap、bourbon

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自

Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って

テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。