概要
制作時にブクマしとけばいいのについ毎回検索しちゃうものや
ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ？」みたいなやつを防ぐ為に
自分及び社内用に作ったリンク集です。
ルール
会員登録やインストール無しで使える無料のwebツール等
※例外としてGoogleはログイン可能とします。
オンラインエディタ
コード共有
CodePen
HTML・CSS・JSをブラウザ上でサクッと試すのに便利。
右上の「New Pen」で無料で使える。
scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能
CodeSandbox
VanillaJS、React、Vue、Angularなどの環境がサクッと試せる。
Add Dependencyでnpmのパッケージを入れたり、Shareの方法も様々でテンプレートとしてのダウンロードもでき、Githubと連携したらレポジトリを作成したりpushしたりできちゃう。
Diff
ウェブでdiff
オンラインで差分チェックができる
ブラウザツール
ブラウザバージョンによる対応状況のチェック
caniuse.com
cssとかのプロパティでどのブラウザに対応してるかチェックできるやつ
iwanttouse.com
↑それによって実際に影響があるユーザ数の割合が見れる
テストツール
ブラウザテスト
Browserling
クロスブラウザのオンラインチェック
レスポンシブチェック
Screenfly / レスポンシブチェック
レスポンシブのオンランチェック
閲覧環境チェック
Support Details
アクセスしたPCやブラウザのバージョンとかスクリーンサイズやその時のブラウザのサイズを取得してくれる
例えばクライアントの環境情報が欲しい時にリンクを送ってそのままメールしてもらったり
HTMLツール
整形
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
HTMLを見やすく整形してくれて、不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能付き
ジェネレーター
HTML Imagemap Generator
クリッカブルマップ（イメージマップ）が視覚的に作成できる
その他
HTML特殊文字
特殊文字の文字コード
Graphemica - For people who ♥ letters, numbers, punctuation, &c
文字コードの詳細情報が検索できる。
特殊な文字をwebで表示したい時に文字ごとコピーしてここで検索する → HTML Entity (Decimal)に書いてあるコードを入れる。
カラーコード変換ツール
ヘックスとかRGBとか調べる時に便利
PALX Automatic UI Color Palette Generator
ベースカラーを入れたらいい感じにカラーパレットを生成してくれる
CSS
整形
css2sass
CSSからSCSSにコンバートしたりできる
styleneat
minifyされたCSSを整形してくれる
オンラインで作れるCSSパーツ
flexplorer
Flexbox Playground
話題のFlexboxをオンラインで試してコードをとってこれるやつ
Ultimate CSS Gradient Generator
グラデーションのジェネレーター。画像をアップロードしてコード取得も可能。
box-shadowとborder-radiusジェネレーター
box-shadowやborder-radiusを視覚的にテストしながらコード生成できる
React Nativeでのコードも生成
CSS STRIPE GENERATOR
コメ欄で教えていただきました。オンラインでストライプの背景のコードを生成してくれる。
視覚的に操作できてカスタマイズの自由度がかなり高い
SVG版もあるのが嬉しいSVG STRIPE GENERATOR
その他
Sass Color Generator
sassで明るさや彩度を調整して色を出す時に%などを確認する
Autoprefixer CSS online
ベンダープレフィックス生成
JavaScript
整形
Online JavaScript beautifier
minifyされたjsを見やすく整形
チェッカー
正規表現チェッカー
苦手な人が多いと言うあの正規表現をオンラインでチェックで動作チェックできる
regex101
コメ欄で教えていただきました。正規表現チェック。リファレンスも多くUIも見やすい
変換
Unixtime相互変換ツール
指定日時をunixtimeに相互変換してくれる。日時をあつかうjsを書く時のデバッグや確認に便利。
画像
圧縮
TinyPNG
画像圧縮。jpegも対応
Squoosh
Google製。画像圧縮、エンコード、リサイズ、減色がブラウザ上でできる。jpegやWebPも対応。
比率計算
写真の縦横比を固定して拡大縮小値を計算するツール
元画像の縦横比をオンラインで計算してくれる。PhotoShop立ち上げるの重いけど数値だけ欲しい場合に便利
web計。
縦横比とか黄金比とか横幅に対する画像数とか算出してくれる
リサイズ
Bulk Resize Photos
ドラッグでサイズや%指定で画像をリサイズしてくれる。pngで試したらjpgで返ってきたので対応はjpgのみっぽい
ジェネレーター、テスト
favicon.cc
半透過マルチアイコンfavicon.icoを作ろう!
画像をアップロードしたりしてfavicon作ってくれる
Web Clip シミュレータ
iPhoneとかのWeb Clipのシミュレータ
OGP画像シミュレータ
OGP画像のシミュレータ
Open Graphオブジェクトデバッガー
FacebookでOGP画像のキャッシュをクリア
Twitter Card validator
Twitter公式の簡易OGPのデバッグ・スクレイピング
Landscape by Sprout Social
画像をアップロードするとtwitterやFacebook、インスタ、youtubeなどのSNSに最適なリサイズをしてくれる
Placehold.jp
ダミー画像生成
Spritebox
スプライト画像を生成してくれる
変換
SVG to PNG Converter
SVG画像をサイズを指定してpngに変換してくれる
PNGをJPG、JPGをPNGに変換
その名の通り PNGとJPGのコンバーター。複数の画像をいっぺんに変換してくれる
Convert image files online
クライアントからheicファイル（iPhoneで撮った撮影ファイル）が送られてきた時に変換できて助かったやつ。
対応ファイルがとても多い
repper
任意の画像を好きなところを切り取ってシームレス画像に変換してくれる。
動画
変換
ファイルコンバーター — Convertio
ogvやwebmが必要な時にmp4から変換してくれる
HTML5 Video Converter
ogvやwebmが必要な時にmp4から変換してくれる （有料になった？）
フォント
Google Fonts
webfont
fontawesome
fontawesome
[ JavaScript ] フォントサイズ変換（pt↔px）
ptとpxの変換
開発支援
PWA
PWABuilder
PWAの開発支援サービス。urlを入力するとどのくらいPWA対応されてるかのチェックをしたり、manifest.jsonやService Workerのコード生成、実装スニペットやパッケージング用コードも生成してくれる
JSON
整形
JSON Pretty Linter Ver3
jsonを見やすく整形
構文チェック
JSON Formatter & Validator
jsonの構文チェックしてくれる。エラー箇所に赤くマークが付くので長いjsonでもエラー箇所が見つけやすい
ダミーデータ
{JSON} Placeholder
テストとプロトタイピングのためのフェイク・オンラインREST API。userデータや投稿のデータなどが使用できる。
RANDOM USER GENERATOR
顔写真付きのダミーのユーザーデータをランダムで返してくれる。サイト上でコナミコマンド打ったらLOGOになってかわいい。
SQL
整形
SQLフォーマッターFor WEB
SQLを見やすく整形。
NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULLみたいな長いデータを扱っていて項目がわからなくなった際、
整形してSequel ProやphpMyAdminを並べて項目を見比べて特定しやすい。
テーブル
Table Convert Online
コメ欄で教えていただきました。オンラインで視覚的なテーブルからcsv,Markdown,json,html,yaml,sql等様々な形式にコード変換ができ、テーブルの構造自体も編集可能。
コミュニケーションツール
appear.in → Whereby
会員登録もアプリインストールもいらないリンクを押すだけで参加できるビデオ会話ツール →Wherebyへ名称と仕様が変更して会員登録必須で制限付きになってました
遠隔でmtgとかする時にすごく便利。
BizMee - WebRTC 無料Web会議サービス
appear.inと同じようにWebRTCなweb会議ツールです。ホワイトボード等の機能あり。
パフォーマンスツール
表示速度チェックと改善ヒント
PageSpeed Insights
Page speed optimization
GTmetrix
Website speed test
サイトの表示速度をチェックして改善ヒントを教えてくれます。
PERFORMANCE BUDGET CALCULATOR
回線と何秒で表示させたいかを指定すると逆算してファイルサイズを計算してくれる
Test My Site 日本語版
モバイルサイトの読み込み速度計測及び業種別平均速度との比較と改善ヒント
調査ツール
built with
urlを入力するとそのサイトが何を使ってるか（Apacheサーバーだとかjsのモジュールは何かとか）教えてくれる
SEO関連
Google Webmasters Search Console
サーチコンソール
Keyword Tool
関連キーワード取得ツール（仮名・β版）
関連キーワードとるやつ
専門用語（キーワード）自動抽出サービス 「言選Web」
urlでサイト全体、または入力した文章からキーワードを抽出してくれる。Metaキーワード選定の参考に。
Googleトレンド
トレンド状況とか関連キーワードとか
Varvy SEO tool
GoogleのガイドラインからSEOに影響あるとかの内部診断ツール
Mobile SEO
↑上のスマホ版
SEOチェキ!
サイトSEOチェック
その他
プログラマーのためのネーミング辞書 | codic
cssのclass名とか変数名とか迷った時に生成してくれる
サイトマップを作成-自動生成ツール「sitemap.xml Editor」
サイトマップを自動生成
.htaccess ファイルを簡単作成「.htaccess Editor」
.htaccessを自動生成、htpasswd用のパスの生成などの機能もある
Make My Persona
ペルソナ作成ツール（英語）
参考にしたやつ
こちらに触発されてフロントエンドやコーダー、マークアップエンジニアや個人制作の方に便利なまとめを作りたくなったのです。
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？