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

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

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

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

もっと見る

None

  • 2015/01/23

Pushy - UIフレームワークに依存しないスライド式ナビゲーションメニュー

最近のWebサイトではサイドバーをなくして1カラムですっきりとしたデザインのサイトが増えています。そんな時にメニューをどう表示するかは問題です。1、2個であればヘッダーに並べても良いですが、複数あった場合はどうでしょう。そこで使ってみたいのがスマートフォンアプリでよくあるスライド式メニューです。Pushyを使えばスムー...

List

  • 2014/12/21

Ptty - Webブラウザ上のターミナル

特定のアプリケーションに関して操作に不慣れな時はGUIのが便利ですが、十分に慣れて繰り返しの作業が増えてくるとCLIで操作したいと思い始めるものです。Webにおいてもそれは変わらないでしょう。WebのUIに面倒さを感じるような熟練したユーザが多いWebアプリケーションであればPttyを使ってみてはいかがでしょう。## ...

List

  • 2014/12/16

Vegas – Webサイトの背景を使う写真スライダー

最近、Webサイトの背景に大きな写真を埋め込む表示が見られるようになってきました。デザイナーのプロフィールサイトやランディングページに使うとインパクトがあります。さらにその写真が複数あるといった時に使ってみたいのがVegasです。画像の切り替えをスタイリッシュに行ってくれるjQueryプラグインです。## Vegasの...

List

  • 2014/12/10

FlowupLabels.js - プレイスホルダーを上に移動させてユーザビリティ向上

マテリアルデザインを行う上でユーザがどういった意図で操作を行っているのかを読み取って、それに合わせて情報を表現するというのが問われています。プレイスホルダーは便利な仕組みですが、入力しはじめた瞬間に元々の文字が消えてしまうので何を入力すれば良かったのか分からなくなってしまうことがあります。そこでラベルを上に移動させる表...

List

  • 2014/12/07

Glance Year – GitHub風に年間の活動をグラフ化

一年分の活動を振り返る際にはどういった表示が良いでしょう。各月のカレンダーを表示して、日付ごとに色分けするのも良いでしょう。しかし開発者であればもっと面白い方法があります。それがGitHubのコントリビューショングラフ(正式名称は知りませんが)です。縦軸に曜日、横に52週分並べればそれだけで一年間を意味するグラフになり...

List

  • 2014/11/19

jQuery Face Detection Plugin - jQueryを使ったWebベースの顔認識ライブラリ

最近のデジカメ、スマートフォンのカメラでは当たり前になっているのが顔認識機能です。その部分だけを明るく補正したり、画像を修正して遊ぶアプリもあります。こういった機能を実現するのにOpenCVというライブラリがよく使われています。jQuery Face Detection Pluginはそんな顔認識機能をWeb上で手軽に...

List

  • 2014/10/30

jQuery-FontSpy.js – Web Fontの読み込み完了、失敗をハンドリング

最近はWeb Fontを使うサイトが増えてきました。ロゴとして使うケースもありますが、その多くはアイコンフォントとして使っているようです。アイコンフォントの場合、Web Fontの読み込み前や読み込みに失敗すると四角が表示されてしまうのが難点です。アイコンとテキストであればまだいいですが、アイコンだけを使っている場合は...

List

  • 2014/10/06

jQuery Image Comparison Slider – ドラッグできるスライダーを使った画像比較

GitHubでは画像の差分を見る際に垂直なスライダーが表示されます。それによってどの部分が違うのか一目で分かるようになっています。二つの画像を比較したいというのはバージョン管理に限らずあることでしょう。そんな時に使ってみたいのがjQuery Image Comparison Sliderです。スライダーを使って二つの画...

List

  • 2014/09/08

jCorner – フラットUIで使える角折りデザイン

フラットなデザインが流行ですが、単純に単色でシンプルに表現する段階は過ぎています。Googleの言うマテリアルデザインのように動きのある表現を通じてUXを高める動きもあります。そこで今回はjCornerを紹介します。フラットUIの中でも映える、効果的な表現です。## jCornerの使い方!こちらがjCornerを使っ...

List

  • 2014/09/02

jquery-hex-gallery - 六角形に画像を表示するギャラリー

ギャラリー系ライブラリではコンテンツ(主に写真)の見せ方にこだわりが感じられます。単純に並べるだけではダメで、大きさを変えたり、Pintrest風に高さを変えたりして効果的な見せ方をします。今回紹介するjquery-hex-galleryもその一つです。面白いのは四角ではなく、六角形になっているという所です。## jq...

Missing

  • 2014/08/31

jQuery filter.me - Photoshopのトーンカーブ設定を読み込める画像フィルタ

写真は撮ったそのままよりもある程度加工した方が映えることがあります。とは言え、画像編集ソフトウェアを使うと元画像が変更されてしまうのでわざわざコピーを作成して編集すると言った手間が発生してしまいます。そこで使ってみたいのがjQuery filter.meです。WebベースでJavaScriptを使って画像加工するので何...

List

  • 2014/08/19

jCanvas – jQueryのパワーでCanvasをもっと使いやすく

HTML5で新しく追加された機能の一つにCanvasがあります。グラフィックスを描いたり、画像などのバイナリを描画したりすることもできるので使えそうな場面は多いと思うのですが、勝手が違ってなかなか手を出しづらいのが実情です。そこでJavaScriptがjQueryで圧倒的に使いやすくなったように、Canvasについても...

List

  • 2014/08/13

HTML5pano - HTML5で楽しむ360度パノラマ写真

スマートフォンでパノラマ写真が撮影できるようになっていますが、問題はいいビューワーがないことです。撮るのは面白いのですが、それを活かせるビューワーがなければムダなコンテンツになってしまいます。そこでHTML5を使ってパノラマ写真を楽しめるのがHTML5panoです。左右だけでなく、上下も含めたパノラマ写真が楽しめます。...

List

  • 2014/08/12

SlickQuiz – クライアントサイドだけで動作するクイズゲーム

クイズは好きですか?専門的、普段の生活などから出題されるクイズに答えるのは面白いですよね。問題を相手のレベルに応じて作るのはとても難しいですが、そんな楽しいクイズができたらSlickQuizで出題してみましょう。SlickQuizはjQuery製のクイズソフトウェアで、JavaScriptのコンフィグを書いて出題できま...

List

  • 2014/07/28

jQuery Photoset Grid - Tumblrでも使える写真グリッド表示ライブラリ

写真は見せ方一つで大きくインパクトが変わります。単純に並べているだけではダメで、数多くのサービスが写真の見せ方に苦心しています。そんな中、一つのシンボルになっているのがTumblrではないでしょうか。大きく一つの写真を見せるUIは写真を好む人たちに受け入れられ、今なお写真コンテンツが多く投稿されています。そんなTumb...

List

  • 2014/07/24

jQuery.overlay - テキストエリアのままで使えるWYSIWYG

テキストエリアでWYSIWYGな編集を可能にするものはどれも仰々しく感じられます。テキストエリアをiframeなどで置き換える形で提供されるのでAjaxなどとの相性が良くない場合もあります。ちょっとした文字装飾だけ行えればいいという場合にはjQuery.overlayを使ってみてはいかがでしょう。シンプルな文字装飾ライ...

List

  • 2014/07/21

jQuery.GI.TheWall.js - Google画像検索ライクな表示/アニメーションライブラリ

Googleの画像検索をよく使うのですが、一覧に並んだ画像に加えて、それをクリックした時のアニメーションや説明表示など使い勝手がとてもいいです。さすがGoogleといった所ですが、そのUIを真似ると色々な場面で使えるかも知れません。そこで使ってみたいのがjQuery.GI.TheWall.jsです。jQueryベースで...

List

  • 2014/07/20

End Credits - 感謝を込めて使いたい。Webサイトでのエンドクレジット表示

映画を観ると、最後には必ずエンドクレジットが流れますよね。そこでは出演者、映画を製作するのにあたったスタッフ、スポンサー、配給/協力会社など様々な情報が流れていきます。それは何も映画に限らずWebだって多数の人たちが関わって作られているはずで、そんな人たちに感謝を込めて使ってみたいのがEnd Creditsです。## ...

List

  • 2014/07/06

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

Web Fontを使ったフォントアイコンはデザイン上で色々な場面で使えますが、さらにユーザに選ばせたりする上でも便利な代物です。しかし元々はテキストであり、Web Fontが入っていないと豆腐になってしまうため、そのUIが問題になります。そこで使ってみたいのがjQuery fontIconPickerです。ドロップダウ...

List

  • 2014/06/11

initial.js - ユーザ名を使った格好いいプロフィール画像を生成

最近は大抵のサービスでユーザプロフィール画像が掲載できるようになっています。FacebookやTwitter、GitHubから取ってきてくれれば良いのですが、そうでない場合は自分でアップロードする必要があります。そうしないと格好わるいデフォルトの画像だったりしますよね。ユーザごとに多少なりとも変化を持たせたいと思うなら...