サンプルコード付きのUIをgifアニメーションにしてギャラリー形式で収集している・「CodeMyUI.com」 CodeMyUI.com CodeMyUI.comはサンプルコードも紹介しているUIチュートリアル記事等をGifアニメを使ってギャッリー形式でまとめているTumblrサイトです。参照元へのリンク、またはCodePenに投稿されたよさ気...2015.07.14 | 10時45分30秒
リダイレクトやセキュリティ、パフォーマンスの向上など、.htaccessで使えるスニペットをまとめている「.htaccess Snippets」 .htaccess Snippets .htaccess Snippetsは.htaccessで使える小技をまとめたスニペット集です。リダイレクトやリライト、セキュリティ向上やパフォーマンスの向上など、よく使うものをサクッとまとめてく...2015.03.08 | 11時37分04秒
Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」 Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...2014.12.30 | 10時42分41秒
jsfiddleライクにブラウザ上でJavaScriptの動作テストができるオープンソースのソフトウェア・「Codemagic」 Codemagic Codemagicはブラウザ上でJavaScriptの開発・動作テストを行えるツールです。jsfiddleと同じようなものですが、こちらはOSSとしてGithubにてソースが公開されています。ライセンスはMITとの...2014.04.20 | 10時37分57秒
OSSとして公開されている、正規表現の動作テストをブラウザ上で行えるツール・「RegExr」 RegExr RegExrはブラウザ上で正規表現のテストができるツールです。GithubにてOSSとしてもソースが公開されています。refiddleとほぼ同じ性能になりますが、RegExrの方が個人的には若干使いやすい印象でした。ライ...2014.04.07 | 10時20分49秒
jsFiddleのようにブラウザでJavaScriptを書いて動作を確認出来るOSS・「tmpltr」 tmpltr tmpltrはOSSで公開されているjsFiddleライクな開発ツールです。ブラウザ上でJavaScriptを開発、実行テストができます。完全なクローンではありませんが、JavaScriptとHTMLで作られている為、軽...2014.03.04 | 10時35分22秒
GitHub製のテキストエディタ・「Atom」 Atom AtomはGithub製のテキストエディタです。CSS、JavaScript、HTML向けのもののようですね。スクリーンショットや詳細を読む限りではなかなか良さそうです。TextMateのテーマ等をインポートする事もできるみ...2014.02.27 | 10時21分53秒
コードスニペットの共有サイトを構築する為のオープンソースソフトウェア・「canSnippet」 canSnippet canSnippetはコードスニペットを共有できるWebサイトを構築する為のOSSです。動作環境はPHP+SQLite+JavaScriptとの事。保存できるスニペットの対応言語はhtml、css、javascr...2014.01.23 | 10時31分17秒
.NETのコードスニペットをオンラインで動作テストできる・「.NET Fiddle」 .NET Fiddle .NET Fiddleはオンラインで.NETのコードスニペットをテストできるツールです。JSFiddleをリスペクトして作ったそうです。言語はC#とVB.netに対応しています。手軽にテストできるのは嬉しいです...2013.12.19 | 11時04分07秒
アニメーションエフェクトの掛かったフォントと実装コードを公開しているWebギャラリー・「Anitype」 Anitype Anitypeはアニメーションするフォントを実装する為のコードを募集、公開している参加型のWebギャラリーです。文字ごとに複数投稿されており、様々なタイポグラフィーを参考にする事が出来ます。フォントごとのタイポグラフィ...2013.12.15 | 10時45分29秒
Flashを使わずに実装しているプリローダーアニメーションのギャラリー・「Preloaded」 Preloaded PreloadedはFlashを使わずに実装しているプリローダーのアニメーションを収集しているTumblrです。他サイトの例や、Codepenで書かれたモノなどがありますので一部のプリローダーはコードも参考に出来ま...2013.11.25 | 10時30分14秒
ChromeやFiredoxなどのデベロッパーツールのコンソールで使えるスニペットをまとめた・「DevTools Snippets」 DevTools Snippets DevTools Snippetsは、ChromeやFirefoxなどのデベロッパーツールのコンソールで使えるスニペットをまとめているプロジェクトサイト。画像をData URI schemeに変換し...2013.11.06 | 10時25分20秒
Gistに書いたコードの管理が可能なソフトウェア・「Gisto」 Gisto GistoはGistのコードスニペットを管理するためのソフトウェアです。Gistoでコードを変更するだけで自動的にGist上のコードも更新されます。OSもWin、Mac、Linuxに対応しています。手軽に使えるのでスニペッ...2013.10.09 | 10時38分52秒
CSS3を手軽に試せるジェネレーター・「CREATE CSS3」 CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE CSS32013.09.08 | 10時48分56秒
コードスニペットを管理する為のシンプルなCMS・「codejab」 codejab codejabはコードスニペットを管理する為のシンプルなCMS。オープンソースとして公開されています。たまに見かけるスニペットの共有サイトを作れる、みたいなイメージでしょうか。Embed機能も付いてるのはちょっと素敵か...2013.08.24 | 10時30分38秒
CSSで装飾されたチェックボックスのコードをダウンロード出来る・「CSS Checkbox」 CSS Checkbox CSS CheckboxはCSSで装飾されたチェックボックスのソースコードをダウンロードできるサービスです。Checkbox CSS Styleで装飾の種類を選択してソースをコピペするだけ。ラベルの背景の画像...2013.07.11 | 11時33分54秒
SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」 Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...2013.06.22 | 9時19分15秒
CSSのみで書かれたアイコンのセット・「CIKONSS」 CIKONSS CIKONSSはCSSのみで書かれたアイコンのソースを配布するWebサイトです。IE8までなら同じ表示が可能のようです。アイコンの種類もそれなりにあるみたい。実用性は置いておいて、どこかでコードが役に立つかもしれないと...2013.06.14 | 12時38分08秒
Gistに書いたコードを管理するアプリ・「GistBox」 GistBox GistBoxはGistに書いたコードを管理、編集しやすくする為のアプリケーションです。インストールして認証を終えれば起動します。見やすいレイアウトでラベルによるソートも可能です。結構便利。 GistBox2013.06.07 | 11時20分32秒
JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」 Editr Editrは、ブラウザでJavaScriptやHTML、CSSを動作確認出来るオープンソースのソフトウェアです。jsfiddleライクな環境を作成出来ますが、ユーザー登録、保存、Gist等に送るなどの機能の無い、シンプルな...2013.04.30 | 10時33分32秒
正規表現をブラウザ上で実行テスト・「refiddle」 refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle2013.04.17 | 12時35分04秒
CSSを書いてリアルタイムでプレビューできる・「CSSDesk」 CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk2013.04.12 | 12時37分00秒