開発 - ライブラリの記事一覧
Eripusisu - テキスト以外にも使える省略表示ライブラリ
CSS3では長すぎる文字列を省略する機能があります。しかし、使いこなすのはなかなか難しく、JavaScriptなどと組み合わせるケースが多いでしょう。また、テキスト以外のコンテンツに対応していないのも問題です。そこで紹介したいのがEripusisuです。多数のコンテンツ形式に対応したテキスト省略ライブラリです。## E...
Detect GPU - GPUの性能を取得するライブラリ
WebブラウザでもGPUを利用する機会が増えてきています。3Dゲームを提供する、CSSアニメーションをする、さらに機械学習でWebGLを利用することもあります。しかしGPUはすべて同じではなく、性能の良し悪しがあります。一口にGPUといってもピンキリです。今回紹介するDetect GPUはGPUの性能を簡易的に取得でき...
vue-easytable - Vue用の高機能テーブルコンポーネント
Webページでテーブル表示はよく使われますが、デフォルトでの機能の少なさには失望させられます。その結果、使い勝手の悪いテーブルで我慢するか、自分たちで機能を追加しなければなりません。今回紹介するvue-easytableは名前の通り、Vueで使えるテーブルコンポーネントになります。## vue-easytableの使い...
Drawflow - データフローを作成するライブラリ
ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。## Drawflowの使い方デモのUIです。!
Text Caret Position - テキスト入力時のキャレットの位置情報を取得
Webのテキストエリア入力で、入力補完を提供するサービスがあります。例えばGitHubのコメント欄です。この時、テキストエリアのキャレット位置を取得するのですが、意外と面倒だったりします。そこでライブラリを使いましょう。Text Caret Positionを使えばキャレットのポジションが簡単に取得できます。## Te...
Perfect Arrows - 完璧な矢印をWebに描くライブラリ
一つのことにフォーカスして完璧にやり遂げるライブラリは大好きです。色々な機能に手を出すと、どれも中途半端になってしまいます。2割の機能が8割の目的を達成するというのはよくある話で、たくさんの機能はむしろ混乱を招きます。今回紹介するPerfect Arrowsはその名の通り、完璧な矢印を表示するライブラリです。## Pe...
import - シェル用のモジュール管理
最近は各プログラミング言語向けにパッケージ管理が作られるようになりました。専用のファイルフォーマットで作成して、コマンドを打てばライブラリがインストールされます。使い慣れると手放せません。今回紹介するimportはBash（だけでなく他のシェルでも）で使えるモジュールシステムです。## importの使い方import...
tragopan - 別ライブラリへの依存性のないズーム/パン用JavaScriptライブラリ
デジカメやスマートフォンで撮影した写真はどんどん画素数が増え、巨大になっています。Webブラウザで表示したくらいでは確認できないくらい小さな部分まで撮影できます。拡大表示したい時は多いです。そこで使えるライブラリがtragopanです。Web上でJavaScriptを使って画像のズームイン/アウトができるライブラリです...
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で作るような複雑...