Resource - フレームワーク

店舗等の予約システムを実装する為のスクリプト・「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のスクリプトです。滑らかなアニメーションエフェクトでエレメントに動きを加え、組み合わせてモーショングラフィックスの構築をサポートする、というもの。デバイスを選...
Ads

パズルを利用したCAPTCHA実装の為のスクリプト・「PuzzleCAPTCHA.js」

PuzzleCAPTCHA.js PuzzleCAPTCHA.jsはパズルを利用したCAPTCHA実装の為のスクリプトです。jQueryに依存しているようです。パズルと言っても実際にパズルを解くのではなく、同じ絵柄を選択する、というだ...

Semantic UIユーザー向けのリアルタイムプレビューツール・「SemanticEdit」

SemanticEdit SemanticEditはSemantic UIを使用している開発者向けのプレビューツールです。HTMLを書けばSemantic UIのスタイルが適応された状態のプレビューをリアルタイムで確認する事が出来ます...

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

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

Webサイトに任意のユーザー用のショートカットキーを設定できるスクリプト・「visualKeys」

visualKeys See the Pen PPxEdN by kachibito (@kachibito) on CodePen. visualKeysはWebサイトに任意のショートカットキーを手軽に割り当てられるスクリプト...

CSSのブレンドモードとフィルターを組み合わせて動作テストできる・「FilterBlend」

FilterBlend FilterBlendはCSSのbackground-blend-modeとfilterプロパティを組み合わせて動作テスト出来るツールです。任意の画像をアップロードしてblend-modeを設定し、filter...

Dropbox製のオープンソースSCSSフレームワーク・「Scooter」

Scooter ScooterはDropboxが提供するOSSのSCSSフレームワークです。Dropbox向けに開発した基本スタイルのSCSS及びUIフレームワークをオープンソースとしてもユーザーに公開しているようです。スタイルに関し...

SVGのパスをアニメーションにする為のシンプルなスクリプト・「jQuery DrawSVG」

jQuery DrawSVG jQuery DrawSVGはSVGのpathにアニメーションエフェクトを付与する為のスクリプトです。jQueryに依存しています。書いたpathにstroke-dasharrayプロパティとstroke...

Vue.jsベースのモバイル向けUIフレームワーク・「VUI」

VUI VUIはVue.jsベースのモバイル向けUIフレームワークです。iOS、Android、Windowsモバイルといった各モバイルデバイスのネイティブUIライクなコンポーネントを提供しているとの事。HTML属性をバインドする為の...

CSSのみで棒グラフを作るためのチャートシステム・「chart.css」

chart.css chart.cssはCSSのみで棒グラフを作成する為のCSSチャートシステムです。上図のようなシンプルな棒グラフのみ作成可能となっています。用意されたclassやカスタムデータ属性によってパーセンテージの表示、太さ...

Dribbbleに投稿したアイテムでポートフォリオを作れるスクリプト・「Dribbbox」

Dribbbox DribbboxはDribbbleに投稿したアイテムを読み込んで自身のWebサイトにポートフォリオとして実装する為のスクリプトです。同梱されたconfig.jsを自分のDribbbleアカウントに設定する形で実装する...

任意の画像をプログレスバーにする為のスクリプト・「LoadGo」

LoadGo LoadGoは任意の画像をプログレスバーにする為のスクリプトです。jQueryに依存しています。上図のようなロゴを使ったプログレスバーを実装する事が出来ます。手軽で良さそうですね。ライセンスはMIT。 LoadGo

軽さを意識したシンプルなCSSフレームワーク・「Kickstart」

Kickstart Kickstartは軽さを重視したCSSフレームワークです。元々はKickstrapという名でBootstrapの拡張ツールだったそうですが、Ver.3で完全に独立したCSSフレームワークになったとの事です。Boo...

HTML5/JavaScript製ゲーム開発フレームワーク・「hitagi.js」

hitagi.js hitagi.jsはHTML5とJavaScriptで作るゲームの為の開発フレームワークです。エンティティコンポーネントシステムを採用しているとの事で、OSSとしてMITライセンスの元でソースコードが公開されていま...

軽量なJavaScript製モーションエンジン・「Popmotion」

Popmotion Popmotionは軽量なJS製のモーションエンジンです。アニメーションや物理エンジン、キー入力ハンドリングを備えたライブラリで12kbと軽量サイズとなっています。ライセンスはMIT。 Popmotion

AngularJSの為のガントチャートコンポーネント・「angular-gantt」

angular-gantt angular-ganttはAngularJSを使ったWebアプリケーションにガントチャートを実装する為のコンポーネントです。休日や勤務時間等の定義が可能なカレンダーのサポートや、タスクのソート、フィルタリ...

WebサイトへのGoogle Mapの埋め込みをサポートするスクリプト・「MAPIT」

MAPIT MAPITはWebサイトへのGoogle Mapの埋め込みをサポートするシンプルなスクリプトです。jQueryに依存しています。Google Mapのスタイルのカスタマイズやルート表示、ピンの変更など、面倒な部分を手軽に変...

Bootstrapのテーマを配布しているWebサイトをまとめている・「ThemeFinder」

ThemeFinder ThemeFinderはBootstrapのテーマを配布しているWebサイトをひと纏めにしたWebサイトです。各Bootstrapテーマ配布サイトはiframeでその場に表示されますので探すのは楽そうですね。 ...

Google Maps Javascript APIでフォームでの住所入力を自動補完する・「Autocomplete for Addresses and Search Terms」

Autocomplete for Addresses and Search Terms Google Maps Javascript APIを使ったフォームの住所自動補完が便利そうだったのでメモ。恥ずかしながら、今まで知りませんでした...

コンテンツを直接編集出来るシンプルなWYSIWYGエディタ・「ContentTools」

ContentTools ContentToolsは閲覧中のページをその場で直接編集出来るシンプルなWYSIWYGエディタ実装ライブラリです。上図のように左上にアイコンが表示されるのでそこから編集モードにスイッチ出来ます。ツール部分は...
Ads