ブラウザで使えるオープンソースのコードエディター・「ICEcoder」
ICEcoder ICEcoderはブラウザで使えるIDEです。PHP製となっており、サーバーに設置してブラウザ上でコードを書くことが出来ます。なかなか高機能のようですね。MITライセンスとしてGithubでもソースが公開されています...
Resource - フロントエンドエンジニア向け
BootstrapなどのフレームワークもサポートのWin/Mac対応オーサリングソフトウェア・「Pingendo」
Pingendo 各種フレームワークがビルトインされたオーサリングツール・Pingendoです。日本語も問題なし。Windows版とMac版が用意されています。使ってみた感じ、割と使いやすい印象でした。今だけかもしれませんが無料で利用...
様々なスマフォやタブレット、PCなどのスクリーンのサイズを一覧化・「Screensiz.es」
Screensiz.es Screensiz.esはスマフォやタブレット、PCなどのスクリーンサイズを一覧化したWebサイトです。一覧テーブルではOSや普及率、サイズなどでソートも可能で、不要な項目は非表示にする事も出来ます。 ...
LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」
Prepros PreprosはLessやSass、Coffeescript等のファイルを監視し、変更があった際に自動でコンパイルしてくれるWindows用のソフトウェアです。CodeKitほど高性能では無いにしても、割と似たようなも...
レスポンシブWebデザイン対応のWebサイトを構築する為の軽量フロントエンドフレームワーク・「skel.js」
skel.js skel.jsはレスポンシブなWebサイトを構築する為のフロントエンドフレームワークです。19kbと、なかなか軽量で内容も充実した印象でした。使い慣れれば便利そうです。ライセンスはMITとGPL。 skel.js
AngularJS用のチートシート・「AngularJS Cheat Sheet」
AngularJS Cheat Sheet AngularJS Cheat Sheetは名前の通り、Google製のJavaScript MVCフレームワ－ク、AngularJS用のチートシートです。PDFとしてもDL出来るみたい。B...
レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」
.FITGRD .FITGRDはレスポンシブWebデザインにも対応したグリッドレイアウトを構築する為のCSSです。フレームワークではない、との事です。（当記事では一応フレームワークのカテゴリに含めています）CSS自体は非圧縮でも4KB...
Andoroidアプリ用プロトタイプを作成する為のHTML/CSSフレームワーク・「Fries」
Fries Frieshは、HTML/CSS/JavaScriptベースで作る、Androidアプリ用プロトタイプ作成フレームワーク。RATCHETに刺激されてAndorid向けも作成したくなった、との事らしいです。ライセンスはMIT...
タッチイベントをPCサイトで動作テストできるようにするブックマークレット・「Phantom Limb」
Phantom Limb Phantom Limbはデスクトップブラウザでタッチデバイス向けのイベントを動作テストできるブックマークレットです。任意のページでブックマークレットを起動するとクリックでタッチイベントが発火するようになりま...
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」
Topcoat TopcoatはAdobe社が提供するOSSのCSSフレームワークです。シンプルで使いやすいUIでレスポンシブWebデザインにも対応しています。モバイル版はタップしやすいようにエレメントの高さをやや高くしてくれてるのも...
WordPressのプラグインで上位ダウンロード数TOP108を元素記号のように一覧化したWebサイト・「The Periodic Table of WordPress Plugins」
The Periodic Table of WordPress Plugins The Periodic Table of WordPress Pluginsは最もダウンロードされているWordPressプラグインを108個、一覧化し...
SassのコードをCSSに即時変換・「SassMeister」
SassMeister SassMeisterはSass記法で書いたコードを即時CSSに変換するツールです。左に書き込めばCSSが右側に表示されます。OSSとしてGithubでも公開されています。Rubyで書かれているようですね。 ...
JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」
Editr Editrは、ブラウザでJavaScriptやHTML、CSSを動作確認出来るオープンソースのソフトウェアです。jsfiddleライクな環境を作成出来ますが、ユーザー登録、保存、Gist等に送るなどの機能の無い、シンプルな...
プログラミングに適したフォントをまとめている・「What are the best programming fonts?」
What are the best programming fonts? What are the best programming fonts?は、エディタでコードを書く際に適したフォントをまとめたWebページです。プログラミング向...
ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」
Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...
jQueryのプラグインを大量に収集している・「Unheap」
Unheap UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」
LayoutIt! LayoutIt!hは、D&DでBootstrapのレイアウトを作成出来るWebツールです。まだベータ版で若干バグ的なものも確認出来ますが、それなりに作成出来るようです。フォームやボタン、プログレスバーなどのコンポ...
CSSのショートハンドを解除してから整形する・「FESS」
FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...
正規表現をブラウザ上で実行テスト・「refiddle」
refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle
CSSフレームワークの機能が一目で分かる一覧表・「CSS Front-end Frameworks with comparison」
CSS Front-end Frameworks with comparison CSS Front-end Frameworks with comparisonは様々なCSSフレームワークの持ち合わせている機能を一目で確認出来る一覧...
Web制作に役立つツールをまとめている・「WebPlatformTools.org」
WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 Web...
CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」
CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow