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

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

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

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

もっと見る

None

  • 2015/12/27

You-Dont-Need-jQuery - jQueryを使わない書き方教えます

jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。## You-Dont-Need-jQ...

List

  • 2015/12/21

ResponsifyJS - 画像の表示をレスポンシブに変化

レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは...

List

  • 2015/12/20

jQuery formBuilder - jQueryによる動的フォームが作成

マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればい...

List

  • 2015/11/27

jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ

Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。## jQuery-Kin...

List

  • 2015/11/21

jQuery Localization Tool - JavaScriptによる多言語対応

今時のWebサイトにおいて、多言語対応は必須と言えます。方法は幾つか考えられますが、基本は3つに分けられます。一つはドメインやパスごとに言語を分けてしまう方法、もう一つは閲覧者の情報を見てサーバ側で情報を出し分ける方法です。最後の方法として、Webブラウザ上だけで表記を切り替えるという方法があります。それを実現するライ...

List

  • 2015/11/20

jQuery DrawSVG - SVGをアニメーションしながら描画

画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。## jQ...

List

  • 2015/11/20

Cropper - スマートフォンにも対応した画像切り抜きライブラリ

スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介し...

List

  • 2015/11/18

FlipClock.js - パラパラめくれるフリップ式時計

昔あった時計でフリップ式があります。数字がパラパラとめくれる仕組みです。1分経つごとにパネルがめくれ上がっていくのが面白く、見ていて飽きないものだった覚えがあります。そんなフリップ式の時計を再現したUIがFlipClock.jsです。時計としての利用以外にも使える可能性があるライブラリです。## FlipClock.j...

List

  • 2015/11/04

jQuery Timelinr - 年表と画像を組み合わせたスライドショー

Web上では多彩な表現が可能になっていますが、それ故に自分のこだわった表現をどう実現したら良いか悩んでしまうことがあります。そこでぴったりの表現ができるオープンソース・ソフトウェアがないか探すこともあるでしょう。今回紹介するjQuery Timelinrもそんなソフトウェアの一つです。まさに自分が探していたものだ、と言...

List

  • 2015/09/18

jQuery Animated Screenshots - 縦長のスクリーンショットをスクロールさせながら表示

最近のWebサイトはSPA(シングルページアプリケーション)の流れもあり、縦長になっています。そのため見えているところだけのスクリーンショットではサイトの魅力を存分に出せないのではないでしょうか。とはいえ縦長のスクリーンショットなんて誰も喜びません。そこで使ってみたいのがjQuery Animated Screensh...

List

  • 2015/08/17

jquery.cb-slideheader.js – スクロールでヘッダーを表示/非表示

ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。実装は面倒なイメージがありますが、jquery.cb-slideheader.js

List

  • 2015/08/10

wPaint - jQuery製のペイントソフトウェア

画像を単にアップロードするだけでなく、ちょっとした装飾を加えたいと思うことがあるかも知れません。通常、そのためにはローカルで加工してアップロードする必要がありますが、画像編集ソフトウェアを用意するのが面倒です。そこで使ってみたいのがwPaintです。jQueryを使ったWebベースのペイントソフトウェアです。## wP...

List

  • 2015/05/21

jQuery.my – UI/データを2 wayで同期するjQueryライブラリ

JavaScriptでUIを作っている場合に問題になるのがDOM操作です。idで指定したり、あるタグの中のHTMLを操作したりするのが非常に面倒です。一カ所で忘れた結果、全体の表示がおかしくなるなんてことも多々あります。そこでReactのように実際の描画を気にせずに画面を作っていけるライブラリに注目が集まっています。今...

List

  • 2015/04/02

InlineAttachment – GitHub風にテキストエリアへのファイルドロップでアップロード

個人的にGitHubでとても好きな機能にテキストエリアに画像をドロップしてアップロードする機能があります。自分でWebサービスを作っていて、画像をアップロードして欲しい場面があったらこういう実装をするだろうなと思える良い機能です。InlineAttachmentはそんなテキストエリアを使ったファイルアップロードを実現し...

List

  • 2015/03/23

animatedModal.js – アニメーションしながら表示される大きなモーダル

モーダルウィンドウといえばリンクやボタンをクリックした際などに小さく表示されるウィンドウです。しかしスマートフォンなどの画面領域が小さいブラウザの場合、画面全体に広がって表示されます。そんな大きなモーダルをデスクトップやタブレットでも使えるのがanimatedModal.jsです。大きく表示されるのでインパクトがあり、...

List

  • 2015/02/03

jQuery.highlightRegex - 正規表現を使ったテキストハイライト

正規表現を使いこなせればコード量も大幅に減る可能性がありますし、全体の見通しも良くなります。ミスすると怖い時もありますが、それだけに普段から練習して問題ない正規表現が書けるようになりたいものです。そこで試してみたいのがjQuery.highlightRegexです。jQueryを使って正規表現でテキストハイライト処理を...

List

  • 2015/01/30

jQuery.Simple-Event-Calendar - シンプルなインタフェースのイベントカレンダー

イベントカレンダーは便利です。好きなアイドルグループのイベント、本の出版日、勉強会など様々な場面で使われます。普段使っているスケジューラーに登録しても良いですが、仕事とプライベートのものがごちゃ混ぜになってしまうのを嫌う人も多いのではないでしょうか。そこで使ってみたいのがjQuery.Simple-Event-Cale...

None

  • 2015/01/28

Switcher – URLをアプリ用スキーマに変換

iOSではアプリ間で連携する際に専用のURLスキーマを使います。それによりWebブラウザでリンクをクリックした時に電話をかけたり、SMSを送信する、さらには他のアプリを起動できるようになっています。しかし専用だけあってURLをデスクトップ/スマートフォンで切り替えるのは面倒です。そこで使ってみたいのがSwitcherで...

List

  • 2015/01/27

GitHub jQuery Repo Widget – GitHubリポジトリを格好良く埋め込み表示

ブログや自分のWebサイトでGitHubのリポジトリを紹介したいと思うことがあります。リンクだけでは面白くありませんので、今風に埋め込み表示にしたいところでしょう。そこで使ってみたいのがGitHub jQuery Repo Widgetです。GitHubのリポジトリを格好良く埋め込み表示してくれるjQueryプラグイン...

None

  • 2015/01/23

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

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