Resource - フレームワーク

インタラクティブなグラフやチャートの為のjQueryプラグイン・「FusionCharts」

FusionCharts FusionChartsはインタラクティブなグラフやチャート構築の為のスクリプトです。jQueryに依存してます。シンプルなグラフはもちろん、3Dな円グラフや棒や線などの複合チャート、エクスポート機能の他、J...

ブラウザやOS、デバイス等を検出してclassを付与するスクリプト・「Detectr.js」

Detectr.js Detectr.jsはブラウザやOS、デバイス等を検出してclassを付与するスクリプトです。他ライブラリに依存せず単体で動作し、圧縮版で3.6KByと軽量です。下記のようにclassが付与されます。 ...

画像にblur効果を与えるためのシンプルなスクリプト・「Image Blur Plugin」

Image Blur Plugin Image Blur Pluginは画像にぼかし効果を与えるためのシンプルなスクリプトです。jQueryに依存します。いわゆるblur効果を簡単に付与できる、というもの。オールドブラウザも含め、...
Ads

再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」

RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...

任意のテキストをクリックで表示させるシンプルな注釈スクリプト・「Expounder」

Expounder Expounderはクリックで任意のテキストを表示させるシンプルなスクリプトです。タイトルだけだとうまく説明できなかったのですが、百聞は一見に如かずという事で上記の動作サンプルを用意しました。注釈系のスクリプトです...

HTML5製の管理画面構築のためのOSSなダッシュボードフレームワーク・「RazorFlow」

RazorFlow RazorFlowはHTML5製のダッシュボード用フレームワークです。オープンソースとして公開されています。円グラフや棒グラフ等のチャート、管理画面のスタイルビルダー、リアルタイム更新、軽量且つ高速でタッチデバイス...

微調整可能な拡大鏡を実装出来るスクリプト・「jfMagnify」

jfMagnify jfMagnifyは微調整可能な拡大鏡を実装出来るスクリプト。jQueryとjQuery UIに依存します。上記のように拡大鏡に+-ボタンが付いており、拡大鏡内の微調整が可能となっています。拡大鏡はCSSのみで...

文章に注釈を加えるためのシンプルなスクリプト・「marginotes」

marginotes marginotesは文章内の任意のキーワードに注釈を加えるためのシンプルなスクリプトです。jQuery版と単体で動くvanilla版があります。マウスホバーで左端にちょろっと注釈が出る、というシンプルなもの。ツ...

画像のExif情報を読み取るためのJavaScriptライブラリ・「Exif.js」

Exif.js Exif.jsは画像のExif情報を読み取るスクリプトです。画像のメタデータを読み取って取り出すだけのもの。上図のように動作テストしてみましたが項目数は52ほど用意されているようですので全てではないにしても割と揃えられ...

WordPressのプラグイン作成のためのフレームワーク・「Herbert」

Herbert HerbertはWPのプラグインを作成するためのフレームワークです。ショートコード追加、プラグインのアクティブ/非アクティブ時の処理、ウィジェット、データ保存、カスタム投稿タイプ周り等に対応出来るように構築してあるみた...

プレースホルダーを複数の任意のテキストに変更するスクリプト・「superplaceholder.js」

superplaceholder.js superplaceholder.jsはプレースホルダーを任意のキーワードで変更するスクリプトです。非常に軽量で他ライブラリに依存しません。需要があるかは置いておいて・・どこかで役に立つかもしれ...

任意の画像にプレビューを確認しながらフィルタをかけてCSSのfilterでコードを出せる・「」

CSS Filter See the Pen CSS Filter by Jordano Aragão (@jordanoaragao) on CodePen. CSS Filterは任意の画像にCSSのfilterをテストでき...

シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」

Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...

40種以上の画像のマウスホバーエフェクトを使いやすくまとめたスタイルシート・「imagehover.css」

imagehover.css imagehover.cssは画像のホバーエフェクトをclass付与などで手軽に扱えるようにしたスタイルシートです。上記のように画像にマウスを乗せた際のエフェクトを40種以上まとめて一つのCSSにしたもの...

製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」

Products Comparison Table Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意...

リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」

List.js List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプ...

シンプルなチャットシステムを導入する為のスクリプト・「Chatjs」

Chatjs Chatjsはシンプルなチャットシステムです。Facebookライクに右下に小さく表示されるシンプルなもので、プラットフォームにも依存しないそうです。ソーシャル要素を持ったWebアプリにあると便利かもしれませんね。Fac...

VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」

CSSCO CSSCOはスマフォの写真加工/共有アプリ、VSCOで出来るようなフィルターを画像にかけるためのスタイルシートです。InstagramのフィルタをかけられるCSSGramにインスパイアされたらしく、そのVSCO版を作成した...

メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」

Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...

レスポンシブWebデザインにも対応した、APIのドキュメント作成キット・「Slate」

Slate SlateはAPIのドキュメントを作成する為のテンプレートです。RWD対応で、基本的には目次、説明、サンプルコードの3カラム構成になっているようです。このタイプの仕様書が個人的には一番見やすいです。ナビゲーションもよく見か...

シンプルなコンテンツエディタ構築の為のスクリプト・「Substance」

Substance Substanceは文章向けのシンプルなドキュメントエディタ構築の為のスクリプトです。いわゆるリッチテキストエディタのような類のものですが、少し趣が異なる印象ではありますね。動作サンプルでは文章用に特化した形に...

モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」

Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...
Ads