You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指定した要素にtableを作成します。 ソート機能や検索、ページネーション機能なども付いてます。試しに使ってみました example データが少ないのでページングは飾りになってしまっています。あと、現段階で、ソートは数値をうまくソートできないみたいです。 Grid.jsの使い方はとても簡単です。 <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /> <script src="https://unpkg.com/gridjs"></script>CSSとJSを読み込みます。C
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してありました 試しに使ってみました Example 用意されたサンプルをフォークしただけですが、それでも使い方はすぐに理解できるほどには使いやすい印象です サンプルではHTMLのカスタムデータ属性を利用してツアーを作成していますが、JSだけで管理する方法も用意されています JSで管理する際はツールチップ内にボタンも用意できるのでこちらの方が汎用的かもしれませんね ライセンスはApacheライセンスと有償ライセンスが用意されています GuideChimp
1.4.0Mini map for web pages. You can find an example on this web site in the top right corner. And there are two more demo pages: boxes and text. Example usageadd a canvas tag to your HTML page: <canvas id='map'></canvas> fix it's position on the screen: #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } init and style the mini map: pagemap(document.querySelector
Result スクロールするとプログレスバーが表示されるやつ。非依存です 仕様が分かりやすいようにド派手なグラデーションにしています スクロールに応じて徐々に伸ばしているのが分かります JavaScript/* MIT License by flouthoc/scrollpup.js github.com/flouthoc/scrollpup.js Copyright (c)flouthoc */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.scroll
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
Clearlyは任意のWebページのテキストを読みやすくしてくれるChromeエクステンションです。上SSは昨日の記事ですが、広告やメニュー等が非表示となり、テキストがセンターに、左ペインには見出しに対して自動でページ内リンクが作成され、右ペインには音声読み上げやページ内スタイル調整、フルスクリーンモードボタン等が追加されます。正直かなり見やすくなりますね。広告が非表示となるのは運営者としては正直なところ、かなり辛い仕様ではありますがユーザーとしてはまぁあるより無い方が見やすいのは確かではあります。年のせいか最近読むのも少ししんどい日もあるので個人的にも利用していこうと思います。 Clearly 本年は本記事が最後となります。今年も大変お世話になりました 来年は4日くらいから再開する予定です。来年もどうぞ宜しくお願いいたします。 良いお年をお迎えください
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
👨🔧️ Driver Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page With Animation Without Animation A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page. Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc. What are the features? Driver is com
paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリンクテキストの変更が可能です。冗長化した情報が整理して見やすくしたいですね。導入も楽そうです。ライセンスはMIT。 paginathing.js
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの。この手のは同じように明示する方法ありますけど、この方法も悪くないと思ったので備忘録。 Progress Nav On Github
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA(シングルページアプリケーション)を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか? PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く