Resource - フロントエンドエンジニア向け

モバイルファーストなCSSフレームワーク・「Blok Grid System」

Blok Grid System Blok Grid SystemはモバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。スマフォ、タブレットを中心に考えたCSSで構築されています。IE8にも対応。 Bl...

JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」

Plunker Plunkerはjsfiddleやjsbinのようにブラウザ上でJavaScriptコードを開発、実行し、共有もできるWebツールです。アーカイブもあるので探しやすい印象です。書いたコードは即時反映されます。また、Gi...

シンプルなコードスニペット共有サービス・「Code Pad」

Code Pad Code Padはシンプルなスニペット共有サービスです。招待制となっていますので投稿テスト等のノイズもありません。クリック一発でコピーしたりDL可能となっています。 Code Pad

レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」

gridpak gridpakは、レスポンシブWebデザインに対応したグリッドレイアウトジェネレーターです。従来のグリッドジェネレーターにブレークポイントを設定出来る項目が付いているので操作も楽に行えます。 gridpak

面倒な作業のみをカバーしたシンプルなCSSフレームワーク・「inuit.css」

inuit.css inuit.cssは、面倒な作業のみをカバーしたシンプルなSassベースのCSSフレームワークです。コアと別用途向けのCSSを分けてあるため、例えばグリッドレイアウトにする場合は別途用意されたCSSを使うようにしま...

Illustratorのデータをcanvasに変換する・「Ai to Canvas」

Ai to Canvas Ai to Canvasは、AIファイルをHTML5のcanvasに変換するプラグイン。アニメーションにも対応しているようです。現状は完全な物ではなさそうですが、今後も期待できそうな出来ですね。 Ai ...

CSSの更新状態を監視し、表示を即時反映させる・「CSSrefresh」

CSSrefresh CSSrefreshはサーバー側のCSSに更新があったら表示を即時反映させるスクリプトとブックマークレットです。開発者向けになります。環境次第では楽になる方もいるかもしれませんね。 CSSrefresh

HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」

Dirty Markup Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Marku...

様々なコードスニペットを保存、編集できる・「SnipSave」

SnipSave SnipSaveは、スニペットコードを保存できるシンプルなコード共有サービスです。ユーザー登録も無料。高機能では有りませんが、使いやすく、広告も無いので見やすいです。 SnipSave

Webサイトの表示速度を計測できる・「Pingdom」

Pingdom Pingdomは、公開されているWebサイトの表示速度を計測し、速度を遅くしている要因を教えてくれるツール。URLを入力するだけで計測してくれます。 Pingdom

Web上でSQLをテストできる・「SQL Fiddle」

SQL Fiddle SQL FiddleはWeb上でSQLを実行テストできるツールです。MySQLやPostgreSQL、SQLiteなどに対応しています。 SQL Fiddle

オンラインでCSSやJavaScriptを圧縮・「Online YUI Compressor」

Online YUI Compressor Online YUI CompressorはYUIのオンライン版でCSSやJavaScriptを圧縮するツールです。公開しているファイルにも対応できます。 Online YUI Com...

難読化、圧縮されたJavaScriptコードを綺麗に整形・「Online javascript beautifier」

Online javascript beautifier Online javascript beautifierは難読化、圧縮化されたjsコードをインデントして綺麗にしてくれるツールです。OSSとしても公開されています。 On...

HTML5のテンプレートを作るスタータージェネレーター・「Initializr」

Initializr InitializrはHTML5で作るWebサイトを構築するためのスターターキットをジェネレートするツールです。様々なオプションもあるので好みの雛形を作成する事が可能です。 Initializr

WordPressでfunctions.phpによく含めるコードのスニペット集・「WP FUNCTION ME」

WP FUNCTION ME WP FUNCTION MEはWordPressのfunctions.phpによく書くコードをまとめたスニペット集です。必要な物だけをチェックしてコード化する事が出来ます。 WP FUNCTION ...

HTML5スニペットの共有サイト・「HTML5 Snippets」

HTML5 Snippets HTML5 SnippetsはHTML5で使えるスニペットをまとめたWebサイト。個別ページではサンプルコードと動作デモを確認する事が出来ます。 HTML5 Snippets

diff機能の付いたコード共有サービス・「Diffboard」

Diffboard Diffboardは、コードの差分をチェックする機能の付いたコードスニペット共有サービス。コードを貼ることで以前のコードとの差分をチェックする事が出来ます。 Diffboard

専用アプリも充実しているコードスニペット共有サービス・「pastebin」

pastebin pastebinはシンプルなソースコード共有サイト。コードの種類も豊富に対応されており、保存期間も指定可能です。公開/非公開の選択も可能。 pastebin

iOS向けの様々なフレームワークをまとめた・「iOS Frameworks」

iOS Frameworks iOS FrameworksはiOS向けのアプリやWebサイトなどを制作するためのフレームワークをまとめたWebサイト。ゲームエンジンやUIフレームワークなどコレクションされたフレームワークの種類は様々で...

JavaScriptの構文チェック、圧縮、最適化するコンパイラ・「Closure Compiler」

Closure Compiler Closure Compilerはブラウザで動くGoogle製のJavaScriptコンパイラ。圧縮化、難読化が可能です。また、難読化された構文を元に戻すことも出来ます。 Closure Compi...

CSSからLESSへ変換・「Css2Less」

Css2Less Css2LessはCSSをLESS形式に変換してくれるツール。OSSとしても公開されています。Rubyを使って動かしてるみたい。 Css2Less
Ads