ベクターオブジェクトをソースコードに変換するIllustratorの拡張・「Drawscript」
Drawscript Drawscriptは、Illustratorで書いたベクターオブジェクトを様々なコードにコンバートするエクステンションです。拡張を使うと、リアルタイムでActionScript3.0、やCanvas、Objec...
Resource - フロントエンドエンジニア向け
Sass用のカラー調整Webツール・「SassMe」
SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...
transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」
Visualize and manipulate CSS transition functions Visualize and manipulate CSS transition functionsはCSS3のtransition-t...
動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」
Stylie Stylieは動作デモを確認しながらCSS3のkeyframeを利用したアニメーション用コードを作成するOSSのツールです。右のボックスで軸等をセッティングしていきます。MITライセンスでGithubでも公開されています...
モバイルファーストな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