Resource - JavaScript

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属性をバインドする為の...

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

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

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

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

Basecamp製のシンプルなWYSIWYGエディタ・「Trix」

Trix Trixはプロジェクト管理ツールを運営するBasecamp社製のシンプルなインターフェースのWYSIWYGエディタの為のライブラリ。毎日使ってもストレス無く、WYSIWYGエディタでモバイル向けを含むWebブラウザ間にバグが...

軽さを意識したシンプルな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

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

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

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エディタ実装ライブラリです。上図のように左上にアイコンが表示されるのでそこから編集モードにスイッチ出来ます。ツール部分は...

JavaScriptベースのOSSゲームフレームワーク・「Playground.js」

Playground.js Playground.jsはオープンソースのJavaScript製ゲームフレームワークです。基本的なAPIのサポートやモバイルデバイスへの対応もしてあるみたい。より使いやすく、すぐに使えるアウトオブボックス...

PDFやODF等のドキュメントファイルをWebサイトで表示させる為のスクリプト・「ViewerJS」

ViewerJS ViewerJSはPDFやスプレッドシート等をWebサイトに埋め込めるJavaScript製のドキュメントリーダーです。PDF.jsやWebODFを利用しているみたいですね。ライセンスはAGPLの元、OSSとして公開...

指定した正規表現にマッチする文字列をランダムで返すスクリプト・「randexp.js」

randexp.js randexp.jsは書いた正規表現にマッチするキーワードをランダムで返してくれるスクリプトです。例えば(||3)日とすれば、1日から31日までがランダムで表示される、というもの。用途はともかくとして、ちょっと面...

CSSやJavaScriptをブラウザ上で書いて動作テスト出来るMozilla製のオンラインコードエディタ・「Thimble」

Thimble ThimbleはCSSやJavaScriptをブラウザ上で書いて動作テスト出来るオンラインコードエディタ。Mozilla製でGithubにてソースコードも公開されています(今のところ特定のライセンス表記は見当たりません...

JavaScriptやPython、コマンドラインの使い方等を無料で学べる学習サイト・「Codecademy」

Codecademy Codecademyは対話形式でコードを学べる学習サイトです。無料で利用可能で、学習項目はHTMLやCSS、JavaScriptからPHPやRuby、Pythonの他、コマンドラインの使い方まで揃えられています。...

ベン図やオイラー図を作成出来るライブラリ・「venn.js」

venn.js venn.jsはベン図・オイラー図を描くためのJavaScriptライブラリです(参照:ベン図・オイラー図)。D3.jsに依存しています。上図のように、複数の集合同士の関係や範囲を視覚的に図式化は勿論、各円とその共通部...

ブラウザで動くオープンソースの3Dグラフィックエディタ・「WebGLStudio.js」

WebGLStudio.js WebGLStudio.jsはオープンソースで公開されている、ブラウザで使える3Dグラフィックエディタです。動作も思ったより重くなく、サクサクと動いてくれる印象でした。適当に触っただけなのでアレですが。3...

ブラウザで動作するHTML5製のミニマルなメモアプリ・「ZenPen」

ZenPen ZenPenはブラウザで動作するミニマルなメモアプリです。単純に、文章を書くためだけに作られていますので、機能らしい機能もほとんどありません。書いた文章はlocal storageに保存されます。テキストはドラッグでツー...

ブラウザで動作するHTML5製の軽量パノラマ写真ビューア・「Pannellum」

Pannellum Pannellumはブラウザで動くパノラマビューアです。HTML5、JavaScript、CSS3、WebGL等を使って構築されています。Googleのストリートビューライクにマウスでぐりぐりと動かすことが出来ます...

Web開発者やWebデザイナー向けのリソースのキュレーションサイト・「The Starter Kit 」

The Starter Kit The Starter KitはWeb開発者やWebデザイナーの為のリソースを収集しているキュレーションサイトです。CSSやJavaScript、Photoshopに関わるリソースなどが多く、収集され...

HTMLエレメントに手軽にサウンドエフェクトを付与するスクリプト・「EasyAudioEffects.js」

EasyAudioEffects.js EasyAudioEffects.jsはHTML要素にサウンドエフェクトを付与する為のスクリプトです。jQueryに依存しています。設定も簡単で使いやすそうな印象でした。音を出す事自体はjQue...
Ads