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

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

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

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

もっと見る

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上で使えるマ...

List

  • 2016/09/11

jQuery Bootgrid - jQueryでBootstrapのテーブルをパワーアップ

テーブル(グリッド)は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです...

List

  • 2016/08/31

Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ

昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroal...

List

  • 2016/08/24

jQuery Select Areas - 一つの写真から複数の範囲を指定

クロップ(切り抜き)をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。## jQuery Select A...

List

  • 2016/08/24

ImageMaps - Naver製。地図画像の編集ツール

地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。## ImageMapsの使い方編集画面です。...

List

  • 2016/08/14

jQuery Tocible - jQuery製の自動生成型目次ライブラリ

Webページで長いコンテンツを書いた場合、あらかじめ目次が用意されます。しかし多くの目次は文頭にあり、途中から選ぶことはできません。また、見出しレベルを細かくすると目次だけで長くなってしまって可読性が落ちてしまいます。そこで使ってみたいのがjQuery Tocibleです。ヘッダーを使って自動生成し、使いやすい目次を提...

List

  • 2016/07/18

lufo - 最近選択したドロップダウンの項目を優先表示

Webのフォームで何度も同じドロップダウンの項目を選択していると、項目を一番上に持っていって欲しいと考えるでしょう(都道府県、国名など)。しかし自分にとっての優先項目と他のユーザにとっての優先項目は異なります。そこで使ってみたいのがlufoです。HTML5を使うことでスマートに解決しています。## lufoの使い方lu...

List

  • 2016/07/01

JQuery Terminal Emulator Plugin - jQueryも使えるjQuery製のターミナルエミュレータ

Webサイト上でターミナル風インタフェースを提供するサービスが幾つかあります。クラウドサーバ系サービスでは当たり前になっていますし、プログラマー向けのサービスでは幾つか見かけます。今回はちょっと色の違うソフトウェアを紹介します。JQuery Terminal Emulator Pluginはその名の通り、jQueryが...

List

  • 2016/06/23

jQuery-lock - 編集防止に。コンテンツをロック!

開発者ツールを使ってHTMLを書き換えるのは簡単にできます。スクリーンショットを撮る時に余計な要素を消したり、文字を書き換えてしまうことだってできます。通常は自分の見ている範囲でしか使えませんが、悪用することもできます。例えばフォームの書き換えが考えられます。送れないはずのデータを送りつけることもできるでしょう。そうし...

List

  • 2016/06/01

jfMagnify - 虫眼鏡風UIで写真を拡大

最近の写真は高解像度になっており、単純に表示しただけでは細かい部分まで確認できなくなっています。折角撮影した写真について、詳細な部分まで見たい、見て欲しいと思うことはないでしょうか。そこで使ってみたいのがjfMagnifyです。虫眼鏡ツールを使ってごく小さい部分まで表示できるライブラリです。## jfMagnifyの使...