Resource - JavaScript

必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ツール・「Aperitif」

Aperitif Aperitifはプロジェクトに必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ジェネレーターです。使い方はまず最初に配置したいエリアをクリックしてから配置するコンテナ...

Vimeoの動画を背景に設定する為のスクリプト・「jQuery.mb.vimeo_player」

jQuery.mb.vimeo_player jQuery.mb.vimeo_playerはVimeoの動画を背景に設定する為のスクリプトです。jQueryに依存します。背景にするというか、背景にした動画のコントロールが主な目的ですね...

オープンソースのTrelloライクなカンバンツール・「Wekan」

Wekan WekanはオープンソースのTrelloクローンです。Trelloライクなカンバンツールを自身の管理するサーバーで利用することが出来ます。同じようにチームで共有できてアイテムのタグ付けやアイデア、Todo等を共有できるみた...
Ads

任意のHTML要素をスケーラブルにするスクリプト・「Scalable」

Scalable Scalableは任意のHTML要素をスケーラブルにするスクリプトです。従来のレスポンシブな、という感じではなく、必ず任意の要素がその状態を保った状態で縮小/拡大されます。極端に幅を狭めてもその状態を保つ、みたいな感...

ReactのシンプルなSVG製マップコンポーネント・「react-simple-maps」

react-simple-maps react-simple-mapsはシンプルなSVG製マップを作れるReactコンポーネントです。Reactで地図を簡単に扱えるようにしたものだそうです。マーカーや拡大、エリア別の色を変える等、基本...

コンソール内への外部JSのロードをサポートするChromeエクステンション・「JSconsole」

JSconsole JSconsoleはインスペクタのコンソールに外部JavaScriptのロードをサポートするエクステンションです。js.load()やjs.find()、js.list()等でJSをロードしたりリストを表示したりラ...

スクロールに応じて要素にアニメーションエフェクトを与えるスクリプト・「Scrollissimo」

Scrollissimo Scrollissimoはスクロールに応じて要素にアニメーションエフェクトを与えるスクリプトです。ちょっと語弊あるかもですが、よく見かける、スクロールするといろいろ表示されるあれです。動作にはGreenSoc...

タイムテーブルのような時間表を作成出来るjQueryプラグイン・「jQuery Skeduler Plugin」

jQuery Skeduler Plugin jQuery Skeduler Pluginは上図のようなタイムテーブル、時間表を作成できるスクリプトです。jQueryに依存しています。CSSと要素を用意してデータをセットすればいいみた...

任意のコンテキストメニューを実装できるスクリプト・「jQuery Menu」

jQuery Menu jQuery Menuは任意のコンテキストメニューを実装する為のスクリプトです。jQueryに依存します。特定のエリアで右クリックすると事前に設定したメニューが表示される、というもの。ライセンスはMITです。 ...

段落毎に設置した画像を、その段落が終わるまで固定させるスクリプト・「jquery-stopattop」

jquery-stopattop jquery-stopattopは段落毎に設置した画像を、段落がスクロールし終わるまで固定させるスクリプトです。ちょっと僕の説明が下手でピンとこないと思いますので動作サンプルを用意しました。名前の通り...

Mediumライクなlightboxを実装出来るスクリプト・「MediumLightbox」

MediumLightbox MediumLightboxはMediumで導入されている画像をズーム表示するlightboxと同じような動作を実装出来るスクリプトです。非依存型で、単体で動作してくれます。クリックでその場に即拡大表示、...

クライアントサイドのJavaScript製captcha・「ClientSideCaptcha」

ClientSideCaptcha ClientSideCaptchaはクライアントサイドで動作するJavaScript製captchaです。jquery依存みたいです。上デモのように画像(大文字は大文字で入力)と入力されたテキス...

Markdownでデータを可視化する為のMarkdown-Itプラグイン・「Markvis」

Markvis MarkvisはMarkdownでデータを可視化する為のMarkdown-Itプラグインです。Markdown-ItはMarkdownでオリジナルのレンダリングをする為のJS製のレンダラ/パーサーで、その拡張として使う...

よく使われるUIをまとめたReactのUIコンポーネントライブラリ・「Rebass」

Rebass Rebassはよく使われるUIをまとめたReact向けのUIコンポーネントライブラリです。各フォーム周りのエレメントからボタンやリンクなどの一般的なUI、プログレスバーやバッジ、タブなど、有ると嬉しいUIまで大量に用意さ...

Flexboxとvue.jsがベースのUIフレームワーク・「Sirius UI」

Sirius UI Sirius UIはvue.js+FlexboxなUIフレームワークです。コンポーネントやらスタイルやらがいろいろと揃えられている、どちらかと言えばBootstrap寄りのコンセプトかもしれません。ある程度揃えられ...

MediumライクなUIのツールバーで任意のテキストをシェア出来るようにするスクリプト・「share-this」

share-this share-thisはMediumライクなUIのツールバーで任意のテキストをSNS等に投げられるようにする、というスクリプトです。シェア先は各SNSは勿論、動作サンプルを見ると、メールやハッカーニュース等、任意の...

JavaScriptライブラリを大量にまとめた・「awesome-javascript」

awesome-javascript awesome-javascriptは超大量のJavaScriptライブラリをまとめたGithubページです。特にフロントエンドサイドで動くライブラリを中心に集められているようです。データ可視化、...

Bulmaフレームワーク向けに作られたVue.jsベースのUIコンポーネント・「Buefy」

Buefy BuefyはBulmaフレームワーク向けに作られたVue.jsベースの軽量なUIコンポーネント集です。よく必要とされるtableやタブ、ボタン、アラートやモーダルウィンドウ、フォーム周りなど一通り揃えられています。Bulm...

ランダムにパスワードを生成するスクリプト・「jquery.passwordGenerator」

jquery.passwordGenerator See the Pen jQuery Password Generator by kachibito (@kachibito) on CodePen. jquery.passwo...

JavaScriptのライブラリを検索できる・「searchlibs」

searchlibs searchlibsはJavaScriptライブラリを探せる検索エンジンです。animationやchartといったキーワードで検索出来ます。結果表示も高速で非常に使いやすい印象です。ノイズはかなり少ない感じしま...

Gistに公開したHTMLコードをプレビューできる・「Gist HTML Preview」

Gist HTML Preview Gist HTML PreviewはGithub Gistに書いたHTMLをプレビュー出来るツールです。ページIDを入力すれば書かれたHTMLを解析、実装してくれる、というもの。割とシンプルにできて...

スライダータイプの使いやすいタイムラインスクリプト・「Timeline.js」

Timeline.js Timeline.jsはスライダー形式で年表のようなタイムラインを表示するスクリプトです。jQueryに依存しています。よくあるタイムラインスクリプトのように細かく年月日設定する等は出来無さそうですが、ざっくり...
Ads