覚えておくと便利な正規表現のパターンをまとめた・「Regex Hub」
Regex Hub Regex Hubは覚えておくと便利な正規表現のパターンをまとめているプロジェクトサイトです。メールやHTMLタグ、日付、カラーコードや電話番号などに対応出来る正規表現が用意されており、その場でマッチするかをテスト...
Resource - JavaScript
Googleリッチスニペット対応の、WebページにオリジナルのLikeボタンを付けるスクリプト・「LikeBtn」
LikeBtn LikeBtnは任意のWebページにLike/Dislikeボタンを付けられるスクリプト。jQueryに依存します。上デモのように日本語にも対応しています。少し微妙ではありますが・・ｗ 念の為、Facebook...
使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」
Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...
画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImg See the Pen QGENKq by kachibito (@kachibito) on CodePen. LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デ...
jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」
pit-scheduler pit-schedulerはjQueryとBootstrapで作るスケジューラーです。横長のカレンダーに蛍光ペンで引くようにスケジュールを設定、管理出来る、というもの。現状の仕様ではタスクの設定はちょっぴり...
レスポンシブなtableの為のスクリプト・「resTables」
resTables resTablesはレスポンシブなtableを作るためのスクリプトです。jqueryに依存しています。同等の先発のスクリプトであるstacktable.jsの形式に基づき、更に進化させたものとして提供しているそう。...
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」
PrognRoll PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jqu...
NAVER製のオープンソースなUIインタラクションライブラリ・「egjs」
egjs egjsはLINEでおなじみのNAVERが公開しているUIインタラクションセットライブラリです。Webアプリ構築の際に開発スピードに貢献する事が目的のようで、OSSとして提供してくれています。jQueryを使って更に機能を拡...
オープンソースのシンプルなCSVエディタ・「Comma Chameleon」
Comma Chameleon Comma Chameleonはオープンソースのデスクトップ用CSVエディタです。electronで作られているようで、各プラットフォームで動作するようです。また、CSVlintが導入されていて、データ...
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
KUTE.js KUTE.jsは高度なカスタムアニメーションにも対応できるパフォーマンス重視のJavaScript製アニメーションエンジンです。本サイトTOPにもあるような複雑なアニメーションコンテンツの実装をサポートしてくれます。コ...
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」
placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...
Githubのコードを任意のWebページに埋め込める・「github-embed」
github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」
okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...
テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」
txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」
jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...
YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」
superembed.js superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく...
JavaScriptのTipsを不定期で紹介する・「JS Tips」
JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...
自身の技術スキルをアニメーションする棒グラフで表示できるjQueryスクリプト・「skills」
skills skillsは自身の技術スキルをアニメーションする棒グラフで表現するためのスクリプトです。jQuery依存です。よくある、スクロールに応じてアニメーションしながらグラフが設定値まで伸びる、というもの。アニメーションや...
スクロールに応じて要素をCSS3で手軽にアニメーションさせられるライブラリ・「Kissui.scrollanim」
Kissui.scrollanim Kissui.scrollanimはスクロールに応じて要素をアニメーションしながら表示させるためのライブラリです。オシャレ感ただようWebページに大抵あるあのエフェクトを手軽に付与しよう、という...
カスタムなGoogle Mapを手軽に作成出来るサービス・「EZ Map」
EZ Map EZ MapはカスタムされたGoogle Mapを手軽に作成出来るWebサービスです。APIと少しのjQueryコードでGoogle Mapの地図の色を変更するの記事で書いたような色の変更や任意のマーカー設置、各Goog...
Webページのパフォーマンスチェックの結果をヒートマップで表示するブックマークレット・「Perfmap」
Perfmap PerfmapはWebページのパフォーマンスチェックの結果をヒートマップで表示してくれるブックマークレットです。リソースが表示されるタイミングをResource Timing APIでチェック、それぞれに表示されるまで...