Resource - Archives

ページのスクロール時にviewport内に入った要素をアニメーション表示させる非依存型で軽量なスクリプト・「ScrollReveal」

ScrollReveal ScrollRevealはページのスクロール時に、viewport内に入った要素をアニメーションエフェクト付きで表示するためのスクリプトです。他ライブラリへの依存は無く、単体で動作してくれます。圧縮版で2.7...

Hacker NewsやDesigner News、GitHub等を横断検索出来る・「THE SEARCH」

THE SEARCH THE SEARCHはHacker NewsやDesigner News、GitHub、Product Huntから横断検索してツールやリソース等を探せるツールです。話題になる情報発信のニュースサイトをまとめて検...

JavaScriptで作られたSVG背景パターン作成ツール・「Dynamic SVG Background Pattern Maker」

Dynamic SVG Background Pattern Maker See the Pen Dynamic SVG Background Pattern Maker by Dudley Storey (@dudleystorey) ...
Ads

スタートアップの際に役立ちそうなツールやリソースのリストをまとめている・「Startup Hand」

Startup Hand Startup Handはスタートアップの際に役立ちそうなツールやリソースをまとめているWebサイトです。以前ご紹介したStartup Resourcesとほぼ同等のものですね。スタートアップ時はするべき事が...

Webページ内の任意のテキストをハイライト、タグ付け、共有出来るようにするスクリプト・「Annotator」

Annotator AnnotatorはWebページ内の任意のテキストをハイライト、タグ付け、メモと共有可能にするスクリプトです。動作にはjQueryを、オプションとして自動補完にawesomplete.jsを必要としています。テキス...

非依存型のシンプルな通知ライブラリ・「notie.js」

notie.js notie.jsは他ライブラリに依存しないシンプルでクリーンな通知ライブラリです。WarningやError、Confirm等の通知を、他ライブラリに依存する事無く実装出来ます。セッティングも簡単でなかなか使いやすそ...

モバイルフレンドリーなWebサイト制作の為のFoundationベースのWordPressフレームワーク・「JointsWP」

JointsWP JointsWPはFoundationベースのWordPressテーマフレームワークです。Foundationは現時点で最新のVer.6をベースとしています。モバイルフレンドリーでフレキシブルなWebプロジェクトに貢...

モバイル対応なWebプロジェクトの為のフロントエンドフレームワーク・「SCHEMA」

SCHEMA SCHEMAはモバイル対応なWebプロジェクトの為のフロントエンドフレームワークです。Bootstrap、Less、Angular.js等が使われているようです。Web標準を放棄することの無いセマンティクス且つ迅速な設計...

任意の画像からよさ気な部分を自動で切り取るスクリプト・「smartcrop.js」

smartcrop.js smartcrop.jsは任意の画像からよさ気な部分を自動で切り取るスクリプト。訳わからんですね。まともな説明が思いつきませんでしたすみません。指定されたサイズの範疇で、画像からさも良さそうに見える構図で自動...

動画を元に、AIによる自動作曲とその音源のダウンロードが出来る・「Jukedeck 」

Jukedeck Jukedeckは任意の動画からAIによる自動作曲をしてくれるWebサービスです。作曲された音源はダウンロードする事も可能です(無料プランは5曲まで)。例えば製作中のゲームを動画に撮って、自動作曲してもらう、とかも...

任意のライブラリを読み込んでデベロッパーツールのコンソールからテストできる・「JS Envy」

JS Envy JS Envyは任意のライブラリをロードしてDevToolのコンソールからAPIテストを行えるツールです。上図はjqueryを読み込んだ瞬間のSSです。右側にライブラリが挿入されているのが確認出来るかと思います(わかり...

ブラウザでSwiftのコードを実行、動作テスト出来る・「IBM Swift Sandbox」

IBM Swift Sandbox IBM Swift SandboxはWeb上でSwiftのコードを実行出来るツールです。jsfiddleみたいな使い方でいいので簡単ですね。名前にもあるようにIBMのSwift関連のプロジェクトの内...

年表などのタイムラインUIを構築する為のライブラリ・「Labella.js」

Labella.js Labella.jsはタイムライン作成ライブラリです。上図のようなライン上にポイントとラベルを実装する事が出来る、というもの。ラベルは重なること無く他のラベルを避けてレイアウトしてくれます。なかなか良いのでは。ラ...

オープンソースのHTML5製パーティクルエンジン・「Proton」

Proton ProtonはOSSで公開されているHTML5製のパーティクルエンジンです。手軽に様々なタイプのパーティクルを実装、動作シミュレートが可能、とのこと。レンダラはCanvas、DOM、WebGL、Easeljs、pixel...

任意のWebサイトのCSSから簡易的なスタイルガイドを作成するChromeエクステンション・「SNATCHR」

SNATCHR SNATCHRは任意のWebサイトのCSSをパースして簡易的なスタイルガイドを作成するChrome拡張です。背景カラー、テキストカラー、見出しに使われているフォントファミリーやサイズスタイルを割り出してスタイルガイドの...

アカウント登録不要のシンプルなファイル共有サービス・「dewdrop.io」

dewdrop.io dewdrop.ioはユーザー登録不要のファイル共有サービスです。ドラッグ&ドロップでアップロードが可能で時間も高速です。アップすれば共有の為のURLが発行されるので、それを相手に教えればいいだけ、というもの。た...

cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」

FLEXBOX FROGGY FLEXBOX FROGGYはflexboxをゲームで遊びながら学べるツールです。カエルをflexboxプロパティを使用して葉の上に持っていければOKというシンプルなもの。24レベルまで用意されています。...

SVGで世界地図を作成する為のスクリプト・「World Map Generator」

World Map Generator World Map GeneratorはSVGで世界地図を作成する際にサポートしてくれるスクリプトです。jQueryに依存しています。各国へのリンクや、その地域のタイムゾーンを取得する事が出来る...

商用でも利用可能な紙のテクスチャを多数配布する国産サイト・「Paper-co」

Paper-co class="resource_links" Paper-coは紙のテクスチャを配布する国産のWebサイトです。商用でも無料利用可能で数も相当揃っている印象でした。pngとjpgが用意されています。詳しいライセンスは...

Flexboxを使ったCSSグリッドシステム・「Gridlex」

Gridlex GridlexはFlexboxを使ったシンプルなCSSグリッドシステムです。親要素と子要素に特定のclassを追加して利用するみたいです。非常に簡単なものですが、シンプル故にカスタマイズしやすいかも。カラム数は.gri...

超シンプルな棒チャート作成ツール・「Chartico」

Chartico Charticoはシンプルな棒チャート作成ツールです。非常にシンプルなもので、タイトル、サブタイトル、棒グラフの数値やグラフの数を増やす、ラベルテキストの設定しか出来ません。作成されるグラフも画像のみで、URLが発行...

embedにも対応しているストックフォトサイト・「Visual Hunt」

Visual Hunt Visual Huntはembed可能なストックフォトサイトです。配布されている写真素材の多くはCC0で商用でも自由に利用する事が出来るだけでなく、本サイトでホスティングされている素材を直接利用する事も出来ます...
Ads