Gistで書いたコードをスライド表示にする・「GistDeck」
GistDeck GistDeckはGistのコードをスライドとして表示してくれるツール。方法も簡単で、gistのサブドメインを変えるだけ。任意のgistのページのURLのgist.github.com/～の箇所をgistdeck.g...
Resource - Archives
SVGアイコンをアニメーションエフェクト付きで切り替える為のスクリプト・「SVG Morpheus」
SVG Morpheus SVG MorpheusはSVGアイコンから別のSVGアイコンへモーフィングさせる為のスクリプトです。非依存型で単体で動作してくれます。導入も楽そう。オプションやらサポートされたイージングの種類は本サイトにて...
Markdown記法でリアルタイムプレビューを可能にする・「Livedown」
Livedown Livedownは各エディタでMarkdown記法を使う際にリアルタイムプレブビュー機能を付加するプラグイン。VimやSublime text、Emacsなどのプラグインが用意されています。Markdownを書く機会...
AngularJSとPHPで作られたシングルページ専用のCMS・「Cosmo」
Cosmo CosmoはAngularJSとPHPで書かれたオープンソースのCMSです。シングルページ専用との事。モバイルファーストでソーシャルメディアフレンドリーな設計になっているそうです。フロントエンド側で編集可能にする事でデバイ...
正規表現のコードを図に可視化する・「Regulex」
Regulex Regulexは書いた正規表現のコードを図に可視化してくれるツールです。書いたコードがどのように動作しているかが把握しやすいので正規表現の勉強に良いかも。MITライセンスの元でオープンソースとしてGithubでも公開さ...
行単位でCSSを適応させるスクリプト・「LINING.JS」
LINING.JS LINING.JSは行単位でCSSを適応させる為のスクリプトです。非依存型で単体で動作してくれます。カスタムデータ属性を使って1行毎に任意のスタイルを作れる、みたいなやつ。上記のスクショは表示時に、1行毎にスライド...
Dropboxに置いているCSVやGoogleスプレッドシートのデータをグラフ化するOSS・「CHARTED」
CHARTED CHARTEDはDropboxに置いたCSVやGoogleスプレッドシートのデータを元にグラフに可視化するツールです。OSSとしてGithubでもソースコードが公開されています。Mediumのスタッフ作らしいです。...
任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...
マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」
Materialize Materializeはマテリアルデザインを取り入れたRWD対応のCSSをフレームワークです。Sass対応で、各種コンポーネントも揃っていました。ベーシックで良いんじゃないでしょうか。ライセンスはMITとの事。...
モバイルやモダンブラウザ向けに、jQueryやzepto.jsの代替として作られた軽量ライブラリ・「laroux.js」
laroux.js laroux.jsはモバイルやモダンブラウザ向けに作られたjQuery、zepto.jsの代替ライブラリです。コアは非圧縮でも2.8kbと軽量で、Ajaxやアニメーション、データの取得等、やりたい事があればその都度...
Webサイトのスタイルガイド作成の為のリソースをまとめている・「Website Style Guide Resources」
Website Style Guide Resources Website Style Guide ResourcesはWeb[サイトのスタイルガイドを作成する為のリソースをまとめているWebサイトです。チームで管理する際に作業を円滑...
様々なAPIを探せる検索エンジン・「APIS.io」
APIS.io APIS.ioは様々なAPIを探せる検索エンジンです。例えばphotoといれるとTumblrや500px、Flickrと言った人気のWebサービスのAPIが表示されます。少し分かりにくいですが、検索結果右下にmore ...
指定箇所のサイズを計測できるPhotoshopのスクリプト・「Size Marks」
Size Marks Size MarksはPhotoshop内で指定した箇所のサイズを計測するスクリプトです。サイズは新しいレイヤーに書きだされるみたいですね。縦はH、横はWが頭文字に付く形でレイヤー名が付けられるのも分かりやすくて...
Webサイトのパフォーマンスチェックが出来るスクリプト・「PerfBar」
PerfBar PerfBarはWebサイトの簡単なパフォーマンスチェックが出来る非依存型のスクリプトです。任意のWebサイトに埋め込むことでロード時間や待ち時間等をチェック出来る様になります。フロントエンド側でチェックできるので自分...
Google DriveやSkydriveのようなオープンソースのドキュメントエディタ・「WebSyn.ca」
WebSyn.ca WebSyn.caはGoogle DriveやMSのSkydriveのようなドキュメントエディタを構築する為のソフトウェアです。OSSとしてソースコードが公開されています。プレゼンやスプレッドシートも作れるみたい。...
閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」
CSS Dig CSS Digは閲覧しているWebページに使われているCSSを解析してくれるChromeエクステンションです。どのプロパティがどのように扱われているかを分析し、左カラムにリストにして返してくれます。クリックすれば右カラ...
シンプルで軽量なモバイルファーストのCSSフレームワーク・「Furtive」
Furtive Furtiveはシンプルで軽量なモバイルファーストのCSSフレームワークです。2.5KBという軽さながら、必要最低限のスタイルを保っています。これは個人的に好きかも。ライセンスはMITとの事。 Furtive
雨の音と一緒にジャズ等の音楽をランダムで流す・「Rain, Rhythm and Soul」
Rain, Rhythm and Soul Rain, Rhythm and Soulは雨の音と一緒にジャズやR&B音楽をランダムで流してくれるWebサービスです。リラックスしながら作業したいときに良さそうですね。似たようなサイトは結...
CSS3+HTML5のアニメーションを作成出来るOSSのエディタ・「Mixeek」
Mixeek MixeekはCSS3やHTML5を利用したアニメーションコンテンツを作成する為のエディタです。ブラウザで動くツールになります。MITライセンスの元、オープンソースとして公開されています。便利っちゃ便利ですが個人的にはも...
デバイス間のフォーム要素のスタイルに差異が出ないようにする為のライブラリ・「Formplate」
Formplate Formplateは異なるデバイスでもフォームの見栄えに差異が生じないようにする為のライブラリです。jqueryとmodernizrに依存しているみたい。スタイルを均一にしたい要素を指定されたclassで包括する必...
3Dモデルを公開・シェア出来る・「Sketchfab」
Sketchfab Sketchfabは3Dモデルのデータを公開・共有出来るビューアサイトです。3Dモデル専門のPixivのような感じでしょうか。お気に入りやEmbed等が出来るようになっています。スマフォにも対応しているそうです。無...
描画アニメーションエフェクト付のSVGを作成する為のライブラリ・「vivus」
vivus vivusはSVGアイコン等に描画アニメーションエフェクトを付加出来るライブラリです。strokeDashoffsetプロパティを利用してストロークを管理しているようですね。ライセンスはMITです。詳細は以下より。 ...