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

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

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

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

もっと見る

List

  • 2017/09/24

smoothState.js - 滑らかな画面遷移を提供

スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。そうした動きをサポートしてくれるライブラリがsmoothState.jsで...

List

  • 2017/08/26

RichText - シンプルなWYSIWYGエディタ

自分の見たままに編集する、いわゆるWYSIWYGな環境を提供するソフトウェアは開発者以外の方には必須のソフトウェアです。Markdownがいかに分かりやすい記法とは言え、開発者以外の方には使いづらいはずです。今回はjQueryプラグインのRichTextを紹介します。シンプルなデザインのWYSIWYGエディタとなってい...

List

  • 2017/08/21

jQuery Skeduler Plugin - カレンダーの週表示を行うjQueryプラグイン

仕事は大抵時間に即して行われているのでカレンダー風に表示したりすると分かりやすく可視化できます。スケジュールアプリでは総じて提供されていますが、自前で実装しようと思うと大変な表示です。そこで使ってみたいのがjQuery Skeduler Pluginです。週表示のカレンダービューを提供するjQueryプラグインです。#...

List

  • 2017/08/13

BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン

ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法で...

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サイト...