jQuery Bootgrid - jQueryでBootstrapのテーブルをパワーアップ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー
Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
Simple UI - 学習コストの低いシンプルなUIフレームワーク
Bootstrapはとても便利に使えるUIフレームワークですが、多機能になるにつれて設定するクラスや作法が増えていきます。バージョンアップも早いので追従するのが大変です。 今回はもっとシンプルに使えるUIフレームワーク、その名もSimple UIを紹介します。 Simple UIの使い方 Simple UIはあまりクラス設定が多くないフレームワークとなっています。まずはタイポグラフィ。 グリッド。 ボタン。 フォーム。 テーブル。 ナビゲーション。 カード。 クラス設定が少なければ学習コストは下がります。最初のモックアップやプロトタイプをいい感じに仕上げるのに良さそうです。ただしデフォルトのタグにスタイル設定がされていますので、カスタマイズしようと思った時には影響範囲が大きくなる可能性があります。 Simple UIはHTML5/CSS3製のオープンソース・ソフトウェア（MIT Licen
You-Dont-Need-jQuery - jQueryを使わない書き方教えます
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele
Compass - GitHubのコードブラウジングを快適にしてくれるGoogle Chrome機能拡張 MOONGIFT
GitHubのファイルブラウザは良くできているので、ライブラリをわざわざダウンロードすることなく動作を確認するのに便利です。しかしライブラリによっては多くのディレクトリに分かれているため、ナビゲーションが面倒に感じることもあります。 そこで使ってみたいのがCompassです。Google Chrome向けにスムーズなGitHub上のナビゲーションを提供します。 Compassの使い方 Compassを使うには任意のGitHubリポジトリにてコマンド+K（Windowsの場合はCtrl+K）を押します。そうするとフローティングが表示されますのでファイルのパスを入力していきます。 ファイルを選択してエンターキーを押せばそのファイルが表示されます。 実際に操作しているところです。結構スムーズなのが分かるかと思います。 Compassを使えばGitHub上でのファイル移動やコードのブラウジングがと
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
StyleStats - スタイルシートの状態をチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。 スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleStatsです。 StyleStatsの使い方 手元のスタイルシートで試してみた結果。サイズや使われているセレクタなどが分かります。 URL指定でも使えます。こちらはBootstrapを試したところ。 どの状態がベストであるかはデザイナーによって異なると思いますが、これを日々記録しておくことができればスタイルシートの状態がどう変化しているのかが分かるようになるでしょう。
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
こんなにたくさん！2015年に紹介したMarkdownを使ったソフトウェアまとめ MOONGIFT
Markdownは軽量マークアップ言語のデファクトになったと言えるのではないでしょうか。シェアはもちろんのこと、Markdownを使ったソフトウェアが数多く登場しており、Markdownで書いておくことによる安心感が増しています。 ということで今回は今年紹介したMarkdownを用いたソフトウェアをまとめて紹介します。 octodown – コマンド一つでMarkdown生成 Markdownで書いてHTMLでプレビューするためのツールは多種多様に存在します。Markdownエディタを使えばリアルタイムにコンテンツが更新されますし、HTML変換ソフトウェアを使う手もあるでしょう。自分で書いたMarkdownファイルがGitHubなどにアップロードした時にどう見えるか簡単に確認したい場合はoctodownを使ってみてはいかがでしょう。コマンドはoctodownです。使い方としては引数にMar
Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル
pdfmake - クライアント/サーバサイド両方に対応したPDFジェネレータ MOONGIFT
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
Lossy GIF compressor - 使おう！アニメーションGIFをコンパクトに MOONGIFT
最近、ソフトウェアの紹介時にアニメーションGIFを使うようにしています。YouTubeと違って画像なのでスマートフォンなどでも手軽に見られますし、何度も自動再生されるのが良い感じです。 しかしアニメーションGIFの難点として、サイズが大きくなりがちというのがあります。画像サイズを小さくする手もありますが、一緒にお勧めしたいのが Lossy GIF compressor です。 Lossy GIF compressorの使い方 Lossy GIF compressorは以下のようなコマンドで実行します。 $ gifsicle --colors 256 --resize-width 440 -o animate-plus-4.gif animate-plus-3.gif リサイズなども行うと、例えば半分くらいになったりします。 サイズを変更しなくとも軽くなるのでブログなどでアニメーションGIF
Basscss·軽量、モジュール化されたCSSツールキット MOONGIFT
スタイルシートのフレームワークは数多く存在しますが、がちがちなものは影響範囲が大きいためにプロダクトベースでは導入が困難です。もっと軽量でカスタマイズが容易なものを使いたいと思うでしょう。 そこで紹介したいのがBasscssです。軽量なコレクションを多数そろえたモジュールベースのCSSツールキットになります。 Basscssの使い方 Basscssは3.73KB、24のモジュール、339のルール、592のデコレーションを備えたツールキットです。影響を極力控えているのが特徴になります。デモサイトを見ていきます。 トップページ。左側にモジュールおよび主な機能が掲載されています。 ベースフォーム。 基本のボタン。 テーブル。 タイポグラフィ。 フロートなど。 文字装飾。class名が単純です。 ボタンとメニュー。 ボタンサイズ。 グリッド。 カラー。基本はこの色合いです。 フォーム×カラー。 ダ
material - マテリアルデザインを行うベースにどうぞ
Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア
MUI·HTMLメールにも対応した軽量マテリアルデザインテンプレート MOONGIFT
マテリアルデザインを実践していきたいと思っても、デザインとアニメーションを理路整然と実装するというのはとても難しいことです。そのためお勧めの方法としては既に幾つかあるフレームワークを導入することです。 デザインはもちろん、アニメーションが自分の好き好きに合うか、これはフレームワークを選定する上で大きな要素になってきそうです。今回紹介するMUIについてはどうでしょうか。 MUIの使い方 ボタン。 大きさや浮かび上がり方を指定できます。 フォーム。 グリッドシステム。 タイポグラフィ。 テキストを白くした場合。 アクセントテキスト。 ドロップダウン。 アプリバー。アプリのviewportに合わせて幅を自動調整してくれます。 テーブル。 分割表示。 素のHTMLでセマンティックな表示も。addr/emなどが使えます。 リスト。 レスポンシブについて。1200/992/768で分かれています。 M
bower-browser·これは便利！Bower管理フロントエンド MOONGIFT
最近のフロントエンド開発で欠かせないのがBowerです。コマンド一つで有名なライブラリをインストールできるのは便利なのですが、その管理となると意外と煩雑になりがちです。 そこで使ってみたいのがbower-browserです。楽天の開発したBower管理ツールです。 bower-browserの使い方 bower-browserのインストールはnpmでできます。 npm install -g bower-browser 後はBowerを使っているプロジェクトのディレクトリで、 bower-browser を実行するだけです。 http://localhost:3010 にて管理画面が立ち上がります。 既にインストールされているライブラリが確認できます。アンインストールもできます。 別なライブラリを検索したり、インストールもできます。 bower-browserを使えばWebブラウザからだけで
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。 Suave UIの使い方 Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。 Suave UIはJav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
