開発 - ライブラリの記事一覧
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。## A...
CJSS - CSSベースのWebビューフレームワーク
最近はReact、Vue.jsなど仮想DOMを使ったビューライブラリが人気です。しかし、JavaScript内にHTML情報を埋め込むのでデザイナーの方にとってはちょっと辛いところがありそうです。そこで使ってみたいのがCJSSです。上記ライブラリとは逆で、CSSにHTMLなどの情報を埋め込んでしまうという、すごいライブ...
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。## Filterizrの使い方利用例です。カ...
HumanizeDuration.js - ミリ秒を読みやすい文字列に変換
JavaScriptではstrftimeのような関数もなく、日付を文字列で出力するのは面倒です。他の言語とは異なり、時間はミリ秒単位で、換算するのも手間がかかります。そのため、日付を扱うライブラリが充実しています。今回はミリ秒を人が読みやすい形にしてくれるライブラリ、HumanizeDuration.jsを紹介します。...
Popper.js - 便利なポップオーバーライブラリ
マウスを載せた際などに表示されるポップオーバー。ユーザの好きなタイミングで（多くは困った時に）表示してくれるので便利なツールです。しかし画面の端などで表示する場合、画面外に隠れてしまったりします。そんな困った、を解決してくれるのがPopper.jsです。ポップオーバーだけにこだわったライブラリです。## Popper....
iro.js - 色をホイールで選択するUIライブラリ
Web上で表現できる色は1600万色あります。ちょっとした違いを認識しながら色を選択するのは困難です。そこで色をピッキングする手法が様々に作られています。一つはサークル型のウィジェットです。今回紹介するiro.jsはそんなサークル型のカラーピッカーをJavaScriptで提供するライブラリです。## iro.jsの使い...
Tabulator - これはすごい。HTMLテーブルを高機能に
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くの...
Magic-Grid - ウィンドウ幅に応じてグリッドを自在に並び替え
Webページをレスポンシブに対応させようと思うとグリッドベースのデザインを採用することが多いでしょう。デバイスの幅に応じて並べるグリッドの数を増減させることで表示をカスタマイズできます。多くのUIフレームワークがグリッドに沿ったUIを提供しています。今回紹介するMagic-Gridはグリッドだけを提供するライブラリです...
Current Device - デバイス判定をスタイルシートに反映
Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加し...
spacetime - JavaScriptの高機能時間ライブラリ
JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。## ...
virtual-scroller - 長大なリストもサポートするスクロールライブラリ
Webページは縦に長く伸びがちです。特にリスト状に情報を載せる際にデータ量をシステムからの出力で動的に変化させている場合、間違って数十万件のデータを一気に表示しようとしてDOMレンダリングが終わらなくなったりします。そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにし...
SpreadsheetView - まるでExcelのように複雑なグリッド表示をiOS上で実現
iOSアプリではシンプルで直感的なUIを求められますが、業務用アプリとなると一段違ったレベルのUIが求められます。一覧表のような形式であったり、複数人のスケジュールを一覧できる機能が欲しいと言われることもあるでしょう。そうした難しい表形式の表示を提供するのがSpreadsheetViewです。Excelで作るような複雑...
FKit – JavaScriptに関数型言語をミックス
JavaScriptでは標準では物足りないと感じられることが多いです。そこでjQueryやUnderscoreのようなライブラリが必須になってきます。そうすることでプログラミングをする上で必須ともいえる機能が使えるようになります。FKitはそのJavaScriptでよくありがちな機能を補完してくれるライブラリになります...
Time-Moment さまざまなコーディングスタイルを意識した日付と時間を得るモジュール
Time-Moment はC言語で記述されたPerl用モジュールです。Perlには日付と時間を得る方法がいくつもあります。しかし、ソフトウェアエンジニアは使い勝手やさまざまな事情から、日付と時間を得る関数やモジュールを改めて定義することがあるのではないでしょうか。Time-Moment を選択肢に加えることで、開発の手...
JSON Editor – JSON Schemaから入力検証つきフォーム生成
JSONの利用範囲が拡大しています。エンタープライズ系ではXMLがまだまだ優勢だと思っていたのですが、Web APIが広がるのに伴って利用が進んでいるようです。そんな中で求められるのはより強固なJSONフォーマットです。それを可能にするのはJSON Schemaです。検証可能なJSONによって入力値の正しさ、相互のメッ...
Library Detector - あのサイトはどのJavaScriptライブラリを使っているか
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary ...
Depstack – 投票ができる。使えるライブラリに出会えるサイト
プログラミング言語はライブラリが肝です。言語単体の魅力はもとより、使えるライブラリが十分にないと利用したいと思えないでしょう。各言語向けにライブラリを紹介するサイトがありますが、それらを一つにまとめあげてしまうのがDepstackです。Depstackでは有名なプログラミング言語のライブラリがたくさん揃っています。各プ...
localForage - スマートフォン/デスクトップで使えるシンプルなキーバリュー型ストレージ
Backboneにも対応しているのがポイント高いかも！HTML5にはオフラインに対応するために幾つかのストレージ機能が提供されています。localStorage、IndexedDB、さらにWebSQLも一部のブラウザでサポートされています。キーバリュー型のシンプルな非同期型ストレージを提供してくれるライブラリlocal...
r18n互換のJavaScript国際化処理ライブラリ「X18n」
X18nはJavaScriptによる国際化処理ライブラリです。JavaScriptの活用の幅が広がっていく中で注目したいのが多言語化対応です。Webアプリケーションなどで使ってみたいクライアントサイドの多言語化ライブラリとしてX18nを紹介します。基本的な使い方。まずregisterで言語とその変換を登録します。言語の...
Webサイトをiframeで開いて情報を追加「PageSlide」
PageSlideはリンクをiframeで開き、URLコピーやシェア機能を追加するJavaScriptライブラリです。PageSlideではWebページを開く際にフレームの中で開くという面白い見せ方をしてくれます。一枚上のレイヤーに情報を追加して表示といった使い方が面白いかもしれません。最初にURLが一覧されています。...