ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...
Resource - Archives
anime.jsでテキストにアニメーションエフェクトを付与するコードをまとめたサンプル集・「MOVING LETTERS」
MOVING LETTERS MOVING LETTERSはanime.jsでテキストにアニメーションエフェクトを付与するスクリプトをまとめたコードサンプル集です。各エフェクトはクリックすればコードが表示されるようになっています。いい...
アップロードされた画像を様々な解像度に変換、問題なく認識できるよう処理してくれるツール・「Logo Crunch」
Logo Crunch Logo Crunchは任意の画像をアップロードして、256x256や128x128、32x32などの多用な解像度に変換、それぞれの解像度でも元の画像を認識できるよう処理してくれるWebツールです。また、自動処...
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」
bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...
Googleカレンダーを使ったシンプルなタスクマネージャ・「TManager」
TManager TManagerはGoogleカレンダーを使ったシンプルなタスクマネージャです。Googleカレンダー側に作ったイベント、TManager側で作ったイベントはリアルタイムで同期されますが、TManager側で作成した...
カンバンやロードマップなど、チームでプロジェクトを管理できる・「Atlaz」
Atlaz Atlazはチームで使えるプロジェクト管理プラットフォームです。カンバンやロードマップ、ガンチャートやタスク管理、バージョン管理などの機能がついており、iOS、Androidのスマフォアプリも提供されています。Trello...
CSVやプレーンテキストのデータをJSONやMarkdown等に変換できるOSSなコンバーター・「Mr. Data Converter」
Mr. Data Converter Mr. Data ConverterはCSVやプレンテキスト（タブ区切りしたもの）をJSONやMarkdown、PHPやRubyなどの各言語での配列等に変換してくれるコンバーターです。オープンソー...
手作り感がかわいい、オープンソースなアイコンフォント・「JAM icons」
JAM icons JAM iconsは手作り感がかわいらしいOSSなアイコンフォントです。SVGも同梱されています。数は422ほどとなかなかの数ですね。丸みのある柔らかいスタイルで様々なコンテンツにマッチしてくれそうです。雰囲気はF...
軽量でモダンなモジュール式のドラッグ&ドロップライブラリ・「Draggable」
Draggable Draggableは軽量でモダンなモジュール式のD&Dスクリプトです。ベーシックな要素間のD&Dや、移動後のソート、要素同士のコンフリクトが起きた場合のイベントや移動時のエフェクトなどが主な特徴として挙げられていま...
書いたソースコードを画像化してTwitterに投稿できる・「carbon」
carbon carbonはソースコードを画像にしてTwitterに投稿したりダウンロードできるツールです。ソースはシンタックスハイライトされます。言語やスタイルも選択可能。また、本ツールはGithubでもソースコードが公開されていま...
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」
zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...
オープンソースの様々なライセンスのざっくりした特徴が一目で分かる早見表・「Choose a License | Appendix」
Choose a License | Appendix Choose a License | Appendixはchoosealicense.comが提供する、さまざまなオープンソースライセンスの特徴の早見表です。ApacheやMIT...
MediumのようなエディターをWordPressに導入できるプラグイン・「WP Medium Editor」
WP Medium Editor WP Medium EditorはWordPressの投稿ページをMediumのエディターライクに変更するプラグインです。通常の投稿もカスタム投稿もWYSIWYGそのものが変更されますのでMedium...
シンプルで使いやすい、モバイルフレンドリーなFlexboxベースのCSSフレームワーク・「Framy」
Framy Framyはシンプルで使いやすくカスタマイズ性も高いモバイルフレンドリーなFlexboxベースのCSSフレームワークです。コンポーネントはコンフリクトフリー（衝突しない）な設計を心がけたそう。LESSがサポートされています...
一定の幅にテキストをフィットさせてくれるスクリプト・「Fitty」
Fitty Fittyは一定の幅にテキストをフィットさせてくれるスクリプトです。先行スクリプトとしてFitText.jsがありますが、Fittyは軽量で非依存型というメリットがあります。それぞれ特徴は多少異なるので用途次第で使い分ける...
グラフや図など、データ可視化の表現パターンをギャラリー化して紹介する・「Data Viz Project」
Data Viz Project Data Viz Projectはデータビジュアライズの表現パターンを紹介するプロジェクトサイトです。数値的なデータなどをわかりやすく表現するデータ可視化の表現方法をいろいろと紹介しています。その数、...
flexboxベースのミニマルなCSSモバイルファーストグリッド・「Plasma Grid」
Plasma Grid Plasma GridはflexboxベースのミニマルなCSSグリッドです。モバイルファーストでレスポンシブ。デフォルトは12カラムですが、カスタマイズ可能との事。Bootstrapの互換モードは準備中だそうで...
Vue.jsのコンポーネントフレームワーク・「Vuetify」
Vuetify VuetifyはVue.jsのコンポーネントフレームワークです。リユーサブル且つクリーンな設計で使いやすさを重視した印象です。スタイルはマテリアルデザインパターンを導入。沢山のコンポーネントが用意されているので不便はし...
文章内にグラフを表示するスパークラインを実装出来るOSSなフォント・「Spark」
Spark Sparkは上図のように文章内にグラフを表示させるスパークライン用のフォントです。フォントなのでJSを必要としない、という点がウリみたいです。フォントで実装はちょっと賢いなって思いました。ちょっとしたデータなら場所もとらな...
Webデザインギャラリーに掲載したWebサイトと連動したカラーパレットサービス・「Colors」
Colors ColorsはWebデザインギャラリーに掲載したWebサイトと連動したカラーパレットツールです。本サービス開発者が並行して運営しているギャラリーのPixelsで掲載したWebサイトに連動させて作られたカラーパレット、とい...
ユニークな動きも用意されたCSSアニメーションライブラリ・「Dynamic.css」
Dynamic.css Dynamic.cssはユニークな動きも用意されたCSSアニメーションライブラリです。動きも、というかほとんどがちょっとネタっぽいというか使いどころが限定されそうな印象。こういう選択肢もあるといいかも、というこ...
FeatherやFont Awesomeなどのアイコンを色やサイズをパスに指定するだけで表示できる・「icongram」
icongram icongramはサイズや色をURLに指定するだけで表示出来るサービスです。一時期はやったダミー画像サービスの表示方法やUnsplash itのようにパスにオプションを指定して表示させる事ができる、というもの。パ...