ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フレームワーク - jQueryの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/07/24

jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え

よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。#...

List

  • 2017/07/21

jQuery Images Compare - 二つの画像をスライダーで比較

JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。そこで使ってみたいのがjQuery Images Compareです。...

List

  • 2017/06/25

jquery-rsSliderLens - レンジ入力を格好良く変身させる

HTML5になってWebフォームのコントロールは増えていますが、それでもなお標準のままではあまりにチープです。そこでスタイルシートなどを駆使してデザインを変更するのはよくあることです。今回注目するのはレンジコントロールです。一定の範囲内にあるデータを指定するのに便利ですが、表示があまりよくありません。そこで使ってみたい...

List

  • 2017/05/19

Wobble window jQuery plugin - HTMLの枠がプルンプルンに

人の目を引くデザインは奇抜なものばかりではありません。普段何気なく使っているものが別な場所にも出てきたりすると驚かれることもあるでしょう。特にコンピュータ内で自然に存在するものを再現すると興味を持つ人たちがたくさんいます。今回紹介するWobble window jQuery pluginもそんなライブラリの一つです。柔...

List

  • 2017/05/17

Vertical Timeline - 縦型年表を作成するjQueryプラグイン

情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。そんな縦型年表を容易に作成できるのがVertical Timelineになります。## Vertical Timel...

List

  • 2017/05/13

per-word-action - 単語や行ごとにデザインを変える

最近のWebサイトは多数のデバイス、多数の幅に合わせたレスポンシブデザインが求められてます。しかし幅が変わるとデザイナーの意図した描画にできない場合もあります。特にテキスト量に依存した処理は行数が変わると面倒です。一例として使えるのがper-word-actionです。行ごとにデザインを変えることができるライブラリです...

List

  • 2017/05/09

Pull Quote Center - 中央に引用を表示するレイアウト

HTMLはレイアウトの概念があまり強くありません。CSSを駆使すればできることもあるでしょうが、メンテナンス性が非常に悪くなったり、再利用性も低くなったりします。雑誌のようなレイアウトを再現するのは大変です。今回は2段組の雑誌構成でよくある中央に引用を表示するレイアウトを実現するPull Quote Centerを紹介...

List

  • 2017/04/10

jExcel - Webに埋め込んで使えるExcel風表計算

業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。## jExcelの使い方こんな感じに表示できま...

List

  • 2017/04/08

jQuery File Browser - Webベースのファイルブラウザ

ユーザ向けにストレージに開放しているサービスの場合、ファイル一覧やファイルを開くような機能を提供したいと思うでしょう。かといって使い勝手の良いインタフェースは難しく、ツリービューを使ったりします。もっとインタラクティブなファイル管理機能を提供したいならばjQuery File Browserを使ってみましょう。## j...

List

  • 2017/03/20

zPath.js - SVGをアニメーションしながら描画

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。## zPath.js...

List

  • 2017/03/12

jQuery printPage plugin - 違うページをクリック一つで印刷

Webブラウザの印刷機能はとても貧弱です。少なくとも現在見ているページしか印刷できないし、印刷内容の制御もスタイルシートで行うしかありません。業務系などではもっと自由度が高い印刷機能が求められることも多いでしょう。そこで使ってみたいのがjQuery printPage pluginです。別なページの内容でも印刷できるよ...

List

  • 2017/02/22

I-Miss-You - 非アクティブになるとタイトル、お気に入りアイコンを変更

タブをたくさん開くのが当たり前になると、URLを開いたものの全然見ていないタブも出てくるかも知れません。サービス提供側としてみれば、なるだけWebサイトを見て欲しいと思うわけで、どうにかユーザにアピールしたいでしょう。そこで使ってみたいのがI-Miss-Youです。ユーザが見ていない時にこそ使われるjQueryプラグイ...

List

  • 2017/01/17

Pit-scheduler - 線表形式の使いやすいカレンダー

スケジュール管理は多くのシステムで使われています。プロジェクト管理、顧客管理、グループウェアなどは特にそうで、日付と連動して動くシステムは他にも多数あります。純粋なスケジュール管理ではリッチなカレンダー表示が行われていますが、それ以外のシステムでは大したことない場合も多いでしょう。今回はjQueryで見やすい線表ベース...

List

  • 2017/01/16

bookmarks.public - ローカルで使えるHTML版ブックマーク管理

ブックマークをどこで管理していますか。はてなブックマークを使っている人もいれば、ローカルのブックマークを使っている人もいるでしょう。大事なのは定期的にメンテナンスすることなのですが、多くの場合なくなると困ると言った理由でずっとため続けてしまいます。今回紹介するbookmarks.publicはローカルで使うブックマーク...

List

  • 2017/01/12

jquery.diamonds.js - 菱形を並べたデザインをどうぞ

Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。## ...

List

  • 2016/12/18

Really Simple Weather - Web APIを使って簡単に天気情報を取得

インターネットはリアルと対極にあると考えがちですが、実際にはリアルを補完する存在として使われることのが多いです。スマートフォンでは天気アプリが使われることが多く、Yahooの雨雲レーダーのように5分後、10分後の天気が気になるケースはよくあります。そんな訳で天気情報は以外とオンラインでもウケが良いです。もしWebサイト...

List

  • 2016/11/17

gridstack.js - jQuery製のウィジェット表示/作成ライブラリ

WebダッシュボードのUIであったり、ユーザがカスタマイズできるページにおいて大事なのがドラッグ&ドロップを使ってカスタマイズできるウィジェット機能です。かつてiGoogleで見られたUIは今は多くの管理画面で採用されています。そういったページを表示する際に使えそうなのがgridstack.jsです。ウィジェットの大き...

List

  • 2016/11/06

jquery.tabSlideOut.js - クリックするとスライド表示されるコンテンツ

少し前にはWebサイトでUserVoiceのフィードバックウィジェットをつけているサイトがよく見られました。サイトの右端、左端などにぴったりと表示されて、クリックするとフォームが表示されるというものです。あのような表示を再現できるのがjquery.tabSlideOut.jsです。任意のコンテンツが表示できるのでフォー...

List

  • 2016/10/09

ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ

最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。## ZooMoveの使い方最初の表示です...

List

  • 2016/09/23

markerPen - Web上で使えるマーカーペン

Webサイトのデザインで修正点を指摘したいと思った時にどうしていますか。テキストで書いても伝わりづらいです。そのため、印刷してペンで書き込んで渡しているでしょうか。または画像編集ソフトウェアや、PowerPointに貼り付けてドローしてくる人もいます。そんな方々に使えそうなのがmarkerPenです。Web上で使えるマ...