2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer
アニメーションgifは画像が表示されるとすぐにアニメーションが動き出しますが、それらのアニメーションgifにスタートとストップ機能をつけられるjQueryのプラグインを紹介します。 スタートをクリックしてからアニメーションgifをロードするので、ページの軽量化にもなる優れものです。 gifplayer gifplayer -GitHub gifplayerのデモ gifplayerの使い方 gifplayerのデモ デモでは、アニメーションgifの画像にオーバーレイで「gif」と表示されており、クリックするとアニメーションgifが再生されます。 再生中にアニメーションgifをクリックすると、ストップします。 gifplayer: demo 「gif」ボタンのとこには、三角アイコンや「再生」ボタンでもよさそうですね。 gifplayerの使い方 Step 1: 外部ファイル jquery.j
Odometer — Transition numbers with ease
O L M O D Z A B C D O I J K L M O M G H I J K L M E Y Z A B C D E T L M N O P Q R S T E V W X Y Z A B C D E R G H I J K L M O P Q R How To Use Add the js and a theme file to your page: <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simp
HTML5のvideo要素を紹介 IE8にも対応させました【HTML5実践編】
こんにちは、WEBマーケティング部の杉尾です。 今回と次回でvideoタグについてお話しさせていただきます。 よろしくお願いします。 videoタグとは videoタグはHTML5から新しく追加された、動画メディアを再生するためのタグ要素です。 これにより、閲覧者の環境にプラグインがインストールされているかどうかを気にすることなく、Webサイトに動画を設置できるようになります。 IE8への対応を含めたコードを載せていますので、下記をご覧ください。 説明不要でコードだけ欲しい方はこちらへ。 ファイル形式は MPEG-4です。 videoタグ実装前段階 まず、Web制作者ご用達のcaniuse.comを見に行きます。（下図） 主要ブラウザ（IE,Firefox,Chrome,Safari,Opera）の最新バージョンは既にvideoタグをサポートしています。 それに、iOS safariとAn
【jQuery】スクロール量に応じて発火するサンプルコード | k n note
こんにちは、中村です。jQueryを使ってスクロール量によってイベントを発火させたいケースがそれなりに多いので、サンプルと説明を残しておきます。 追記：scroll系のイベントは発火の回数が著しく多いので、重い処理を入れてしまうとユーザー体験を損なう可能性があります。。もし時間があったら、【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。も合わせて見てもらえたら幸いです。 利用するjQueryメソッド 『scrollTop()』 windowやdocumentなどの要素に対して使えるメソッドです。ページをどれくらいスクロールしたかのスクロール量を測ることができます。 『scroll()』 ブラウザ上でスクロールを行った時に発火するイベントです。スクロール量に応じてイベントを発火させたい場合は『scroll()』を利用して関数を発火させること
[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js
スマホやタブレットの便利操作、プルダウンするとリフレッシュできる機能をページに簡単に実装できるJavaScriptの軽量ライブラリを紹介します。 リフレッシュは範囲やトリガーを設定でき、通常のプルダウンしてリフレッシュする挙動だけでなく、ヘッダを残してコンテンツだけというのもできる優れ物。 PulltoRefresh.js PulltoRefresh.js -GitHub PulltoRefresh.jsのデモ PulltoRefresh.jsの使い方 PulltoRefresh.jsのデモ デモはスマホ、タブレットでご覧ください。 ※デスクトップ環境では動作しません。 という訳で、iPadでデモページを見てみました。 デモではリフレッシュ時に、アラートが表示されます（もちろん無しにできます）。
![[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/15ca24bfb4149f1510a5e0af56cfd65f35fded5f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120805.png)
JSフレームワークを使ったHTMLテンプレート利用のススメ
前回、Webシステムの運用現場では「HTMLの文言、デザインの修正がすぐにできない」「サーバサイドの技術がわからないとHTMLが修正できない」といった問題が生じていることを紹介しました。そして、それらの問題の原因の一つに、PHPでのSmartyやRubyのERBといったサーバサイドテンプレートがある、これらの問題はクライアントサイドでのHTMLテンプレートを使うと解決しやすくなることを説明しました。もっとも、現在フロントエンドエンジニアがチーム内にいない場合には、具体的にはどのような方法がとれるのかがイメージつきにくいと思います。今回は、クライアントサイドでのHTMLテンプレートを使って具体的な方法を紹介します。 対象読者 サーバサイド開発者 フロントエンド開発者 Webアプリ・システム開発に参加する方全般 クライアント側でのHTML生成することの懸念点について 前回、サーバサイドHTML
テーブル等のヘッダをスクロールしても超簡単に固定できる「jquery-sticky-header-footer」:phpspot開発日誌
GitHub - kboucher/jquery-sticky-header-footer: jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport. テーブル等のヘッダをスクロールしても超簡単に固定できる「jquery-sticky-header-footer」 テーブルのヘッダをExcelのようにスクロールしても固定して分かりやすくすることができます。 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 テーブル行の詳細をクリックで開けるテーブル実装 スプレッドシート風のテーブルウィジェット実装JS
リスト内で指定したキーワードにマッチする項目だけハイライトする
Result input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。 jQueryvar jSearch = (function (){ // 対象のセレクタ var input = $('input'); var items = $('.item'); // 検索部分 input.keyup(function() { // パフォーマンスAPI var t0 = performance.now(); var input = $(this).val(); //マッチの有無で対象の要素を透過 switch(true){ case input === '': items.css('opacity', '1'); break; default: items.css('opacity', '0.2'); items.filter('[data-ty
2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス
数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、データ ビジュアライゼーションも同じくらい重要になっています。グラフ作成やマッピングのライブラリはたくさんありますが、D3.jsほど目立つものはほとんどありません。このJavaScriptライブラリはSVGやCanvasの要素と連携して、Web上のグラフ、チャート、動的なビジュアライゼーションをレンダリングします。 D3.jsは完全に無料で、JavaScriptで構築された最も強力なビジュアライゼ
D3.js を使ってみる - Qiita
まずはじめに、データ可視化は真の目的ではありません。手段です。 Vitaly Friedman の有名な言葉で、データ可視化の大目的は明瞭かつ効果的に情報とコミュニケーションができるように、データを視覚化できる能力そのものである (The main goal of data visualization is its ability to visualize data, communicating infomation clearly and effectivelty.) というものがあります。 情報を視覚的に伝える 明確に情報を伝える 効果的に情報を伝える こういったことがデータ可視化の要件かと思います。 とくに、何のための可視化なのかという大目的を見失ってはいけません。 この辺の話は以下の「データ可視化勉強会」のスライドがとても素晴らしいのであわせて参照すると良いでしょう。 http:
指定エレメント内に収まるようテキストをちょうどよく省略してくれる「Shave」:phpspot開発日誌
Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height. 指定エレメント内に収まるようテキストをちょうどよく省略してくれる「Shave」 maxheightを指定して範囲内におさめてくれるようです 関連エントリ ページ内テキストをハイライトすることができるJS「mark.js」 複雑なCSSアニメーションを制御できる「Choreographer-js」 ピュアJSでバーコードを描画できる「bwip-js」 WEBCAMを使ったアイトラッキングができる「WebGazer.js」
スクロール要素にプログレスバーを付けられるjQueryプラグイン「PrognRoll」:phpspot開発日誌
PrognRoll | A tiny, lightweight jQuery plugin that creates scroll progress bar on the page スクロール要素にプログレスバーを付けられるjQueryプラグイン「PrognRoll」 ページ全体や、スクロール要素に乗った場合にページトップにプログレスバーを表示させるプラグインです。 進み具合が一発で分かって使いようによっては利便性を高められそう 関連エントリ コンテンツを全画面で上下左右にスクロールさせられる「viewScroller.js」 画面スクロールでフッターからメニューが表示される「footerMenu」 スクロールして画面内に入った際にエレメントをアニメーションさせつつ表示できる「scrollreveal.js」
Youtube・Vimeo・Dailymotion等の動画を共通のAPIで操作できる「embedplayer」:phpspot開発日誌
GitHub - panzi/embedplayer: Unified jQuery interface to various audio/video players without dependency on their official JavaScript libraries. Youtube・Vimeo・Dailymotion等の動画を共通のAPIで操作できる「embedplayer」 再生、ボリューム変更、停止などの動画操作をソースは別々でも共通のAPIによって制御できる点が特徴で便利そうです 関連エントリ 360度のパノラマビデオを再生できる動画プレイヤー「Valiant360」 HTML5動画プレイヤーを拡張させられる「jquery-video-extend」 HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」 Youtube,Vimeoなどの
jQueryとCSSで水平のタイムラインの実装デモ:phpspot開発日誌
Horizontal Timeline in CSS and jQuery | CodyHouse jQueryとCSSで水平のタイムラインの実装デモ タイムラインというとFacebookの縦のタイムラインが印象的ですが、水平方向のタイムラインをレスポンシブで実装したUIデモ。 １つのUIのとして頭のなかのネタ帳に記しておいてもよさそう 関連エントリ 綺麗でレスポンシブなタイムラインのUIを作成できるjQueryプラグイン「Dynamic Timeline」 FacebookスタイルのレスポンシブなタイムラインをBootstrapで実現するチュートリアル 人員のスケジュールを並べてタイムライン表示できる「schedulerjs」 自鯖で自分のステータスをタイムライン表示できるOSS「Cachet HQ」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What is polyfill? - Definition from WhatIs.com
What JavaScript Programmers Need to Know about Transpilers
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」
JSONから高性能なtableを作成してくれるスクリプト・「Tabulator」
レスポンシブなtableの為のスクリプト・「resTables」
