フレームワーク - jQueryの記事一覧
CSS3 Animate It - クラス名を指定するだけで簡単にアニメーションを実現
CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現して...
translate.js - クリック一つで別な言語に。JavaScriptで多言語対応
Webサイトを多言語対応する場合、その方法としては幾つかのやり方があります。まずディレクトリを分ける方法があります。もう一つはパラメータで出し分ける方法です。さらに最近ではJavaScriptでURLは共通の状態で翻訳する処理する方法も用いられます。今回はそんなJavaScriptベースの翻訳処理を行うtranslat...
PaginateMyTable - テーブルタグをページネーション可能に
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれ...
jointerJS - HTMLエレメントを線で結ぶ
Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。## jointerJSの使い方例です。5...
twentytwenty - 上下または左右で画像を比較
二つの画像を見比べて何が違うのか判断するにはどうしたら良いでしょうか。横並びにしてもなかなか分かりづらいかも知れません。逆に変換前後でファイルサイズが軽減されている場合は、見た目が変わっていないことを理解させたいこともあります。そんな時に使えるのがtwentytwentyです。スライダーを使って左右の画像を差し替えます...
jquery.dgtable - 高パフォーマンスなテーブルライブラリ
社内システムにおいて、検索結果の一覧表示はよくある機能です。100行程度のデータであれば問題ありませんが、10万行をHTMLで出力するとなれば表示方法を考えなければなりません。レンダリングだけで数分待たされていたら、担当者はストレスを感じることでしょう。今回は大量のデータ表示を行う場合に使えるjquery.dgtabl...
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJS...
Tabullet - 既存のテーブルをメンテナンスしやすくするjQueryプラグイン
業務システムでテーブル表示はよく使います。そんな時、ユーザから出てくるのがデータのメンテナンスを行いたいと言う要望です。行を追加したり、編集や削除するといった機能です。一つのテーブルだけであれば頑張って実装できるでしょう。しかし、画面が多数あったらどうしたら良いでしょうか。そこで使ってみたいのがTabulletです。j...
JavaScript Tracker - DOMイベントを捕捉するGoogle Chrome機能拡張
JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。そこで使ってみたいのがJavaScript Trackerです。JavaScriptの...
printThis - 印刷内容をカスタマイズできるjQueryプラグイン
Webは多機能になっていますが、まだまだ弱い分野があります。それは印刷です。Webブラウザで表示されている情報をすべて印刷したいと思うことはほとんどありません。大抵、その一部のメインコンテンツだけ印刷したいと考えるのではないでしょうか。そこで使ってみたいのがprintThisです。一部だけを取り出したり、要素を追加して...
convForm - インタラクティブなチャットUIを実現するjQueryプラグイン
最近はAIを使ったチャットボットが流行です。ウィザード形式で言われるままに答えるのではなく、自然言語で対話しながらステップを踏んでいけるのが特徴です。そのためにチャット形式のUIがよく使われています。今回紹介するconvFormはそんなチャット形式のUIを手軽に実装できるjQueryプラグインになります。## conv...
Image Picker - 画像を選択する入力コンポーネント
画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。## Image Pickerの...
blocks.js - 複雑なデータフローの可視化
システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。## blocks.jsの使い方メイン画面です。各ノードが線でつながっ...
jquery-bubble-text - テキストアニメーションのjQueryプラグイン
アニメーションはただ静的に書かれているのに対して何倍も見た目のインパクトがあります。ともすると見逃されてしまいがちなテキストもアニメーションすることによってユーザに見てもらえるようになります。そんなアニメーション、特にテキストを動かしてくれるライブラリがjquery-bubble-textです。## jquery-bu...
ajsr-confirm - 豪華な確認ダイアログ
Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。## ajsr-co...
jquery-fulltable - jQueryで任意のテーブルを便利に
業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。## jquery-fulltableの使い...
smoothState.js - 滑らかな画面遷移を提供
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。そうした動きをサポートしてくれるライブラリがsmoothState.jsで...
RichText - シンプルなWYSIWYGエディタ
自分の見たままに編集する、いわゆるWYSIWYGな環境を提供するソフトウェアは開発者以外の方には必須のソフトウェアです。Markdownがいかに分かりやすい記法とは言え、開発者以外の方には使いづらいはずです。今回はjQueryプラグインのRichTextを紹介します。シンプルなデザインのWYSIWYGエディタとなってい...
jQuery Skeduler Plugin - カレンダーの週表示を行うjQueryプラグイン
仕事は大抵時間に即して行われているのでカレンダー風に表示したりすると分かりやすく可視化できます。スケジュールアプリでは総じて提供されていますが、自前で実装しようと思うと大変な表示です。そこで使ってみたいのがjQuery Skeduler Pluginです。週表示のカレンダービューを提供するjQueryプラグインです。#...
BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン
ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法で...