Resource - オープンソース

軽量且つクリーン、ミニマルなUIフレームワーク・「Milligram」

Milligram Milligramは軽量でミニマルなUIフレームワークです。必要最低限のコードでクリーン、圧縮版で2KBと軽量な設計ながら欲しいUIコンポーネントは一通り揃っていて使いやすそうな印象でした。大きな特徴がこれといって...

モダンブラウザ向けのjQuery代替な軽量スクリプト・「cash」

cash cashはモダンブラウザ向けのjQuery代替スクリプトです。と言っても100%代替を目指すつもりは無いようで、あくまで軽量さを保ちつつ、ある程度jQueryで出来ることをカバーしていく、というもののようですね。cashのコ...

ブレンドモードにも対応のオープンソースなダミー画像生成ツール・「Placemat」

Placemat Placematはブレンドモード対応のダミー画像生成サービスです。よくあるダミー画像サービス同様に、URLでダミー画像を利用する事が出来ますがほかと違ってシンプルなURLとは言えないかも。URLは上記デモのHTMLソ...
Ads

CSSのフィルターを手軽に扱えるようにするスクリプト・「Philter」

Philter PhilterはCSSのfilterを手軽にコントロールできるようにする為のスクリプトです。jQuery版とvanilla.JS版があります。CSSを書かずとも、例えばdata-philter-grayscale="1...

Githubで公開されているjQueryのプラグインと詳細をまとめている・「jQuery Cards」

jQuery Cards jQuery CardsはGithubで公開されているjQueryのプラグインと詳細をまとめているWebサイトです。詳細はREADME.md等を引っ張ってきてるみたいです。また、全てではありませんが、動作デモ...

シングルページのWebアプリケーションエンジン・「Senna.js」

Senna.js Senna.jsはオープンソースのシングルページなWebアプリケーションエンジンです。軽量で他ライブラリに依存しないフレームワークとなっており、高速ブラウジング可能なWebアプリ構築をサポートしてくれるとの事。ライセ...

WebベースなAirDropのオープンソースクローン・「Snapdrop」

Snapdrop SnapdropはAppleのAirDropクローンです。オープンソースとして公開されています。HTML5製のWebベースとなっており、ブラウザを利用して異なるデバイス間でのファイル転送が可能との事。ブラウザは同じも...

gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」

embed.js embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋...

ブラウザ上で数式を高速且つ手軽に表示する為のJSライブラリ・「KaTeX」

KaTeX KaTeXはWeb上で数式を高速簡単に表示する為のスクリプトです。上図のような、Web上で表示するのが難しい数式を手軽に書けるようにしよう、みたいなやつ。既存のMathJaxよりも高速との事で、比較画像も用意されています。...

ブラウザでPDFを作成するスクリプト・「pdfmake」

pdfmake pdfmakeはブラウザ上でPDFを作成する為の非依存型スクリプトです。JSONライクな記法で作成出来るみたいです。が、例によってこのままだと日本語は読み取ってくれませんので対応が必要になります。コードテストできるので...

ページのスクロール時にviewport内に入った要素をアニメーション表示させる非依存型で軽量なスクリプト・「ScrollReveal」

ScrollReveal ScrollRevealはページのスクロール時に、viewport内に入った要素をアニメーションエフェクト付きで表示するためのスクリプトです。他ライブラリへの依存は無く、単体で動作してくれます。圧縮版で2.7...

Hacker NewsやDesigner News、GitHub等を横断検索出来る・「THE SEARCH」

THE SEARCH THE SEARCHはHacker NewsやDesigner News、GitHub、Product Huntから横断検索してツールやリソース等を探せるツールです。話題になる情報発信のニュースサイトをまとめて検...

任意の画像からよさ気な部分を自動で切り取るスクリプト・「smartcrop.js」

smartcrop.js smartcrop.jsは任意の画像からよさ気な部分を自動で切り取るスクリプト。訳わからんですね。まともな説明が思いつきませんでしたすみません。指定されたサイズの範疇で、画像からさも良さそうに見える構図で自動...

任意のライブラリを読み込んでデベロッパーツールのコンソールからテストできる・「JS Envy」

JS Envy JS Envyは任意のライブラリをロードしてDevToolのコンソールからAPIテストを行えるツールです。上図はjqueryを読み込んだ瞬間のSSです。右側にライブラリが挿入されているのが確認出来るかと思います(わかり...

年表などのタイムラインUIを構築する為のライブラリ・「Labella.js」

Labella.js Labella.jsはタイムライン作成ライブラリです。上図のようなライン上にポイントとラベルを実装する事が出来る、というもの。ラベルは重なること無く他のラベルを避けてレイアウトしてくれます。なかなか良いのでは。ラ...

オープンソースのHTML5製パーティクルエンジン・「Proton」

Proton ProtonはOSSで公開されているHTML5製のパーティクルエンジンです。手軽に様々なタイプのパーティクルを実装、動作シミュレートが可能、とのこと。レンダラはCanvas、DOM、WebGL、Easeljs、pixel...

SVGで世界地図を作成する為のスクリプト・「World Map Generator」

World Map Generator World Map GeneratorはSVGで世界地図を作成する際にサポートしてくれるスクリプトです。jQueryに依存しています。各国へのリンクや、その地域のタイムゾーンを取得する事が出来る...

Flexboxを使ったCSSグリッドシステム・「Gridlex」

Gridlex GridlexはFlexboxを使ったシンプルなCSSグリッドシステムです。親要素と子要素に特定のclassを追加して利用するみたいです。非常に簡単なものですが、シンプル故にカスタマイズしやすいかも。カラム数は.gri...

店舗等の予約システムを実装する為のスクリプト・「Booking.js」

Booking.js Booking.jsは店舗等のオンライン予約システム構築のためのスクリプトです。OSSとして公開されていますので日本語への対応も問題なさそうです。カスタマイズ性も重視してるそうです。宿泊施設や飲食店、サロン等に留...

HTML5製の軽量で高速な2Dゲームエンジン・「Stage.js」

Stage.js Stage.jsはHTML5製の軽量且つ高速な2Dゲームエンジンです。シンプルな2Dゲーム開発をサポートしてくれます。デモを触ってみましたが、割とはまってしまうものですね・・・DOMライクなツリー構造のデータモデルの...

モーショングラフィックスを構築する為のスクリプト・「mo.js」

mo.js mo.jsはWeb上でモーショングラフィックスを作成出来るOSSのスクリプトです。滑らかなアニメーションエフェクトでエレメントに動きを加え、組み合わせてモーショングラフィックスの構築をサポートする、というもの。デバイスを選...

OS XのFinderライクな階層データ表示の為のスクリプト・「Finder.js」

Finder.js Finder.jsはMac OSのFinderのカラムビューライクな階層データ表示用スクリプトです。上記のようなファイルマネージャのUIを実装する事ができる、というもの。依存関係もなくサイズも軽量との事。ライセンス...
Ads