textareaを使ったMarkdownエディタライブラリ・「Markdown Text Editor」 Markdown Text Editor Markdown Text EditorはWebベースのMarkdownエディタです。textareaをMarkdownサポートのWYSIWYGにする、というJavaScriptライブラリで、...2016.07.24 | 9時33分27秒
非依存型で軽量、機能的なJavaScript製のモダンオーディオライブラリ・「howler.js」 howler.js howler.jsは非依存型のバニラなJavaScriptオーディオライブラリです。クロスプラットフォームで動作、多様なコーデックのサポート、オーディオのスプライトとコントロール、オートキャッシュによるパフォーマン...2016.07.22 | 10時25分22秒
Instagramの写真をダウンロードする為のブックマークレット・「[instantgram]」 はInstagramの写真をダウンロードする為のブックマークレットです。Instagramの投稿ページでブラウザに登録した本ブックマークレットを使えば別窓で写真が表示されますので後は右クリックで保存するだけ。それ以上でも以下でもあり...2016.07.18 | 9時51分05秒
Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」 Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...2016.07.15 | 10時32分28秒
ピンチやスワイプ、タップなどのジェスチャーを検出するライブラリ・「zingtouch」 zingtouch See the Pen ZingTouch | Bubble Swipe by ZingChart (@zingchart) on CodePen. zingtouchはタッチデバイスのジェスチャーを検出するライ...2016.07.11 | 8時59分57秒
カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」 You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...2016.07.10 | 9時47分51秒
要素をシェイクさせるスタイルシート・「CSShake」 CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...2016.07.09 | 11時14分49秒
UIコンポーネントに特化したCSSフレームワーク・「modulr.css」 modulr.css modulr.cssはUIコンポーネントに特化したCSSフレームワークです。多彩で豊富なカラーパレット、テキストの装飾、細かく設定できるグリッド、様々な種類のナビゲーション、各シーンに対応出来るボタンスタイル、フ...2016.07.08 | 9時54分16秒
いろいろなオプション付きのツールチップ作成CSSライブラリ・「Tootik」 Tootik Tootikは色々なオプション付きのツールチップ実装CSSライブラリです。CSSのみでツールチップを作成、オプションとして位置の設定や「成功」「注意」などの通知用、表示遅延、テキストの複数行、矢印の有無、フェードエフェク...2016.07.05 | 11時17分25秒
h1やh2などの見出しに合わせてページの目次(TOC)を自動作成するスクリプト・「Tocbot」 Tocbot Tocbotはページ内の見出しを元に、目次(table of contents)を自動作成するスクリプトです。Tocifyに触発されて作成したそうですが、1つの違いはjQueryに依存せず、バニラなスクリプトで動作する点...2016.07.03 | 11時20分00秒
textareaに行数を自動付与するスクリプト・「JQuery LinedTextArea」 JQuery LinedTextArea JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存します。textareaに新たに書き込んでも行数は表示されます。用途は多くはなさ...2016.07.02 | 11時43分02秒
ブラウザで動くシンプルなオープンソースのテキストエディタ・「textpad」 textpad textpadはOSSのシンプルなテキストエディタ。ブラウザ上で動作します。よくあるエディタのようにWYSIWYGは無く、エクスポートもtxtファイルのみです。保存はlocalStorageが使われます。基本的にはそれ...2016.07.01 | 10時40分51秒
動画をフルスクリーンで背景にするスクリプト・「Vidage.js」 Vidage.js Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作...2016.06.28 | 10時33分01秒
Electronアプリの為のOSXライクなUIフレームワーク・「Photon」 Photon PhotonはElectronで作られたアプリのためのデザインフレームワークです。OSX風に作られているようです。Electronは御存知の通りGithub製でHTML,JS,CSSで作れるクロスプラットフォームなデスク...2016.06.25 | 11時12分28秒
軽量でシンプル、非依存なJavaScriptデイトピッカー・「flatpickr」 flatpickr flatpickrは軽量でシンプル、パワフルなJavaScriptデイトピッカーです。非依存型ながら軽量なコードで実装されていますが、機能はなかなか充実しています。同じclass名で複数フォームに対応できるのも...2016.06.20 | 10時57分15秒
DOM操作やイベント等、jQueryに影響を受けた軽量なライブラリ・「Umbrella.js」 Umbrella.js Umbrella.jsはjQueryに影響を受けて作られた軽量ライブラリ。DOM操作やAJAX周り、イベントなど、jQueryの機能を持ちながら圧縮版で3KBほどと軽量なライブラリを目指しているようです。だいぶ...2016.06.17 | 10時57分49秒
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」 Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...2016.06.15 | 9時35分36秒
Bootstrap 4ベースのすっきりしたデザインな管理画面向けテーマ・「Modular Admin」 Modular Admin Modular AdminはBootstrap 4ベースの管理画面テンプレートです。すっきりしたデザインで見やすい印象でしたのでメモ。ボタンやカード、アイコン、テーブルやチャートなどのUIも揃っています。ラ...2016.06.11 | 11時11分02秒
曜日ごとに任意のメッセージを表示するだけのシンプルなスクリプト・「Daily Messages」 Daily Messages Daily Messagesは曜日ごとに任意のメッセージを表示するスクリプトです。jQueryが使用されています。Basecampにインスパイアされて作ったそうで、特に特徴もなく、単純に毎週別のメッセージ...2016.06.09 | 10時31分17秒
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」 WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...2016.06.07 | 10時19分21秒
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」 Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...2016.06.06 | 9時43分04秒
Webアプリの為に設計されたシンプル軽量なCSSフレームワーク・「Vital」 Vital VitalはWebアプリケーションの為に開発されたCSSフレームワークです。Webアプリの開発を妨げないように、極力軽量(CSS自体は圧縮版で6KB、アイコンフォントは2KB分用意されています。)に、JavaScriptは...2016.06.04 | 10時30分00秒