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

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

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

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

もっと見る

List

  • 2014/06/09

Add Clear - テキストボックスをスマホ風に。×ボタンで入力削除

あらこれ素敵。スマートフォンでは文字の入力が面倒で、さらに言えば文字を消すのすら面倒だったりします。もう入力されている文字を一気に全部消したいと言う時はテキストボックス右側にある×ボタンを押すと全部消してくれます。これは意外と便利です。ある環境において便利なものは他の環境において便利である可能性は高いです。そこでデスク...

List

  • 2014/05/20

Morrigan jQuery Editor – 軽量かつ機能十分なjQueryプラグインのWYSIWYGエディタ

WebベースのWYSIWYGエディタと言えばCKEditorが有名ですが、今では他にも多数の選択肢があります。むしろCKEditorは多機能すぎてどういった動作をするのかが分からなかったり、重たかったりと利用を避ける人もいます。そこで今回は十分な機能を備えつつ、軽量なWYSIWYGエディタMorrigan jQuery...

List

  • 2014/05/07

Kendo UI Core – 企業向けHTML5 UIフレームワークのコア部分がオープンソース化

HTML5を使ったWebアプリケーションを構築するのに使えるUIフレームワークとしてKendo UIが知られています。ビジネス向けに有償提供されていましたが、先日よりコア部分をオープンソース化しました。有償版は継続ですが、その7割近くをオープンソースとして使えるようになっています。この機会にKendo UIの便利さを知...

List

  • 2014/04/28

slick - もうこれで十分!なカルーセルライブラリ

画像をスライドで切り替えていくカルーセル機能は数多くのWebサイトで実装されています。サイトの機能を紹介するのに使ったり、ギャラリーとして画像を切り替えるのにも使えます。アイディア次第で使いところが多い機能です。便利さゆえに多数のライブラリが出てきていますが、もうこれで十分ではないかと思わせるのがslickです。多彩な...

List

  • 2014/04/22

qLabel - Wikidataの単語を使って多言語対応を簡単構築

多言語対応って本当に大変ですよね。GetTextなどを使って多言語ファイルを作成し、各言語向けにメンテナンスする必要があります。その殆どのキーワードは単語であって、辞書さえあれば十分なものばかりだというのに。ということでGoogleが開発しているライブラリがqLabelです。Wikipediaの提供しているWikida...

List

  • 2014/04/17

editableTableWidget – Bootstrapでその場で編集できる表計算を実現

これは使い勝手良さそう!Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがe...

List

  • 2014/04/13

Scroll Depth - ページ内スクロールの深さを記録

どこまで読まれているかは大事ですね!Webサイトの人気はPVで見られることが多いです。そのため単純にファーストビューが表示されたかどうかが重要になっており、実際のコンテンツが読まれたかがどうかは軽視されがちです。しかし本来であればそちらのが大事でしょう。そこで使ってみたいのがScroll Depthです。スクロールを感...

List

  • 2014/03/20

jOrgChart - 知っておくと便利な組織図を描くjQueryライブラリ

階層的な構造を表すのに便利なのが組織図です。しかし形が独特なものになりがちで、他のグラフに比べると描画ライブラリが少ないように思います。その結果、画像で作られて更新メンテナンスが大変な状態になります。そこで組織図を描くのに便利なライブラリを一つ知っておくと色々な場面で使い回しができるようになるでしょう。今回はjQuer...

List

  • 2014/03/19

Offscreen.js – ウィンドウ幅に合わせてツールチップ表示位置を自動調整

自動というのがいいですよね!レスポンシブWebデザインは一つのHTMLコードで複数のウィンドウサイズに対応できる便利な技術ですが、幅が変更されることで予定外の表示になることがあります。単純にデザインが統一化されるだけでなく、それぞれに合わせたテクニックが必要です。今回はツールチップに注目したライブラリ、Offscree...

List

  • 2014/03/17

MixItUp - リストやブロックを格好よくソート、フィルタリング

情報のフィルタリングやカテゴライズ、並び替えをする際には都度URLを再読み込みして表示するのが一般的です。とは言えこれでは格好が悪いというケースもあるでしょう。そこで使ってみて欲しいのがMixItUpです。パネルまたはリストの情報をフィルタリングします。その際のアニメーションがまた格好いいライブラリです。## MixI...

List

  • 2014/03/11

Remodal - 使える場面の多そうなjQuery製モーダルウィンドウライブラリ

jQueryでモーダルウィンドウ表示を行いたい時に使えるのがRemodalです。カスタマイズが多彩、軽量といった特徴があります。!ふわっと浮き出るのも印象的です。

List

  • 2014/03/11

ScrollMagic - スクロールアニメーションを実装する際に使えるjQueryプラグイン

シングルページアプリケーションの人気もあって、スクロールアニメーションが流行っています。しかしスクラッチで組むとなるとスクロールイベントの感知やアニメーションの制御など非常に難しいでしょう。そこで使ってみたいのが専用のライブラリです。今回はjQueryプラグインのScrollMagicを紹介します。## ScrollM...

List

  • 2014/02/27

jQuery fontIconPicker - Web Fontを使ったアイコンピッカー

Web Fontを使ったアイコン表示は幾つかありますが、基本はWebサイト上でアイコン代わりに使うことが多いと思います。もちろんそれでも有益ですが、もっと面白い使い方もできるのではないでしょうか。今回はその一つとしてjQuery fontIconPickerを紹介します。フォームの入力項目としてWeb Fontを使うラ...

List

  • 2014/02/25

croppic - JavaScriptを使って画像切り抜き

操作性も悪くないですし使い勝手良さそうです。スマートフォンの隆盛もあって写真コンテンツがオンライン上に溢れるようになっています。そんな写真をなるべく格好よく見せようと思うと機械的にサムネイルを生成しているだけではいけません。CGMであればユーザが手作業で加工したって良いのです。ということで今回はJavaScriptを使...

Missing

  • 2014/02/20

Fluidbox – 画面いっぱいに広がるLightbox系ライブラリ

クリックして写真を拡大表示するライブラリとしてはLightboxが知られていますが、いつも同じライブラリを使っていると次第に見飽きてしまうものです。そこでライブラリを変えてみることでユーザの目を新たに引くという施策はいかがでしょうか。FluidboxはjQueryプラグインとして提供されるLeightbox系ライブラリ...

List

  • 2014/02/14

jQuery.dotdotdot – 溢れるテキストの末尾処理はこれで!

システムでHTMLを出力する場合に良くあるのが想定よりも文字数が多くて溢れてしまうケースです。スタイルシートのオーバーフローで切り捨ててしまっても良いですが、突然文字が切れてしまうのは何となく違和感があります。そこで用いるのが一定の文字数以上の場合、**…**で締めるというものですが、文字数と切れる場所が常にちょうど良...

List

  • 2014/02/13

jQuery Notebook - 見ているWebページをそのままに編集

まさにWYSIWYG!一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシ...

List

  • 2014/02/12

notifIt - どこでも使えるフロート通知ライブラリ

こういうライブラリは利用場面が多そうです。Webサイトを見ているユーザに通知を出したいと思うことは良くあります。例としてはエラー通知があります。Ajaxで発生したエラーを通知する場所をどこにするかは考えものです。場合によってはユーザはその場所を表示していないかもしれないからです。そこで使ってみたいのがフローティングで表...

List

  • 2014/02/12

jQuery Panorama Viewer - jQuery製のパノラマ写真ビューワー

せっかく撮った写真、Webブラウザで楽しみましょう!iPhoneではパノラマ写真が撮影できるようになって、広範囲を映し出した写真が手軽に撮れるようになりました。しかしパノラマ写真は画像としてみれば単に横幅が広い写真でしかありません。むしろ写真としては見づらいでしょう。そこで必要になるのは専用のビューワーです。今回はjQ...

List

  • 2014/02/11

Promo Slide – ページ下までいくと横からスライドして表示

こういうのを使っているサイトを最近よく見かけますね。ブログやニュースサイトで見かける仕組みとして、ページの最下部に関連する記事を表示するというのがあります。ちょうど読み終わっている訳で、回遊率を高めるのに良い仕組みです。さらに目を引くためにアニメーションしながら表示される場合があります。あんな仕組みを自分のサイトでも実...